feat: port avatar and avatar-group Lumo styles to CSS files (#9338)

vursen · web-flow · commit 58d9759cd684 · 2025-06-03T17:38:42.000+03:00
diff --git a/dev/avatar-group.html b/dev/avatar-group.html
@@ -8,7 +8,8 @@
     <script type="module" src="./common.js"></script>
 
     <script type="module">
-      import '@vaadin/avatar-group/src/vaadin-avatar-group.js';
+      import '@vaadin/avatar-group';
+      import '@vaadin/vaadin-lumo-styles/lumo.css';
 
       const groups = document.querySelectorAll('vaadin-avatar-group');
       groups.forEach(group => group.items = [{ name: 'AA' }, { name: 'BB' }, { name: 'CC' }, { name: 'DD' }]);
diff --git a/dev/avatar.html b/dev/avatar.html
@@ -10,6 +10,7 @@
     <script type="module">
       import '@vaadin/avatar';
       import '@vaadin/tooltip';
+      import '@vaadin/vaadin-lumo-styles/lumo.css';
     </script>
   </head>
 
diff --git a/packages/avatar-group/src/vaadin-avatar-group-menu-item.js b/packages/avatar-group/src/vaadin-avatar-group-menu-item.js
@@ -8,6 +8,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { avatarGroupMenuItemStyles } from './styles/vaadin-avatar-group-menu-item-core-styles.js';
 
@@ -21,7 +22,7 @@ import { avatarGroupMenuItemStyles } from './styles/vaadin-avatar-group-menu-ite
  * @mixes ThemableMixin
  * @protected
  */
-class AvatarGroupMenuItem extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+class AvatarGroupMenuItem extends ItemMixin(ThemableMixin(DirMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-avatar-group-menu-item';
   }
diff --git a/packages/avatar-group/src/vaadin-avatar-group-menu.js b/packages/avatar-group/src/vaadin-avatar-group-menu.js
@@ -8,6 +8,7 @@ import { ListMixin } from '@vaadin/a11y-base/src/list-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { avatarGroupMenuStyles } from './styles/vaadin-avatar-group-menu-core-styles.js';
 
@@ -21,7 +22,7 @@ import { avatarGroupMenuStyles } from './styles/vaadin-avatar-group-menu-core-st
  * @mixes ThemableMixin
  * @protected
  */
-class AvatarGroupMenu extends ListMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+class AvatarGroupMenu extends ListMixin(ThemableMixin(DirMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-avatar-group-menu';
   }
diff --git a/packages/avatar-group/src/vaadin-avatar-group-overlay.js b/packages/avatar-group/src/vaadin-avatar-group-overlay.js
@@ -10,6 +10,7 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
 import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -23,7 +24,9 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes ThemableMixin
  * @private
  */
-class AvatarGroupOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement))))) {
+class AvatarGroupOverlay extends PositionMixin(
+  OverlayMixin(DirMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))),
+) {
   static get is() {
     return 'vaadin-avatar-group-overlay';
   }
diff --git a/packages/avatar-group/src/vaadin-avatar-group.js b/packages/avatar-group/src/vaadin-avatar-group.js
@@ -12,6 +12,7 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { avatarGroupStyles } from './styles/vaadin-avatar-group-core-styles.js';
 import { AvatarGroupMixin } from './vaadin-avatar-group-mixin.js';
@@ -62,7 +63,7 @@ import { AvatarGroupMixin } from './vaadin-avatar-group-mixin.js';
  * @mixes AvatarGroupMixin
  * @mixes ThemableMixin
  */
-class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-avatar-group';
   }
diff --git a/packages/avatar-group/test/visual/lumo/avatar-group.test.js b/packages/avatar-group/test/visual/lumo/avatar-group.test.js
@@ -1,6 +1,9 @@
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
 import { visualDiff } from '@web/test-runner-visual-regression';
