Skip to content

Commit abc5119

Browse files
web-padawanweb-padawan
authored
experiment: add button base styles and visual tests (#9171)
1 parent a4dba5a commit abc5119

29 files changed

+252
-12
lines changed

‎dev/button.html‎

Lines changed: 74 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -7,16 +7,85 @@
77
<title>Button</title>
88
<script type="module" src="./common.js"></script>
99

10+
<script type="module">
11+
window.Vaadin = {};
12+
window.Vaadin.featureFlags = {};
13+
window.Vaadin.featureFlags.accessibleDisabledButtons = true;
14+
</script>
1015
<script type="module">
1116
import '@vaadin/button';
17+
import '@vaadin/icon';
18+
import '@vaadin/icons';
1219
import '@vaadin/tooltip';
20+
import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
1321
</script>
1422
</head>
1523

1624
<body>
17-
<vaadin-button>
18-
Edit
19-
<vaadin-tooltip slot="tooltip" text="Click to edit"></vaadin-tooltip>
20-
</vaadin-button>
25+
<section>
26+
<h2>Label & Icon</h2>
27+
<vaadin-button>Reply</vaadin-button>
28+
<vaadin-button>
29+
<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
30+
Reply
31+
</vaadin-button>
32+
<vaadin-button aria-label="Reply">
33+
<vaadin-icon icon="vaadin:reply"></vaadin-icon>
34+
<vaadin-tooltip slot="tooltip" text="Reply"></vaadin-tooltip>
35+
</vaadin-button>
36+
</section>
37+
38+
<section>
39+
<h2>Primary</h2>
40+
<vaadin-button theme="primary">Reply</vaadin-button>
41+
<vaadin-button theme="primary">
42+
<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
43+
Reply
44+
</vaadin-button>
45+
<vaadin-button theme="primary" aria-label="Reply">
46+
<vaadin-icon icon="vaadin:reply"></vaadin-icon>
47+
<vaadin-tooltip slot="tooltip" text="Reply"></vaadin-tooltip>
48+
</vaadin-button>
49+
</section>
50+
51+
<section>
52+
<h2>Tertiary</h2>
53+
<vaadin-button theme="tertiary">Reply</vaadin-button>
54+
<vaadin-button theme="tertiary">
55+
<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
56+
Reply
57+
</vaadin-button>
58+
<vaadin-button theme="tertiary" aria-label="Reply">
59+
<vaadin-icon icon="vaadin:reply"></vaadin-icon>
60+
<vaadin-tooltip slot="tooltip" text="Reply"></vaadin-tooltip>
61+
</vaadin-button>
62+
</section>
63+
64+
<section>
65+
<h2>Disabled</h2>
66+
<vaadin-button theme="primary" disabled>Primary</vaadin-button>
67+
<vaadin-button disabled>Secondary</vaadin-button>
68+
<vaadin-button theme="tertiary" disabled>Tertiary</vaadin-button>
69+
</section>
70+
71+
<section>
72+
<h2>Custom Layout</h2>
73+
<vaadin-button style="width: 150px">Reply</vaadin-button>
74+
<vaadin-button style="width: 150px">
75+
<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
76+
Reply
77+
</vaadin-button>
78+
<vaadin-button style="width: 150px" aria-label="Reply">
79+
<vaadin-icon icon="vaadin:reply"></vaadin-icon>
80+
</vaadin-button>
81+
<vaadin-button style="width: 150px; justify-content: start">
82+
<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
83+
Reply
84+
</vaadin-button>
85+
<vaadin-button style="flex-direction: column">
86+
<vaadin-icon icon="vaadin:reply"></vaadin-icon>
87+
Reply
88+
</vaadin-button>
89+
</section>
2190
</body>
2291
</html>

‎packages/app-layout/src/vaadin-drawer-toggle.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
66
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7+
import { buttonStyles } from '@vaadin/button/src/vaadin-button-core-styles.js';
78
import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
8-
import { buttonStyles } from '@vaadin/button/src/vaadin-button-styles.js';
99
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
1010
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
1111
import { isEmptyTextNode } from '@vaadin/component-base/src/dom-utils.js';

‎packages/app-layout/src/vaadin-lit-drawer-toggle.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
66
import { html, LitElement } from 'lit';
7+
import { buttonStyles } from '@vaadin/button/src/vaadin-button-core-styles.js';
78
import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
8-
import { buttonStyles } from '@vaadin/button/src/vaadin-button-styles.js';
99
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
1010
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
1111
import { isEmptyTextNode } from '@vaadin/component-base/src/dom-utils.js';

‎packages/button/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
"type": "module",
2222
"files": [
2323
"src",
24+
"!src/vaadin-button-base-styles.d.ts",
25+
"!src/vaadin-button-base-styles.js",
2426
"theme",
2527
"vaadin-*.d.ts",
2628
"vaadin-*.js",

‎packages/button/src/vaadin-button-styles.d.ts‎ renamed to ‎packages/button/src/vaadin-button-base-styles.d.ts‎

File renamed without changes.

‎packages/button/src/vaadin-button-base-styles.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2017 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import '@vaadin/component-base/src/style-props.js';
7+
import { css } from 'lit';
8+
9+
export const buttonStyles = css`
10+
@layer base {
11+
:host {
12+
display: inline-flex;
13+
align-items: center;
14+
justify-content: center;
15+
text-align: center;
16+
gap: var(--vaadin-button-gap, 0 var(--_vaadin-gap-container-inline));
17+
white-space: nowrap;
18+
-webkit-tap-highlight-color: transparent;
19+
-webkit-user-select: none;
20+
user-select: none;
21+
cursor: pointer;
22+
box-sizing: border-box;
23+
vertical-align: middle;
24+
flex-shrink: 0;
25+
height: var(--vaadin-button-height, auto);
26+
margin: var(--vaadin-button-margin, 0);
27+
padding: var(--vaadin-button-padding, var(--_vaadin-padding-container));
28+
font-family: var(--vaadin-button-font-family, inherit);
29+
font-size: var(--vaadin-button-font-size, inherit);
30+
line-height: var(--vaadin-button-line-height, inherit);
31+
font-weight: var(--vaadin-button-font-weight, 500);
32+
color: var(--vaadin-button-text-color, var(--_vaadin-color-strong));
33+
background: var(--vaadin-button-background, var(--_vaadin-background-container));
34+
background-origin: border-box;
35+
border: var(
36+
--vaadin-button-border,
37+
var(--vaadin-button-border-width, 1px) solid var(--vaadin-button-border-color, var(--_vaadin-border-color))
38+
);
39+
border-radius: var(--vaadin-button-border-radius, var(--_vaadin-radius-m));
40+
touch-action: manipulation;
41+
}
42+
43+
:host([hidden]) {
44+
display: none !important;
45+
}
46+
47+
.vaadin-button-container,
48+
[part='prefix'],
49+
[part='suffix'],
50+
[part='label'] {
51+
display: contents;
52+
}
53+
54+
:host([focus-ring]) {
55+
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
56+
outline-offset: 1px;
57+
}
58+
59+
:host([theme~='primary']) {
60+
--vaadin-button-background: var(--_vaadin-color-strong);
61+
--vaadin-button-text-color: var(--_vaadin-background);
62+
--vaadin-button-border-color: transparent;
63+
}
64+
65+
:host([theme~='tertiary']) {
66+
--vaadin-button-text-color: var(--_vaadin-button-text-color);
67+
--vaadin-button-background: transparent;
68+
--vaadin-button-border-color: transparent;
69+
}
70+
71+
:host([disabled]) {
72+
pointer-events: var(--_vaadin-button-disabled-pointer-events, none);
73+
cursor: not-allowed;
74+
opacity: 0.5;
75+
}
76+
77+
:host([disabled][theme~='primary']) {
78+
--vaadin-button-text-color: var(--_vaadin-background-container-strong);
79+
--vaadin-button-background: var(--_vaadin-color-subtle);
80+
}
81+
82+
@media (forced-colors: active) {
83+
:host {
84+
--vaadin-button-border-width: 1px;
85+
--vaadin-button-background: ButtonFace;
86+
--vaadin-button-text-color: ButtonText;
87+
}
88+
89+
:host([theme~='primary']) {
90+
forced-color-adjust: none;
91+
--vaadin-button-background: CanvasText;
92+
--vaadin-button-text-color: Canvas;
93+
--vaadin-icon-color: Canvas;
94+
}
95+
96+
::slotted(*) {
97+
forced-color-adjust: auto;
98+
}
99+
100+
:host([disabled]) {
101+
--vaadin-button-background: transparent !important;
102+
--vaadin-button-border-color: GrayText !important;
103+
--vaadin-button-text-color: GrayText !important;
104+
opacity: 1;
105+
}
106+
}
107+
}
108+
`;

‎packages/button/src/vaadin-button-core-styles.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2017 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import type { CSSResult } from 'lit';
7+
8+
export const buttonStyles: CSSResult;

‎packages/button/src/vaadin-button-styles.js‎ renamed to ‎packages/button/src/vaadin-button-core-styles.js‎

File renamed without changes.

‎packages/button/src/vaadin-button.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
99
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
1010
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
1111
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12+
import { buttonStyles } from './vaadin-button-core-styles.js';
1213
import { ButtonMixin } from './vaadin-button-mixin.js';
13-
import { buttonStyles } from './vaadin-button-styles.js';
1414

1515
registerStyles('vaadin-button', buttonStyles, { moduleId: 'vaadin-button-styles' });
1616

‎packages/button/src/vaadin-lit-button.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
99
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
1010
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
1111
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12+
import { buttonStyles } from './vaadin-button-core-styles.js';
1213
import { ButtonMixin } from './vaadin-button-mixin.js';
13-
import { buttonStyles } from './vaadin-button-styles.js';
1414

1515
/**
1616
* LitElement based version of `<vaadin-button>` web component.

0 commit comments

Comments
 (0)