experiment: add tabs base styles and visual tests

[jouni]

Built-In Variants

Name	Description
hide-scroll-buttons	Always hides the scroll buttons, also on devices with pointer: fine.
show-scroll-buttons	Always shows the scroll buttons, also on devices with pointer: coarse (touch devices).

Supported Custom Properties

Tab

Property	Fallback value
--vaadin-tab-gap	Gap between tab icon and label.
--vaadin-tab-padding
--vaadin-tab-font-size
--vaadin-tab-font-weight
--vaadin-tab-line-height
--vaadin-tab-color
--vaadin-tab-background
--vaadin-tab-border-radius

Tabs container

Property	Fallback value
--vaadin-tabs-gap	Gap between tabs.

[jouni]

Not sure exactly what to do with the unit tests (yarn test --group=tabs --theme=base), as they seem to rely on the Lumo styling (some 20px magic number) and seem to completely fail on some getBoundingClientRect() call.

[web-padawan]

There are some problems related to scroll tests passing locally but failing in CI, I will investigate it further.

[web-padawan]

I ended up setting min-width on vaadin-tab element in test styles to avoid dealing with browser-specific differences. Otherwise it doesn't render consistently with any font-family I tried. And this isn't relevant for the scroll test after all.

[sonarqubecloud[bot]]

Quality Gate passed

Issues
11 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