SegmentedControl

[simurai]

What are you trying to accomplish?

This adds the SegmentedControl component.

👀 Storybook preview.

TODO

• Sync up with PRC Adds draft SegmentedControl docs react#2081
• Use new size and typography tokens
• Add "icon only" variant
• Add "icon only when narrow" variant
• Add touch input support (see https://github.com/github/primer/issues/737#issuecomment-1138820175)
• Add disabled state
• Avoid shifting when item becomes bold
• Add loading state?
• Use new Primitives colors Add SegmentedControl colors primitives#329

What approach did you choose and why?

Implementation is based on (some are internal links):

• Tracking https://github.com/github/primer/issues/701
• Design tracking: https://github.com/github/primer/issues/761.
• Design Guidelines
• Figma spec
• Accessibility guidelines https://github.com/github/primer/issues/762
• PRC Basic SegmentedControl functionality react#2108

What should reviewers focus on?

I left a few comments with some open questions.

Can these changes ship as is?

• Yes, this PR does not depend on additional changes. 🚢

[changeset-bot]

🦋 Changeset detected

Latest commit: 9b2bf73

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

This PR includes changesets to release 1 package

Name	Type
@primer/css	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

[simurai]

As the comment says: Is aria-pressed correct in this case? It's based on this Figma example.

[simurai]

This comment https://github.com/github/primer/issues/762#issuecomment-1144210214 suggests to use aria-current.

[mperrotti]

Thanks for the explanation @simurai

I think I understand. I'll add these styles to the React and Figma implementations

I just realized the hover/active background color isn't inset like it is in Primer React

[simurai]

@mperrotti I just realized the hover/active background color isn't inset like it is in Primer React

This is now updated to align with PRC. See Storybook

[simurai]

Ok, I'm gonna merge this "as is". Once we start with the PVC implementation, we can come back and make follow-up PRs if needed.