refactor: extract avatar-group styles into reusable css literal (#8146)

vaadin · Nov 14, 2024 · c048ef5 · c048ef5
1 parent ae0ddf8
commit c048ef5
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 47 deletions.
diff --git a/packages/avatar-group/src/vaadin-avatar-group-styles.d.ts b/packages/avatar-group/src/vaadin-avatar-group-styles.d.ts
@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2020 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const avatarGroupStyles: CSSResult;
diff --git a/packages/avatar-group/src/vaadin-avatar-group-styles.js b/packages/avatar-group/src/vaadin-avatar-group-styles.js
@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright (c) 2020 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export const avatarGroupStyles = css`
+  :host {
+    display: block;
+    width: 100%; /* prevent collapsing inside non-stretching column flex */
+    --vaadin-avatar-group-overlap: 8px;
+    --vaadin-avatar-group-overlap-border: 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)
+    );
+  }
+`;
diff --git a/packages/avatar-group/src/vaadin-avatar-group.js b/packages/avatar-group/src/vaadin-avatar-group.js
@@ -19,7 +19,10 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { avatarGroupStyles } from './vaadin-avatar-group-styles.js';
+
+registerStyles('vaadin-avatar-group', avatarGroupStyles, { moduleId: 'vaadin-avatar-group-styles' });
 
 const MINIMUM_DISPLAYED_AVATARS = 2;
 
@@ -74,52 +77,6 @@ const MINIMUM_DISPLAYED_AVATARS = 2;
 class AvatarGroup extends ResizeMixin(OverlayClassMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))))) {
   static get template() {
     return legacyHtml`
-      <style>
-        :host {
-          display: block;
-          width: 100%; /* prevent collapsing inside non-stretching column flex */
-          --vaadin-avatar-group-overlap: 8px;
-          --vaadin-avatar-group-overlap-border: 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)
-          );
-        }
-      </style>
       <div id="container" part="container">
         <slot></slot>
         <slot name="overflow"></slot>