[FX-5854] Export Avatar.Wrapper to support custom icons (#4511)

toptal · Aug 29, 2024 · 9e089cc · 9e089cc
1 parent 5639ee3
commit 9e089cc
Show file tree

Hide file tree

Showing 16 changed files with 265 additions and 281 deletions.
diff --git a/.changeset/lovely-zebras-destroy.md b/.changeset/lovely-zebras-destroy.md
@@ -0,0 +1,6 @@
+---
+'@toptal/picasso-user-badge': minor
+'@toptal/picasso-avatar': minor
+---
+
+- export Avatar.Wrapper to support custom icons
diff --git a/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap b/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
@@ -34,20 +34,22 @@ exports[`AccountSelect renders 1`] = `
                   <div
                     class="items-start flex text-[1rem]"
                   >
-                    <div
-                      class="flex relative"
-                    >
+                    <div>
                       <div
-                        class="relative bg-gray text-[1rem] shrink-0 grow-0 w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+                        class="relative"
                       >
                         <div
-                          class="uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)] text-[1em]"
+                          class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
                         >
-                          <p
-                            class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+                          <div
+                            class="uppercase text-[1em]"
                           >
-                            PL
-                          </p>
+                            <p
+                              class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+                            >
+                              PL
+                            </p>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -110,20 +112,22 @@ exports[`AccountSelect renders 1`] = `
                   <div
                     class="items-start flex text-[1rem]"
                   >
-                    <div
-                      class="flex relative"
-                    >
+                    <div>
                       <div
-                        class="relative bg-gray text-[1rem] shrink-0 grow-0 w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+                        class="relative"
                       >
                         <div
-                          class="uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)] text-[1em]"
+                          class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
                         >
-                          <p
-                            class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+                          <div
+                            class="uppercase text-[1em]"
                           >
-                            PL
-                          </p>
+                            <p
+                              class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+                            >
+                              PL
+                            </p>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -186,17 +190,19 @@ exports[`AccountSelect renders 1`] = `
                   <div
                     class="items-start flex text-[1rem]"
                   >
-                    <div
-                      class="flex relative"
-                    >
+                    <div>
                       <div
-                        class="relative bg-gray text-[1rem] shrink-0 grow-0 w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+                        class="relative"
                       >
-                        <img
-                          alt="Phil Leif 3"
-                          class="block object-cover w-full h-full absolute left-0 top-0 [image-rendering:-webkit-optimize"
-                          src="./jacqueline-with-flowers-1954-square.jpg"
-                        />
+                        <div
+                          class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+                        >
+                          <img
+                            alt="Phil Leif 3"
+                            class="block object-cover w-full h-full [image-rendering:-webkit-optimize"
+                            src="./jacqueline-with-flowers-1954-square.jpg"
+                          />
+                        </div>
                       </div>
                     </div>
                     <div

diff --git a/packages/base/Avatar/src/Avatar/AvatarWrapper/AvatarWrapper.tsx b/packages/base/Avatar/src/Avatar/AvatarWrapper/AvatarWrapper.tsx
@@ -27,7 +27,7 @@ const showLogo = (size: Size, showEmblem?: boolean): boolean => {
 const AvatarLogo = ({ size }: Pick<Props, 'size'>) => (
   <div
     className={twJoin(
-      'flex absolute bottom-0',
+      'flex absolute bottom-0 left-0',
       avatarLogoClassesBySize.root[size]
     )}
     role='img'
@@ -44,7 +44,7 @@ const AvatarLogo = ({ size }: Pick<Props, 'size'>) => (
   </div>
 )
 
-const AvatarWrapper = (props: Props) => {
+export const AvatarWrapper = (props: Props) => {
   const {
     children,
     className,
@@ -55,26 +55,25 @@ const AvatarWrapper = (props: Props) => {
   } = props
 
   return (
-    <div
-      className={twJoin(
-        `flex relative`,
-        showLogo(size, showEmblem) && 'bg-white'
-      )}
-    >
+    <div>
       <div
-        style={style}
-        data-testid={dataTestId}
-        className={twMerge(
-          'relative bg-gray-500 text-[1rem] shrink-0 grow-0',
-          classBySize[size],
-          clipClassBySize[size],
-          className
-        )}
+        className={twJoin(`relative`, showLogo(size, showEmblem) && 'bg-white')}
       >
-        {children}
+        <div
+          style={style}
+          data-testid={dataTestId}
+          className={twMerge(
+            'relative bg-gray-500 text-[1rem]',
+            'grid place-items-center',
+            classBySize[size],
+            clipClassBySize[size],
+            className
+          )}
+        >
+          {children}
+        </div>
+        {showLogo(size, showEmblem) && <AvatarLogo size={size} />}
       </div>
-
-      {showLogo(size, showEmblem) && <AvatarLogo size={size} />}
     </div>
   )
 }

diff --git a/packages/base/Avatar/src/Avatar/IconAvatar/IconAvatar.tsx b/packages/base/Avatar/src/Avatar/IconAvatar/IconAvatar.tsx
@@ -19,11 +19,7 @@ const IconAvatar = ({
 }: Props) => {
   return (
     <Profile16
-      className={twMerge(
-        className,
-        'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
-        classBySize[size]
-      )}
+      className={twMerge(className, classBySize[size])}
       color='white'
       data-testid={dataTestId}
       style={style}

diff --git a/packages/base/Avatar/src/Avatar/ImageAvatar/ImageAvatar.tsx b/packages/base/Avatar/src/Avatar/ImageAvatar/ImageAvatar.tsx
@@ -28,7 +28,7 @@ const ImageAvatar = (props: Props) => {
       <Image
         alt={alt || name || ''}
         className={twMerge(
-          'object-cover w-full h-full absolute left-0 top-0 [image-rendering:-webkit-optimize-contrast]',
+          'object-cover w-full h-full [image-rendering:-webkit-optimize-contrast]',
           className
         )}
         src={src}

diff --git a/packages/base/Avatar/src/Avatar/TextAvatar/TextAvatar.tsx b/packages/base/Avatar/src/Avatar/TextAvatar/TextAvatar.tsx
@@ -26,11 +26,7 @@ const TextAvatar = ({
   'data-private': dataPrivate,
 }: Props) => (
   <div
-    className={twMerge(
-      'uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)]',
-      containerTextClassBySize[size],
-      className
-    )}
+    className={twMerge('uppercase', containerTextClassBySize[size], className)}
     style={style}
     data-private={dataPrivate}
   >

diff --git a/packages/base/Avatar/src/Avatar/index.ts b/packages/base/Avatar/src/Avatar/index.ts
@@ -3,4 +3,5 @@ import type { OmitInternalProps } from '@toptal/picasso-shared'
 import type { Props } from './Avatar'
 
 export { default as Avatar } from './Avatar'
+export { AvatarWrapper } from './AvatarWrapper/AvatarWrapper'
 export type AvatarProps = OmitInternalProps<Props>
diff --git a/packages/base/Avatar/src/Avatar/story/LongName.example.tsx b/packages/base/Avatar/src/Avatar/story/LongName.example.tsx
@@ -3,22 +3,12 @@ import { Avatar, Container } from '@toptal/picasso'
 import { SPACING_4 } from '@toptal/picasso-utils'
 
 const Example = () => (
-  <Container top={SPACING_4}>
-    <Container inline>
-      <Avatar size='xxsmall' name='William Wallace Wo Wade' />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar size='xsmall' name='William Wallace Wo Wade' />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar size='small' name='William Wallace Wo Wade' />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar size='medium' name='William Wallace Wo Wade' />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar size='large' name='William Wallace Wo Wade' />
-    </Container>
+  <Container top={SPACING_4} flex gap={SPACING_4}>
+    <Avatar size='xxsmall' name='William Wallace Wo Wade' />
+    <Avatar size='xsmall' name='William Wallace Wo Wade' />
+    <Avatar size='small' name='William Wallace Wo Wade' />
+    <Avatar size='medium' name='William Wallace Wo Wade' />
+    <Avatar size='large' name='William Wallace Wo Wade' />
   </Container>
 )
 

diff --git a/packages/base/Avatar/src/Avatar/story/Sizes.example.tsx b/packages/base/Avatar/src/Avatar/story/Sizes.example.tsx
@@ -4,83 +4,53 @@ import { SPACING_4 } from '@toptal/picasso-utils'
 
 const Example = () => (
   <div>
-    <Container>
-      <Container inline>
-        <Avatar
-          size='xxsmall'
-          alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
-          name='Jacqueline Roque'
-          src='./jacqueline-with-flowers-1954-square.jpg'
-        />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar
-          size='xsmall'
-          alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
-          name='Jacqueline Roque'
-          src='./jacqueline-with-flowers-1954-square.jpg'
-        />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar
-          size='small'
-          alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
-          name='Jacqueline Roque'
-          src='./jacqueline-with-flowers-1954-square.jpg'
-        />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar
-          size='medium'
-          alt='Jacqueline Roque. Pablo Picasso, 1954. Medium'
-          name='Jacqueline Roque'
-          src='./jacqueline-with-flowers-1954-square.jpg'
-        />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar
-          size='large'
-          alt='Jacqueline Roque. Pablo Picasso, 1954. Large'
-          name='Jacqueline Roque'
-          src='./jacqueline-with-flowers-1954-square.jpg'
-        />
-      </Container>
+    <Container top={SPACING_4} flex gap={SPACING_4}>
+      <Avatar
+        size='xxsmall'
+        alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
+        name='Jacqueline Roque'
+        src='./jacqueline-with-flowers-1954-square.jpg'
+      />
+      <Avatar
+        size='xsmall'
+        alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
+        name='Jacqueline Roque'
+        src='./jacqueline-with-flowers-1954-square.jpg'
+      />
+      <Avatar
+        size='small'
+        alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
+        name='Jacqueline Roque'
+        src='./jacqueline-with-flowers-1954-square.jpg'
+      />
+      <Avatar
+        size='medium'
+        alt='Jacqueline Roque. Pablo Picasso, 1954. Medium'
+        name='Jacqueline Roque'
+        src='./jacqueline-with-flowers-1954-square.jpg'
+      />
+      <Avatar
+        size='large'
+        alt='Jacqueline Roque. Pablo Picasso, 1954. Large'
+        name='Jacqueline Roque'
+        src='./jacqueline-with-flowers-1954-square.jpg'
+      />
     </Container>
 
-    <Container top={SPACING_4}>
-      <Container inline>
-        <Avatar size='xxsmall' name='Jacqueline Roque' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='xsmall' name='Jacqueline Roque' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='small' name='Jacqueline Roque' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='medium' name='Jacqueline Roque' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='large' name='Jacqueline Roque' />
-      </Container>
+    <Container top={SPACING_4} flex gap={SPACING_4}>
+      <Avatar size='xxsmall' name='Jacqueline Roque' />
+      <Avatar size='xsmall' name='Jacqueline Roque' />
+      <Avatar size='small' name='Jacqueline Roque' />
+      <Avatar size='medium' name='Jacqueline Roque' />
+      <Avatar size='large' name='Jacqueline Roque' />
     </Container>
 
-    <Container top={SPACING_4}>
-      <Container inline>
-        <Avatar size='xxsmall' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='xsmall' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='small' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='medium' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='large' />
-      </Container>
+    <Container top={SPACING_4} flex gap={SPACING_4}>
+      <Avatar size='xxsmall' />
+      <Avatar size='xsmall' />
+      <Avatar size='small' />
+      <Avatar size='medium' />
+      <Avatar size='large' />
     </Container>
   </div>
 )