Avatar/AvatarGroup: VR Implementation Changes

docs/examples/avatar/colorExample.tsx

@@ -0,0 +1,35 @@
+import { Avatar, Box, Flex } from 'gestalt';
+
+type Color = '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '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' },
+];
+
+export default function Example() {
+  return (
+    <Box maxWidth={900} width="100%">
+      <Flex alignItems="center" height="50%" justifyContent="evenly" width="100%">
+        {avatars.map(({ name, color }) => (
+          <Box key={name} width={40}>
+            <Avatar color={color} name={name} outline />
+          </Box>
+        ))}
+      </Flex>
+    </Box>
+  );
+}

docs/examples/avatar/containerExample.tsx

@@ -5,10 +5,10 @@ export default function Example() {
     <Box maxWidth={900} width="100%">
       <Flex>
         <Box width={40}>
-          <Avatar name="Julia" />
+          <Avatar name="Keerthi" />
         </Box>
         <Box column={2}>
-          <Avatar name="Julia" />
+          <Avatar name="Keethi" />
         </Box>
         <Box column={4}>
           <Avatar name="Keerthi" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />

docs/examples/avatar/ideasExample.tsx

@@ -1,10 +1,19 @@
-import { Avatar, Flex, Text } from 'gestalt';
+import { Avatar, Flex, Text, useDangerouslyInGestaltExperiment } from 'gestalt';
 
 export default function Example() {
+  const isInVRExperiment = useDangerouslyInGestaltExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
+  const src = isInVRExperiment
+    ? 'https://i.pinimg.com/564x/b9/f0/56/b9f0561e2d7927fa427f2306a41bce11.jpg'
+    : 'https://i.ibb.co/jVR29XV/stock5.jpg';
+
   return (
     <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
       <Flex alignItems="center" direction="column" gap={{ column: 2, row: 0 }}>
-        <Avatar name="Artwork" size="xl" src="https://i.ibb.co/jVR29XV/stock5.jpg" />
+        <Avatar name="Artwork" size="xl" src={src} />
         <Text weight="bold">Explore Typographic Art</Text>
       </Flex>
     </Flex>

docs/examples/avatar/mainExample.tsx

@@ -1,7 +1,39 @@
-import { Avatar, Flex } from 'gestalt';
+import { Avatar, Flex, useDangerouslyInGestaltExperiment } from 'gestalt';
 
 export default function Example() {
-  return (
+  const isInVRExperiment = useDangerouslyInGestaltExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
+  return isInVRExperiment ? (
+    <Flex
+      alignContent="center"
+      gap={{ row: 4, column: 0 }}
+      height="100%"
+      justifyContent="center"
+      wrap
+    >
+      <Avatar
+        name="Fatima"
+        size="xs"
+        src="https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg"
+      />
+      <Avatar color="01" 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
+        name="Ayesha"
+        size="xl"
+        src="https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg"
+      />
+    </Flex>
+  ) : (
     <Flex
       alignContent="center"
       gap={{ row: 4, column: 0 }}
@@ -10,9 +42,9 @@ export default function Example() {
       wrap
     >
       <Avatar name="Keerthi" size="xs" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />
-      <Avatar name="Keerthi" size="sm" />
+      <Avatar name="Alberto" size="sm" />
       <Avatar name="Keerthi" size="md" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" verified />
-      <Avatar name="Ayesha" size="lg" />
+      <Avatar name="Alberto" size="lg" />
       <Avatar name="Keerthi" size="xl" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />
     </Flex>
   );

docs/examples/avatar/nameExample.tsx

@@ -1,6 +1,16 @@
-import { Avatar, Flex, Text } from 'gestalt';
+import { Avatar, Flex, Text, useDangerouslyInGestaltExperiment } from 'gestalt';
 
 export default function Example() {
+  const isInVRExperiment = useDangerouslyInGestaltExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
+  const name = isInVRExperiment ? 'Ayesha Rashad' : 'Shanice Byles';
+  const src = isInVRExperiment
+    ? 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg'
+    : 'https://i.ibb.co/7tGKGvb/shanice.jpg';
+
   return (
     <Flex
       alignItems="center"
@@ -10,8 +20,8 @@ export default function Example() {
       justifyContent="center"
       width="100%"
     >
-      <Avatar name="Shanice Byles" size="xl" src="https://i.ibb.co/7tGKGvb/shanice.jpg" />
-      <Text weight="bold">Shanice Byles</Text>
+      <Avatar name={name} size="xl" src={src} />
+      <Text weight="bold">{name}</Text>
     </Flex>
   );
 }

docs/examples/avatar/noEmojiExample.tsx

@@ -1,9 +1,18 @@
-import { Avatar, Flex } from 'gestalt';
+import { Avatar, Flex, useDangerouslyInGestaltExperiment } from 'gestalt';
 
 export default function Example() {
+  const isInVRExperiment = useDangerouslyInGestaltExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
   return (
     <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
-      <Avatar name="😀" size="lg" />
+      <Avatar
+        color={isInVRExperiment ? '01' : undefined}
+        name={isInVRExperiment ? '🌹' : '😀'}
+        size="lg"
+      />
     </Flex>
   );
 }

docs/examples/avatar/noImageSourceExample.tsx

@@ -1,9 +1,18 @@
-import { Avatar, Flex } from 'gestalt';
+import { Avatar, Flex, useDangerouslyInGestaltExperiment } from 'gestalt';
 
 export default function Example() {
+  const isInVRExperiment = useDangerouslyInGestaltExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
   return (
     <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
-      <Avatar name="Keerthi" size="lg" />
+      <Avatar
+        color={isInVRExperiment ? '01' : undefined}
+        name={isInVRExperiment ? 'Rosa' : 'Keerthi'}
+        size="lg"
+      />
     </Flex>
   );
 }

docs/examples/avatar/overExample.tsx

@@ -1,11 +1,20 @@
-import { Avatar, Box, Flex, Mask, Text } from 'gestalt';
+import { Avatar, Box, Flex, Mask, Text, useDangerouslyInGestaltExperiment } from 'gestalt';
 
 export default function Example() {
+  const isInVRExperiment = useDangerouslyInGestaltExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
+  const src = isInVRExperiment
+    ? 'https://i.pinimg.com/564x/8e/fb/f7/8efbf75008c34394104ef9568c038d2d.jpg'
+    : 'https://i.ibb.co/jVR29XV/stock5.jpg';
+
   return (
     <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
       <Box position="relative">
         <Mask wash>
-          <Avatar name="Artwork" size="xl" src="https://i.ibb.co/jVR29XV/stock5.jpg" />
+          <Avatar name="Artwork" size="xl" src={src} />
         </Mask>
         <Box left position="absolute" top>
           <Text weight="bold">Explore Typographic Art</Text>

docs/examples/avatar/personExample.tsx

@@ -1,6 +1,17 @@
-import { Avatar, Flex, Text } from 'gestalt';
+import { Avatar, Flex, Text, useDangerouslyInGestaltExperiment } from 'gestalt';
 
 export default function Example() {
+  const isInVRExperiment = useDangerouslyInGestaltExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
+  const firstName = isInVRExperiment ? 'Sora' : 'Keerthi';
+  const fullName = isInVRExperiment ? 'Sora Suzuki' : 'Keerthi Singh';
+  const src = isInVRExperiment
+    ? 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg'
+    : 'https://i.ibb.co/ZfCZrY8/keerthi.jpg';
+
   return (
     <Flex
       alignItems="center"
@@ -10,8 +21,8 @@ export default function Example() {
       justifyContent="center"
       width="100%"
     >
-      <Avatar name="Keerthi" size="xl" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />
-      <Text weight="bold">Keerthi Singh</Text>
+      <Avatar name={firstName} size="xl" src={src} />
+      <Text weight="bold">{fullName}</Text>
     </Flex>
   );
 }

docs/examples/avatar/shapeExample.tsx

@@ -1,17 +1,20 @@
-import { Flex, Image, Mask } from 'gestalt';
+import { Flex, Image, Mask, useDangerouslyInGestaltExperiment } from 'gestalt';
 
 export default function Example() {
+  const isInVRExperiment = useDangerouslyInGestaltExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
+  const alt = isInVRExperiment ? 'Ayesha Avatar' : 'Keerthi Avatar';
+  const src = isInVRExperiment
+    ? 'https://i.pinimg.com/originals/50/ce/c4/50cec4ca4c65131580c540c65548e0a3.jpg'
+    : 'https://i.ibb.co/ZfCZrY8/keerthi.jpg';
+
   return (
     <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
       <Mask height={150} rounding={3} width={150}>
-        <Image
-          alt="Keerthi Avatar"
-          color="#000"
-          fit="contain"
-          naturalHeight={1}
-          naturalWidth={1}
-          src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
-        />
+        <Image alt={alt} color="#000" fit="contain" naturalHeight={1} naturalWidth={1} src={src} />
       </Mask>
     </Flex>
   );

docs/examples/avatar/sizingExample.tsx

@@ -1,13 +1,23 @@
-import { Avatar, Flex } from 'gestalt';
+import { Avatar, Flex, useDangerouslyInGestaltExperiment } from 'gestalt';
 
 export default function Example() {
+  const isInVRExperiment = useDangerouslyInGestaltExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
+  const name = isInVRExperiment ? 'Fatima' : 'Keerthi';
+  const src = isInVRExperiment
+    ? 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg'
+    : 'https://i.ibb.co/ZfCZrY8/keerthi.jpg';
+
   return (
     <Flex alignItems="center" gap={4} height="100%" justifyContent="center" width="100%" wrap>
-      <Avatar name="Keerthi" size="xs" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />
-      <Avatar name="Keerthi" size="sm" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />
-      <Avatar name="Keerthi" size="md" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />
-      <Avatar name="Keerthi" size="lg" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />
-      <Avatar name="Keerthi" size="xl" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />
+      <Avatar name={name} size="xs" src={src} />
+      <Avatar name={name} size="sm" src={src} />
+      <Avatar name={name} size="md" src={src} />
+      <Avatar name={name} size="lg" src={src} />
+      <Avatar name={name} size="xl" src={src} />
     </Flex>
   );
 }

docs/examples/avatar/verifiedExample.tsx

@@ -1,13 +1,23 @@
-import { Avatar, Flex } from 'gestalt';
+import { Avatar, Flex, useDangerouslyInGestaltExperiment } from 'gestalt';
 
 export default function Example() {
+  const isInVRExperiment = useDangerouslyInGestaltExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
+  const name = isInVRExperiment ? 'Sora' : 'Shanice';
+  const src = isInVRExperiment
+    ? 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg'
+    : 'https://i.ibb.co/7tGKGvb/shanice.jpg';
+
   return (
     <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
       <Avatar
-        accessibilityLabel="Shanice, Verified account"
-        name="Shanice"
+        accessibilityLabel={`${name}, Verified account`}
+        name={name}
         size="lg"
-        src="https://i.ibb.co/7tGKGvb/shanice.jpg"
+        src={src}
         verified
       />
     </Flex>