chore(AvatarPair): Convert AvatarPair to CSS modules (#5002)

* Convert to CSS module * Create twenty-spoons-give.md * test(vrt): update snapshots * test(vrt): update snapshots --------- Co-authored-by: jonrohan <[email protected]>
primer · Sep 23, 2024 · 9bd5c89 · 9bd5c89
1 parent 597d285
commit 9bd5c89
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 26 deletions.
diff --git a/.changeset/twenty-spoons-give.md b/.changeset/twenty-spoons-give.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+chore(AvatarPair): Convert AvatarPair to CSS modules
diff --git a/...vatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-colorblind-linux.png b/...vatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-colorblind-linux.png
diff --git a/...arPair.test.ts-snapshots/AvatarPair-Parent-Square-light-high-contrast-linux.png b/...arPair.test.ts-snapshots/AvatarPair-Parent-Square-light-high-contrast-linux.png
diff --git a/...omponents/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-linux.png b/...omponents/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-linux.png
diff --git a/...vatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-tritanopia-linux.png b/...vatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-tritanopia-linux.png
diff --git a/packages/react/src/AvatarPair/AvatarPair.module.css b/packages/react/src/AvatarPair/AvatarPair.module.css
@@ -0,0 +1,20 @@
+.AvatarPair {
+  position: relative;
+  display: inline-flex;
+
+  [data-component='Avatar']:last-child,
+  [data-component='SkeletonAvatar']:last-child {
+    position: absolute;
+    right: -15%;
+    bottom: -9%;
+    box-shadow: var(--avatar-shadow);
+  }
+
+  [data-component='SkeletonAvatar']:last-child {
+    box-shadow: inset var(--avatar-shadow);
+  }
+}
+
+.AvatarChild {
+  background-color: var(--bgColor-default);
+}
diff --git a/packages/react/src/AvatarPair/AvatarPair.tsx b/packages/react/src/AvatarPair/AvatarPair.tsx
@@ -1,31 +1,13 @@
-import React from 'react'
-import styled from 'styled-components'
+import React, {type HTMLProps} from 'react'
 import type {AvatarProps} from '../Avatar'
 import Avatar from '../Avatar'
-import {get} from '../constants'
-import Box, {type BoxProps} from '../Box'
 import {SkeletonAvatar} from '../experimental/Skeleton/SkeletonAvatar'
+import classes from './AvatarPair.module.css'
+import {clsx} from 'clsx'
 
-const StyledAvatarPair = styled(Box)`
-  position: relative;
-  display: inline-flex;
+export type AvatarPairProps = HTMLProps<HTMLDivElement>
 
-  [data-component='Avatar']:last-child,
-  [data-component='SkeletonAvatar']:last-child {
-    position: absolute;
-    right: -15%;
-    bottom: -9%;
-    box-shadow: ${get('shadows.avatar.childShadow')};
-  }
-
-  [data-component='SkeletonAvatar']:last-child {
-    box-shadow: inset ${get('shadows.avatar.childShadow')};
-  }
-`
-
-export type AvatarPairProps = BoxProps
-
-const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
+const AvatarPair = ({children, className, ...rest}: AvatarPairProps) => {
   const avatars = React.Children.map(children, (child, i) => {
     if (!React.isValidElement(child)) {
       return child
@@ -39,13 +21,16 @@ const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
       return <SkeletonAvatar {...child.props} size={20} />
     }
 
-    return <Avatar bg="canvas.default" {...child.props} size={20} />
+    return <Avatar className={clsx(child.props.className, classes.AvatarChild)} {...child.props} size={20} />
   })
 
-  return <StyledAvatarPair {...rest}>{avatars}</StyledAvatarPair>
+  return (
+    <div className={clsx(className, classes.AvatarPair)} {...rest}>
+      {avatars}
+    </div>
+  )
 }
 
-// styled() changes this
 AvatarPair.displayName = 'AvatarPair'
 
 export default AvatarPair