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

Author: se7en-illa

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() {

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"

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"
       />

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"
       />

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: '🙏🏾',
     },
     {

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),

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.
    */

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;

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;

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;