feat(avatar-group): overflow

MyPureCloud · Dec 23, 2024 · c291214 · c291214
1 parent 4e766b0
commit c291214
Show file tree

Hide file tree

Showing 25 changed files with 2,250 additions and 194 deletions.
diff --git a/packages/genesys-spark-components/src/components/beta/gux-avatar-group/example.html b/packages/genesys-spark-components/src/components/beta/gux-avatar-group/example.html
@@ -1,53 +1,179 @@
 <h2>gux-avatar-group-beta</h2>
 
 <gux-avatar-group-beta>
-  <gux-avatar-group-item-beta name="Conor Darcy" onclick="notify(event, 0)">
+  <gux-avatar-group-item-beta name="Conor Darcy" onclick="notify(event, 1)">
+    <img slot="image" src="https://i.pravatar.cc/300" alt="Conor Darcy"
+  /></gux-avatar-group-item-beta>
+</gux-avatar-group-beta>
+
+<gux-avatar-group-beta>
+  <gux-avatar-group-item-beta name="Conor Darcy" onclick="notify(event, 1)">
+    <img slot="image" src="https://i.pravatar.cc/300" alt="Conor Darcy"
+  /></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Elliot Fitzgerald"
+    onclick="notify(event, 2)"
+  ></gux-avatar-group-item-beta>
+</gux-avatar-group-beta>
+
+<gux-avatar-group-beta>
+  <gux-avatar-group-item-beta name="Conor Darcy" onclick="notify(event, 1)">
     <img slot="image" src="https://i.pravatar.cc/300" alt="Conor Darcy"
   /></gux-avatar-group-item-beta>
   <gux-avatar-group-item-beta
     name="Elliot Fitzgerald"
-    onclick="notify(event, 1)"
+    onclick="notify(event, 2)"
   ></gux-avatar-group-item-beta>
   <gux-avatar-group-item-beta
     name="Greg Hayes"
+    onclick="notify(event, 3)"
+  ></gux-avatar-group-item-beta>
+</gux-avatar-group-beta>
+
+<gux-avatar-group-beta>
+  <gux-avatar-group-item-beta name="Conor Darcy" onclick="notify(event, 1)">
+    <img slot="image" src="https://i.pravatar.cc/300" alt="Conor Darcy"
+  /></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Elliot Fitzgerald"
     onclick="notify(event, 2)"
   ></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Greg Hayes"
+    onclick="notify(event, 3)"
+  ></gux-avatar-group-item-beta>
   <gux-avatar-group-item-beta
     name="Iseult Jones"
+    onclick="notify(event, 4)"
+  ></gux-avatar-group-item-beta>
+</gux-avatar-group-beta>
+
+<gux-avatar-group-beta>
+  <gux-avatar-group-item-beta name="Conor Darcy" onclick="notify(event, 1)">
+    <img slot="image" src="https://i.pravatar.cc/300" alt="Conor Darcy"
+  /></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Elliot Fitzgerald"
+    onclick="notify(event, 2)"
+  ></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Greg Hayes"
     onclick="notify(event, 3)"
   ></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Iseult Jones"
+    onclick="notify(event, 4)"
+  ></gux-avatar-group-item-beta>
   <gux-avatar-group-item-beta
     name="John King"
+    onclick="notify(event, 5)"
+  ></gux-avatar-group-item-beta>
+</gux-avatar-group-beta>
+
+<gux-avatar-group-beta>
+  <gux-avatar-group-item-beta name="Conor Darcy" onclick="notify(event, 1)">
+    <img slot="image" src="https://i.pravatar.cc/300" alt="Conor Darcy"
+  /></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Elliot Fitzgerald"
+    onclick="notify(event, 2)"
+  ></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Greg Hayes"
+    onclick="notify(event, 3)"
+  ></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Iseult Jones"
     onclick="notify(event, 4)"
   ></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="John King"
+    onclick="notify(event, 5)"
+  ></gux-avatar-group-item-beta>
   <gux-avatar-group-item-beta
     name="Larissa Mendez"
+    onclick="notify(event, 6)"
+  ></gux-avatar-group-item-beta>
+</gux-avatar-group-beta>
+
+<gux-avatar-group-beta>
+  <gux-avatar-group-item-beta name="Conor Darcy" onclick="notify(event, 1)">
+    <img slot="image" src="https://i.pravatar.cc/300" alt="Conor Darcy"
+  /></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Elliot Fitzgerald"
+    onclick="notify(event, 2)"
+  ></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Greg Hayes"
+    onclick="notify(event, 3)"
+  ></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Iseult Jones"
+    onclick="notify(event, 4)"
+  ></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="John King"
     onclick="notify(event, 5)"
   ></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Larissa Mendez"
+    onclick="notify(event, 6)"
+  ></gux-avatar-group-item-beta>
   <gux-avatar-group-item-beta
     name="Nancy Omaha"
