Skip to content

Commit e0670bc

Browse files
web-padawanweb-padawan
authored
feat: add Aura theme styles and visual tests for badge component (#11133)
1 parent ce4f8c7 commit e0670bc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+267
-133
lines changed

‎dev/aura.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,15 @@
1515
window.Vaadin ||= {};
1616
window.Vaadin.featureFlags ||= {};
1717
window.Vaadin.featureFlags.masterDetailLayoutComponent = true;
18+
window.Vaadin.featureFlags.badgeComponent = true;
1819
</script>
1920
<script type="module">
2021
import './aura/aura-theme-editor.js';
2122
import './aura/components-view.js';
2223
import './aura/dashboard-view.js';
2324
import '@vaadin/app-layout';
2425
import '@vaadin/app-layout/src/vaadin-drawer-toggle.js';
26+
import '@vaadin/badge';
2527
import '@vaadin/icons';
2628
import '@vaadin/item';
2729

@@ -81,7 +83,7 @@
8183
<vaadin-side-nav-item path="" data-view-name="dashboard-view">
8284
<vaadin-icon src="./assets/lucide-icons/layout-panel-left.svg" slot="prefix"></vaadin-icon>
8385
Overview
84-
<span class="aura-badge aura-accent-color" slot="suffix" aria-label="(2 new items)">2</span>
86+
<vaadin-badge slot="suffix" number="2" aria-label="(2 new items)"></vaadin-badge>
8587
</vaadin-side-nav-item>
8688

8789
<vaadin-side-nav-item>

‎dev/aura/badge.css‎

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,3 @@
1-
.aura-badge {
2-
display: inline-flex;
3-
align-items: center;
4-
justify-content: center;
5-
gap: 0.25em;
6-
font-size: var(--aura-font-size-s);
7-
font-weight: var(--aura-font-weight-medium);
8-
height: calc(1lh - 2px);
9-
border: 1px solid var(--aura-accent-border-color);
10-
background: var(--aura-accent-surface) padding-box;
11-
background-clip: padding-box;
12-
color: var(--aura-accent-text-color);
13-
padding: 0 0.5em;
14-
border-radius: var(--vaadin-radius-l);
15-
min-width: calc(1lh - 1em - 2px);
16-
--vaadin-icon-size: 0.75lh;
17-
--aura-surface-level: 1;
18-
}
19-
20-
.aura-badge.aura-badge-filled {
21-
background: var(--aura-accent-color);
22-
color: var(--aura-accent-contrast-color);
23-
}
24-
251
/* Special case for filled badges within filled variants */
262
/* TODO is there a way to solve this without explicitly listing the special cases */
273
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'],
@@ -35,7 +11,7 @@ vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current],
3511
vaadin-multi-select-combo-box-item,
3612
vaadin-select-item[role]
3713
)[theme~='filled']:not([disabled], [aria-disabled='true']):hover {
38-
> .aura-badge-filled:not(
14+
> vaadin-badge[theme~='filled']:not(
3915
.aura-accent-red,
4016
.aura-accent-orange,
4117
.aura-accent-yellow,
@@ -49,18 +25,10 @@ vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current],
4925
}
5026
}
5127

52-
.aura-badge.aura-badge-point::before {
28+
vaadin-badge.aura-badge-point::before {
5329
content: '';
5430
width: 0.5em;
5531
height: 0.5em;
5632
border-radius: 50%;
5733
background: currentColor;
5834
}
59-
60-
.aura-badge:empty {
61-
padding: 0;
62-
width: 5px;
63-
height: 5px;
64-
position: absolute;
65-
inset-inline-end: 5px;
66-
}

‎dev/aura/colors.html‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,13 @@
1313
window.Vaadin = {};
1414
window.Vaadin.featureFlags = {};
1515
window.Vaadin.featureFlags.accessibleDisabledButtons = true;
16+
window.Vaadin.featureFlags.badgeComponent = true;
1617
</script>
1718
<script type="module">
1819
import './aura-scheme-control.js';
1920
import './aura-color-control.js';
2021
import './aura-number-control.js';
22+
import '@vaadin/badge';
2123
import '@vaadin/button';
2224
import '@vaadin/checkbox';
2325
import '@vaadin/checkbox-group';
@@ -52,15 +54,19 @@
5254
});
5355

