search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.96k stars 32.27k forks source link

FormControlLabel has a default margin-right, is this intended? #34039

Open TiagoPortfolio opened 2 years ago

TiagoPortfolio commented 2 years ago

Duplicates

Latest version

Current behavior 😯

The FormControlLabel component has a default margin-right: 16px. This makes reusability and alignment with other components tricky. If we want to make the label clickable with full width, we have to remove this margin.

image

Expected behavior 🤔

The FormControlLabel component should have no margin-right by default.

Steps to reproduce 🕹

https://codesandbox.io/s/falling-cookies-5lgnno?file=/src/Demo.tsx

Context 🔦

I want to make the FormControlLabel clickable with full width and align an icon on the right side of this component. This margin-right: 16px is interfering with that: image

Your environment 🌎

npx @mui/envinfo ``` System: OS: macOS 12.5 Binaries: Node: 16.13.1 - /usr/local/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 8.5.0 - /usr/local/bin/npm Browsers: Chrome: 104.0.5112.101 Edge: Not Found Firefox: Not Found Safari: 15.6 npmPackages: @emotion/react: 11.10.0 => 11.10.0 @emotion/styled: 11.10.0 => 11.10.0 @mui/icons-material: 5.8.4 => 5.8.4 @mui/lab: 5.0.0-alpha.93 => 5.0.0-alpha.93 @mui/material: 5.9.3 => 5.9.3 @mui/system: 5.9.3 => 5.9.3 @mui/x-data-grid: 5.15.1 => 5.15.1 @mui/x-data-grid-generator: 5.15.1 => 5.15.1 @mui/x-data-grid-pro: 5.15.1 => 5.15.1 @mui/x-date-pickers: 5.0.0-beta.4 => 5.0.0-beta.4 @mui/x-date-pickers-pro: 5.0.0-beta.4 => 5.0.0-beta.4 @types/react: 18.0.17 => 18.0.17 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 styled-components: 5.3.5 => 5.3.5 typescript: 4.7.4 => 4.7.4 ```
mnajdova commented 2 years ago

Thanks for the report. I agree none of the components should have a margin unless necessary. However, changing this would be a breaking change. For now, I would propose adding an override on your side, by setting marginRight: 0, or just unsetting it, and I will add this in the v6 milestone so that we can come back to it later. I am a bit reluctant to change the behavior, as it hasn't appeared so far as a problem.

TiagoPortfolio commented 2 years ago

Thanks @mnajdova!

I am setting marginRight: 0 to make it work for now :) I am curious to know why this marginRight was added, I am sure there is a reason for this to be added when the component was created.

Cheers!

mnajdova commented 2 years ago

As far as I could see from the commits, it was added to play nicely with checkboxes & radios (I suppose when they are positioned inline. Now that we have the Stack component I would assume this is no longer necessary really and it creates a surprises (as it did for your use-case). We'll revisit in v6 and update the styles if we decide to go in this direction.