feat!: add reverse variant for avatar group Lumo theme (#10437)

Author: sissbruecker

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

@@ -33,18 +33,19 @@ export const avatarGroupStyles = css`
   ::slotted(vaadin-avatar) {
     --_overlap: max(0px, var(--vaadin-avatar-group-overlap, 8px));
     --_gap: max(0px, var(--vaadin-avatar-group-gap, 2px));
-    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>');
-    mask-size: calc((100% - var(--vaadin-focus-ring-width) * 2) * 3);
-    mask-position: calc(50% + (100% - var(--vaadin-focus-ring-width) * 2 - var(--_overlap)) * var(--_d));
+    --_outline-width: var(--vaadin-focus-ring-width);
     --_d: var(--_dir);
+    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>');
+    mask-size: calc((100% - var(--_outline-width) * 2) * 3);
+    mask-position: calc(50% + (100% - var(--_outline-width) * 2 - var(--_overlap)) * var(--_d));
   }
 
   :host(:dir(rtl)) ::slotted(vaadin-avatar) {
     --_d: calc(var(--_dir) * -1);
   }
 
   ::slotted(vaadin-avatar:not(:first-of-type)) {
-    margin-inline-start: calc((var(--vaadin-focus-ring-width) + var(--_overlap) - var(--_gap)) * -1);
+    margin-inline-start: calc((var(--_outline-width) + var(--_overlap) - var(--_gap)) * -1);
   }
 
   :host(:not([theme~='reverse'])) ::slotted(vaadin-avatar:last-child),

packages/avatar-group/src/vaadin-avatar-group.js

@@ -73,6 +73,10 @@ class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(PolylitMix
     return avatarGroupStyles;
   }
 
+  static get lumoInjector() {
+    return { ...super.lumoInjector, includeBaseStyles: true };
+  }
+
   /** @protected */
   render() {
     return html`

packages/avatar-group/test/visual/base/avatar-group.test.js

@@ -17,6 +17,12 @@ describe('avatar-group', () => {
     await visualDiff(div, 'basic');
   });
 
+  it('reverse', async () => {
+    element.items = [{ name: 'Abc Def' }, { name: 'Ghi Jkl' }, { name: 'Mno Pqr' }, { name: 'Stu Vwx' }];
+    element.setAttribute('theme', 'reverse');
+    await visualDiff(div, 'reverse');
+  });
+
   it('max-items-visible', async () => {
     element.maxItemsVisible = 3;
     element.items = [{ name: 'Abc Def' }, { name: 'Ghi Jkl' }, { name: 'Mno Pqr' }, { name: 'Stu Vwx' }];

packages/avatar-group/test/visual/base/screenshots/avatar-group/baseline/reverse.png

@@ -20,6 +20,12 @@ describe('avatar-group', () => {
     await visualDiff(div, 'basic');
   });
 
+  it('reverse', async () => {
+    element.items = [{ name: 'Abc Def' }, { name: 'Ghi Jkl' }, { name: 'Mno Pqr' }, { name: 'Stu Vwx' }];
+    element.setAttribute('theme', 'reverse');
+    await visualDiff(div, 'reverse');
+  });
+
   it('max-items-visible', async () => {
     element.maxItemsVisible = 3;
     element.items = [{ name: 'Abc Def' }, { name: 'Ghi Jkl' }, { name: 'Mno Pqr' }, { name: 'Stu Vwx' }];