[component]: Segmented button

[Cian77]

Description

Open issues:

Design:

• Integrated new typography
• Spacing is defined
• Documentation final

Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=18-16

Tokens proposal

• button-segmented-horizontal-border-radius
• button-segmented-vertical-border-radius
• button-segmented-active-fg
• button-segmented-active-bg
• button-segmented-default-fg
• button-segmented-default-bg (should be transparent, do we need this at all?)
• button-segmented-border
• button-segmented-padding-block
• button-segmented-padding-inline
• button-segmented-font-size

Development

Implement this pattern as a radiogroup.

<fieldset class="segmented-button"> 
  <legend>Title ("Change view" or whatever makes sense, this should be hidden)</legend>
  <label>
    View 1
    <input type="radio" />
  </label>
  ...
</fieldset>

Other requirements

• Use container queries to switch from horizontal to vertical mode
• You can use the label to style the component and hide the input itself, it's also possible to put the label after the input and connect it through the for attribute. The for attribute is not necessary when the input is wrapped by the label.
• Hide the legend element from view, but make it accessible to screen readers by using the visually-hidden mechanics

Implementation references

• https://codepen.io/trevald-the-scripter/pen/eYpYgMp

Tasks

💻 Tasks

Beta Give feedback

1. Review Design (All states present? Possible to implement?)
2. Web component
3. Documentation in Storybook
4. Unit tests
5. End to end tests
6. Visual regression tests
7. Design review

[gfellerph]

@Vandapanda created a tokens proposal in the issue description.

[Vandapanda]

Certain tokennames have been modified to comply with the naming conventions. Additional tokens added where necessary.