[Components] Add SegmentedControl

[heyamykate]

Fixes #873

Figma

This PR adds a new component to the component library - <SegmentedControl />

It is very similar to the Tabs component we have - it accepts an array of objects to render into segments, and has an optional onClick handler prop as well. When a user clicks on one of the buttons, an "active state" button slides over to wherever the new active button resides in the DOM.

To run it in storybook format, pull down the branch and run yarn && yarn run storybook:dev and click on the SegmentedControl sidebar menu item.

[michaeljaltamirano]

Ben will probably be able to provide more guidance re: styling for different states, but there's a new focus variable you can use here to start playing around with how the component would work with only keyboard controls:

&:focus {
  outline: none;
  box-shadow: ${BOX_SHADOWS.focus};
}

[benkolde]

ah yeah, thanks for calling that out @michaeljaltamirano but we should apply the new focus styling to this: unsure on how it will react between the two options focus and focusInner but would it be possible to get a screenshot of both with the two scenarios below. These are how it looks with designs but unsure how it will with live code

[michaeljaltamirano]

@heyamykate I ended up getting out of being underwater this cycle--can you re-tag me for review once the keyboard controls are in place?

[michaeljaltamirano]

@heyamykate It looks like there's some CSS finessing to match the above:

Active item has focus state:

Inactive item has focus state:

[LilCare]

@heyamykate The focused state looks perfect for the active item.

However, if an inactive item adjacent still has a small piece cutoff:

If you add a z-index, it should look like below:

[benkolde]

Looks good, once we figure out the focus piece it's good to go

[benkolde]

Adding comment here for posterity:

The whole control should be 40px tall and should use the caption typography sizing

[heyamykate]

@benkolde how is this for focus styling?

Here's the indicator/segment with focus styling applied

Here's the inactive segment with focus styling

[michaeljaltamirano]

@heyamykate I ran out of time this week before going OOO--if you could get one more person to look at this it would be appreciated.

[michaeljaltamirano]

I'm currently opening issues for UI toolkit / implementation discrepancies and our secondaryTheme was added after this PR was initially reviewed by folks so it looks like we will need to support the spec for the secondaryTheme version of this component now:

[heyamykate]

@michaeljaltamirano sorry I sort of forgot about this 😬 . I can work on this over cool-down 👍

[winstonkim]

hi @michaeljaltamirano, I took a stab at making the styling updates for the secondary theme. let me know what you think!

also is there something specific i need to do so that the chromatic test passes?

[michaeljaltamirano]

hi @michaeljaltamirano, I took a stab at making the styling updates for the secondary theme. let me know what you think!

also is there something specific i need to do so that the chromatic test passes?

The initial build will fail if there's new visual regression tests that haven't yet been vetted as the baseline, I went ahead and approved the changes and sent you an invite to join as a collaborator on Chromatic. I'll review this PR later--thanks for carrying the torch!

[michaeljaltamirano]

@winstonkim Approving to unblock your work.

I noted a usability TODO in my Refinements PR, but it is not blocking for getting this merged in, releasing a new minor version, and unblocking your work. We can continue to refine it later.

Once the dust settles on what the DOM/UX looks/feels like, we should have it properly documented in Figma, akin to Ben's comment with some focus state designs, but official, based on whatever those future refinements end up being. We'll want to loop in design once we get a better sense of what is feasible.

However, as the TODO mentions, it might also be worth working with Design to determine whether or not this control is better represented as separate components: a TabList which would seem to operate like how we seem to be needing it for some new Site pages being worked on (assuming I looked at the correct LP), and/or a RadioGroup if the selections correspond to some form submissions. If they're purely presentational then I think a TabList may be preferable to our current button implementation.