Ability to modify padding in mwc-dialog

[kartikwatwani]

Is your feature request related to a problem? Please describe. Previously I was using mdc-dialog so I had control over padding inside the dialog but now with mwc-dialog I can't modify the mdc-dialog__content padding. Currently, there is around 24px of padding but I want 0 paddings. I want to remove the green padding shown in the image below.

Describe the solution you'd like I would like a CSS property something like --mdc-dialog__content-padding which I can set to get the desired padding.

Describe alternatives you've considered I can't think of an alternative as shadow roots can't be modified easily.

[e111077]

This should be coming soon in our tokenization efforts

[e111077]

Upcoming tokens will be:

--mdc-dialog-container-color
--mdc-dialog-container-elevation
--mdc-dialog-container-shadow-color
--mdc-dialog-container-shape
--mdc-dialog-with-divider-divider-color
--mdc-dialog-with-divider-divider-height
--mdc-dialog-with-icon-icon-size
--mdc-dialog-with-icon-icon-color
--mdc-dialog-subhead-font
--mdc-dialog-subhead-line-height
--mdc-dialog-subhead-size
--mdc-dialog-subhead-weight
--mdc-dialog-subhead-tracking
--mdc-dialog-subhead-color
--mdc-dialog-supporting-text-font
--mdc-dialog-supporting-text-line-height
--mdc-dialog-supporting-text-size
--mdc-dialog-supporting-text-weight
--mdc-dialog-supporting-text-tracking
--mdc-dialog-supporting-text-color
--mdc-dialog-action-label-text-font
--mdc-dialog-action-label-text-line-height
--mdc-dialog-action-label-text-size
--mdc-dialog-action-label-text-weight
--mdc-dialog-action-label-text-tracking
--mdc-dialog-action-label-text-color
--mdc-dialog-action-hover-state-layer-color
--mdc-dialog-action-hover-state-layer-opacity
--mdc-dialog-action-hover-label-text-color
--mdc-dialog-action-focus-state-layer-color
--mdc-dialog-action-focus-state-layer-opacity
--mdc-dialog-action-focus-label-text-color
--mdc-dialog-action-pressed-state-layer-color
--mdc-dialog-action-pressed-state-layer-opacity
--mdc-dialog-action-pressed-label-text-color

[e111077]

There is actually no padding. Will raise an issue with design

[yinonov]

Are u going to expose all that?? Why would u allow such an open API which could lead to an "abuse" of the component?

[e111077]

These are parameters that have been calculated by the design team to still be within spec and modifiable and be considered "material". It also unifies the knobs on our implementations across platforms like Android and iOS.

You can read more on adobe's writeup on design tokens here

https://spectrum.adobe.com/page/design-tokens/

[yinonov]

we work with tokens. I guess the question should be asked here is - if the ownership of the design system was google (or any other company for that matter), would the custom properties/ tokens be different? I mean, do material perspective is also to consider white labeling? or could individual google products modify the variables to fit the application needs?

[e111077]

Internally we have a set of tokens called Google Material which is Google's brand. Material itself is white labeled. Google products are generally expected to follow Google Material spec except for certain products.

Additionally internally we require users to use Sass as it is widely available and supported. Additionally we have a strong file visibility build system, so that with merge-blicking linters, we are able to provide mixins for which googlers are able to provide tokens which in turn set these custom properties. This gives us a layer of abstraction thst we can control and this maintain this library internally.

Externally, we expect users to take advantage of npm versioning.

[yinonov]

guess this makes it a white labeling vs lock-down "battle" important (for us) to understand when working on a specific organization DS

[asyncLiz]

Should be fixed in M3