feat: add Aura variants #8145

ugur-vaadin · 2025-10-10T14:05:51Z

Description

This PR

adds Aura variants in enums for variants that are not also base variants
adds HasThemeVariant interface to
- Upload
- SideNav
- MessageInput
adds missing theme variant unit tests
updates unit tests to use the helper in order to reduce duplication

Closes #8126

Type of change

Bugfix
Feature

Checklist

I have read the contribution guide: https://vaadin.com/docs/latest/contributing/overview
I have added a description following the guideline.
The issue is created in the corresponding repository and I have referenced it.
I have added tests to ensure my change is effective and works as intended.
New and existing tests are passing locally with my change.
I have performed self-review and corrected misspellings.
Enhancement / new feature was discussed in a corresponding GitHub issue and Acceptance Criteria were created.

...aadin-dashboard-flow/src/main/java/com/vaadin/flow/component/dashboard/DashboardVariant.java

...ent/vaadin-grid-pro-flow/src/main/java/com/vaadin/flow/component/gridpro/GridProVariant.java

...ent/vaadin-menu-bar-flow/src/main/java/com/vaadin/flow/component/menubar/MenuBarVariant.java

jouni · 2025-10-14T08:31:29Z

...ent/vaadin-menu-bar-flow/src/main/java/com/vaadin/flow/component/menubar/MenuBarVariant.java

-    LUMO_DROPDOWN_INDICATORS("dropdown-indicators");
+    LUMO_DROPDOWN_INDICATORS("dropdown-indicators"),
+    TERTIARY("tertiary"),
+    ICON("icon"),


Not a base style variant, keep the Lumo version.

It looks like it is there in the base button styles like with the Lumo version.

No [theme~='icon'] here: https://github.com/vaadin/web-components/blob/main/packages/button/src/styles/vaadin-button-base-styles.js

I meant the specific menu bar button in https://github.com/vaadin/web-components/blob/main/packages/menu-bar/src/styles/vaadin-menu-bar-button-base-styles.js#L31

Oh, right, thanks for the heads up. I don't think I’ve noticed that. I’d say we should remove the icon variant from that selector.

Removed it from this PR.

I made at least a note to myself to update that selector during beta.

...dered-layout-flow/src/main/java/com/vaadin/flow/component/orderedlayout/ScrollerVariant.java

jouni · 2025-10-14T08:34:43Z

...radio-button-flow/src/main/java/com/vaadin/flow/component/radiobutton/RadioGroupVariant.java

+    /**
+     * @deprecated Use {@link #VERTICAL} instead.
+     */
+    @Deprecated(since = "25.0", forRemoval = true)
+    LUMO_VERTICAL("vertical"),
+    /**
+     * @deprecated Use {@link #HELPER_ABOVE_FIELD} instead.
+     */
+    @Deprecated(since = "25.0", forRemoval = true)
+    LUMO_HELPER_ABOVE_FIELD("helper-above-field"),
+    VERTICAL("vertical"),


Should be the same as Checkbox Group, that the base variant is horizontal, but Lumo has the opposite (default is horizontal and the variant is vertical).

Fixed it along with the uses in the unit tests.

Looks a bit weird IMO, as HORIZONTAL doesn't do anything for Lumo, same as VERTICAL doesn't do anything in base / Aura. Would look cleaner if we'd just have both HORIZONTAL and VERTICAL.

Yeah, that sounds okay to me, even if VERTICAL is basically a no-op in base styles and Aura (and same for HORIZONTAL in Lumo).

Starts to sound like an orientation property more than a theme variant, though.

Updated the PR to include both horizontal and vertical for radio button group and checkbox group variants.

ugur-vaadin · 2025-10-14T16:44:18Z

The failing test on CI (GridProDetachAttachIT.attachAndDetach_noClientErrors) is unrelated and is also present on main.

DiegoCardoso · 2025-10-15T06:51:35Z

...ow-parent/vaadin-tabs-flow/src/main/java/com/vaadin/flow/component/tabs/TabSheetVariant.java

+     */
+    @Deprecated(since = "25.0", forRemoval = true)
+    LUMO_NO_PADDING("no-padding"),
+    NO_BORDER("no-border"),


