web-components icon indicating copy to clipboard operation
web-components copied to clipboard

feat: add --vaadin-input-field-padding

Open BalusC opened this issue 1 year ago • 0 comments

Describe your motivation

I'd like to be able to adjust the input field padding suite-wide.

Below is an example showing a text-field, select and text-area which happen to already have a customized background color and border radius and font size via suite-wide CSS properties --vaadin-input-field-background, --vaadin-input-field-border-radius and --vaadin-input-field-value-font-size.

image

However, I can't seem to find a suite-wide CSS property to adjust the input field padding.

image

No such thing is mentioned in https://vaadin.com/docs/latest/components/text-field/styling, https://vaadin.com/docs/latest/components/select/styling and https://vaadin.com/docs/latest/components/text-area/styling

Ultimately I'd like to achieve the following padding suite-wide, note especially also the dropdown toggle and textarea autosizing:

image

Describe the solution you'd like

A new suite-wide CSS property something like --vaadin-input-field-padding would be very welcome in order to accomplish this in a consistent manner.

Describe alternatives you've considered

Of course you can override the host styles, but that's cumbersome and doesn't account for any future components.

Additional context

Using Vaadin 24.4.10.

BalusC avatar Oct 08 '24 12:10 BalusC