Repository navigation
Conversation
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: e435c079-86ae-4553-97b2-566561e72d4a
🦋 Changeset detectedLatest commit: e7dd915 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
|
Light and dark hover comparisons from the public Primer stories. In the segmented control, All is selected and Active is hovered; the invisible button below is hovered in its own existing story. Both hover backgrounds resolve to the same semantic token.
|
github-actions
Bot
added
the
integration-tests: recommended
|
There was a problem hiding this comment.
🟢 Approval recommended
The narrowly scoped hover change preserves other treatments, and no blocking issues were identified.
No open issues 🎉
What changed in this PR
Aligns subtle SegmentedControl hover backgrounds with invisible buttons for consistent low-emphasis interactions.
Changes:
- Supplies hover tokens through variant mixins while preserving other interaction states and responsive behavior.
- Adds an
@primer/reactpatch changeset.
| File | Description |
|---|---|
| packages/react/src/SegmentedControl/SegmentedControl.module.css | Uses variant-specific tokens in the shared hover rule. |
| .changeset/subtle-segmented-hover.md | Documents the hover styling change for release. |
Review effort: Balanced
Related issue: N/A (consistency proposal).
Proposes using
--button-invisible-bgColor-hoverfor enabled, unselected segments in the subtle variant. This keeps the control unboxed and aligns its muted-button treatment with invisible buttons. In some UI layouts, subtle segmented controls sit alongside invisible buttons; sharing the same hover background would give these neighboring, low-emphasis controls a consistent interaction treatment.The shared variant mixins supply the hover token to the existing interaction rule, avoiding the current cascade where the generic hover overrides the subtle rule. Selected, default-variant, disabled, focus, and pointer-down treatments stay unchanged, including responsive configurations.
Changelog
New
N/A.
Changed
Subtle SegmentedControl unselected hover backgrounds match invisible buttons. Includes an
@primer/reactpatch changeset.Removed
N/A.
Rollout strategy
Testing & Reviewing
Public Primer story screenshots: “All” is selected, “Active” is hovered, with a hovered invisible button for comparison. Chromium measurements waited for transitions to settle.
#f6f8fargba(129,139,152,0.1)(about#f2f3f5over white)#151b23rgba(101,108,118,0.2)(about#1f232aover the default background)Hover is slightly darker than selected in light and slightly lighter in dark. Design caveat: dark high contrast resolves both tokens to
#151b23, so that theme cannot preserve the same distinction with this token alone. No alternative color or selected-state change is introduced. Dark dimmed hovered text measures 4.44:1, improved from the existing 4.13:1, but still below 4.5:1; this proposal does not resolve that existing contrast limitation.Passed:
npm run buildnpm test -- --run— 160 files, 2,864 passed; 3 skipped, 10 todo.npm test -- --run packages/react/src/SegmentedControl/SegmentedControl.test.tsx— 32 passed.npm run type-checknpm run lintandnpm run lint:cssnpm run format:diffFocused local Chromium checks verified token equality across all nine supported Storybook themes; narrow, regular, and wide subtle variants; the wide default reset; unchanged pointer-down, selected hover, default hover, and disabled hover; and keyboard focus/selection. Screenshots use only this repository’s public stories. Canonical Linux VRT baselines were not run or updated locally; appearance was inspected in local Chromium.