Segmented Button Enhancement

[rouvenpost]

🔮 Tokens

New

post.button-segmented.elements.gap.inline: post.device.spacing.gap.inline.8 

Changed

post.button-segmented.elements.height: post.device.sizing.interactive.button.height.2 # OLD
post.button-segmented.elements.height: post.device.sizing.interactive.button.height.3 # NEW

Tasks

• [x] Add small consignment icon to icon library
• [ ] Add component styles to the segmented button for icon + text with a gap
• [ ] Add an example to the segmented button docs for multiline content using the existing utilities
• [x] Add additional gap token
• [x] Change height token for mobile element

[oliverschuerch]

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=13302-6360&t=ixqgixJ5kBN2lmkK-4

Decision:

1. We'll provide custom icons for small and large consignments.
2. We will allow icons and text on the same line (already possible).
3. We will not create custom styles for multiline content. This must be implemented by projects themself.

[oliverschuerch]

@gfellerph if you agree with the decisions above, you're free to create tickets out of it. If not, let's discuss again.

[gfellerph]

@oliverschuerch is it possible to recreate the multiline example with utility classes?

[oliverschuerch]

@oliverschuerch is it possible to recreate the multiline example with utility classes?

I'd say so.

<div class="segmented-button-container">
  <fieldset class="segmented-button">
    <legend>Choose one of the options</legend>

    <label class="segmented-button-label">
      <input type="radio" name="segmented-button">
      <div style="font-size: 1rem">
        <div><post-icon name="stampbpost" class="me-8"></post-icon>CHF
          1.00</div>
        <div class="fw-normal">B-Post Günstig</div>
      </div>
    </label>

    <label class="segmented-button-label">
      <input type="radio" name="segmented-button" checked="">
      <div style="font-size: 1rem">
        <div><post-icon name="stampapost" class="me-8"></post-icon>CHF
          1.20</div>
        <div class="fw-normal">A-Post Normal</div>
      </div>
    </label>

    <label class="segmented-button-label">
      <input type="radio" name="segmented-button">

      <div style="font-size: 1rem">
        <div><post-icon name="swissinnightexpress"
            class="me-8"></post-icon>CHF 17.00</div>
        <div class="fw-normal">Swiss Express Mond</div>
      </div>
    </label>
  </fieldset>
</div>

[alizedebray]

[sandra-post]

@hugomslv FYI I am currently finalizing the new/updated Figma components for this enhancement. and there will be a few additional tokens I will create. When done, I will add them to the description of this ticket.

[sandra-post]

@hugomslv Please find the new and changed tokens in the description above. They are pushed to GitHub.