Material-ui: [ToggleButton] Bring component closer to MUI Button

[Primajin]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Toggle Button has a fixed height for example - it would be cool if it works more closely like the normal MUI Buttons, which also support basically three pre-set sizes.

Examples 🌈

By removing the height and giving it a padding like the button it will look the same and behave more naturally

Motivation 🔦

This helps when overwriting basic sizes and paddings of Buttons to also affect ToggleButtons automatically.

[oliviertassinari]

@Primajin Great idea, I think that the closer the Button/ButtonGroup and ToggleButtons components are, the better

[rehanmohiuddin]

I will Solve this issue please assign it to me

[rehanmohiuddin]

ToggleButton.js updated and solved the issue please check and pull the request
https://github.com/mui-org/material-ui/pull/20967#issue-415649413

[Primajin]

Hey there, sorry to exhume this but I was on vacation and couldn't test it right away.

So the initial idea of this issue was that the ToggleButton would inherit the same paddings and measurements as the normal Button. So that when you have a normal Button and a ToggleButton next to each other, they look alike.

We now removed the fixed height, but have a fixed padding of 11px in all directions now, making the ToggleButton 48px height - a normal Button has a vertical padding of 6, making it 36px height by default.

Actual:

Expected:

This one uses a vertical padding of 5 for example.

What do you think?

Codesandbox to play with: https://codesandbox.io/s/material-demo-ti75s?file=/demo.tsx

Edit: Also the border colors of an outlined Button and a ToggleButton are different and should ideally be the same (the one of the Button)

[oliviertassinari]

@Primajin Use the small variant, you will get the same 36px height.

[Primajin]

OK cool - but that means the Buttons vs. ToggleButtons are one step apart in terms of size and only matching when having a medium Button with a small ToggleButton - other sizes won't fit 🤔

30 / 36 / 42 vs. 36 / 48 / 56

Actual:

Expected:

[oliviertassinari]

Yes, exactly

[Primajin]

Hmm OK, I would have expected them to be the same height when giving same size parameter.
Or at least when they are apart one step, then be consistent 6px steps so 36 / 42 / 48 - but that would leave you with either an extra small ToggleButton of 30 or an extra large Button of 48 on either side of the spectrum.

[RalphSleigh]

I just found this after putting some ToggleButtons next to normal ones and noticing the height difference.

I also tried color="secondary" on both ToggleButton and Group, but this is also not yet supported?

I also note that even if we use the size to make the height the same as a normal button, the text size comes out different, normal buttons are a point bigger.

[djmccormick]

It also doesn't take color.

[oliviertassinari]

Should we merge these two components? 🤔

[Primajin]

Yes, I'd definitely vote for that.

[Primajin]

I also just realized that while the selected button has full white text in dark mode (as the normal button) in light mode it only has grey - although the normal button is black in light mode

[oliviertassinari]

@Primajin If you are referring to the <Button color="default">, we plan to drop it in v5: #17530.

[Primajin]

Ahh OK good to know. We can also think about bringing the two components together in V5 then it's not such a breaking change in v4.
I could think of a wrapper for button that creates a button group (just like a radio group) and that has props to determine if the group is OR or XOR and then either just drop ToggleButton all together or make this an alias - like we have with Textfield.

What do you think?

[oliviertassinari]

@Primajin To be honest, I have never look into how the reunion could happen. I might not have the time to either. Maybe @mbrookes as the original author of the component could continue the exploration and the potential it has?

[mbrookes]

@Primajin

I would have expected them to be the same height when giving same size parameter.

The default (medium) sizes for Button and ToggleButton are from the MD spec. Unfortunately they've removed the diagrams showing the specific dimensions, but you can measure them.

@oliviertassinari

Should we merge these two components?

I see this comment regularly, but with no further explanation. Do you mean import the Button in ToggleButton and restyle it, rather than using ButtonBase? It's possible I suppose, but I'm not sure how much benefit you would gain vs the extra baggage need to manage all the unwanted props and styles.

To be honest, I have never look into how the reunion could happen.

Ah, that explains it! 😉

Maybe @mbrookes as the original author of the component

I think perhaps you mean @phallguy? (I updated the styles for MDv2.)