Add stories for responsive props in Flex and Grid (#2014)

Co-authored-by: Robert Snow <rsnow@adobe.com>
adobe · Jul 14, 2021 · 74040b7 · 74040b7
1 parent 64e41c5
commit 74040b7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/packages/@react-spectrum/layout/stories/Flex.stories.tsx b/packages/@react-spectrum/layout/stories/Flex.stories.tsx
@@ -159,4 +159,14 @@ storiesOf('Flex', module)
         <View backgroundColor="magenta-600" order={1} width="size-800" height="size-800" />
       </Flex>
     )
+  )
+  .add(
+    'responsive',
+    () => (
+      <Flex direction={{base: 'column', L: 'row'}} gap={{base: 'size-100', M: 'size-250', L: 'size-350'}}>
+        <View backgroundColor="celery-600"  width="size-800" height="size-800" />
+        <View backgroundColor="blue-600"  width="size-800" height="size-800" />
+        <View backgroundColor="magenta-600" width="size-800" height="size-800" />
+      </Flex>
+    )
   );
diff --git a/packages/@react-spectrum/layout/stories/Grid.stories.tsx b/packages/@react-spectrum/layout/stories/Grid.stories.tsx
@@ -59,6 +59,21 @@ storiesOf('Grid', module)
         )}
       </Grid>
     )
+  )
+  .add(
+    'responsive',
+    () => (
+      <Grid
+        columns={{base: repeat('auto-fit', 'size-800'), M: repeat('auto-fit', 'size-1200'), L: repeat('auto-fit', 'size-2000')}}
+        autoRows={{base: 'size-800', M: 'size-1200', L: 'size-2000'}}
+        justifyContent="center"
+        width="80%"
+        gap={{base: 'size-100', M: 'size-250', L: 'size-350'}}>
+        {colors.map(color =>
+          <View key={color} backgroundColor={color} />
+        )}
+      </Grid>
+    )
   );
 
 // function render(props: GridProps) {