Avatar,AvatarGroup: Update typing on color prop (#3853)

pinterest · Nov 5, 2024 · 882e6de · 882e6de
1 parent 7a9672e
commit 882e6de
Show file tree

Hide file tree

Showing 13 changed files with 50 additions and 50 deletions.
diff --git a/docs/examples/avatar/colorExample.tsx b/docs/examples/avatar/colorExample.tsx
@@ -1,23 +1,23 @@
 import { Avatar, Box, Flex } from 'gestalt';
 
-type Color = '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10';
+type Color = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
 
 interface AvatarProps {
   name: string;
   color: Color;
 }
 
 const avatars: AvatarProps[] = [
-  { name: 'Alberto', color: '01' },
-  { name: 'Andy', color: '02' },
-  { name: 'Alexandra', color: '03' },
-  { name: 'Alexi', color: '04' },
-  { name: 'Alonso', color: '05' },
-  { name: 'Arturo', color: '06' },
-  { name: 'Amanda', color: '07' },
-  { name: 'Angelina', color: '08' },
-  { name: 'Adrian', color: '09' },
-  { name: 'Amelia', color: '10' },
+  { name: 'Alberto', color: 1 },
+  { name: 'Andy', color: 2 },
+  { name: 'Alexandra', color: 3 },
+  { name: 'Alexi', color: 4 },
+  { name: 'Alonso', color: 5 },
+  { name: 'Arturo', color: 6 },
+  { name: 'Amanda', color: 7 },
+  { name: 'Angelina', color: 8 },
+  { name: 'Adrian', color: 9 },
+  { name: 'Amelia', color: 10 },
 ];
 
 export default function Example() {

diff --git a/docs/examples/avatar/mainExample.tsx b/docs/examples/avatar/mainExample.tsx
@@ -19,14 +19,14 @@ export default function Example() {
         size="xs"
         src="https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg"
       />
-      <Avatar color="01" name="Jamie" size="sm" />
+      <Avatar color={1} name="Jamie" size="sm" />
       <Avatar
         name="Sora"
         size="md"
         src="https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg"
         verified
       />
-      <Avatar color="07" name="Ayesha" size="lg" />
+      <Avatar color={7} name="Ayesha" size="lg" />
       <Avatar
         name="Ayesha"
         size="xl"

diff --git a/docs/examples/avatar/noEmojiExample.tsx b/docs/examples/avatar/noEmojiExample.tsx
@@ -9,7 +9,7 @@ export default function Example() {
   return (
     <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
       <Avatar
-        color={isInVRExperiment ? '01' : undefined}
+        color={isInVRExperiment ? 1 : undefined}
         name={isInVRExperiment ? '🌹' : '😀'}
         size="lg"
       />

diff --git a/docs/examples/avatar/noImageSourceExample.tsx b/docs/examples/avatar/noImageSourceExample.tsx
@@ -9,7 +9,7 @@ export default function Example() {
   return (
     <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
       <Avatar
-        color={isInVRExperiment ? '01' : undefined}
+        color={isInVRExperiment ? 1 : undefined}
         name={isInVRExperiment ? 'Rosa' : 'Keerthi'}
         size="lg"
       />

diff --git a/docs/examples/avatarGroup/noEmoji.tsx b/docs/examples/avatarGroup/noEmoji.tsx
@@ -21,11 +21,11 @@ export default function Example() {
 
   const collaboratorsVR = [
     {
-      color: '10',
+      color: 10,
       name: 'Sora',
     },
     {
-      color: '04',
+      color: 4,
       name: '🙏🏾',
     },
     {

diff --git a/docs/pages/web/avatargroup.tsx b/docs/pages/web/avatargroup.tsx
@@ -184,7 +184,7 @@ export default function AvatarGroupPage({ generatedDocGen }: { generatedDocGen:
         src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
       },
       {
-        color: '08',
+        color: 8,
         name: 'Zola',
       },
       {
@@ -203,7 +203,7 @@ export default function AvatarGroupPage({ generatedDocGen }: { generatedDocGen:
     ],
     [
       {
-        color: '10',
+        color: 10,
         name: 'Benito',
       },
       {
@@ -214,19 +214,19 @@ export default function AvatarGroupPage({ generatedDocGen }: { generatedDocGen:
     ],
     [
       {
-        color: '04',
+        color: 4,
         name: 'Alanna',
       },
       {
-        color: '06',
+        color: 6,
         name: 'Elliot',
       },
       {
-        color: '08',
+        color: 8,
         name: 'Ricardo',
       },
       {
-        color: '10',
+        color: 10,
         name: 'Ricardo',
       },
       ...new Array(10),

diff --git a/packages/gestalt/src/Avatar.tsx b/packages/gestalt/src/Avatar.tsx
@@ -8,7 +8,7 @@ type Props = {
   /**
    * The background color chosen by the user. A default color will be used if none is selected.
    */
-  color?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10';
+  color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
   /**
    * The name of the user. This is used for the placeholder treatment if an image is not available.
    */

diff --git a/packages/gestalt/src/Avatar/DefaultAvatar.tsx b/packages/gestalt/src/Avatar/DefaultAvatar.tsx
@@ -2,7 +2,7 @@ import AvatarFoundation from './Foundation';
 
 type Props = {
   accessibilityLabel?: string;
-  color?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10';
+  color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
   isHovered?: boolean;
   isPressed?: boolean;
   name: string;

diff --git a/packages/gestalt/src/Avatar/Foundation.tsx b/packages/gestalt/src/Avatar/Foundation.tsx
@@ -13,7 +13,7 @@ import useInExperiment from '../useInExperiment';
 const ICON_SIZE_RATIO = (20 / 48) * 100; // For pixel perfect icon button, we use the icon (20px) to parent container (48px) size ratio
 
 type ResponsiveFitSizeBoxProps = {
-  color?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10';
+  color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
   children: ReactNode;
   content: string;
   isCollaboratorCount?: boolean;
@@ -88,7 +88,7 @@ function ResponsiveFitSizeBox({
 }
 
 type AvatarFoundationProps = {
-  color?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10';
+  color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
   children?: string | number;
   isCollaboratorCount?: boolean;
   isHovered?: boolean;

diff --git a/packages/gestalt/src/Avatar/InternalAvatar.tsx b/packages/gestalt/src/Avatar/InternalAvatar.tsx
@@ -19,7 +19,7 @@ const sizes = {
 
 type Props = {
   accessibilityLabel?: string;
-  color?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10';
+  color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
   isHovered?: boolean;
   isPressed?: boolean;
   name: string;

diff --git a/packages/gestalt/src/Avatar/getAvatarColorToken.ts b/packages/gestalt/src/Avatar/getAvatarColorToken.ts
@@ -15,61 +15,61 @@ const colorTokensLight: ColorTokens = Object.freeze({
     hover: '#D6D4CD',
     pressed: '#C2C1BC',
   },
-  '01': {
+  1: {
     // redWeak
     base: '#FFD3D1',
     hover: '#FBBEBB',
     pressed: '#F4A8A4',
   },
-  '02': {
+  2: {
     // redDefault
     base: '#FF9494',
     hover: '#F87777',
     pressed: '#ED5A5A',
   },
-  '03': {
+  3: {
     // purpleWeak
     base: '#FCD8FC',
     hover: '#FAC7FA',
     pressed: '#F8B5F8',
   },
-  '04': {
+  4: {
     // purpleDefault
     base: '#EFADEF',
     hover: '#E599E5',
     pressed: '#DA86DA',
   },
-  '05': {
+  5: {
     // blueWeak
     base: '#C5EAF7',
     hover: '#A8DDF0',
     pressed: '#8ECFE6',
   },
-  '06': {
+  6: {
     // blueDefault
     base: '#7CBEDE',
     hover: '#58A9D0',
     pressed: '#4096BF',
   },
-  '07': {
+  7: {
     // greenWeak
     base: '#D0E2A8',
     hover: '#BCD090',
     pressed: '#A7B97E',
   },
-  '08': {
+  8: {
     // greenDefault
     base: '#A8BB63',
     hover: '#93A550',
     pressed: '#81904C',
   },
-  '09': {
+  9: {
     // orangeWeak
     base: '#FDE7C9',
     hover: '#F9D9AE',
     pressed: '#F4CC95',
   },
-  '10': {
+  10: {
     // orangeDefault
     base: '#FBC55B',
     hover: '#F8B430',
@@ -83,61 +83,61 @@ const colorTokensDark: ColorTokens = Object.freeze({
     hover: '#757570',
     pressed: '#757570',
   },
-  '01': {
+  1: {
     // redWeak
     base: '#8A0F0F',
     hover: '#8A0F0F',
     pressed: '#8A0F0F',
   },
-  '02': {
+  2: {
     // redDefault
     base: '#B2001A',
     hover: '#B2001A',
     pressed: '#B2001A',
   },
-  '03': {
+  3: {
     // purpleWeak
     base: '#6D4270',
     hover: '#6D4270',
     pressed: '#6D4270',
   },
-  '04': {
+  4: {
     // purpleDefault
     base: '#8F4696',
     hover: '#8F4696',
     pressed: '#8F4696',
   },
-  '05': {
+  5: {
     // blueWeak
     base: '#215D82',
     hover: '#215D82',
     pressed: '#215D82',
   },
-  '06': {
+  6: {
     // blueDefault
     base: '#007DB8',
     hover: '#007DB8',
     pressed: '#007DB8',
   },
-  '07': {
+  7: {
     // greenWeak
     base: '#265926',
     hover: '#265926',
     pressed: '#265926',
   },
-  '08': {
+  8: {
     // greenDefault
     base: '#517D3B',
     hover: '#517D3B',
     pressed: '#517D3B',
   },
-  '09': {
+  9: {
     // orangeWeak
     base: '#9B4B1C',
     hover: '#9B4B1C',
     pressed: '#9B4B1C',
   },
-  '10': {
+  10: {
     // orangeDefault
     base: '#C66F31',
     hover: '#C66F31',

diff --git a/packages/gestalt/src/AvatarGroup.tsx b/packages/gestalt/src/AvatarGroup.tsx
@@ -45,7 +45,7 @@ type Props = {
    * The user group data. See the [collaborators display](https://gestalt.pinterest.systems/web/avatargroup#Collaborators-display) variant to learn more.
    */
   collaborators: ReadonlyArray<{
-    color?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10';
+    color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
     name: string;
     src?: string;
   }>;

diff --git a/packages/gestalt/src/AvatarGroup/CollaboratorAvatar.tsx b/packages/gestalt/src/AvatarGroup/CollaboratorAvatar.tsx
@@ -4,7 +4,7 @@ import PositioningWrapper from './PositioningWrapper';
 import InternalAvatar from '../Avatar/InternalAvatar';
 
 type Props = BaseStackType & {
-  color?: '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10';
+  color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
   index: number;
   name: string;
   isHovered: boolean;