Add segment component

[bheston]

Need to add a segment control used like a condensed set of radio buttons for selecting a value from a non-binary list. For example:

The input and output behavior is comparable to a radio button. Perhaps that interface best supports this component.

Visually the selection indicator must be able to animate to the target position, similar to the indicator on the Pivot component.

From a design system perspective, the overall component follows the standard height guidance. The internal button follows the normal button horizontal spacing. All options are the same width: The longest title with appropriate padding. Note that the inset means the internal button will be shorter than a normal button. The selected item used the toggle fill, otherwise it follows the outline pattern for the container and the stealth pattern for non-selected options.

[chrisdholt]

Visually the selection indicator must be able to animate to the target position, similar to the indicator on the Pivot component.

Is there an example of the selected indicator? I'm assuming that the dark gray over "inspirational" is not what's being referred to - I'm not sure how you would animate that to "focused" as selected.

[bheston]

Is there an example of the selected indicator?

Yeah, it refers to the dark grey plate for Inspirational. The width of all options is the same, so the idea (without making a quick prototype) is that the backplate animates across exactly like the pill in pivot, while the text fades between the two selected / unselected colors for the two options. It would be a fairly quick transition, so I think it would be safe to leave any options in the middle, lie Information in this case would not change when going end to end.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[chrisdholt]

@bheston From an interaction model standpoint, it seems like this is covered by radio/radiogroup. From the date, my assumption is that this was requested for the MSFT package. If that's still desired, this may be best created as a new request in the Fluent UI repo: https://github.com/microsoft/fluentui/issues/

As it stands now, it seems like you could accommodate this with the existing radio/radiogroup foundation controls + custom styling.

[bheston]

This was initially considered for the msft package, though I believe it's useful enough and contains enough complexity that it is beneficial to have as at least a preconfigured variant to a radio group. I think you're right that the interaction model is the same. I think it's worth having on the backlog at least.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[janechu]

Removing this per #6955.