experiment: add multi-select-combo-box base styles and visual tests

[jouni]

Supported custom properties

The chip properties are not “scoped” to the just MSCB, as this component might be useful in the future in other places as well.

Property	Description
--vaadin-chip-min-width
--vaadin-chip-gap	Gap between the label and the remove button.
--vaadin-chip-padding	0.3em
--vaadin-chip-background
--vaadin-chip-color
--vaadin-chip-font-size
--vaadin-chip-font-weight
--vaadin-chip-height	Chip height is explicitly defined so that it’s the same as the line-height of the MSCB input.
--vaadin-chip-border-radius
--vaadin-chip-border-width
--vaadin-chip-border-color
--vaadin-chip-remove-button-color

[web-padawan]

Added reset for this custom CSS property to Lumo as otherwise it breaks visual tests.
Moving this CSS to styles folder is also an option but that sounds like an overkill.

[web-padawan]

Something is wrong about chip min-width, here's how it looks on the narrow viewport (doesn't happen with Lumo).
Seems related to using min(max-content, var(--vaadin-chip-min-width, 6em)); - should we revert this change?

Note: the --_chip-min-width custom CSS property name is a bit counter-intuitive as it isn't actually used for min-width property on the chips. Instead, it's used in JS calculation to detect at which point the chip should be moved to overflow.

UPD: the actual problem is that we incorrectly assume the value to be in px while the new one is in em instead.

[web-padawan]

@jouni I ended up changing --vaadin-chip-min-width to 48px for now, and reported #9616. We can update to use your original 6rem value in a separate PR once this is fixed, but in some use cases like inside grid our users want to see chips that are quite narrow, so I wanted to pick something similar to the current 50px default. WDYT about this?

[jouni]

Yeah, that’s good. I think I didn't fully understand the behavior of how the sizes are computed and how the min-widths affect that.

[web-padawan]

This is now only used by Lumo so I think we should either remove it from API docs (as it has no effect on base styles) or make a separate PR for renaming it also in core / Lumo styles. Not sure which is better.

[jouni]

I suppose we could also keep it working in base styles, but remove it from the docs or mark it deprecated.

[web-padawan]

I restored it for now to avoid unintentional breaking change but IMO it's ok to remove it from API docs.

[jouni]

I think we need to go through the JSDocs of all components and update the custom property lists. For example, I didn't add properties for multi-select-combo-box specifically, it just uses the same as combo-box.

[web-padawan]

Good point about API docs. Created #9617, will link actual PRs with base styles to that issue.

[web-padawan]

LGTM but it would be good to have another review as I also made some modifications in the PR.

[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