rolfsmeds
commented
1 year ago https://github.com/vaadin/web-components/pull/6672 introduces a property --vaadin-button-margin that allows for controlling the margin globally with a single line of css:
html {
--vaadin-button-margin: 0;
}This will ship in V24.3.
In V25.0 we could change the default to 0 to get rid of the default margin.
Describe your motivation
Lumo styling of
vaadin-buttonapplies a vertical margin of--lumo-space-xs(0.25rem, or about 4px).The rationale for this was to make buttons align nicely with an 8px layout grid (or something like that), but since
vaadin-buttons are in practice mostly used inside Vaadin layouts and flexbox containers with their own configurations and whitespace, the benefits of this never really materialized, and the margin has instead become a bit of a nuisance as developers have to take them into account when applying padding to elements containing buttons, or override them where necessary.Describe the solution you'd like
Remove the Lumo vertical margin in
vaadin-button.In order to make it easy to revert this breaking change in applications that rely on this margin, a new css property could be introduced to control it, e.g.
--lumo-button-vertical-margin.Proposing the following changes:
margin: var(--lumo-button-vertical-margin, var(--lumo-space-xs)) 0;this will effectively use the current value instead of the new property as the latter does not yet have a value defined)0, and document in the V24 upgrade guide how to provide a value to the new property that reverts margins to the old value.Describe alternatives you've considered
No response
Additional context
No response