Skip to content

Commit 4372a88

Browse files
jounijouni
authored
experiment: add avatar and avatar-group base styles and visual tests (#9298)
1 parent bd77a30 commit 4372a88

38 files changed

+423
-48
lines changed

‎dev/avatar-group.html‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,49 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Avatar group</title>
7+
<title>Avatar Group</title>
88
<script type="module" src="./common.js"></script>
99

1010
<script type="module">
11-
import '@vaadin/avatar-group';
11+
import '@vaadin/avatar-group/src/vaadin-avatar-group.js';
1212

13-
const group = document.querySelector('vaadin-avatar-group');
14-
group.items = [{ name: 'AA' }, { name: 'BB' }, { name: 'CC' }];
13+
const groups = document.querySelectorAll('vaadin-avatar-group');
14+
groups.forEach(group => group.items = [{ name: 'AA' }, { name: 'BB' }, { name: 'CC' }]);
1515

1616
document.querySelector('#add').addEventListener('click', () => {
1717
const alphabet = 'abcdefghijklmnopqrstuvwxyz';
1818
const randomChar = alphabet[Math.floor(Math.random() * alphabet.length)];
19-
group.items = [...group.items, { name: randomChar.toUpperCase().repeat(2) }];
19+
groups.forEach(group => group.items = [...group.items, { name: randomChar.toUpperCase().repeat(2) }]);
2020
});
2121

2222
document.querySelector('#remove').addEventListener('click', () => {
23-
const items = [...group.items].splice(0, group.items.length - 1);
24-
group.items = items;
23+
groups.forEach(group => group.items = [...group.items].splice(0, group.items.length - 1));
2524
});
2625
</script>
2726
</head>
2827

2928
<body>
30-
<vaadin-avatar-group></vaadin-avatar-group>
31-
3229
<p>
3330
<button id="add">Add item</button>
3431
<button id="remove">Remove item</button>
3532
</p>
33+
34+
<section>
35+
<h2>Default Stacking</h2>
36+
<vaadin-avatar-group></vaadin-avatar-group>
37+
</section>
38+
<section>
39+
<h2>Reverse Stacking</h2>
40+
<vaadin-avatar-group theme="reverse"></vaadin-avatar-group>
41+
</section>
42+
43+
<section>
44+
<h2>Max Items Visible</h2>
45+
<vaadin-avatar-group max-items-visible="5"></vaadin-avatar-group>
46+
</section>
47+
3648
</body>
3749
</html>

‎dev/avatar.html‎

Lines changed: 33 additions & 6 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" />
@@ -8,14 +8,41 @@
88
<script type="module" src="./common.js"></script>
99

1010
<script type="module">
11-
import '@vaadin/avatar';
12-
import '@vaadin/tooltip';
11+
import '@vaadin/avatar/src/vaadin-avatar.js';
12+
import '@vaadin/tooltip/src/vaadin-tooltip.js';
1313
</script>
1414
</head>
1515

1616
<body>
17-
<vaadin-avatar abbr="AB"></vaadin-avatar>
18-
<vaadin-avatar name="Aria Bailey"></vaadin-avatar>
19-
<vaadin-avatar name="Aria Bailey" with-tooltip></vaadin-avatar>
17+
<section>
18+
<h2>Default Icon</h2>
19+
<vaadin-avatar></vaadin-avatar>
20+
</section>
21+
<section>
22+
<h2>Explicit Abbreviation</h2>
23+
<vaadin-avatar abbr="AB"></vaadin-avatar>
24+
</section>
25+
<section>
26+
<h2>Abbreviation without/with Tooltip</h2>
27+
<vaadin-avatar name="Aria Bailey"></vaadin-avatar>
28+
<vaadin-avatar name="Aria Bailey" with-tooltip></vaadin-avatar>
29+
</section>
30+
<section>
31+
<h2>Image</h2>
32+
<vaadin-avatar
33+
name="Aria Bailey"
34+
img="data:image/png;base64,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"
35+
></vaadin-avatar>
36+
</section>
37+
<section>
38+
<h2>User Color</h2>
39+
<vaadin-avatar
40+
name="Aria Bailey"
41+
img="data:image/png;base64,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"
42+
has-color-index
43+
style="--vaadin-avatar-user-color: #009a6c"
44+
></vaadin-avatar>
45+
<vaadin-avatar abbr="AB" has-color-index style="--vaadin-avatar-user-color: #009a6c"></vaadin-avatar>
46+
</section>
2047
</body>
2148
</html>

‎packages/avatar-group/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/styles/*-base-styles.d.ts",
25+
"!src/styles/*-base-styles.js",
2426
"theme",
2527
"vaadin-*.d.ts",
2628
"vaadin-*.js",

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

File renamed without changes.

‎packages/avatar-group/src/styles/vaadin-avatar-group-base-styles.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2020 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import { css } from 'lit';
7+
8+
export const avatarGroupStyles = css`
9+
@layer base {
10+
:host {
11+
display: block;
12+
width: 100%; /* prevent collapsing inside non-stretching column flex */
13+
/* 1: last on top */
14+
/* -1: first on top */
15+
--_dir: 1;
16+
}
17+
18+
:host([theme~='reverse']) {
19+
--_dir: -1;
20+
}
21+
22+
:host([hidden]) {
23+
display: none !important;
24+
}
25+
26+
[part='container'] {
27+
display: flex;
28+
position: relative;
29+
width: 100%;
30+
flex-wrap: nowrap;
31+
}
32+
33+
::slotted(vaadin-avatar) {
34+
mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M300 0H0V300H300V0ZM150 200C177.614 200 200 177.614 200 150C200 122.386 177.614 100 150 100C122.386 100 100 122.386 100 150C100 177.614 122.386 200 150 200Z" fill="black"/></svg>');
35+
mask-size: calc(300% + var(--vaadin-avatar-group-overlap-border, 2px) * 6 - var(--vaadin-focus-ring-width) * 6);
36+
mask-position: calc(50% + (var(--vaadin-avatar-size, 2em) - var(--vaadin-avatar-group-overlap, 8px)) * var(--_d));
37+
--_d: var(--_dir);
38+
}
39+
40+
:host(:dir(rtl)) ::slotted(vaadin-avatar) {
41+
--_d: calc(var(--_dir) * -1);
42+
}
43+
44+
::slotted(vaadin-avatar:not(:first-child)) {
45+
margin-inline-start: calc(var(--vaadin-avatar-group-overlap, 8px) * -1 - var(--vaadin-focus-ring-width));
46+
}
47+
48+
:host(:not([theme~='reverse'])) ::slotted(vaadin-avatar:last-child),
49+
:host(:not([theme~='reverse'])) [part='container']:not(.has-overflow) ::slotted(vaadin-avatar:nth-last-child(2)),
50+
:host([theme~='reverse']) ::slotted(vaadin-avatar:first-child) {
51+
mask-image: none;
52+
}
53+
}
54+
`;

‎packages/avatar-group/src/styles/vaadin-avatar-group-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) 2020 - 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 avatarGroupStyles: CSSResult;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* Copyright (c) 2020 - 2025 Vaadin Ltd.
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
6-
import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
6+
import { css } from 'lit';
77

88
export const avatarGroupStyles = css`
99
:host {

‎packages/avatar-group/src/styles/vaadin-avatar-group-menu-base-styles.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2020 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import { css } from 'lit';
7+
8+
export const avatarGroupMenuStyles = css`
9+
@layer base {
10+
:host {
11+
display: block;
12+
padding: var(--vaadin-item-overlay-padding, 4px);
13+
}
14+
15+
:host([hidden]) {
16+
display: none !important;
17+
}
18+
19+
[part='items'] {
20+
display: contents;
21+
}
22+
}
23+
`;

‎packages/avatar-group/src/styles/vaadin-avatar-group-menu-core-styles.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2020 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import { listBoxStyles } from '@vaadin/list-box/src/vaadin-list-box-core-styles.js';
7+
8+
export { listBoxStyles as avatarGroupMenuStyles };

‎packages/avatar-group/src/styles/vaadin-avatar-group-menu-item-base-styles.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2020 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import { css } from 'lit';
7+
import { itemStyles } from '@vaadin/item/src/vaadin-item-base-styles.js';
8+
9+
const menuItemStyles = css`
10+
@layer base {
11+
[part='content'] {
12+
display: flex;
13+
align-items: center;
14+
gap: inherit;
15+
}
16+
}
17+
`;
18+
19+
export const avatarGroupMenuItemStyles = [itemStyles, menuItemStyles];

0 commit comments

Comments
 (0)