refactor: move column borders variant to base styles

[sissbruecker]

Description

Part of #11163

When using the column-borders theme variant, Aura currently sets --vaadin-grid-column-border-width to 1px, overriding the application defined property. What is not obvious is that if you set --vaadin-grid-column-border-width you don't actually need column-borders, so it is reasonable to assume that someone might fall into this trap of setting both and then wondering why the custom prop is not working.

This moves the theme variant to the base styles, similar to several other grid theme variants that are already defined there. That way Aura does not have to override the custom prop, column-borders guarantees at least a 1px column border in both base styles and Aura, and --vaadin-grid-column-border-width is still respected even if you have the theme variant active.

There is technically a behavior change for custom slotted grids in a Crud component. But defining grid theme variants on the Crud itself doesn't seem to be a documented use case, there is no Flow API for it, and it goes against the theme propagation logic in Crud which only propagates theme variants if the grid is the default one.

Type of change

• Refactor

[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

[vaadin-review-bot]

Reviewed the changes — left 1 comment.

	Finding
🧪	No test covers the actual point of the change: the custom property winning over the variant's 1px default

[jouni]

The idea was that base styles would have an opinion what the default border configuration would be for any given theme. So a theme can choose, for example, to set both row and column borders by default on all grids, and offer a variant that removes the borders.

I suppose it doesn't matter if we move these variants to be in base styles. They just might not do anything for such themes, which have borders enabled by default. It’s the same case for many other variants as well, so it doesn't matter.

[jouni]

There’s an alternative way of fixing this in Aura:

aura/grid.css

:root {
  --_aura-grid-col-border-width: var(--vaadin-grid-column-border-width, 1px);
}

:is(vaadin-grid, vaadin-crud, vaadin-grid-pro)[theme~='column-borders'] {
  --vaadin-grid-column-border-width: var(--_aura-grid-col-border-width);
}

[sissbruecker]

With the alternative the prop would only work when you define it in a rule on html for example. That seems unexpected to me, and I remember there were a number of other props that only work the other way around.

[jouni]

Yeah, that’s true.