Add Gutters property to control padding on applicable inputs

[danielchalmers]

Feature request type

Enhance component

Component name

No response

Is your feature request related to a problem?

The padding on many components are too much for certain designs.

Describe the solution you'd like

A Gutters property that is true by default will remove all padding if false.
This property should exist in as many inputs as possible.

The current way that the gutters are done is that the component adds the padding and then removes it if the property is false. This should be the other way around as mentioned in #8586 and could become part of the implementation of resolving this issue.

Note: Need to think about how this impacts labels.

Have you seen this feature anywhere else?

A few other components have Gutters: https://github.com/search?q=repo%3AMudBlazor%2FMudBlazor%20gutters&type=code

Describe alternatives you've considered

I need the components to scale nicely with font size and be more dense, so currently I will remove the padding entirely or replace it with relative units. This ends up looking something like this:

/* https://github.com/MudBlazor/MudBlazor/blob/dev/src/MudBlazor/Styles/components/_input.scss */
.mud-input {
  margin-top: 0 !important;
}

.mud-input-control {
  margin-top: 0 !important;
}

.mud-input > textarea.mud-input-root-outlined {
  margin: 0.25em !important;
}

/* Adds space to make up for label. Only works on newer browsers. */
.mud-input-control-input-container:has(.mud-input-label) {
  margin-top: 1em !important;
}

/* https://github.com/MudBlazor/MudBlazor/blob/dev/src/MudBlazor/Styles/components/_inputlabel.scss */
.mud-input-label-inputcontrol {
  top: 0;
  left: 0;
  position: absolute;
  transform: translate(0, -0.75em) scale(0.75) !important;
}

  .mud-toggle-group .mud-toggle-item {
    padding: 0.25em !important;
  }

.mud-radio {
  margin: 0 !important;
  margin-inline: 0 !important;
}

Pull Request

• I would like to do a Pull Request

Code of Conduct

• I agree to follow this project's Code of Conduct

[danielchalmers]

@henon @ScarletKuro Good idea?

May want to roll this into an overhaul of the margin and density system altogether #8844. I believe @Garderoben and @mckaragoz were interested in this.

[github-actions]

Thanks for wanting to do a PR, @danielchalmers !

We try to merge all non-breaking bugfixes and will deliberate the value of new features for the community. Please note there is no guarantee your pull request will be merged, so if you want to be sure before investing the work, feel free to contact the team first.

[henon]

It would be ok to add Gutters and Padding for inputs now. Later I'd also like to see better margin/padding control in a library-wide overhaul.

[mckaragoz]

I believe to have one Density parameter that both control padding and height. Each density level can reduce height and padding. If we add multiple parameters, im sure we will say "let's unify these parameters" in future.

[danielchalmers]

Closing in favor of unified approach in #8946 - can reopen in the future if it doesn't work out