fix!: style form-item required indicator in base styles

[DiegoCardoso]

Description

The styles were missing from the base theme, which caused the required indicator not to show at all in the base styles and Aura theme

The changes introduce a small behavior difference: in Lumo, the required indicator previously toggled its opacity based on the [required] attribute. After this change, it toggles the display value between inline-block and none instead. To mitigate the visual impact on label-less <vaadin-form-item>, a min-height: 1lh is added to [part=label].

Base

Aura

Lumo

Type of change

• Bugfix

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[DiegoCardoso]

I wasn't sure which approach would be better for the Lumo theme:

1. Add styles to override the base style changes
2. Adopt the base styles in Lumo, accepting the minor visual differences

I went with (2). The min-height: 1lh on [part=label] is meant to mitigate the layout shift that a label-less <vaadin-form-item> would otherwise have.

Previously in Lumo, the [part=required-indicator] pseudo-element only had its opacity toggled, meaning its intrinsic size still contributed to the [part=label] layout even when no [required] attribute was set on the field component. The new approach toggles display instead, which means that when the field is not required, a <vaadin-form-item> without a label will collapse closer to the line above.

Arguably, this is a side effect of the current styling implementation, and users should define their own spacing. However, it could be perceived as a breaking change if the spacing is suddenly removed in that scenario.

[DiegoCardoso]

This is the visual test where the change described in this review comment would be most noticeable. The checkbox in the last row would render without any spacing from the one above it.