[docs][ToggleButtonGroup] Add spacing demo

[sai6855]

related to : #45569

I was hesitant to add gap prop, since this might be solved in future using css variable like how joy-ui is doing right now, so just added a demo now

preview: https://deploy-preview-46058--material-ui.netlify.app/material-ui/react-toggle-button/#spacing

[mui-bot]

Netlify deploy preview

• docs/data/material/components/toggle-button/toggle-button.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against c782ba0

[ZeeshanTamboli]

@sai6855 I believe we should wait for upvotes first. If there's enough demand, we should consider adding a spacing prop to ToggleButton, like in Joy UI.

[sai6855]

we should consider adding a spacing prop to ToggleButton,

Sure

Till the time prop is added (which we don't know when) this demo https://deploy-preview-46058--material-ui.netlify.app/material-ui/react-toggle-button/#spacing helps users how to adjust spacing between buttons, Since the solution isn’t very straightforward and the use case is common, I believe it would be helpful to include this demo to guide users.

[ZeeshanTamboli]

and the use case is common

How do we know that without getting requests?

[sai6855]

How do we know that without getting requests?

Most of popular web apps which has millions of users has this feature, so I think we can assume use case is quite common. Attaching some of UI's i found for toggle buttons with spacing

Google sheets

Gmail search filter

Slack

Swiggy

[ZeeshanTamboli]

How do we know that without getting requests?

Most of popular web apps which has millions of users has this feature, so I think we can assume use case is quite common. Attaching some of UI's i found for toggle buttons with spacing

Google sheets

### Gmail search filter 

Slack

Swiggy

The Google Sheets and Slack examples are shown in the Customization section of the docs. The Gmail search filter and Swiggy examples are actually tabs styled as buttons, where clicking them displays the corresponding tab content. Like this?

Also, the Customization demo already shows how to add spacing, doesn’t it?

[sai6855]

The Gmail search filter and Swiggy examples are actually tabs styled as buttons

No, Both in Gmail search and swiggy examples users can select multiple filters, it's possible in ToggleButtons (https://mui.com/material-ui/react-toggle-button/#multiple-selection) not in Tabs. In Tabs users can't select multiple Tabs at once.

Also, the Customization demo already shows how to add spacing, doesn’t it?

It only shows spacing when the orientation is horizontal. Adding spacing for vertical toggle buttons is still non-trivial, users need to check the source code to figure out how to override the styles correctly.

So, adding a dedicated demo that covers spacing for both orientations helps a lot.

[ZeeshanTamboli]

Alright, we can add this demo.
However, I believe we should have separate demos for horizontal and vertical orientations, rather than mixing both in one.

[sai6855]

@ZeeshanTamboli Applied your suggestions, PR is ready for review now.

preview: https://deploy-preview-46058--material-ui.netlify.app/material-ui/react-toggle-button/#spacing

[sai6855]

@ZeeshanTamboli any idea why test-regressions is failing?

[ZeeshanTamboli]

@ZeeshanTamboli any idea why test-regressions is failing?

Let me take a look.

[sai6855]

@ZeeshanTamboli After hours of debugging 😐 , turns out accessing theme directly is causing test-regressions to fail. this commit fixed the issue 8809ddf

there several demos which do theme.vars || theme, so i guess it's fine to do that.

[ZeeshanTamboli]

Looks good!