Toggle Button - New Component

[hej-wesley]

This issue is for the creation of a Toggle Button component only. This would be the atomic piece of the Toggle Button Group component, which will be completed in the future. Issue Reference: #2060

Option list is a single & multi selection pattern that provides a more visual emphasis on the choices available. This documentation provides layout, behavior and content guidance for when and how to use an option list component.

Figma Link

[agliga]

The link is taking me to the index page.
Can we have more details on this component?

[hej-wesley]

Yes, Sorry we made some updates to this component & name:

https://www.figma.com/file/zEBdEhbonrBOGzZ0fXzWvM/branch/b1rne6xwsmjEd3gp5u8wxr/eBay-Design-System?node-id=101602%3A121185&t=KVCDxubNuoQdQLS5-1

[agliga]

Still need to investigate. Looks like a good candiate to include.
Need a kickoff for this.

[agliga]

Possibly do these as toggle buttons
Need to see if we can do deselecting of "radio" type so we can do it as toggle buttons properly.

[ianmcburnie]

Tracking MIND pattern here: eBay/mindpatterns#99

[ianmcburnie]

Started MIND pattern documentation here: https://ebay.gitbook.io/mindpatterns/input/toggle-button-group

Still need to add working examples

[agliga]

We should call this toggle-button-group
Non form
Possibly use role-description
Show mobile version on <512px and then show side by side items.

Possibly need to check for stretching on large screens.

[ArtBlue]

I did quite a bit of research into the current state of affairs on container queries...

The Good News
From all indications, browser support appears to be complete for major browsers:

• https://caniuse.com/css-container-queries
• https://developer.mozilla.org/en-US/docs/Web/CSS/container

The Bad News

• There still appears to be lack of functional and developer support for container queries. The @container query, for example, doesn't seem to work in Chrome; gets stripped by LESS in the CSS output; VS Code screams about it, though there's a current request to add support ([css] Support CSS property container-type microsoft/vscode#170589).
• The only known polyfill (https://github.com/GoogleChromeLabs/container-query-polyfill) also appears to have issues (in maintenance mode since 11/2022).

Based on the above, for now, I will be using a combination of grid, modifiers, and media queries to allow for different views and responsive variations.

[ArtBlue]

There have been substantial changes to this since issue creation. Here's the new Figma link with updates: https://www.figma.com/file/zEBdEhbonrBOGzZ0fXzWvM/branch/dzliniXCfXwfkNR4Eu40l5/eBay-Design-System?type=design&node-id=101602-121185&t=Uz1ynDZKKJyq6l26-0