diff --git a/.changeset/thick-singers-fold.md b/.changeset/thick-singers-fold.md new file mode 100644 index 00000000000..9581e74a135 --- /dev/null +++ b/.changeset/thick-singers-fold.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Fixes AvatarStack styling bugs. Primarily, preventing avatars from appearing above overlays such as dialog modals. diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-dark-colorblind-linux.png index 96d57167765..5c3cf749d45 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-dark-high-contrast-linux.png index 4559fe818b4..2126631e336 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-dark-linux.png index 96d57167765..5c3cf749d45 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-dark-tritanopia-linux.png index 96d57167765..5c3cf749d45 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-light-colorblind-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-light-high-contrast-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-light-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-light-tritanopia-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Left-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-colorblind-linux.png index f81aec0ade3..03de897641f 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-dimmed-linux.png index e9d91b6b2dd..59299c6764e 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-dimmed-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-high-contrast-linux.png index dd6696468b9..ec762b30e74 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-linux.png index f81aec0ade3..03de897641f 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-tritanopia-linux.png index f81aec0ade3..03de897641f 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-light-colorblind-linux.png index 15df73db620..e174055dcff 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-light-high-contrast-linux.png index 0670e0a2e05..e174055dcff 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-light-linux.png index 0670e0a2e05..e174055dcff 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-light-tritanopia-linux.png index 0670e0a2e05..e174055dcff 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Align-Right-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-colorblind-linux.png index 45fc399643c..6dbb2291150 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-dimmed-linux.png index 32863c4e673..62b44bb0b65 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-dimmed-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-high-contrast-linux.png index 277736c944f..d97719bd618 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-linux.png index 45fc399643c..6dbb2291150 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-tritanopia-linux.png index 45fc399643c..6dbb2291150 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-colorblind-linux.png index 74be0889e81..39e9164e16f 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-high-contrast-linux.png index db51a5e51f5..39e9164e16f 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-linux.png index db51a5e51f5..39e9164e16f 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-tritanopia-linux.png index db51a5e51f5..39e9164e16f 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-colorblind-linux.png index 96d57167765..5c3cf749d45 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-high-contrast-linux.png index 4559fe818b4..2126631e336 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-linux.png index 96d57167765..5c3cf749d45 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-tritanopia-linux.png index 96d57167765..5c3cf749d45 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-colorblind-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-high-contrast-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-tritanopia-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-colorblind-linux.png index b86c08b9ae4..4b9dd510158 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-dimmed-linux.png index cf3e31ac68f..7115f3ee2de 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-dimmed-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-high-contrast-linux.png index 2528b05c76c..de6025c1615 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-linux.png index b86c08b9ae4..4b9dd510158 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-tritanopia-linux.png index b86c08b9ae4..4b9dd510158 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-colorblind-linux.png index 165fc28d055..1b3f3b7fd7b 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-high-contrast-linux.png index bec867c9eee..1b3f3b7fd7b 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-linux.png index bd9c8c55212..1b3f3b7fd7b 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-tritanopia-linux.png index bec867c9eee..1b3f3b7fd7b 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-colorblind-linux.png index 45fc399643c..6dbb2291150 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-dimmed-linux.png index 32863c4e673..62b44bb0b65 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-dimmed-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-high-contrast-linux.png index 277736c944f..d97719bd618 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-linux.png index 45fc399643c..6dbb2291150 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-tritanopia-linux.png index 45fc399643c..6dbb2291150 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-colorblind-linux.png index db51a5e51f5..39e9164e16f 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-high-contrast-linux.png index db51a5e51f5..39e9164e16f 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-linux.png index db51a5e51f5..39e9164e16f 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-tritanopia-linux.png index db51a5e51f5..39e9164e16f 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-dark-colorblind-linux.png index 96d57167765..5c3cf749d45 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-dark-high-contrast-linux.png index 4559fe818b4..2126631e336 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-dark-linux.png index 96d57167765..5c3cf749d45 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-dark-tritanopia-linux.png index 96d57167765..5c3cf749d45 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-light-colorblind-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-light-high-contrast-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-light-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-light-tritanopia-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-colorblind-linux.png index 96d57167765..5c3cf749d45 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-high-contrast-linux.png index 4559fe818b4..2126631e336 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-linux.png index 96d57167765..5c3cf749d45 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-tritanopia-linux.png index 96d57167765..5c3cf749d45 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-colorblind-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-high-contrast-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-tritanopia-linux.png index ebe710acd92..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-dark-colorblind-linux.png index 96d57167765..5c3cf749d45 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-dark-high-contrast-linux.png index 4559fe818b4..2126631e336 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-dark-linux.png index 96d57167765..5c3cf749d45 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-dark-tritanopia-linux.png index 96d57167765..5c3cf749d45 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-light-colorblind-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-light-high-contrast-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-light-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-light-tritanopia-linux.png index cfb1cb1c7b6..dc62f9618fa 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Playground-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-colorblind-linux.png index 9c9be1bf233..1f83858b180 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-dimmed-linux.png index d04ec76d0a5..d0ba9f0288f 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-dimmed-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-high-contrast-linux.png index b81ee92059b..270f1e2e4a6 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-linux.png index 9c9be1bf233..1f83858b180 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-tritanopia-linux.png index 9c9be1bf233..1f83858b180 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-light-colorblind-linux.png index 187994fbcc5..31d75461cfc 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-light-high-contrast-linux.png index 187994fbcc5..31d75461cfc 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-light-linux.png index 187994fbcc5..31d75461cfc 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-light-tritanopia-linux.png index 187994fbcc5..31d75461cfc 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-SX-Prop-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-colorblind-linux.png index f8d78736e97..f5f60460eb1 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-dimmed-linux.png index 09f71271449..c5c9fc037b3 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-dimmed-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-high-contrast-linux.png index 89fbe8a0c83..90eb690a62d 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-linux.png index f8d78736e97..f5f60460eb1 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-tritanopia-linux.png index f8d78736e97..f5f60460eb1 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png index 1f11f61e963..259c1323df3 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-high-contrast-linux.png index 379c2fd6974..0812851cc87 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png index 1f11f61e963..259c1323df3 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-tritanopia-linux.png index 1f11f61e963..259c1323df3 100644 Binary files a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-With-Link-Wrappers-light-tritanopia-linux.png differ diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css index e04fd0e51ce..7d56ca962de 100644 --- a/packages/react/src/AvatarStack/AvatarStack.module.css +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -1,9 +1,11 @@ -/* 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); + --overlap-size: calc(var(--avatar-stack-size) * 0.55); + --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85); + --mask-size: calc(100% + (var(--avatar-border-width) * 2)); + --mask-start: -1; + --opacity-step: 15%; position: relative; display: flex; @@ -33,82 +35,44 @@ } &: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) - ); + /* + MIN-WIDTH CALC FORMULA EXPLAINED: + avatar size ➡️ var(--avatar-stack-size) + plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size) + */ + min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size))); } &: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 FORMULA EXPLAINED: + avatar size ➡️ var(--avatar-stack-size) + plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size) + plus the visible part of the 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) + */ 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)) - ) + var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) + + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) ); } &: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 FORMULA EXPLAINED: + avatar size ➡️ var(--avatar-stack-size) + plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size) + plus the visible part of the 3rd AND 4th avatar ➡️ (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2 + */ 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 - ) + var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) + + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2 ); } &:where([data-align-right]) { - justify-content: flex-end; - - .AvatarItem { - margin-left: 0 !important; - - &:first-child { - margin-right: 0; - } + --mask-start: 1; - &: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; - } - } - } - } + direction: rtl; } } @@ -130,38 +94,61 @@ height: var(--avatar-stack-size); overflow: hidden; flex-shrink: 0; + transition: + margin 0.2s ease-in-out, + opacity 0.2s ease-in-out, + mask-position 0.2s ease-in-out, + mask-size 0.2s ease-in-out; &:is(img) { /* stylelint-disable-next-line primer/box-shadow */ - box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default); + box-shadow: 0 0 0 var(--avatar-border-width) transparent; } &:first-child { - z-index: 10; - margin-left: 0; + margin-inline-start: 0; } &:nth-child(n + 2) { - z-index: 9; /* stylelint-disable-next-line primer/spacing */ - margin-left: var(--avatar-two-margin); + margin-inline-start: calc(var(--overlap-size) * -1); + mask-image: radial-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0); + mask-repeat: no-repeat, no-repeat; + mask-size: + var(--mask-size) var(--mask-size), + auto; + mask-composite: exclude; + + /* + HORIZONTAL POSITION CALC FORMULA EXPLAINED: + width of the visible part of the avatar ➡️ var(--avatar-stack-size) - var(--overlap-size) + multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start) + subtract the avatar border width ➡️ var(--avatar-border-width) + */ + mask-position: + calc((var(--avatar-stack-size) - var(--overlap-size)) * var(--mask-start) - var(--avatar-border-width)) center, + 0 0; + + /* HACK: This padding fixes a weird rendering bug where a tiiiiny outline is visible at the edges of the element */ + /* stylelint-disable-next-line primer/spacing */ + padding: 0.1px; } &:nth-child(n + 3) { - z-index: 8; - /* stylelint-disable-next-line primer/spacing */ - margin-left: var(--avatar-three-margin); - opacity: 0.55; + --overlap-size: var(--overlap-size-avatar-three-plus); + + /* stylelint-disable-next-line alpha-value-notation */ + opacity: calc(100% - 2 * var(--opacity-step)); } &:nth-child(n + 4) { - z-index: 7; - opacity: 0.4; + /* stylelint-disable-next-line alpha-value-notation */ + opacity: calc(100% - 3 * var(--opacity-step)); } &:nth-child(n + 5) { - z-index: 6; - opacity: 0.25; + /* stylelint-disable-next-line alpha-value-notation */ + opacity: calc(100% - 4 * var(--opacity-step)); } &:nth-child(n + 6) { @@ -175,17 +162,23 @@ width: auto; .AvatarItem { - margin-left: var(--base-size-4); + --mask-size: 100%; /* reset size of the mask to prevent unintentially clipping due to the additional size created by the border width */ + + margin-inline-start: 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; + + /* + HORIZONTAL POSITION CALC FORMULA EXPLAINED: + width of the full avatar ➡️ var(--avatar-stack-size) + multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start) + */ + mask-position: + calc(var(--avatar-stack-size) * var(--mask-start)) center, + 0 0; &:first-child { - margin-left: 0; + margin-inline-start: 0; } } } diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index 48cbb0cd0cb..b147a11208d 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -29,8 +29,11 @@ const AvatarStackWrapper = toggleStyledComponent( 'span', styled.span` --avatar-border-width: 1px; - --avatar-two-margin: calc(var(--avatar-stack-size) * -0.55); - --avatar-three-margin: calc(var(--avatar-stack-size) * -0.85); + --overlap-size: calc(var(--avatar-stack-size) * 0.55); + --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85); + --mask-size: calc(100% + (var(--avatar-border-width) * 2)); + --mask-start: -1; + --opacity-step: 15%; display: flex; position: relative; @@ -53,36 +56,52 @@ const AvatarStackWrapper = toggleStyledComponent( position: relative; overflow: hidden; display: flex; + transition: + margin 0.2s ease-in-out, + opacity 0.2s ease-in-out, + mask-position 0.2s ease-in-out, + mask-size 0.2s ease-in-out; &:is(img) { box-shadow: 0 0 0 var(--avatar-border-width) - ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))}; + ${props => (props.count === 1 ? get('colors.avatar.border') : 'transparent')}; } &:first-child { - margin-left: 0; - z-index: 10; + margin-inline-start: 0; } &:nth-child(n + 2) { - margin-left: var(--avatar-two-margin); - z-index: 9; + margin-inline-start: calc(var(--overlap-size) * -1); + mask-image: radial-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%), + linear-gradient(rgb(0, 0, 0) 0 0); + mask-repeat: no-repeat, no-repeat; + mask-size: + var(--mask-size) var(--mask-size), + auto; + mask-composite: exclude; + // HORIZONTAL POSITION CALC FORMULA EXPLAINED: + // width of the visible part of the avatar ➡️ var(--avatar-stack-size) - var(--overlap-size) + // multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start) + // subtract the avatar border width ➡️ var(--avatar-border-width) + mask-position: + calc((var(--avatar-stack-size) - var(--overlap-size)) * var(--mask-start) - var(--avatar-border-width)) center, + 0 0; + // HACK: This padding fixes a weird rendering bug where a tiiiiny outline is visible at the edges of the element + padding: 0.1px; } &:nth-child(n + 3) { - margin-left: var(--avatar-three-margin); - opacity: ${100 - 3 * 15}%; - z-index: 8; + --overlap-size: var(--overlap-size-avatar-three-plus); + opacity: calc(100% - 2 * var(--opacity-step)); } &:nth-child(n + 4) { - opacity: ${100 - 4 * 15}%; - z-index: 7; + opacity: calc(100% - 3 * var(--opacity-step)); } &:nth-child(n + 5) { - opacity: ${100 - 5 * 15}%; - z-index: 6; + opacity: calc(100% - 4 * var(--opacity-step)); } &:nth-child(n + 6) { @@ -92,74 +111,37 @@ const AvatarStackWrapper = toggleStyledComponent( } &.pc-AvatarStack--two { - // 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) - ); + // MIN-WIDTH CALC FORMULA EXPLAINED: + // avatar size ➡️ var(--avatar-stack-size) + // plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size) + min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size))); } &.pc-AvatarStack--three { - // 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 FORMULA EXPLAINED: + // avatar size ➡️ var(--avatar-stack-size) + // plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size) + // plus the visible part of the 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) 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)) - ) + var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) + + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) ); } &.pc-AvatarStack--three-plus { - // 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 FORMULA EXPLAINED: + // avatar size ➡️ var(--avatar-stack-size) + // plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size) + // plus the visible part of the 3rd AND 4th avatar ➡️ (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2 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 - ) + var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) + + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2 ); } &.pc-AvatarStack--right { - justify-content: flex-end; - .pc-AvatarItem { - margin-left: 0 !important; - - &:first-child { - margin-right: 0; - } - - &:nth-child(n + 2) { - margin-right: var(--avatar-two-margin); - } - - &:nth-child(n + 3) { - margin-right: var(--avatar-three-margin); - } - } - - .pc-AvatarStackBody { - flex-direction: row-reverse; - - &:not(.pc-AvatarStack--disableExpand):hover, - &:not(.pc-AvatarStack--disableExpand):focus-within { - .pc-AvatarItem { - margin-right: ${get('space.1')}!important; - margin-left: 0 !important; - - &:first-child { - margin-right: 0 !important; - } - } - } - } + --mask-start: 1; + direction: rtl; } .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover, @@ -167,20 +149,22 @@ const AvatarStackWrapper = toggleStyledComponent( width: auto; .pc-AvatarItem { - margin-left: ${get('space.1')}; - opacity: 100%; + // reset size of the mask to prevent unintentially clipping due to the additional size created by the border width + --mask-size: 100%; + margin-inline-start: ${get('space.1')}; + opacity: 1; visibility: visible; - ${props => (props.count === 1 ? '' : `box-shadow: inset 0 0 0 4px ${get('colors.canvas.default')};`)} - 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; + // HORIZONTAL POSITION CALC FORMULA EXPLAINED: + // width of the full avatar ➡️ var(--avatar-stack-size) + // multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start) + mask-position: + calc(var(--avatar-stack-size) * var(--mask-start)) center, + 0 0; ${getGlobalFocusStyles('1px')} &:first-child { - margin-left: 0; + margin-inline-start: 0; } } } diff --git a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap index dfd6620cea5..3e54e35253c 100644 --- a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap @@ -3,8 +3,11 @@ exports[`Avatar respects alignRight props 1`] = ` .c0 { --avatar-border-width: 1px; - --avatar-two-margin: calc(var(--avatar-stack-size) * -0.55); - --avatar-three-margin: calc(var(--avatar-stack-size) * -0.85); + --overlap-size: calc(var(--avatar-stack-size) * 0.55); + --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85); + --mask-size: calc(100% + (var(--avatar-border-width) * 2)); + --mask-start: -1; + --opacity-step: 15%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -53,36 +56,44 @@ exports[`Avatar respects alignRight props 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,mask-position 0.2s ease-in-out,mask-size 0.2s ease-in-out; + transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,mask-position 0.2s ease-in-out,mask-size 0.2s ease-in-out; } .c0 .pc-AvatarItem:is(img) { - box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default,var(--color-canvas-default,#ffffff)); + box-shadow: 0 0 0 var(--avatar-border-width) transparent; } .c0 .pc-AvatarItem:first-child { - margin-left: 0; - z-index: 10; + margin-inline-start: 0; } .c0 .pc-AvatarItem:nth-child(n + 2) { - margin-left: var(--avatar-two-margin); - z-index: 9; + margin-inline-start: calc(var(--overlap-size) * -1); + -webkit-mask-image: radial-gradient(at 50% 50%,rgb(0,0,0) 70%,rgba(0,0,0,0) 71%),linear-gradient(rgb(0,0,0) 0 0); + mask-image: radial-gradient(at 50% 50%,rgb(0,0,0) 70%,rgba(0,0,0,0) 71%),linear-gradient(rgb(0,0,0) 0 0); + -webkit-mask-repeat: no-repeat,no-repeat; + mask-repeat: no-repeat,no-repeat; + -webkit-mask-size: var(--mask-size) var(--mask-size),auto; + mask-size: var(--mask-size) var(--mask-size),auto; + -webkit-mask-composite: exclude; + mask-composite: exclude; + -webkit-mask-position: calc((var(--avatar-stack-size) - var(--overlap-size)) * var(--mask-start) - var(--avatar-border-width)) center,0 0; + mask-position: calc((var(--avatar-stack-size) - var(--overlap-size)) * var(--mask-start) - var(--avatar-border-width)) center,0 0; + padding: 0.1px; } .c0 .pc-AvatarItem:nth-child(n + 3) { - margin-left: var(--avatar-three-margin); - opacity: 55%; - z-index: 8; + --overlap-size: var(--overlap-size-avatar-three-plus); + opacity: calc(100% - 2 * var(--opacity-step)); } .c0 .pc-AvatarItem:nth-child(n + 4) { - opacity: 40%; - z-index: 7; + opacity: calc(100% - 3 * var(--opacity-step)); } .c0 .pc-AvatarItem:nth-child(n + 5) { - opacity: 25%; - z-index: 6; + opacity: calc(100% - 4 * var(--opacity-step)); } .c0 .pc-AvatarItem:nth-child(n + 6) { @@ -91,55 +102,20 @@ exports[`Avatar respects alignRight props 1`] = ` } .c0.pc-AvatarStack--two { - min-width: calc( var(--avatar-stack-size) + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + var(--avatar-border-width) ); + min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size))); } .c0.pc-AvatarStack--three { - 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)) ) ); + min-width: calc( var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) ); } .c0.pc-AvatarStack--three-plus { - 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 ) ); + min-width: calc( var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2 ); } .c0.pc-AvatarStack--right { - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; -} - -.c0.pc-AvatarStack--right .pc-AvatarItem { - margin-left: 0 !important; -} - -.c0.pc-AvatarStack--right .pc-AvatarItem:first-child { - margin-right: 0; -} - -.c0.pc-AvatarStack--right .pc-AvatarItem:nth-child(n + 2) { - margin-right: var(--avatar-two-margin); -} - -.c0.pc-AvatarStack--right .pc-AvatarItem:nth-child(n + 3) { - margin-right: var(--avatar-three-margin); -} - -.c0.pc-AvatarStack--right .pc-AvatarStackBody { - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; -} - -.c0.pc-AvatarStack--right .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem, -.c0.pc-AvatarStack--right .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within .pc-AvatarItem { - margin-right: 4px!important; - margin-left: 0 !important; -} - -.c0.pc-AvatarStack--right .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem:first-child, -.c0.pc-AvatarStack--right .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within .pc-AvatarItem:first-child { - margin-right: 0 !important; + --mask-start: 1; + direction: rtl; } .c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover, @@ -149,16 +125,12 @@ exports[`Avatar respects alignRight props 1`] = ` .c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem, .c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within .pc-AvatarItem { - margin-left: 4px; - opacity: 100%; + --mask-size: 100%; + margin-inline-start: 4px; + opacity: 1; visibility: visible; - -webkit-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; - 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; -} - -.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem box-shadow:inset 0 0 0 4px function (props), -.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within .pc-AvatarItem box-shadow:inset 0 0 0 4px function (props) { - return: (0,_core.get)(props.theme,path,fallback); + -webkit-mask-position: calc(var(--avatar-stack-size) * var(--mask-start)) center,0 0; + mask-position: calc(var(--avatar-stack-size) * var(--mask-start)) center,0 0; } .c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem:focus:not(:disabled), @@ -182,7 +154,7 @@ exports[`Avatar respects alignRight props 1`] = ` .c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem:first-child, .c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within .pc-AvatarItem:first-child { - margin-left: 0; + margin-inline-start: 0; } .c0 .pc-AvatarStack--disableExpand {