-import '../../../theme/lumo/vaadin-avatar-group.js';
+import '@vaadin/vaadin-lumo-styles/props.css';
+import '@vaadin/vaadin-lumo-styles/components/avatar.css';
+import '@vaadin/vaadin-lumo-styles/components/avatar-group.css';
+import '../../../vaadin-avatar-group.js';
 
 describe('avatar-group', () => {
   let div, element;
diff --git a/packages/avatar/src/vaadin-avatar.js b/packages/avatar/src/vaadin-avatar.js
@@ -10,6 +10,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { avatarStyles } from './styles/vaadin-avatar-core-styles.js';
 import { AvatarMixin } from './vaadin-avatar-mixin.js';
@@ -46,7 +47,7 @@ import { AvatarMixin } from './vaadin-avatar-mixin.js';
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class Avatar extends AvatarMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class Avatar extends AvatarMixin(ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-avatar';
   }
diff --git a/packages/avatar/test/visual/lumo/avatar.test.js b/packages/avatar/test/visual/lumo/avatar.test.js
@@ -1,8 +1,11 @@
 import { sendKeys } from '@vaadin/test-runner-commands';
-import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { fixtureSync } from '@vaadin/testing-helpers';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '@vaadin/vaadin-lumo-styles/props.css';
+import '@vaadin/vaadin-lumo-styles/components/avatar.css';
+import '@vaadin/vaadin-lumo-styles/components/tooltip.css';
 import '@vaadin/tooltip/test/not-animated-styles.js';
-import '../../../theme/lumo/vaadin-avatar.js';
+import '../../../vaadin-avatar.js';
 import { Tooltip } from '@vaadin/tooltip/src/vaadin-tooltip.js';
 
 describe('avatar', () => {
diff --git a/packages/vaadin-lumo-styles/components.css b/packages/vaadin-lumo-styles/components.css
@@ -4,6 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @import './components/accordion.css';
+@import './components/avatar-group.css';
+@import './components/avatar.css';
 @import './components/button.css';
 @import './components/checkbox-group.css';
 @import './components/checkbox.css';
diff --git a/packages/vaadin-lumo-styles/components/avatar-group.css b/packages/vaadin-lumo-styles/components/avatar-group.css
@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@import '../src/mixins/base-layer-reset.css' vaadin-avatar-group;
+@import '../src/components/avatar-group.css' vaadin-avatar-group;
+
+@import '../src/mixins/base-layer-reset.css' vaadin-avatar-group-overlay;
+@import '../src/mixins/overlay.css' vaadin-avatar-group-overlay;
+@import '../src/mixins/menu-overlay-core.css' vaadin-avatar-group-overlay;
+@import '../src/components/avatar-group-overlay.css' vaadin-avatar-group-overlay;
+
+@import '../src/mixins/base-layer-reset.css' vaadin-avatar-group-menu;
+@import '../src/components/list-box.css' vaadin-avatar-group-menu;
+
+@import '../src/mixins/base-layer-reset.css' vaadin-avatar-group-menu-item;
+@import '../src/components/item.css' vaadin-avatar-group-menu-item;
+@import '../src/components/avatar-group-menu-item.css' vaadin-avatar-group-menu-item;
+
+html {
+  --vaadin-avatar-group-css-inject: 1;
+  --vaadin-avatar-group-overlay-css-inject: 1;
+  --vaadin-avatar-group-menu-css-inject: 1;
+  --vaadin-avatar-group-menu-item-css-inject: 1;
+}
diff --git a/packages/vaadin-lumo-styles/components/avatar.css b/packages/vaadin-lumo-styles/components/avatar.css
@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@import '../src/mixins/base-layer-reset.css' vaadin-avatar;
+@import '../src/components/avatar.css' vaadin-avatar;
+
+html {
+  --vaadin-avatar-css-inject: 1;
+  --vaadin-avatar-size: var(--lumo-size-m);
+}
diff --git a/packages/vaadin-lumo-styles/src/components/avatar-group-menu-item.css b/packages/vaadin-lumo-styles/src/components/avatar-group-menu-item.css
@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+:host {
+  padding: var(--lumo-space-xs);
+  padding-inline-end: var(--lumo-space-m);
+}
+
+[part='content'] {
+  display: flex;
+  align-items: center;
+}
+
+[part='content'] ::slotted(vaadin-avatar) {
+  width: var(--lumo-size-xs);
+  height: var(--lumo-size-xs);
+  margin-inline-end: var(--lumo-space-s);
+}
diff --git a/packages/vaadin-lumo-styles/src/components/avatar-group-overlay.css b/packages/vaadin-lumo-styles/src/components/avatar-group-overlay.css
@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+:host {
+  --_lumo-list-box-item-selected-icon-display: none;
+  --_lumo-list-box-item-padding-left: calc(var(--lumo-space-m) + var(--lumo-border-radius-m) / 4);
+}
+
+[part='overlay'] {
+  outline: none;
+}
diff --git a/packages/vaadin-lumo-styles/src/components/avatar-group.css b/packages/vaadin-lumo-styles/src/components/avatar-group.css
@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+:host {
+  display: block;
+  width: 100%; /* prevent collapsing inside non-stretching column flex */
+  --vaadin-avatar-group-overlap: 8px;
+  /* Deprecated property name (overlap-border), for backwards compatibility */
+  --vaadin-avatar-group-overlap-border: var(--vaadin-avatar-group-gap, 2px);
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+[part='container'] {
+  display: flex;
+  position: relative;
+  width: 100%;
+  flex-wrap: nowrap;
+}
+
+::slotted(vaadin-avatar:not(:first-child)) {
+  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox=%220 0 300 300%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M300 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%22 fill=%22black%22/></svg>');
+  mask-image: url('data:image/svg+xml;utf8,<svg viewBox=%220 0 300 300%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M300 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%22 fill=%22black%22/></svg>');
+  -webkit-mask-size: calc(
+    300% + var(--vaadin-avatar-group-overlap-border) * 6 - var(--vaadin-avatar-outline-width) * 6
+  );
+  mask-size: calc(300% + var(--vaadin-avatar-group-overlap-border) * 6 - var(--vaadin-avatar-outline-width) * 6);
+}
+
+::slotted(vaadin-avatar:not([dir='rtl']):not(:first-child)) {
+  margin-left: calc(var(--vaadin-avatar-group-overlap) * -1 - var(--vaadin-avatar-outline-width));
+  -webkit-mask-position: calc(50% - var(--vaadin-avatar-size) + var(--vaadin-avatar-group-overlap));
+  mask-position: calc(50% - var(--vaadin-avatar-size) + var(--vaadin-avatar-group-overlap));
+}
+
+::slotted(vaadin-avatar[dir='rtl']:not(:first-child)) {
+  margin-right: calc(var(--vaadin-avatar-group-overlap) * -1);
+  -webkit-mask-position: calc(
+    50% + var(--vaadin-avatar-size) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width)
+  );
+  mask-position: calc(
+    50% + var(--vaadin-avatar-size) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width)
+  );
+}
+
+:host {
+  --vaadin-avatar-size: var(--lumo-size-m);
+}
+
+:host([theme~='xlarge']) {
+  --vaadin-avatar-group-overlap: 12px;
+  --vaadin-avatar-group-overlap-border: 3px;
+  --vaadin-avatar-size: var(--lumo-size-xl);
+}
+
+:host([theme~='large']) {
+  --vaadin-avatar-group-overlap: 10px;
+  --vaadin-avatar-group-overlap-border: 3px;
+  --vaadin-avatar-size: var(--lumo-size-l);
+}
+
+:host([theme~='small']) {
+  --vaadin-avatar-group-overlap: 6px;
+  --vaadin-avatar-group-overlap-border: 2px;
+  --vaadin-avatar-size: var(--lumo-size-s);
+}
+
+:host([theme~='xsmall']) {
+  --vaadin-avatar-group-overlap: 4px;
+  --vaadin-avatar-group-overlap-border: 2px;
+  --vaadin-avatar-size: var(--lumo-size-xs);
+}
diff --git a/packages/vaadin-lumo-styles/src/components/avatar.css b/packages/vaadin-lumo-styles/src/components/avatar.css
diff --git a/packages/vaadin-lumo-styles/src/global/color.css b/packages/vaadin-lumo-styles/src/global/color.css
diff --git a/packages/vaadin-lumo-styles/src/props/color.css b/packages/vaadin-lumo-styles/src/props/color.css
