search

telekom / scale

Scale is the digital design system for Telekom products and experiences.
https://telekom.github.io/scale/
Other
372 stars 82 forks source link

Button group (new UI component) #611

Open mato-a opened 2 years ago

mato-a commented 2 years ago

Hello there,

I'd like to ask for new UI component button group that should work similarly to bootstrap https://getbootstrap.com/docs/5.1/components/button-group/

Specifically I am interested in radio button group features: https://getbootstrap.com/docs/5.1/components/button-group/#checkbox-and-radio-button-groups

Currently we use radio button groups in our app, using scale buttons and some logic to mark selected button with different background color. I suppose it is quite common use case.

timheiler-ico commented 2 years ago

We have an almost-beta version of this already.

Our immediate focus is on other components but we can propably release a stable beta in the coming weeks.

mato-a commented 2 years ago

Toogle group component is in beta. Thanks for this 🥳

We have integrated it into our project and so far we didn't find any issues with the new component, so I am closing this issue.

acstll commented 2 years ago

Amazing, thanks for the feedback!

mato-a commented 2 years ago

Hi there,

We have found some accessibility issues in the context how we are trying to use the new toggle button group component. Basically we are using the button group to select a certain tool from the toolbox. So what we need is actually radio button group that looks like the new toggle button group.

Here are some examples: https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html https://getbootstrap.com/docs/5.1/components/button-group/#checkbox-and-radio-button-groups

Besides accessibility issues - we are using toggle button group where radio button group is expected (role=radiogroup), there is also a functional issue that after selecting certain item more times it gets selected/unselected, but we would need a behavior of the radio button group in which clicking the same button will always keep it in selected status.

Would you consider adding such feature?

acstll commented 2 years ago

Hey @mato-a, definitely can consider it. This is highly appreciated feedback.

after selecting certain item more times it gets selected/unselected, but we would need a behavior of the radio button group in which clicking the same button will always keep it in selected status

for this it'd make probably more sense to use input[type=radio] directly… we'll think about it and try and have this refactor (however it ends up being) ready before the next accessibility sprint.

felix-ico commented 1 year ago

we are currently working on a segmented-button that will support this functionality