Skip to content

Commit 8ab7f6b

Browse files
jounijouni
authored
feat: Aura theme for avatar, card, dialog, grid, notification (#10166)
1 parent c837499 commit 8ab7f6b

File tree

10 files changed

+415
-2
lines changed

10 files changed

+415
-2
lines changed

‎dev/aura.html‎

Lines changed: 188 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<title>Aura</title>
88
<link rel="stylesheet" href="../packages/aura/aura.css" />
99
<link rel="stylesheet" href="./aura/aura-view.css" />
10+
<link rel="stylesheet" href="./aura/badge.css" />
1011
<script type="module">
1112
window.Vaadin ||= {};
1213
window.Vaadin.featureFlags ||= {};
@@ -21,10 +22,14 @@
2122
import '@vaadin/app-layout';
2223
import '@vaadin/app-layout/src/vaadin-drawer-toggle.js';
2324
import '@vaadin/avatar';
25+
import '@vaadin/avatar-group';
26+
import '@vaadin/card';
2427
import '@vaadin/checkbox';
2528
import '@vaadin/checkbox-group';
2629
import '@vaadin/combo-box';
2730
import '@vaadin/date-time-picker';
31+
import '@vaadin/grid';
32+
import '@vaadin/grid/src/vaadin-grid-selection-column.js';
2833
import '@vaadin/icon';
2934
import '@vaadin/master-detail-layout';
3035
import '@vaadin/menu-bar';
@@ -40,6 +45,7 @@
4045
import '@vaadin/vertical-layout';
4146
import { html, render } from 'lit';
4247
import { Button } from '@vaadin/button';
48+
import { Notification } from '@vaadin/notification';
4349

4450
function clearLocalStorage() {
4551
for (let i = localStorage.length - 1; i >= 0; i--) {
@@ -68,6 +74,16 @@
6874
}
6975
});
7076

77+
const generateItems = (count) => {
78+
return Array.from({ length: count }, (_, i) => ({
79+
name: `First Lastname ${i + 1}`,
80+
email: `first.lastname${i + 1}@example.com`,
81+
address: `${i + 1} Main Street`,
82+
city: `City ${i + 1}`,
83+
country: `Country ${i + 1}`,
84+
}));
85+
};
86+
7187
function initComponentsView() {
7288
const view = document.querySelector('.components-view');
7389

@@ -153,6 +169,39 @@
153169
userColorIndex: 2,
154170
},
155171
];
172+
173+
// Notification
174+
view.querySelector('#showNotificationBtn').addEventListener('click', () => {
175+
const notification = Notification.show(
176+
html`<vaadin-card theme="horizontal footer-end no-frame">
177+
<vaadin-icon src="./assets/lucide-icons/messages-square.svg" slot="media"></vaadin-icon>
178+
<div slot="title">New Message from Olivia</div>
179+
<div>The AI chat UI is evolving with the integration of components…</div>
180+
<vaadin-button slot="footer">Show</vaadin-button>
181+
<vaadin-button slot="footer">Dismiss</vaadin-button>
182+
</vaadin-card>`,
183+
{ duration: 0, position: 'top-end' },
184+
);
185+
notification._overlayElement
186+
.querySelectorAll('vaadin-button')
187+
.forEach((button) => button.addEventListener('click', () => notification.close()));
188+
});
189+
190+
// Avatar Group
191+
view.querySelector('vaadin-avatar-group').items = [
192+
{ name: 'AA', colorIndex: 0 },
193+
{ name: 'BB', colorIndex: 1 },
194+
{ name: 'CC', colorIndex: 2 },
195+
{ name: 'DD', colorIndex: 3 },
196+
{ name: 'EE', colorIndex: 4 },
197+
{ name: 'FF', colorIndex: 5 },
198+
{ name: 'GG', colorIndex: 6 },
199+
{ name: 'HH', colorIndex: 7 },
200+
{ name: 'II', colorIndex: 8 },
201+
];
202+
203+
// Grid
204+
view.querySelector('vaadin-grid').items = generateItems(20);
156205
}
157206

158207
initComponentsView();
@@ -189,6 +238,34 @@
189238
.dashboard-section::part(detail) {
190239
flex-basis: 85%;
191240
}
241+
242+
/* TODO part of Aura? */
243+
hr {
244+
place-self: stretch;
245+
margin: var(--vaadin-gap-m) 0;
246+
border: 0;
247+
background: var(--vaadin-border-color-subtle);
248+
min-height: 1px;
249+
max-height: 1px;
250+
}
251+
252+
/* Considering these as built-in variants, but perhaps they should be another component like https://github.com/vaadin/web-components/issues/7958 */
253+
vaadin-card[theme~='no-frame'] {
254+
--vaadin-card-padding: 0px;
255+
--vaadin-card-background: transparent;
256+
}
257+
258+
vaadin-card[theme~='footer-end'] {
259+
--_footer: 0;
260+
grid-template-rows: repeat(var(--_content), auto) 1fr;
261+
}
262+
263+
vaadin-card[theme~='footer-end']::part(footer) {
264+
grid-column: -1;
265+
grid-row: 1 / span calc(var(--_header) + var(--_content));
266+
align-self: center;
267+
flex-direction: column;
268+
}
192269
</style>
193270
</head>
194271
<body>
@@ -205,6 +282,7 @@
205282
<vaadin-side-nav-item path="">
206283
<vaadin-icon src="./assets/lucide-icons/chart-column-big.svg" slot="prefix"></vaadin-icon>
207284
Dashboard
285+
<span theme="badge accent" slot="suffix" aria-label="(2 new items)">2</span>
208286
</vaadin-side-nav-item>
209287

