SegmentedControl component

[jonrohan]

https://github.com/github/primer/issues/760

👋🏻 This is ready for review http://primer-view-components-preview-1225.eastus.azurecontainer.io/view-components/lookbook/inspect/primer/alpha/segmented_control/default

SegmentedControl

This PR adds a SegmentedControl component with status :alpha to the library.

Arguments

SegmentedControl

Name	Type	Default	Description
icon_only	Symbol	:never	One of :never, :always, :when_narrow
full_width	Boolean	false	If the component should be full width

SegmentedControl::Button

Name	Type	Default	Description
icon	Symbol	nil	Symbol for octicon
selected	Boolean	false	Setting the selected state of the button

Interaction

For Design Guidelines

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 4eec26c35a2917f2ca83e032ed9eff81ac7dbd1e

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

This PR includes changesets to release 1 package

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

[mperrotti]

Overall this is looking good, but I'd like us to align a little closer closer on the API if possible. Here's the React API for reference: https://primer-e83bf66799-13348165.drafts.github.io/drafts/SegmentedControl#props (ignore the loading prop - we decided against that)

[mperrotti]

I took a look at the rendered examples at https://jonrohan-primer-devspace-wr644pf5vq5-3000.githubpreview.dev/lookbook/primer/alpha/segmented_control_preview/default

The way this is marked up is preventing the dividers from being shown between each button, and :hover/:active styles are not being shown.

See this issue for more info: https://github.com/primer/css/issues/2204

[mperrotti]

Looking at https://primer-e5b2c477c1-26611710.drafts.github.io/components/alpha/segmentedcontrol, I'm not seeing the selected button styles.