Skip to content

Segmented Button Enhancement #5154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
3 of 5 tasks
rouvenpost opened this issue Apr 1, 2025 · 7 comments · May be fixed by #5529
Open
3 of 5 tasks

Segmented Button Enhancement #5154

rouvenpost opened this issue Apr 1, 2025 · 7 comments · May be fixed by #5529
Assignees
Labels
🍀 decision Marks conversations where a decision has been made 📦 documentation Related to the @swisspost/design-system-documentation package ✨ feature request This is a request from a contributor outside of the core team. 📦 styles Related to the @swisspost/design-system-styles package

Comments

@rouvenpost
Copy link

rouvenpost commented Apr 1, 2025

🔮 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

  • 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
  • Add additional gap token
  • Change height token for mobile element
@rouvenpost rouvenpost added the needs: 💬 pattern discussion This issue will be discussed in the next Pattern Discussion meeting. label Apr 1, 2025
@oliverschuerch
Copy link
Contributor

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
Copy link
Contributor

oliverschuerch commented Apr 1, 2025

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

@gfellerph
Copy link
Member

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

@oliverschuerch
Copy link
Contributor

oliverschuerch commented Apr 1, 2025

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

I'd say so.

Image

<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>

@gfellerph gfellerph added 🍀 decision Marks conversations where a decision has been made and removed needs: 💬 pattern discussion This issue will be discussed in the next Pattern Discussion meeting. labels Apr 4, 2025
@gfellerph gfellerph moved this from 👀 Triage to 🆗 Ready in Design System Production Board Apr 7, 2025
@gfellerph gfellerph added 📦 styles Related to the @swisspost/design-system-styles package request This is a request from a contributor outside of the core team. labels Apr 7, 2025
@gfellerph gfellerph added this to the Design System Next Level milestone Apr 7, 2025
@gfellerph gfellerph added the 📦 documentation Related to the @swisspost/design-system-documentation package label Apr 16, 2025
@gfellerph gfellerph removed their assignment Apr 16, 2025
@alizedebray
Copy link
Contributor

Image

@sandra-post
Copy link
Contributor

@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
Copy link
Contributor

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

@hugomslv hugomslv linked a pull request May 21, 2025 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🍀 decision Marks conversations where a decision has been made 📦 documentation Related to the @swisspost/design-system-documentation package ✨ feature request This is a request from a contributor outside of the core team. 📦 styles Related to the @swisspost/design-system-styles package
Projects
Status: 🆗 Ready
Development

Successfully merging a pull request may close this issue.

6 participants