avatar/avatargroup changes

pinterest · Oct 1, 2024 · 9e28c88 · 9e28c88
1 parent f3c25b0
commit 9e28c88
Show file tree

Hide file tree

Showing 18 changed files with 108 additions and 1,388 deletions.
diff --git a/docs/examples/avatar/mainExample.tsx b/docs/examples/avatar/mainExample.tsx
@@ -1,6 +1,3 @@
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
 import { Avatar, Flex, useDangerouslyInGestaltExperiment } from 'gestalt';
 
 export default function Example() {
@@ -37,93 +34,6 @@ export default function Example() {
       />
     </Flex>
   ) : (
-=======
-// import { Avatar, Flex, useDangerouslyInGestaltExperiment } from 'gestalt';
-
-// export default function Example() {
-//   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="Sonnie" size="xs" src="https://i.pinimg.com/originals/7e/9d/12/7e9d12be6861c5918ad286a368ed5928.jpg" />
-//       <Avatar avatarColorIndex="02" name="Jamie" size="sm" />
-//       <Avatar name="Lupita" size="md" src="https://i.pinimg.com/originals/67/65/2d/67652d75420ad830da5c1e7042238c73.jpg" verified />
-//       <Avatar avatarColorIndex="05" name="Ayesha" size="lg" />
-//       <Avatar name="Mariska" size="xl" src="https://i.pinimg.com/originals/34/90/0e/34900ea0dba6408d8514874224e47c59.jpg" />
-//     </Flex>
-//   ) : (
-//     <Flex
-//       alignContent="center"
-//       gap={{ row: 4, column: 0 }}
-//       height="100%"
-//       justifyContent="center"
-//       wrap
-//     >
-//       <Avatar name="Keerthi" size="xs" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />
-//       <Avatar name="Keerthi" size="sm" />
-//       <Avatar name="Keerthi" size="md" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" verified />
-//       <Avatar name="Ayesha" size="lg" />
-//       <Avatar name="Keerthi" size="xl" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />
-//     </Flex>
-//   );
-// }
-
-
-=======
->>>>>>> 88a4a9048 (added more VR examples)
-import { Avatar, Flex } from 'gestalt';
-=======
-import { Avatar, Flex, useDangerouslyInGestaltExperiment } from 'gestalt';
->>>>>>> 2003c2dd8 (examples fixed)
-
-export default function Example() {
-  const isInVRExperiment = useDangerouslyInGestaltExperiment({
-    webExperimentName: 'web_gestalt_visualRefresh',
-    mwebExperimentName: 'web_gestalt_visualRefresh',
-  });
-
-<<<<<<< HEAD
-  return (
->>>>>>> e205634e9 (fixing docs)
-=======
-  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 avatarColor="01" name="Jamie" size="sm" />
-      <Avatar
-        name="Sora"
-        size="md"
-        src="https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg"
-        verified
-      />
-      <Avatar avatarColor="07" name="Ayesha" size="lg" />
-      <Avatar
-        name="Ayesha"
-        size="xl"
-        src="https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg"
-      />
-    </Flex>
-  ) : (
->>>>>>> 2003c2dd8 (examples fixed)
     <Flex
       alignContent="center"
       gap={{ row: 4, column: 0 }}
@@ -132,27 +42,9 @@ export default function Example() {
       wrap
     >
       <Avatar name="Keerthi" size="xs" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-      <Avatar name="Alberto" size="sm" />
-      <Avatar name="Keerthi" size="md" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" verified />
-      <Avatar name="Alberto" size="lg" />
-=======
-      <Avatar avatarColorIndex="02" name="Keerthi" size="sm" />
-      <Avatar name="Keerthi" size="md" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" verified />
-      <Avatar avatarColorIndex="05" name="Ayesha" size="lg" />
->>>>>>> e205634e9 (fixing docs)
-=======
-      <Avatar avatarColor="02" name="Keerthi" size="sm" />
-      <Avatar name="Keerthi" size="md" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" verified />
-      <Avatar avatarColor="05" name="Ayesha" size="lg" />
->>>>>>> 80cd4e984 (working on docs)
-=======
       <Avatar name="Alberto" size="sm" />
       <Avatar name="Keerthi" size="md" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" verified />
       <Avatar name="Alberto" size="lg" />
->>>>>>> 2003c2dd8 (examples fixed)
       <Avatar name="Keerthi" size="xl" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />
     </Flex>
   );

diff --git a/docs/examples/avatar/overExample.tsx b/docs/examples/avatar/overExample.tsx
@@ -6,19 +6,9 @@ export default function Example() {
     mwebExperimentName: 'web_gestalt_visualRefresh',
   });
 
-<<<<<<< HEAD
-<<<<<<< HEAD
   const src = isInVRExperiment
     ? 'https://i.pinimg.com/564x/8e/fb/f7/8efbf75008c34394104ef9568c038d2d.jpg'
     : 'https://i.ibb.co/jVR29XV/stock5.jpg';
-=======
-  const src = isInVRExperiment ? 'https://i.pinimg.com/564x/8e/fb/f7/8efbf75008c34394104ef9568c038d2d.jpg' : 'https://i.ibb.co/jVR29XV/stock5.jpg';
->>>>>>> 2003c2dd8 (examples fixed)
-=======
-  const src = isInVRExperiment
-    ? 'https://i.pinimg.com/564x/8e/fb/f7/8efbf75008c34394104ef9568c038d2d.jpg'
-    : 'https://i.ibb.co/jVR29XV/stock5.jpg';
->>>>>>> e3b5eac32 (prettier)
 
   return (
     <Flex alignItems="center" height="100%" justifyContent="center" width="100%">

diff --git a/docs/examples/avatar/shapeExample.tsx b/docs/examples/avatar/shapeExample.tsx
@@ -6,45 +6,15 @@ export default function Example() {
     mwebExperimentName: 'web_gestalt_visualRefresh',
   });
 
-<<<<<<< HEAD
-<<<<<<< HEAD
   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';
-=======
-  const alt = isInVRExperiment ? 'Sora Avatar' : 'Keerthi Avatar';
-<<<<<<< HEAD
-  const src = isInVRExperiment ? 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg' : 'https://i.ibb.co/ZfCZrY8/keerthi.jpg';
->>>>>>> 2003c2dd8 (examples fixed)
-=======
-=======
-  const alt = isInVRExperiment ? 'Ayesha Avatar' : 'Keerthi Avatar';
->>>>>>> 6b25f9ea8 (small fixes)
-  const src = isInVRExperiment
-    ? 'https://i.pinimg.com/originals/50/ce/c4/50cec4ca4c65131580c540c65548e0a3.jpg'
-    : 'https://i.ibb.co/ZfCZrY8/keerthi.jpg';
->>>>>>> e3b5eac32 (prettier)
 
   return (
     <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
       <Mask height={150} rounding={3} width={150}>
-<<<<<<< HEAD
-<<<<<<< HEAD
-        <Image alt={alt} color="#000" fit="contain" naturalHeight={1} naturalWidth={1} src={src} />
-=======
-        <Image
-          alt={alt}
-          color="#000"
-          fit="contain"
-          naturalHeight={1}
-          naturalWidth={1}
-          src={src}
-        />
->>>>>>> 2003c2dd8 (examples fixed)
-=======
         <Image alt={alt} color="#000" fit="contain" naturalHeight={1} naturalWidth={1} src={src} />
->>>>>>> e3b5eac32 (prettier)
       </Mask>
     </Flex>
   );

diff --git a/docs/examples/avatarGroup/accessibility.tsx b/docs/examples/avatarGroup/accessibility.tsx
@@ -1,8 +1,4 @@
 import { useEffect, useRef, useState } from 'react';
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
->>>>>>> e3b5eac32 (prettier)
 import {
   AvatarGroup,
   Box,
@@ -13,12 +9,6 @@ import {
   Text,
   useDangerouslyInGestaltExperiment,
 } from 'gestalt';
-<<<<<<< HEAD
-=======
-import { AvatarGroup, Box, Flex, Layer, Popover, SearchField, Text, useDangerouslyInGestaltExperiment } from 'gestalt';
->>>>>>> da83e2698 (updated AvatarGroup examples)
-=======
->>>>>>> e3b5eac32 (prettier)
 
 function SearchCollaboratorsField() {
   const ref = useRef<null | HTMLInputElement>(null);

diff --git a/docs/examples/avatarGroup/main.tsx b/docs/examples/avatarGroup/main.tsx
@@ -36,72 +36,7 @@ export default function Example() {
     },
   ];
 
-<<<<<<< HEAD
-<<<<<<< HEAD
-  const collaborators = [
-    {
-      name: 'Keerthi',
-      src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg',
-    },
-    {
-      name: 'Alberto',
-      src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg',
-    },
-    {
-      name: 'Shanice',
-      src: 'https://i.ibb.co/7tGKGvb/shanice.jpg',
-    },
-  ];
-
-  const collaboratorsVR = [
-    {
-      name: 'Fatima',
-      src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
-    },
-    {
-      name: 'Sora',
-      src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
-    },
-    {
-      name: 'Ayesha',
-      src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
-    },
-  ];
-
-  return (
-=======
-  return isInVRExperiment ? (
-    <Flex
-      alignContent="center"
-      gap={{ row: 4, column: 0 }}
-      height="100%"
-      justifyContent="center"
-      wrap
-    >
-      <AvatarGroup
-        accessibilityLabel="Collaborators: Keerthi, Alberto, Shanice."
-        collaborators={[
-          {
-            name: 'Keerthi',
-            src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg',
-          },
-          {
-            name: 'Alberto',
-            src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg',
-          },
-          {
-            name: 'Shanice',
-            src: 'https://i.ibb.co/7tGKGvb/shanice.jpg',
-          },
-        ]}
-        size="md"
-      />
-    </Flex>
-  ) : (
->>>>>>> 4707f0fa6 (fixed container)
-=======
   return (
->>>>>>> e205634e9 (fixing docs)
     <Flex
       alignContent="center"
       gap={{ row: 4, column: 0 }}

diff --git a/docs/examples/avatarGroup/noEmoji.tsx b/docs/examples/avatarGroup/noEmoji.tsx
@@ -21,27 +21,11 @@ export default function Example() {
 
   const collaboratorsVR = [
     {
-<<<<<<< HEAD
-<<<<<<< HEAD
       avatarColor: '10',
       name: 'Sora',
     },
     {
       avatarColor: '04',
-=======
-      avatarColor: "10",
-      name: 'Sora',
-    },
-    {
-      avatarColor: "04",
->>>>>>> da83e2698 (updated AvatarGroup examples)
-=======
-      avatarColor: '10',
-      name: 'Sora',
-    },
-    {
-      avatarColor: '04',
->>>>>>> e3b5eac32 (prettier)
       name: '🙏🏾',
     },
     {

diff --git a/docs/examples/avatarGroup/noImageSource.tsx b/docs/examples/avatarGroup/noImageSource.tsx
@@ -7,18 +7,8 @@ export default function Example() {
   });
 
   const accessibilityLabel = isInVRExperiment
-<<<<<<< HEAD
-<<<<<<< HEAD
     ? 'Collaborators: Fatima, Sora, Ayesha.'
     : 'Collaborators: Keerthi, Alberto, Shanice.';
-=======
-  ? 'Collaborators: Fatima, Sora, Ayesha.'
-  : 'Collaborators: Keerthi, Alberto, Shanice.';
->>>>>>> da83e2698 (updated AvatarGroup examples)
-=======
-    ? 'Collaborators: Fatima, Sora, Ayesha.'
-    : 'Collaborators: Keerthi, Alberto, Shanice.';
->>>>>>> e3b5eac32 (prettier)
 
   const collaborators = [
     {

diff --git a/docs/examples/avatarGroup/person.tsx b/docs/examples/avatarGroup/person.tsx
@@ -7,18 +7,8 @@ export default function Example() {
   });
 
   const accessibilityLabel = isInVRExperiment
-<<<<<<< HEAD
-<<<<<<< HEAD
     ? 'Collaborators: Fatima, Mami Wata, Ayesha.'
     : 'Collaborators: Keerthi, Mami Wata, Shanice.';
-=======
-  ? 'Collaborators: Fatima, Mami Wata, Ayesha.'
-  : 'Collaborators: Keerthi, Mami Wata, Shanice.';
->>>>>>> da83e2698 (updated AvatarGroup examples)
-=======
-    ? 'Collaborators: Fatima, Mami Wata, Ayesha.'
-    : 'Collaborators: Keerthi, Mami Wata, Shanice.';
->>>>>>> e3b5eac32 (prettier)
 
   const collaborators = [
     {