feat: add aura-button class to style anchors as buttons#11771
Conversation
Lets plain elements (typically <a>) take on the vaadin-button look in the Aura theme by adding the .aura-button class, with theme=\"primary\" and theme=\"tertiary\" variants. Useful when a link needs button styling without losing native anchor behavior (Cmd-click, right-click, etc.). Minimal version of #1803"
|
@jouni I created a PR with "Kalle" for Aura based on your latest idea in the issue. When waiting for Lumo version, I'm not sure if the "specificatin is right". Now people will need to figure out what theme they are using. Classname "vaadin-button" or "theme variant" with implenetations in both themes? I'm not a big fan of that Vaadin specific thing that is from my point of view just a weird way to do css class names, but at least it would be unified to other component APIs. |
|
|
I was about to take the theme varian route, but apparently Anchor on the Java components would need changes as well 🤷♂️ (no theme variants currently for Anchor) |
| look like a vaadin-button. The corresponding rules for vaadin-button itself are | ||
| applied inside its shadow root via the base button styles. See issue #1803. | ||
| */ | ||
| .aura-button { |
There was a problem hiding this comment.
thought: this would in theory make it possible to slap .aura-button to any element, which we shouldn't encourage. Should we instead explicitly use a.aura-button to limit this to links?
| font-size: var(--vaadin-button-font-size, inherit); | ||
| line-height: var(--vaadin-button-line-height, inherit); | ||
| font-weight: var(--vaadin-button-font-weight, 500); | ||
| color: var(--vaadin-button-text-color, var(--vaadin-text-color)); |
There was a problem hiding this comment.
note: these properties seem to be copied as is from button base styles. This is problematic as e.g. color is overridden below to var(--vaadin-button-text-color, var(--aura-accent-text-color)) - no need to duplicate it here, same for background. We need to only list what's actually needed.
2 participants
Lets plain elements (typically ) take on the vaadin-button look in the Aura theme by adding the .aura-button class, with theme="primary" and theme="tertiary" variants. Useful when a link needs button styling without losing native anchor behavior (Cmd-click, right-click, etc.).
Minimal version of #1803