Repository navigation
chore: Adds internal style api v2 to segmented control - #5243
Merged
Merged
Conversation
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The segmented-control dev page uses local selection state instead of AppContext URL parameters, preventing alternate selections from being targeted by test URLs or preserved in shared links.
1 open issue
What changed in this PR
Adds internal Style API v2 support to SegmentedControl, enabling slot-based customization and forwarding styles to its responsive Select fallback.
Changes:
- Adds root, segment, and divider styling slots, plus Select style forwarding.
- Introduces radius, focus-ring, and divider styling tokens.
- Adds slot-wiring tests and a demo page with text and icon variants.
| File | Description |
|---|---|
src/segmented-control/styles.scss |
Registers root tokens and documents styling slots. |
src/segmented-control/segment.tsx |
Applies segment and divider slot classes to buttons. |
src/segmented-control/segment.scss |
Connects radius, focus-ring, and divider styling tokens. |
src/segmented-control/internal.tsx |
Defines slot types and forwards styles to Select. |
src/segmented-control/internal-segmented-control.tsx |
Applies root styles and passes slots to segments. |
src/segmented-control/__tests__/style-api.test.tsx |
Tests slot classes, forwarding, and DOM prop isolation. |
pages/segmented-control/style-api-v2.scss |
Defines customized segment states and shapes. |
pages/segmented-control/style-api-v2.page.tsx |
Demonstrates styled text and icon segments. |
Review effort: Balanced
| } | ||
|
|
||
| function StyledSegmentedControl({ options, label, square }: StyledSegmentedControlProps) { | ||
| const [selectedId, setSelectedId] = useState('list'); |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #5243 +/- ##
=======================================
Coverage 97.82% 97.82%
=======================================
Files 1006 1006
Lines 32608 32625 +17
Branches 12106 12121 +15
=======================================
+ Hits 31900 31917 +17
+ Misses 702 666 -36
- Partials 6 42 +36 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
vvaliyev
marked this pull request as ready for review
November 3, 2026 17:11
vvaliyev
requested review from
pan-kot and
ywyyu17
and removed request for
a team
November 3, 2026 17:11
pan-kot
reviewed
Nov 4, 2026
| styleClassNames: { | ||
| root: styles.root, | ||
| segment: clsx(styles.segment, square && styles['segment-square']), | ||
| divider: styles.divider, |
Member
There was a problem hiding this comment.
let's include select slot to the demo as well - we can import select styles from select's test page, or use some minimal ones
vvaliyev
force-pushed
the
style-v2-segmented-control
branch
from
November 4, 2026 08:52
bc62f3b to
d5dfac0
Compare
pan-kot
approved these changes
Nov 4, 2026
This branch was successfully deployed
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
Adds the internal Style API v2 to Segmented control:
root,segment(every segment button; the selected and disabled segments are targeted with[aria-pressed="true"]and:disabled),divider(the line between two segments) andselect(replaces the component in constrained views, forwards to Select).Known gap: the Select fallback renders only below the x-small viewport breakpoint, so the dev page shows it only at narrow widths.
The style-docs snapshot and the VR registration of the dev page follow in one PR for all components.
Tracker section: P3d34KdbCd6o.
Related links, issue #, if available: n/a
How has this been tested?
Unit tests for every slot and forward, dev page
segmented-control/style-api-v2, build and lint green.Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.