refactor!: Checkbox, Checkbox Group and Radio Button Group base styles

[jouni]

Checkbox, Checkbox Group and Radio Button Group base styles

Supported custom properties

Checkbox

Property	Description
--vaadin-checkbox-background	Background color of the checkbox.
--vaadin-checkbox-border-color	Border color of the checkbox.
--vaadin-checkbox-border-radius	Border radius of the checkbox.
--vaadin-checkbox-border-width	Border width of the checkbox.
--vaadin-checkbox-color	Color used for the checkmark or indeterminate icon.
--vaadin-checkbox-gap	Gap between the checkbox and the label.
--vaadin-checkbox-label-color	Text color of the checkbox label.
--vaadin-checkbox-label-font-size	Font size of the checkbox label.
--vaadin-checkbox-label-font-weight	Font weight of the checkbox label.
--vaadin-checkbox-label-line-height	Line height of the checkbox label.
--vaadin-checkbox-size	Size (width and height) of the checkbox.
--vaadin-checkbox-group-gap	The gap between the group label and the checkboxes within the group.

Radio Button

Property	Description
--vaadin-radio-button-background	Background color of the radio-button.
--vaadin-radio-button-border-color	Border color of the radio-button.
--vaadin-radio-button-border-radius	Border radius of the radio-button.
--vaadin-radio-button-border-width	Border width of the radio-button.
--vaadin-radio-button-color	Color used for the selection dot in the radio-button.
--vaadin-radio-button-gap	Gap between the radio-button and the label.
--vaadin-radio-button-label-color	Text color of the radio-button label.
--vaadin-radio-button-label-font-size	Font size of the radio-button label.
--vaadin-radio-button-label-font-weight	Font weight of the radio-button label.
--vaadin-radio-button-label-line-height	Line height of the radio-button label.
--vaadin-radio-button-size	Size (width and height) of the radio-button.
--vaadin-radio-button-dot-size	Size (width and height) of the selection dot in the radio-button.
--vaadin-radio-button-group-gap	The gap between the group label and the radio-buttons within the group.

[jouni]

Going to update the visual tests still.

[jouni]

Maybe this needs to be extracted to component-base package, now that Radio Group depends on it?

[web-padawan]

IMO we can extract this to field-base/styles and call it something like group-base-styles.js

[jouni]

@web-padawan, could you take a look at the tests? I can't figure out why they fail. I get the failure locally as well, but I can reproduce the issue in the dev page.

[web-padawan]

We could modify this test to not check for display: block but store original value using getComputedStyle(checkbox) and then check if that is restored. Otherwise we'd also have to add add styles to the Polymer version which makes no sense.

 ❌ checkbox > default > should have display: none when hidden
      AssertionError: expected 'inline-grid' to equal 'none'
      + expected - actual
      
      -inline-grid
      +none

[jouni]

I think that issue was just about importing the Lit version, which includes more CSS than the Polymer version.

[jouni]

I think it was a similar issue with the tooltip integration test, and I tried updating all the components to the Lit versions that already have base styles.

[web-padawan]

Regarding component-tooltip tests - I recall there was an issue in the original checkbox PR that the tooltip wasn't open because the group had zero height without children (in the main branch, it had some height due to pseudo-element).

See this commit for a fix (needs to be also applied to RadioGroup in that test): 0458e1d

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
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

[jouni]

I assume we should redo these updates on top of main instead.