You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
fix(SegmentedControl): prevent constrained labels from wrapping - #8532
Related to github/primer#7156. Replaces the wrapping approach in #8442, which was reverted by #8469.
Keep SegmentedControl labels on one line and truncate them when space is constrained. This prevents wrapped text from escaping the control's styling without changing the existing 28px small / 32px medium heights.
Truncated labels reveal their full text on hover and keyboard focus, using the existing button as the tooltip trigger. Labels that fit do not show a tooltip.
Truncation is a defensive fallback, not the preferred layout. Normally, give the control more space, shorten the labels or use another component.
Changelog
New
Compact Toolbar and Constrained Label Overflow examples with regression coverage.
Conditional hover and keyboard-focus disclosure for truncated labels.
Changed
Allow segments and labels to shrink, with ellipsis applied to the label rather than icons or counters.
Preserve full accessible names and stable segment dimensions when selection changes.
Remeasure truncation when selection changes the label's font weight.
Reveal newly truncated labels while the button remains keyboard-focused, without overriding Escape dismissal.
Preserve consumer focus and pointer handlers on the existing trigger.
Update the component guidance and patch changeset to describe the single-line behaviour.
Close an open Tooltip when its existing disable flag becomes true, so a label resizing to fit does not leave an empty popup.
Removed
No public APIs.
Rollout strategy
No changes needed in github/github-ui
Needs changes in github/github-ui
Ships with feature flag(s)
Not sure
None
Testing & Reviewing
Regression coverage checks the compact 28px height, label truncation, complete accessible names, constrained icon buttons, auto-sized controls and stable geometry across selection changes. Disclosure tests cover hover, keyboard focus, Escape, resizing, label updates, selection-dependent text width, consumer callbacks and disabled segments.
The component patch has passed repeated rendered-browser disclosure regressions, existing Tooltip visual regressions, unit tests, builds, type checks and lint/format checks. No existing visual baselines changed.
Primer CI, stress tests and Storybook visual/accessibility checks pass for rebased revision bea76d162.
Copilot review of b1c9555d1 reported no new code finding but requests human review of the shared Tooltip changes.
Refreshed GitHub UI integration still fails package tests. Its visual status passes, but the underlying reports contain failures whose cause remains unisolated; integration validation is not complete.
The fixed-height sizing, public API and existing responsive variants are unchanged. Design/Accessibility sign-off on the overflow behaviour remains outstanding.
👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.
"description": "The minimum height of the control: 28px for small, 32px for medium. Labels wrap naturally when constrained, and all segments grow to fit the tallest label without shifting height on selection.",
The reason will be displayed to describe this comment to others. Learn more.
Medium: The linked issue requires labels not to wrap and asks for Design and Accessibility approval before implementation, but this documents wrapping as the public contract while the PR says no approval is claimed. Can we record that decision or align the behavior before shipping?
I checked in with @mattobee who recommended truncation as a defensive fallback but only for edge cases. Normally we'd recommend that the control be given more space, the label shortened, or that a different component be used.
I've reworked the PR so labels stay on one line and truncate when they don't fit. lmk what you think
joshfarrant
changed the title
fix(SegmentedControl): stabilize content-driven height
fix(SegmentedControl): prevent constrained labels from wrapping
Oct 20, 2026
If an unselected label fits but its selected, semibold text does not, focusing the button and pressing Enter truncates the label without showing its tooltip. The focus handler ran while the tooltip was disabled, and re-enabling it does not call openTooltip(). Keyboard users must move focus away and back to reveal the full text. Handle the transition to truncated while the trigger remains keyboard-focused, without moving focus or undoing Escape dismissal. Add a regression that selects with Enter and expects disclosure without refocusing; the current selection-dependent test tabs away and back first.
Show full and constrained labels side by side while keeping short labels readable. Preserve the extreme fixture as separate stress coverage.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 05c0d550-3955-4bec-8361-5de4ad442f19
Retain the trigger’s native handler instead of invoking it again after the tooltip delay. Extend the rendered SegmentedControl callback regression to check the event count.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 05c0d550-3955-4bec-8361-5de4ad442f19
Open disclosure when a focused segment becomes truncated without requiring a new focus event. Preserve Escape dismissal until focus returns, including across fitting and truncated transitions.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 05c0d550-3955-4bec-8361-5de4ad442f19
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
github-actions
Bot
added
the
integration-tests: recommended
Related to github/primer#7156. Replaces the wrapping approach in #8442, which was reverted by #8469.
Keep SegmentedControl labels on one line and truncate them when space is constrained. This prevents wrapped text from escaping the control's styling without changing the existing 28px small / 32px medium heights.
Truncated labels reveal their full text on hover and keyboard focus, using the existing button as the tooltip trigger. Labels that fit do not show a tooltip.
Truncation is a defensive fallback, not the preferred layout. Normally, give the control more space, shorten the labels or use another component.
Changelog
New
Changed
Removed
Rollout strategy
Testing & Reviewing
bea76d162.b1c9555d1reported no new code finding but requests human review of the shared Tooltip changes.The fixed-height sizing, public API and existing responsive variants are unchanged. Design/Accessibility sign-off on the overflow behaviour remains outstanding.