fixed sizing

pinterest · Oct 2, 2024 · 959ad29 · 959ad29
1 parent 2f43f03
commit 959ad29
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 100 deletions.
diff --git a/docs/examples/avatarGroup/accessibility.tsx b/docs/examples/avatarGroup/accessibility.tsx
@@ -1,5 +1,14 @@
 import { useEffect, useRef, useState } from 'react';
-import { AvatarGroup, Box, Flex, Layer, Popover, SearchField, Text } from 'gestalt';
+import {
+  AvatarGroup,
+  Box,
+  Flex,
+  Layer,
+  Popover,
+  SearchField,
+  Text,
+  useDangerouslyInGestaltExperiment,
+} from 'gestalt';
 
 function SearchCollaboratorsField() {
   const ref = useRef<null | HTMLInputElement>(null);
@@ -23,26 +32,88 @@ function SearchCollaboratorsField() {
 export default function Example() {
   const [open, setOpen] = useState(false);
   const anchorRef = useRef<null | HTMLAnchorElement | HTMLDivElement>(null);
+  const isInVRExperiment = useDangerouslyInGestaltExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
 
-  return (
+  const collaborators = [
+    {
+      name: 'Keerthi',
+      src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg',
+    },
+    {
+      name: 'Alberto',
+      src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg',
+    },
+    ...new Array(10),
+  ];
+
+  const collaboratorsVR = [
+    {
+      name: 'Fatima',
+      src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
+    },
+    {
+      name: 'Ayesha',
+      src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
+    },
+    ...new Array(10),
+  ];
+
+  const names = isInVRExperiment ? 'Fatima, Ayesha,' : 'Keerthi, Alberto,';
+
+  return isInVRExperiment ? (
+    <Flex height="100%" width="100%">
+      <Box height="200" marginTop={6} padding={2}>
+        <AvatarGroup
+          ref={anchorRef}
+          accessibilityExpanded={open}
+          accessibilityLabel={`Collaborators: ${names} and 10 more. Add collaborators to this board.`}
+          addCollaborators
+          collaborators={collaboratorsVR}
+          onClick={() => setOpen((value) => !value)}
+          role="button"
+          size="md"
+        />
+      </Box>
+      {open && (
+        <Layer>
+          <Popover
+            anchor={anchorRef.current}
+            idealDirection="down"
+            onDismiss={() => setOpen(false)}
+            positionRelativeToAnchor={false}
+            size={500}
+          >
+            <Box
+              flex="grow"
+              marginBottom={8}
+              marginEnd={4}
+              marginStart={4}
+              marginTop={6}
+              width={360}
+            >
+              <Flex direction="column" gap={{ column: 4, row: 0 }}>
+                <Text align="center" color="default" weight="bold">
+                  Invite collaborators
+                </Text>
+                <SearchCollaboratorsField />
+              </Flex>
+            </Box>
+          </Popover>
+        </Layer>
+      )}
+    </Flex>
+  ) : (
     <Flex height="100%" width="100%">
       <Box height="200" marginTop={6} padding={2}>
         <AvatarGroup
           ref={anchorRef}
           accessibilityExpanded={open}
-          accessibilityLabel="Collaborators: Keerthi, Alberto, and 10 more. Add collaborators to this board."
+          accessibilityLabel={`Collaborators: ${names} and 10 more. Add collaborators to this board.`}
           addCollaborators
-          collaborators={[
-            {
-              name: 'Keerthi',
-              src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg',
-            },
-            {
-              name: 'Alberto',
-              src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg',
-            },
-            ...new Array(10),
-          ]}
+          collaborators={isInVRExperiment ? collaboratorsVR : collaborators}
           onClick={() => setOpen((value) => !value)}
           role="button"
           size="md"

diff --git a/docs/examples/avatarGroup/accessibilityVR.tsx b/docs/examples/avatarGroup/accessibilityVR.tsx
diff --git a/docs/pages/web/avatargroup.tsx b/docs/pages/web/avatargroup.tsx
@@ -18,7 +18,6 @@ import PageHeader from '../../docs-components/PageHeader';
 import QualityChecklist from '../../docs-components/QualityChecklist';
 import SandpackExample from '../../docs-components/SandpackExample';
 import accessibility from '../../examples/avatarGroup/accessibility';
-import accessibilityVR from '../../examples/avatarGroup/accessibilityVR';
 import ideas from '../../examples/avatarGroup/ideas';
 import main from '../../examples/avatarGroup/main';
 import noEmoji from '../../examples/avatarGroup/noEmoji';
@@ -461,7 +460,7 @@ If AvatarGroup is used as a control button to show/hide Popover-component, we re
           <MainSection.Card
             cardSize="lg"
             sandpackExample={
-              <SandpackExample code={isInVRExperiment ? accessibilityVR : accessibility} name="ARIA" previewHeight={250} />
+              <SandpackExample code={accessibility} name="ARIA" previewHeight={250} />
             }
           />
         </MainSection.Subsection>