5456
document.querySelector('#filled-badges').addEventListener('change', (e) => {
55-
document.querySelectorAll('.aura-badge').forEach((badge) => {
56-
badge.classList.toggle('aura-badge-filled', e.target.checked);
57+
document.querySelectorAll('vaadin-badge').forEach((badge) => {
58+
if (e.target.checked) {
59+
badge.setAttribute('theme', 'filled');
60+
} else {
61+
badge.removeAttribute('theme');
62+
}
5763
});
5864
});
5965

6066
document.querySelector('#colored-badges').addEventListener('change', (e) => {
6167
document.querySelectorAll(`.generate-variations`).forEach((section) => {
6268
accentColors.forEach((color, i) => {
63-
section.querySelectorAll(`:scope > :nth-child(${i + 1}) .aura-badge`).forEach((badge) => {
69+
section.querySelectorAll(`:scope > :nth-child(${i + 1}) vaadin-badge`).forEach((badge) => {
6470
badge.classList.toggle('aura-accent-' + color.toLowerCase(), e.target.checked);
6571
badge.textContent = e.target.checked ? color : 'Accent';
6672
});
@@ -69,7 +75,7 @@
6975
});
7076

7177
document.querySelector('#point-badges').addEventListener('change', (e) => {
72-
document.querySelectorAll('.aura-badge').forEach((badge) => {
78+
document.querySelectorAll('vaadin-badge').forEach((badge) => {
7379
badge.classList.toggle('aura-badge-point', e.target.checked);
7480
});
7581
});
@@ -235,32 +241,32 @@ <h3 class="heading">Accent Colors</h3>
235241
</vaadin-checkbox-group>
236242

237243
<section class="section">
238-
<span class="aura-badge aura-surface aura-accent-neutral">Neutral</span>
239-
<span class="aura-badge aura-surface aura-accent-color">Accent</span>
240-
<span class="aura-badge aura-surface aura-accent-red">Red</span>
241-
<span class="aura-badge aura-surface aura-accent-orange">Orange</span>
242-
<span class="aura-badge aura-surface aura-accent-yellow">Yellow</span>
243-
<span class="aura-badge aura-surface aura-accent-green">Green</span>
244-
<span class="aura-badge aura-surface aura-accent-blue">Blue</span>
245-
<span class="aura-badge aura-surface aura-accent-purple">Purple</span>
244+
<vaadin-badge class="aura-accent-neutral">Neutral</vaadin-badge>
245+
<vaadin-badge class="aura-accent-color">Accent</vaadin-badge>
246+
<vaadin-badge class="aura-accent-red">Red</vaadin-badge>
247+
<vaadin-badge class="aura-accent-orange">Orange</vaadin-badge>
248+
<vaadin-badge class="aura-accent-yellow">Yellow</vaadin-badge>
249+
<vaadin-badge class="aura-accent-green">Green</vaadin-badge>
250+
<vaadin-badge class="aura-accent-blue">Blue</vaadin-badge>
251+
<vaadin-badge class="aura-accent-purple">Purple</vaadin-badge>
246252
</section>
247253

248254
<section class="section generate-variations">
249255
<vaadin-button>
250256
Button
251-
<span class="aura-badge aura-surface aura-accent-color" slot="suffix">Accent</span>
257+
<vaadin-badge class="aura-accent-color" slot="suffix">Accent</vaadin-badge>
252258
</vaadin-button>
253259
</section>
254260

255261
<section class="section generate-variations">
256262
<vaadin-tabs>
257263
<vaadin-tab>
258264
Tab
259-
<span class="aura-badge aura-surface aura-accent-color">Accent</span>
265+
<vaadin-badge class="aura-accent-color">Accent</vaadin-badge>
260266
</vaadin-tab>
261267
<vaadin-tab>
262268
Tab
263-
<span class="aura-badge aura-surface aura-accent-color">Accent</span>
269+
<vaadin-badge class="aura-accent-color">Accent</vaadin-badge>
264270
</vaadin-tab>
265271
</vaadin-tabs>
266272
</section>
@@ -269,11 +275,11 @@ <h3 class="heading">Accent Colors</h3>
269275
<vaadin-side-nav>
270276
<vaadin-side-nav-item path="">
271277
Nav Item
272-
<span class="aura-badge aura-surface aura-accent-color" slot="suffix">Accent</span>
278+
<vaadin-badge class="aura-accent-color" slot="suffix">Accent</vaadin-badge>
273279
</vaadin-side-nav-item>
274280
<vaadin-side-nav-item path="foo">
275281
Nav Item
276-
<span class="aura-badge aura-surface aura-accent-color" slot="suffix">Accent</span>
282+
<vaadin-badge class="aura-accent-color" slot="suffix">Accent</vaadin-badge>
277283
</vaadin-side-nav-item>
278284
</vaadin-side-nav>
279285
</section>

0 commit comments

Comments
 (0)