Fluentui: Segmented Control (more compact choice-group; group of buttons)

[HarryGifford]

Describe the feature that you would like added

I would like a segmented button like this in iOS or this in ExtJS.

This input is the same as a ChoiceGroup in terms of functionality, but the design is different. It can be substituted with a Dropdown but it's harder to use.

What component or utility would this be added to

Either a new component, or part of the ChoiceGroup.

Have you discussed this feature with our team, and if so, who

No.

Additional context/screenshots

Here's how we'd want to use it:

Here's an example from the American Airlines website:

And an example in iOS:

[maxwellred]

@ecraig12345 Is ChoiceGroup that correct component to target with this issue?

[ecraig12345]

If this is something we decide to add (and I'm not the one who should decide that), it should probably be separate to avoid adding complexity to the main ChoiceGroup. I also wonder if it would be possible to simulate this component with a ChoiceGroup using custom styles and onRenderField.

[Jahnp]

This would be a great candidate to discuss in the new internal Controls Stewardship workstream. I'm tagging as Needs: Design as well to help it show up in there. cc @micahgodbolt @betrue-final-final for visibility.

[ecraig12345]

If anyone would like to make something like this with custom styling in the meantime, you can use this codepen as a starting point. (thanks to @micahgodbolt for an earlier version of this codepen!)
https://codepen.io/ecraig12345/pen/BaaywqL?editors=0011