Impovments to SegementedControl

[Jan-Eimertenbrink]

Problem

We have identified that the line-breaking behavior of our SegmentedControl does not yet meet our expectations, and we need to better support users to ensure that the SegmentedControl is used as intended.

Proposed Solution

Each segment should always stretch to fit the available space: for example, if there are four segments in the control, each segment should take up one-fourth of the available space. For accessibility reasons (A11y), we want to avoid truncating overly long names within segments. Instead, the names should wrap onto the next line. To prevent segments from becoming too small and requiring frequent line breaks, we will introduce a min-width for the segments.

If a segment can no longer maintain the min-width, the SegmentedControl should automatically convert to a Select.

Calculation Example

n = number of segments

• If n * min-width ≥ container width: SegmentedControl remains as is.
• If n * min-width < container width: The control switches to a Select.

The current solution, which switches the control to a vertical layout, is suboptimal, especially as it takes up too much space in mobile contexts.

With an appropriately chosen min-width, it should be rare for the SegmentedControl to require two lines. Additionally, our style guide recommends keeping option names to one or two words to minimize space requirements. The min-width should be a configurable property, allowing it to be adjusted as needed. However, a default value will be predefined, which we will determine during the implementation of this issue.

Useful links

• Primer SegmentedControl