feat(AvatarStack): Convert AvatarStack to CSS modules behind team fe…

…ature flag (#5299)

* Convert AvatarStack to CSS modules behind primer_react_css_modules_team feature flag

* Updating the tests to run with the feature flag on

* Create hot-chicken-tickle.md

* Fix tests

* Update hot-chicken-tickle.md

Co-authored-by: Josh Black <[email protected]>

* Quiet warnings

* Update CSS disables

* Remove feature flag change

* Revert package changes

* Revert module changes

* Add span element to AvatarStackWrapper

* Update snapshot

* Fix weird merge problem

* important on the box shadow until avatar removes sx

* Update snapshot

* Reduce diff

* Move AvatarStackBody out of AvatarStack

* Move space

* Fix to make sure sx prop is being passed in

* Not important

* Add a link wrapper test

* Adjust css for when link wrapper occurs

* test(vrt): update snapshots

* Update snap

* Remove box-shadow

* Apply suggestions from code review

Co-authored-by: Marie Lucca <[email protected]>
Co-authored-by: Hussam Ghazzi <[email protected]>

---------

Co-authored-by: Josh Black <[email protected]>
Co-authored-by: jonrohan <[email protected]>
Co-authored-by: Marie Lucca <[email protected]>
Co-authored-by: Hussam Ghazzi <[email protected]>

.changeset/hot-chicken-tickle.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Update `AvatarStack` component to use CSS modules behind the feature flag primer_react_css_modules_team

e2e/components/AvatarStack.test.ts

@@ -43,6 +43,10 @@ const stories: Array<{title: string; id: string}> = [
     title: 'SX Prop',
     id: 'components-avatarstack-dev--sx-prop',
   },
+  {
+    title: 'With Link Wrappers',
+    id: 'components-avatarstack-dev--with-link-wrappers',
+  },
 ]
 
 test.describe('AvatarStack', () => {

packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import type {Meta} from '@storybook/react'
 import AvatarStack from './AvatarStack'
 import Avatar from '../Avatar'
+import Link from '../Link'
 
 export default {
   title: 'Components/AvatarStack/Dev',
@@ -21,3 +22,20 @@ export const SxProp = () => (
     <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
   </AvatarStack>
 )
+
+export const WithLinkWrappers = () => (
+  <AvatarStack>
+    <Link aria-label="Primer is assigned" href="#" className="pc-AvatarItem" data-hovercard-url="/primer">
+      <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+    </Link>
+    <Link aria-label="GitHub is assigned" href="#" className="pc-AvatarItem" data-hovercard-url="/primer">
+      <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+    </Link>
+    <Link aria-label="Atom is assigned" href="#" className="pc-AvatarItem" data-hovercard-url="/primer">
+      <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+    </Link>
+    <Link aria-label="GitHub Desktop is assigned" href="#" className="pc-AvatarItem" data-hovercard-url="/primer">
+      <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+    </Link>
+  </AvatarStack>
+)

packages/react/src/AvatarStack/AvatarStack.module.css

@@ -0,0 +1,190 @@
+/* stylelint-disable max-nesting-depth */
+/* stylelint-disable selector-max-specificity */
+.AvatarStack {
+  --avatar-border-width: 1px;
+  --avatar-two-margin: calc(var(--avatar-stack-size) * -0.55);
+  --avatar-three-margin: calc(var(--avatar-stack-size) * -0.85);
+
+  position: relative;
+  display: flex;
+  min-width: var(--avatar-stack-size);
+  height: var(--avatar-stack-size);
+
+  &:where([data-responsive]) {
+    @media screen and (--viewportRange-narrow) {
+      --avatar-stack-size: var(--stackSize-narrow);
+    }
+
+    @media screen and (--viewportRange-regular) {
+      --avatar-stack-size: var(--stackSize-regular);
+    }
+
+    @media screen and (--viewportRange-wide) {
+      --avatar-stack-size: var(--stackSize-wide);
+    }
+  }
+
+  &:where([data-avatar-count='1']) {
+    .AvatarItem {
+      /* stylelint-disable-next-line primer/box-shadow */
+      box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor);
+    }
+  }
+
+  &:where([data-avatar-count='2']) {
+    /* this calc explained: */
+
+    /* 1. avatar size + the non-overlapping part of the second avatar */
+
+    /* 2. + the border widths of the first two avatars */
+    min-width: calc(
+      var(--avatar-stack-size) + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + var(--avatar-border-width)
+    );
+  }
+
+  &:where([data-avatar-count='3']) {
+    /* this calc explained: */
+
+    /* 1. avatar size + the non-overlapping part of the second avatar */
+
+    /* 2. + the non-overlapping part of the third avatar */
+    min-width: calc(
+      var(--avatar-stack-size) +
+        calc(
+          calc(var(--avatar-stack-size) + var(--avatar-two-margin)) +
+            calc(var(--avatar-stack-size) + var(--avatar-three-margin))
+        )
+    );
+  }
+
+  &:where([data-avatar-count='3+']) {
+    /* this calc explained: */
+
+    /* 1. avatar size + the non-overlapping part of the second avatar */
+
+    /* 2. + the non-overlapping part of the third and fourth avatar */
+    min-width: calc(
+      var(--avatar-stack-size) +
+        calc(
+          calc(var(--avatar-stack-size) + var(--avatar-two-margin)) +
+            calc(var(--avatar-stack-size) + var(--avatar-three-margin)) * 2
+        )
+    );
+  }
+
+  &:where([data-align-right]) {
+    justify-content: flex-end;
+
+    .AvatarItem {
+      margin-left: 0 !important;
+
+      &:first-child {
+        margin-right: 0;
+      }
+
+      &:nth-child(n + 2) {
+        /* stylelint-disable-next-line primer/spacing */
+        margin-right: var(--avatar-two-margin);
+      }
+
+      &:nth-child(n + 3) {
+        /* stylelint-disable-next-line primer/spacing */
+        margin-right: var(--avatar-three-margin);
+      }
+    }
+
+    .AvatarStackBody {
+      flex-direction: row-reverse;
+
+      &:not([data-disable-expand]):hover,
+      &:not([data-disable-expand]):focus-within {
+        .AvatarItem {
+          margin-right: var(--base-size-4) !important;
+          margin-left: 0 !important;
+
+          &:first-child {
+            margin-right: 0 !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+.AvatarStackBody {
+  position: absolute;
+  display: flex;
+
+  &:where([data-disable-expand]) {
+    position: relative;
+  }
+}
+
+.AvatarItem {
+  --avatarSize-regular: var(--avatar-stack-size);
+
+  position: relative;
+  display: flex;
+  width: var(--avatar-stack-size);
+  height: var(--avatar-stack-size);
+  overflow: hidden;
+  flex-shrink: 0;
+
+  &:is(img) {
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default);
+  }
+
+  &:first-child {
+    z-index: 10;
+    margin-left: 0;
+  }
+
+  &:nth-child(n + 2) {
+    z-index: 9;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-left: var(--avatar-two-margin);
+  }
+
+  &:nth-child(n + 3) {
+    z-index: 8;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-left: var(--avatar-three-margin);
+    opacity: 0.55;
+  }
+
+  &:nth-child(n + 4) {
+    z-index: 7;
+    opacity: 0.4;
+  }
+
+  &:nth-child(n + 5) {
+    z-index: 6;
+    opacity: 0.25;
+  }
+
+  &:nth-child(n + 6) {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+
+.AvatarStackBody:not([data-disable-expand]):hover,
+.AvatarStackBody:not([data-disable-expand]):focus-within {
+  width: auto;
+
+  .AvatarItem {
+    margin-left: var(--base-size-4);
+    visibility: visible;
+    opacity: 1;
+    transition:
+      margin 0.2s ease-in-out,
+      opacity 0.2s ease-in-out,
+      visibility 0.2s ease-in-out,
+      box-shadow 0.1s ease-in-out;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}