+    onclick="notify(event, 7)"
+  ></gux-avatar-group-item-beta>
+</gux-avatar-group-beta>
+
+<gux-avatar-group-beta>
+  <gux-avatar-group-item-beta name="Conor Darcy" onclick="notify(event, 1)">
+    <img slot="image" src="https://i.pravatar.cc/300" alt="Conor Darcy"
+  /></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Elliot Fitzgerald"
+    onclick="notify(event, 2)"
+  ></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Greg Hayes"
+    onclick="notify(event, 3)"
+  ></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Iseult Jones"
+    onclick="notify(event, 4)"
+  ></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="John King"
+    onclick="notify(event, 5)"
+  ></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Larissa Mendez"
     onclick="notify(event, 6)"
   ></gux-avatar-group-item-beta>
   <gux-avatar-group-item-beta
-    name="Paul Quinn"
+    name="Nancy Omaha"
     onclick="notify(event, 7)"
   ></gux-avatar-group-item-beta>
   <gux-avatar-group-item-beta
-    name="Roisin Smyth"
+    name="Paul Quinn"
     onclick="notify(event, 8)"
   ></gux-avatar-group-item-beta>
   <gux-avatar-group-item-beta
-    name="Thomas Underwood"
+    name="Roisin Smyth"
     onclick="notify(event, 9)"
+  ></gux-avatar-group-item-beta>
+  <gux-avatar-group-item-beta
+    name="Thomas Underwood"
+    onclick="notify(event, 10)"
   >
     <img slot="image" src="https://i.pravatar.cc/300" alt="Thomas Underwood"
   /></gux-avatar-group-item-beta>
   <gux-avatar-group-item-beta
     name="Valerie Wall"
-    onclick="notify(event, 10)"
+    onclick="notify(event, 11)"
   ></gux-avatar-group-item-beta>
   <gux-avatar-group-item-beta
     name="Xavier Yarrow"
-    onclick="notify(event ,11)"
+    onclick="notify(event ,12)"
   ></gux-avatar-group-item-beta>
 </gux-avatar-group-beta>
diff --git a/...ents/src/components/beta/gux-avatar-group/gux-avatar-group-item/gux-avatar-group-item.tsx b/...ents/src/components/beta/gux-avatar-group/gux-avatar-group-item/gux-avatar-group-item.tsx
@@ -5,11 +5,12 @@ import {
   Prop,
   Element,
   Listen,
-  Method
+  Method,
+  Host
 } from '@stencil/core';
 import { trackComponent } from '@utils/tracking/usage';
 import { logWarn } from '@utils/error/log-error';
-import { GuxAvatarAccent } from './gux-avatar-group-item.types';
+import { GuxAvatarAccent } from '../gux-avatar-group.types';
 import { groupKeyboardNavigation } from '../gux-avatar-group.service';
 import { generateInitials } from '@utils/string/generate-initials';
 
@@ -104,32 +105,33 @@ export class GuxAvatarGroupItem {
 
   render(): JSX.Element {
     return (
-      <button
-        type="button"
-        role="menuitem"
-        aria-label={this.name}
-        tabIndex={-1}
-        ref={el => (this.buttonElement = el)}
-        class={{
-          'gux-avatar': true,
-          [this.getAccent()]: true,
-          'gux-last-item': this.isLastItemInGroup()
-        }}
-      >
-        <slot name="image">
-          <span class="gux-avatar-initials" aria-hidden="true">
-            {generateInitials(this.name)}
-          </span>
-        </slot>
-        <gux-tooltip-beta
-          aria-hidden="true"
-          visual-only
-          placement="top"
-          ref={el => (this.tooltip = el)}
+      <Host role="menuitem">
+        <button
+          type="button"
+          aria-label={this.name}
+          tabIndex={-1}
+          ref={el => (this.buttonElement = el)}
+          class={{
+            'gux-avatar': true,
+            [this.getAccent()]: true,
+            'gux-last-item': this.isLastItemInGroup()
+          }}
         >
-          <div slot="content">{this.name}</div>
-        </gux-tooltip-beta>
-      </button>
+          <slot name="image">
+            <span class="gux-avatar-initials" aria-hidden="true">
+              {generateInitials(this.name)}
+            </span>
+          </slot>
+          <gux-tooltip-beta
+            aria-hidden="true"
+            visual-only
+            placement="top"
+            ref={el => (this.tooltip = el)}
+          >
+            <div slot="content">{this.name}</div>
+          </gux-tooltip-beta>
+        </button>
+      </Host>
     ) as JSX.Element;
   }
 }
diff --git a/packages/genesys-spark-components/src/components/beta/gux-avatar-group/gux-avatar-group.scss b/packages/genesys-spark-components/src/components/beta/gux-avatar-group/gux-avatar-group.scss
@@ -10,3 +10,7 @@
     outline: none;
   }
 }
+
+::slotted(gux-avatar-group-item-beta.gux-hidden) {
+  display: none;
+}