no-border is basically a no-op in Lumo since it doesn't have a border.

I noticed the same. However maybe it's better to keep this as is for simplicity. Since Lumo doesn't have a border, it's also unlikely that you would try to use it there, or expect it to do anything?

Yeah, not a problem IMO, just wanted to point it out to confirm the agreement in such cases.

Yeah, would make sense to change the default in Lumo, but probably not worth the breaking change for users.

sissbruecker · 2025-10-14T13:01:52Z

...plit-layout-flow/src/main/java/com/vaadin/flow/component/splitlayout/SplitLayoutVariant.java

 */
 public enum SplitLayoutVariant implements ThemeVariant {
-    LUMO_SMALL("small"), LUMO_MINIMAL("minimal");
+    LUMO_SMALL("small"), LUMO_MINIMAL("minimal"), SMALL("small");


Missing Lumo deprecation?

Added the missing annotation.

sissbruecker · 2025-10-15T07:28:02Z

...nt/vaadin-avatar-flow/src/main/java/com/vaadin/flow/component/avatar/AvatarGroupVariant.java

The PR tags #8126 as fixed, however it's still missing the Aura specific variants. I was assuming those would come in a follow-up PR?

I could update it as "part of". I tagged it so because it seemed like the scope of the issue was reduced to base variants (possibly temporarily) in the comments.

We need to add something for Aura at some point, so since we have no other ticket for that I think we should keep this one.

I'm also still a bit confused since we discussed to use class names instead of theme variants for Aura at some point. But that makes it rather inconsistent with the base variants being a theme variant, and Aura variants being a class.

Updated the PR tag as "part of".

@sissbruecker: the only classnames in Aura at the moment are .aura-surface and .aura-surface-solid, which are general purpose for any element, not just our components. So it doesn't make sense to have those use the theme attribute (because of React mainly).

sissbruecker · 2025-10-15T07:31:11Z

...d-flow-parent/vaadin-grid-flow/src/main/java/com/vaadin/flow/component/grid/GridVariant.java

    LUMO_NO_ROW_BORDERS("no-row-borders"),
    LUMO_COLUMN_BORDERS("column-borders"),


It looks like Aura also supports these, but base styles do not. Should there be separate prefixed variants for Aura, or should we have this as a base variant?

Maybe more of a question for @jouni

Base styles leaves this as a responsibility of a theme, to decide what the default border configuration is (whether to show column and row borders or not). And then it’s naturally also a theme’s responsibility to offer any variants that allow to deviate from those defaults easily per component.

I don't want to force all themes to implement grid borders the same way by forcing them to implement those base variants.

So it seems we’ll have these ones for both Lumo and Aura.

A similar case could be made about row stripes, but it felt a bit more natural to force that default than the borders. Well, maybe the same case can be made about almost all variants. I suppose I’m just struggling to define a clear guideline how we decide what goes to base styles and what is left for themes. Suggestions welcome! Ping @rolfsmeds.

Well, it is arguably a bit late to make major changes, but the more I think about it, the more it feels like base styles should have as few variants as possible, like things that should maybe not be theme variants at all (like orientation) and a few really obvious ones.

jouni

Some ambiguity regarding what is a base style variant, but that’s something I think we can still fine tune later.

yuriy-fix · 2025-10-16T07:54:55Z

Decision: No base variants should be exposed, all variants should have theme prefixes (those that are present in both themes should be duplicated)

sonarqubecloud · 2025-10-17T15:32:21Z

Quality Gate passed

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

knoobie · 2025-10-17T17:19:21Z

Decision: No base variants should be exposed, all variants should have theme prefixes (those that are present in both themes should be duplicated)

Is the reasoning for this decision public?

rolfsmeds · 2025-10-17T18:04:06Z

Is the reasoning for this decision public?

No, it's a super secret strategic business decision 😁

Jokes aside, it's primarily that variants implemented in base styles are available in all themes, so duplicating them would be kind of pointless.

We initially considered having unprefixed variants of base variants in the *Variant enums, but 1) we already have the LUMO prefixed ones and don't want to deprecate them, 2) We figured autocomplete in IDEs would work better without them, 3) We might want to move theme-specific variants to the theme classes in the future (and then where would base variants go?), and 4) base styles are not expected to be used as-is, but as the foundation of custom themes which would provide their own variants enums.

