Remove use of useResponsiveValue hook - SegmentedControl

[hectahertz]

Closes https://github.com/github/primer/issues/6027

This implementation should fix all flickering caused by hydration mismatches.

Changelog

Unfortunately, there isn't a great way to reduce this repetition in standard CSS while maintaining the media query scoping. The pattern requires:

• Base data attributes (e.g., data-variant='none')
• Responsive data attributes within media queries (e.g., data-variant-narrow='none' inside @media (--viewportRange-narrow))

This structure can't easily be compressed because:

• No support of mixins or loops natively
• Media queries can't be nested inside selector lists
• Each viewport needs its own scoped media query wrapper

The current code is actually following the established pattern in the codebase (like in Hidden.module.css).

While repetitive, it's explicit and maintainable, and colocated.

New

Stories

segmentedcontrol-responsive-tests--complex-responsive

Screen.Recording.2025-11-07.at.15.34.56.mov

segmentedcontrol-responsive-tests--full-width-responsive

Screen.Recording.2025-11-07.at.15.35.24.mov

segmentedcontrol-responsive-tests--variant-dropdown-responsive

Screen.Recording.2025-11-07.at.15.35.46.mov

segmentedcontrol-responsive-tests--variant-hide-labels-responsive

Screen.Recording.2025-11-07.at.15.36.16.mov

Changed

• Updated SegmentedControl.module.css to support responsive fullWidth and variant props using data attributes, enabling different layouts (e.g., full width, dropdown, hide labels) at narrow, regular, and wide breakpoints.
• Reworked the rendering logic in SegmentedControl.tsx to conditionally render dropdown and segmented button variants based on responsive props, and removed the previous use of useResponsiveValue.

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 993431c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Patch
@primer/styled-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[Copilot]

Pull Request Overview

This PR refactors the SegmentedControl component to use CSS-based responsive behavior via getResponsiveAttributes instead of the runtime useResponsiveValue hook. This change moves responsive logic from JavaScript to CSS, enabling more efficient rendering.

Key Changes:

• Replaced useResponsiveValue hook with getResponsiveAttributes utility for fullWidth and variant props
• Removed JavaScript logic that transformed Buttons to IconButtons for hideLabels variant; now handled via CSS by hiding .Text elements
• Always renders both dropdown and segmented control variants when dropdown is used at any breakpoint, with CSS controlling visibility

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
SegmentedControl.tsx	Replaced useResponsiveValue with getResponsiveAttributes; removed hideLabels transformation logic; refactored rendering to always output both dropdown and segmented control when dropdown variant is present
SegmentedControl.module.css	Added comprehensive responsive styles for full-width and variant behaviors across all breakpoints; added CSS variable for icon width; added DropdownContainer styles
SegmentedControl.responsive.stories.tsx	Added new story file demonstrating responsive fullWidth, hideLabels, and dropdown variants across breakpoints
.changeset/segmentedcontrol-responsive.md	Added changeset documenting the change