Toggle component

[joaorbp]

Hello, some feedback and suggestions for the toggle component.

From documentation

From the documentation this is how the toggle component should look like:

In my opinion I think the toggle component should just be a group of buttons.

Based on the current documentation this is how the buttons look like:

I think for consistency it would be better for the toggle to just use the current buttons design, but just group them together.

We could still have the same basic and outline options, being the basic the primary buttons and the outlined the secondary buttons.

The toggle component also seems to use the ripple effect, I think a decision would need to be made, for all the buttons to use the ripple effect or none of the buttons to use the effect, for consistency in the Halstack design .

Also the color yellow is introduced on the toggle component, when is not part of the Halstack colours.

So far I can't see any other buttons in the Halstack containing yellow.

Thank you for taking the time to read, hopefully this will spark some discussion.

[aweell]

Thanks @joaorbp for opening the discussion!

Documentation of the toggle group hasn't been yet updated. The last component styles are available in:
https://developer.dxc.com/tools/react/next/#/components/toggleGroup

Apart from that:

Semantically speaking

In my opinion I think the toggle component should just be a group of buttons.

Not only related to how is built but also how is named:button group or split button seems more convenient than toggle group.

Merriam-Webster defines the toggle as:

Toggle Noun

computers : a setting that can be switched between two different options by performing a single action (such as selecting a menu option or pressing a key)

Since the current toggle group allows multiple selections and there is another component named switch (mainly known as a toggle) that behaves exactly like its defined, the name should be reviewed.

Structure

Since I propose the idea of changing the name to button group, let me add some questions to the discussion supposing it's based mainly on buttons 😉

• Apart from the solution you present (segmented group) could be interesting to present the buttons independently? Shopify Polaris example
• Should be possible to provide a more complex selection by adding a dropdown button? Uber Base design system example
• Should be provided different spacing/stacking methods? Adobe Spectrum design system example
• Would be interesting the exploration of different button group sizes? Bootstrap example
• Should be allowed to combine different button variants? Seek styleguides

[aweell]

Hi @joaorbp,

The toggle documentation has been updated in release 3.8.0!

You can check the toggle documentation here.

Or see what we updated from the last release.

[joaorbp]

They look good, great work.