210288
<vaadin-side-nav-item>
@@ -264,6 +342,7 @@ <h1>Dashboard</h1>
264342
<vaadin-side-nav-item path="#components">
265343
<vaadin-icon src="./assets/lucide-icons/home.svg" slot="prefix"></vaadin-icon>
266344
<span>Components</span>
345+
<span theme="badge accent" slot="suffix" aria-label="(2 new items)">2</span>
267346
</vaadin-side-nav-item>
268347
<vaadin-side-nav-item>
269348
<vaadin-icon src="./assets/lucide-icons/chart-column-big.svg" slot="prefix"></vaadin-icon>
@@ -288,6 +367,7 @@ <h1>Dashboard</h1>
288367
><vaadin-side-nav-item>
289368
<vaadin-icon src="./assets/lucide-icons/messages-square.svg" slot="prefix"></vaadin-icon>
290369
<span>Support</span>
370+
<span theme="badge green" slot="suffix">Online</span>
291371
</vaadin-side-nav-item>
292372
</vaadin-side-nav>
293373
</vaadin-scroller>
@@ -360,6 +440,13 @@ <h1>Components</h1>
360440
padding: 0;
361441
}
362442

443+
.components-view .badges {
444+
display: flex;
445+
flex-wrap: wrap;
446+
justify-content: center;
447+
gap: var(--vaadin-gap-s);
448+
}
449+
363450
.components-view .sizes {
364451
display: flex;
365452
flex-direction: column;
@@ -380,6 +467,94 @@ <h1>Components</h1>
380467
<vaadin-button theme="tertiary">Tertiary</vaadin-button>
381468
</div>
382469

470+
<div class="component" theme="surface">
471+
<div class="flex justify-center">
472+
<vaadin-button id="showNotificationBtn">
473+
<vaadin-icon src="./assets/lucide-icons/layers.svg" slot="prefix"></vaadin-icon>
474+
Show Notification
475+
</vaadin-button>
476+
</div>
477+
</div>
478+
479+
<div class="component wide tall" theme="surface">
480+
481+
<div class="badges">
482+
<span theme="badge">Default</span>
483+
<span theme="badge accent">Accent</span>
484+
<span theme="badge green">Green</span>
485+
<span theme="badge blue">Blue</span>
486+
<span theme="badge purple">Purple</span>
487+
<span theme="badge red">Red</span>
488+
<span theme="badge orange">Orange</span>
489+
<span theme="badge yellow">Yellow</span>
490+
</div>
491+
492+
<div class="badges">
493+
<span theme="filled badge">Default</span>
494+
<span theme="filled badge accent">Accent</span>
495+
<span theme="filled badge green">Green</span>
496+
<span theme="filled badge blue">Blue</span>
497+
<span theme="filled badge purple">Purple</span>
498+
<span theme="filled badge red">Red</span>
499+
<span theme="filled badge orange">Orange</span>
500+
<span theme="filled badge yellow">Yellow</span>
501+
</div>
502+
503+
<div class="badges">
504+
<span theme="badge">
505+
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
506+
</span>
507+
<span theme="badge accent">
508+
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
509+
</span>
510+
<span theme="badge green">
511+
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
512+
</span>
513+
<span theme="badge blue">
514+
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
515+
</span>
516+
<span theme="badge purple">
517+
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
518+
</span>
519+
<span theme="badge red">
520+
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
521+
</span>
522+
<span theme="badge orange">
523+
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
524+
</span>
525+
<span theme="badge yellow">
526+
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
527+
</span>
528+
</div>
529+
530+
<div class="badges">
531+
<span theme="badge filled">
532+
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
533+
</span>
534+
<span theme="badge filled accent">
535+
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
536+
</span>
537+
<span theme="badge filled green">
538+
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
539+
</span>
540+
<span theme="badge filled blue">
541+
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
542+
</span>
543+
<span theme="badge filled purple">
544+
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
545+
</span>
546+
<span theme="badge filled red">
547+
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
548+
</span>
549+
<span theme="badge filled orange">
550+
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
551+
</span>
552+
<span theme="badge filled yellow">
553+
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
554+
</span>
555+
</div>
556+
</div>
557+
383558
<div class="component" theme="surface">
384559
<vaadin-radio-group label="Options">
385560
<vaadin-radio-button label="Option 1" value="1" checked></vaadin-radio-button>
@@ -434,6 +609,18 @@ <h6>Heading</h6>
434609
<vaadin-select label="Options"></vaadin-select>
435610
</div>
436611

612+
<div class="component widest tall no-padding" theme="surface">
613+
<vaadin-grid theme="no-border">
614+
<vaadin-grid-selection-column></vaadin-grid-selection-column>
615+
<vaadin-grid-column path="name"></vaadin-grid-column>
616+
<vaadin-grid-column path="email"></vaadin-grid-column>
617+
</vaadin-grid>
618+
</div>
619+
620+
<div class="component" theme="surface">
621+
<vaadin-avatar-group></vaadin-avatar-group>
622+
</div>
623+
437624
<div class="component tall wide column" theme="surface">
438625
<vaadin-message-list></vaadin-message-list>
439626
<vaadin-message-input></vaadin-message-input>
@@ -501,7 +688,7 @@ <h3>Edit Theme</h3>
501688
></aura-number-control>
502689
<aura-font-family-control label="--aura-font-family"></aura-font-family-control>
503690
<hr />
504-
<vaadin-button theme="" id="resetAll">
691+
<vaadin-button id="resetAll">
505692
Reset All
506693
<vaadin-icon icon="lucide:rotate-ccw"></vaadin-icon>
507694
</vaadin-button>

‎dev/aura/badge.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
[theme~='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(--_bg);
10+
--_bg: color-mix(in srgb, var(--color) 12%, transparent);
11+
background: var(--aura-surface-solid);
12+
padding: 0 0.5em;
13+
border-radius: var(--vaadin-radius-l);
14+
min-width: calc(1lh - 1em - 2px);
15+
--color: var(--vaadin-color);
16+
--text-opacity: 70%;
17+
color: color-mix(in xyz, var(--color) calc(var(--text-opacity) - 15% * var(--aura-contrast)), var(--vaadin-color));
18+
--vaadin-icon-size: 0.75lh;
19+
}
20+
21+
[theme~='badge'][theme~='accent'] {
22+
--color: var(--aura-accent-color);
23+
color: var(--aura-accent-text);
24+
background: var(--_bg);
25+
}
26+
27+
[theme~='badge'][theme~='blue'] {
28+
--color: var(--aura-blue);
29+
color: var(--aura-blue-text);
30+
background: var(--_bg);
31+
}
32+
33+
[theme~='badge'][theme~='red'] {
34+
--color: var(--aura-red);
35+
color: var(--aura-red-text);
36+
background: var(--_bg);
37+
}
38+
39+
[theme~='badge'][theme~='green'] {
40+
--color: var(--aura-green);
41+
color: var(--aura-green-text);
42+
background: var(--_bg);
43+
}
44+
45+
[theme~='badge'][theme~='yellow'] {
46+
--color: var(--aura-yellow);
47+
color: var(--aura-yellow-text);
48+
background: var(--_bg);
49+
}
50+
51+
[theme~='badge'][theme~='orange'] {
52+
--color: var(--aura-orange);
53+
color: var(--aura-orange-text);
54+
background: var(--_bg);
55+
}
56+
57+
[theme~='badge'][theme~='purple'] {
58+
--color: var(--aura-purple);
59+
color: var(--aura-purple-text);
60+
background: var(--_bg);
61+
}
62+
63+
[theme~='badge'][theme~='filled'] {
64+
background: var(--color);
65+
color: oklch(from var(--color) clamp(0, (0.62 - l) * 1000, 1) 0 0 / clamp(0.8, (0.62 - l) * 1000, 1));
66+
}

‎dev/card.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@
136136
</script>
137137

138138
<style>
139-
html:has([theme~='elevated']) {
139+
html:has([theme~='elevated']):not(:has(link[href*='aura'])) {
140140
background-image: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04));
141141
}
142142