knoobie · 2025-10-17T19:28:18Z

Understandable reasoning! I personally was hoping for an universal "ButtonVariant.PRIMARY" enum that just works (1) regardless of which theme I use (lumo, aura or something else) this feels more naturally instead of remembering (always adding AURA_) in front of all values. (AI is probably getting this wrong as well.. half joking)

Yes, that leaves us with the problem that either theme specific variants have to be prefixed or they just don't work on all themes. I'm not sure how many theme-specific variants there are... So I would just say: no prefix and just add java doc information if it does not apply to all themes if you don't want to create theme specific enum classes

(1) I know it already works like this with LUMO_PRIMARY and AURA_PRIMARY cause both map to primary on the client.

Edit: RIP my hope for deprecated LUMO-Variants 🤭

ugur-vaadin requested review from DiegoCardoso, jouni and web-padawan October 13, 2025 13:19

ugur-vaadin marked this pull request as ready for review October 13, 2025 13:19

jouni requested changes Oct 14, 2025

View reviewed changes

ugur-vaadin force-pushed the feat-add-base-variants branch from c1ae768 to 9727063 Compare October 14, 2025 10:38

sissbruecker self-requested a review October 14, 2025 12:11

ugur-vaadin force-pushed the feat-add-base-variants branch from f11629d to bb5fdb9 Compare October 14, 2025 16:43

DiegoCardoso reviewed Oct 15, 2025

View reviewed changes

sissbruecker reviewed Oct 15, 2025

View reviewed changes

ugur-vaadin force-pushed the feat-add-base-variants branch from 640ed49 to 3440633 Compare October 15, 2025 10:05

jouni approved these changes Oct 15, 2025

View reviewed changes

sissbruecker mentioned this pull request Oct 15, 2025

[avatar-group] Lumo theme should support reverse theme variant vaadin/web-components#10330

Open

ugur-vaadin marked this pull request as draft October 16, 2025 08:01

ugur-vaadin added 11 commits October 17, 2025 13:37

feat: add base variants

e8347ed

test: update tests to use base variants

2d57c90

feat: update base variants based on web component styles

995eac5

fix: fix compilation errors and cleanup

591a7bf

fix: fix compilation

508934e

fix: fix compilation and remove duplicate tests

9e915e8

fix: update incorrect variants

3527ed8

feat: use both horizontal and vertical in group variants

1aaa7cc

feat: add primary variant and deprecate lumo version

73e8be3

refactor: remove icon base variant

e358d77

refactor: add missing deprecation

32c7a49

ugur-vaadin force-pushed the feat-add-base-variants branch from 3440633 to 32c7a49 Compare October 17, 2025 14:44

feat: remove base variants and add aura variants

83ad937

ugur-vaadin added 2 commits October 17, 2025 17:49

feat: add aura variants for grid and gridpro

9f8b732

refactor: revert changes and cleanup

2d65214

ugur-vaadin changed the title ~~feat: add base variants~~ feat: add Aura variants Oct 17, 2025

fix: remove variants instead of adding

8a8be2f

ugur-vaadin marked this pull request as ready for review October 17, 2025 16:24

ugur-vaadin requested review from DiegoCardoso, jouni and sissbruecker October 17, 2025 16:25

		LUMO_NO_ROW_BORDERS("no-row-borders"),
		LUMO_COLUMN_BORDERS("column-borders"),

feat: add Aura variants #8145

Are you sure you want to change the base?

feat: add Aura variants #8145

Uh oh!

Conversation

ugur-vaadin commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ugur-vaadin commented Oct 14, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jouni Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jouni Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jouni left a comment

Choose a reason for hiding this comment

Uh oh!

ugur-vaadin commented Oct 10, 2025 •

edited

Loading

jouni Oct 15, 2025 •

edited

Loading

jouni Oct 15, 2025 •

edited

Loading

rolfsmeds commented Oct 17, 2025 •

edited

Loading

knoobie commented Oct 17, 2025 •

edited

Loading