‎packages/aura/aura.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,18 @@
77
@import './src/typography.css';
88

99
@import './src/components/app-layout.css';
10+
@import './src/components/avatar.css';
1011
@import './src/components/button.css';
12+
@import './src/components/card.css';
1113
@import './src/components/checkbox-radio.css';
1214
@import './src/components/date-picker.css';
15+
@import './src/components/dialog.css';
16+
@import './src/components/grid.css';
1317
@import './src/components/input-container.css';
1418
@import './src/components/master-detail-layout.css';
1519
@import './src/components/message-input.css';
1620
@import './src/components/multi-select-combo-box.css';
21+
@import './src/components/notification.css';
1722
@import './src/components/overlay.css';
1823
@import './src/components/select.css';
1924
@import './src/components/side-nav.css';

‎packages/aura/src/components/avatar.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
:where(:root, :host) {
2+
--vaadin-avatar-border-color: var(--vaadin-border-color-subtle);
3+
--vaadin-avatar-background: var(--vaadin-background-container);
4+
--vaadin-avatar-font-weight: var(--aura-font-weight-medium);
5+
--vaadin-avatar-font-size: var(--aura-font-size-m);
6+
}
7+
8+
vaadin-avatar:not([img]) {
9+
--_shade: color-mix(in srgb, var(--vaadin-border-color) 20%, transparent);
10+
background-image: linear-gradient(
11+
light-dark(transparent, var(--_shade)),
12+
transparent 50%,
13+
light-dark(var(--_shade), transparent)
14+
);
15+
}

0 commit comments

Comments
 (0)