docs: updates stories with stack and inline

Author: stuarthendren

src/components/AspectRatio/AspectRatio.stories.tsx

@@ -3,10 +3,11 @@ import React, { ComponentProps, useState } from 'react'
 import { AspectRatio } from '.'
 import { Box } from '../Box'
 import { Card, CardBody, CardHeading, CardSubheading } from '../Card'
-import { Row } from '../Flex'
 import { Image } from '../Image'
+import { Inline } from '../Inline'
 import { Label } from '../Label'
 import { Slider } from '../Slider'
+import { Stack } from '../Stack'
 
 export default {
   title: 'Components/AspectRatio',
@@ -40,12 +41,18 @@ export const Dynamic: Story = () => {
   const [denominator, setDenominator] = useState([16])
 
   return (
-    <Row>
+    <Inline>
       <Box variant="wide">
-        <Label>Numerator</Label>
-        <Slider value={numerator} onValueChange={setNumerator} />
-        <Label>Denominator</Label>
-        <Slider value={denominator} onValueChange={setDenominator} />
+        <Stack>
+          <Label>
+            Numerator
+            <Slider value={numerator} onValueChange={setNumerator} />
+          </Label>
+          <Label>
+            Denominator
+            <Slider value={denominator} onValueChange={setDenominator} />
+          </Label>
+        </Stack>
       </Box>
       <Card css={{ width: '50%' }}>
         <CardHeading>Photo by Damian Markutt</CardHeading>
@@ -59,6 +66,6 @@ export const Dynamic: Story = () => {
           </AspectRatio>
         </CardBody>
       </Card>
-    </Row>
+    </Inline>
   )
 }

src/components/Button/Button.stories.tsx

@@ -1,7 +1,9 @@
 import { Meta, Story } from '@storybook/react'
 import React, { ComponentProps } from 'react'
-import { Column, Grid, Row } from '../'
+import { Grid } from '../'
 import { Variants } from '../../docs/util'
+import { Inline } from '../Inline'
+import { Stack } from '../Stack'
 import { Button } from './Button'
 
 export default {
@@ -61,16 +63,16 @@ export const Default: Story<ComponentProps<typeof Button>> = (args) => {
 
 /* Three size options are available */
 export const Size: Story = () => (
-  <Row css={{ gap: '$3', mb: '$3' }}>
+  <Inline>
     <Button size="small">Small</Button>
     <Button size="default">Default</Button>
     <Button size="large">Large</Button>
-  </Row>
+  </Inline>
 )
 
 /* Add `full-width` to make the button grow to take the full width */
 export const FullWidth: Story = () => (
-  <Column css={{ gap: '$3' }}>
+  <Stack>
     <Button full-width size="small">
       Small
     </Button>
@@ -80,7 +82,7 @@ export const FullWidth: Story = () => (
     <Button full-width size="large">
       Large
     </Button>
-  </Column>
+  </Stack>
 )
 
 /* Three variants are supported,
@@ -90,16 +92,16 @@ export const FullWidth: Story = () => (
  * - `tertiary` use to pair with others as cancel or for icon buttons
  */
 export const Variant: Story = () => (
-  <Row css={{ gap: '$3' }}>
+  <Inline>
     <Button variant="primary">Primary</Button>
     <Button variant="secondary">Secondary</Button>
     <Button variant="tertiary">Tertiary</Button>
-  </Row>
+  </Inline>
 )
 
 /** If the action is destructive, say a delete or an action that cannot be undone, add the `destructive` flag */
 export const Destructive: Story = () => (
-  <Row css={{ gap: '$3' }}>
+  <Inline>
     <Button destructive variant="primary">
       Primary
     </Button>
@@ -109,12 +111,12 @@ export const Destructive: Story = () => (
     <Button destructive variant="tertiary">
       Tertiary
     </Button>
-  </Row>
+  </Inline>
 )
 
 /** The `disabled` state is controlled in the standard way */
 export const Disabled: Story = () => (
-  <Row css={{ gap: '$3' }}>
+  <Inline>
     <Button disabled variant="primary">
       Primary
     </Button>
@@ -124,7 +126,7 @@ export const Disabled: Story = () => (
     <Button disabled variant="tertiary">
       Tertiary
     </Button>
-  </Row>
+  </Inline>
 )
 
 /**

src/components/Card/Card.stories.tsx

@@ -10,7 +10,8 @@ import {
   CardLeadIn,
   CardSubheading,
 } from '.'
-import { Button, IconButton, Row, Svg, Text } from '../'
+import { Button, IconButton, Svg, Text } from '../'
+import { Inline } from '../Inline'
 
 export default {
   title: 'Components/Card',
@@ -44,7 +45,7 @@ export const Default: Story = () => {
  */
 export const Classic: Story = () => {
   return (
-    <Row css={{ gap: '$3' }}>
+    <Inline>
       <Card>
         <CardHeading>Default Card</CardHeading>
         <CardBody>
@@ -57,7 +58,7 @@ export const Classic: Story = () => {
           <Text>Lorem Ipsum is simply dummy text...</Text>
         </CardBody>
       </Card>
-    </Row>
+    </Inline>
   )
 }
 
@@ -68,7 +69,7 @@ export const Classic: Story = () => {
  */
 export const Outline: Story = () => {
   return (
-    <Row css={{ gap: '$3' }}>
+    <Inline>
       <Card variant="outline">
         <CardHeading>Outline</CardHeading>
         <CardBody>
@@ -81,7 +82,7 @@ export const Outline: Story = () => {
           <Text>Lorem Ipsum is simply dummy text...</Text>
         </CardBody>
       </Card>
-    </Row>
+    </Inline>
   )
 }
 
@@ -92,7 +93,7 @@ export const Outline: Story = () => {
  */
 export const Ghost: Story = () => {
   return (
-    <Row css={{ gap: '$3' }}>
+    <Inline>
       <Card variant="ghost">
         <CardHeading>Ghost</CardHeading>
         <CardBody>
@@ -105,7 +106,7 @@ export const Ghost: Story = () => {
           <Text>Lorem Ipsum is simply dummy text...</Text>
         </CardBody>
       </Card>
-    </Row>
+    </Inline>
   )
 }
 
@@ -128,7 +129,7 @@ export const Body: Story = () => (
  * By default headings are just `div`s, use the `as` prop if the heading should be semantic.
  */
 export const Headers: Story = () => (
-  <Row css={{ flexWrap: 'wrap', gap: '$3' }}>
+  <Inline wrap>
     <Card>
       <CardHeading>Heading</CardHeading>
       <CardBody>
@@ -149,7 +150,7 @@ export const Headers: Story = () => (
         <Text>Lorem Ipsum is simply dummy text...</Text>
       </CardBody>
     </Card>
-  </Row>
+  </Inline>
 )
 
 /**
@@ -159,7 +160,7 @@ export const Headers: Story = () => (
  * If a more complex layout is required you can create your own.
  */
 export const Actions: Story = () => (
-  <Row css={{ flexWrap: 'wrap', gap: '$3' }}>
+  <Inline wrap>
     <Card>
       <CardHeading>
         Heading
@@ -228,5 +229,5 @@ export const Actions: Story = () => (
         />
       </CardActions>
     </Card>
-  </Row>
+  </Inline>
 )

src/components/Chip/Chip.stories.tsx

@@ -2,8 +2,8 @@ import { action } from '@storybook/addon-actions'
 import { Meta, Story } from '@storybook/react'
 import React from 'react'
 import { Chip } from '.'
-import { Row } from '../'
 import { Variants } from '../../docs/util'
+import { Inline } from '../Inline'
 
 export default {
   title: 'Components/Chip',
@@ -14,17 +14,17 @@ export const Default: Story = (args) => <Chip {...args}>Chip</Chip>
 
 /** Chips are available in 2 sizes, `default` and `small`  */
 export const Sizes: Story = () => (
-  <>
+  <Inline css={{ alignItems: 'center' }}>
     <Chip variant="info" size="small">
       New
     </Chip>
     <Chip variant="error">Error</Chip>
-  </>
+  </Inline>
 )
 
 /** If an `onClose` prop is provided a close button is added and clicking calls the onClose`  */
 export const Closable: Story = () => (
-  <Row css={{ gap: '$3', alignItems: 'center' }}>
+  <Inline css={{ alignItems: 'center' }}>
     <Chip variant="info" size="small" onClose={action('close')}>
       Close
     </Chip>
@@ -50,7 +50,7 @@ export const Closable: Story = () => (
     >
       Click
     </Chip>
-  </Row>
+  </Inline>
 )
 
 export const All: Story = () => (
@@ -95,7 +95,7 @@ export const Interactive: Story = () => (
 )
 
 export const Disabled: Story = () => (
-  <Row css={{ gap: '$3', alignItems: 'center' }}>
+  <Inline css={{ alignItems: 'center' }}>
     <Chip
       as="button"
       onClick={action('disabled')}
@@ -128,5 +128,5 @@ export const Disabled: Story = () => (
     >
       Disabled
     </Chip>
-  </Row>
+  </Inline>
 )

src/components/Dialog/Dialog.stories.tsx

@@ -10,8 +10,10 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '.'
-import { Box, Button, Column, IconButton, Link, Row, Text } from '../'
+import { Box, Button, IconButton, Link, Row, Text } from '../'
 import { Close as CloseIcon } from '../Icons'
+import { Inline } from '../Inline'
+import { Stack } from '../Stack'
 
 export default {
   title: 'Components/Dialog',
@@ -97,15 +99,15 @@ export const CloseButton: Story = () => {
 
 /**
  * The dialog is portalled by default. This means the dialog will be appended to the body and so over lay other elements.
- * In addition, the `CompontsProvider`, by default, isolates the children in their own stacking context so this will not be afected by the z-index of other elements of the UI.
+ * In addition, the `ComponentsProvider`, by default, isolates the children in their own stacking context so this will not be affected by the z-index of other elements of the UI.
  *
  * This example shows how the z-index of other elements in the UI do not affect the dialog.
  *
  * This may not be the desired behaviour for your application so these defaults can be overridden, see below.
  */
 export const Portalled: Story = () => {
   return (
-    <Row gap centered>
+    <Inline align="center">
       <Dialog>
         <DialogTrigger>
           <Button>Default</Button>
@@ -162,7 +164,7 @@ export const Portalled: Story = () => {
           </DialogContent>
         </Dialog>
       </Box>
-    </Row>
+    </Inline>
   )
 }
 
@@ -171,7 +173,7 @@ export const Portalled: Story = () => {
  */
 export const zIndex: Story = () => {
   return (
-    <Row gap centered>
+    <Inline align="center">
       <Dialog>
         <DialogTrigger>
           <Button>Default</Button>
@@ -235,19 +237,19 @@ export const zIndex: Story = () => {
           </DialogContent>
         </Dialog>
       </Box>
-    </Row>
+    </Inline>
   )
 }
 
 /**
- * The element the dialog portalls to can be provided, and different effects can be achieved by supplying additional css. For example:
+ * The element the dialog portals to can be provided, and different effects can be achieved by supplying additional css. For example:
  */
 export const Container: Story = () => {
   const [element, setElement] = useState<HTMLElement | null>(null)
 
   return (
-    <Column gap>
-      <Row gap centered>
+    <Stack align="center">
+      <Inline align="center">
         <Dialog>
           <DialogTrigger>
             <Button>Default</Button>
@@ -334,14 +336,14 @@ export const Container: Story = () => {
             </DialogContent>
           </Dialog>
         </Box>
-      </Row>
+      </Inline>
       <Row
         css={{ position: 'relative', minHeight: '200px', minWidth: '100%' }}
         centered
         ref={setElement}
       >
         <Text>This area will now contain the dialog</Text>
       </Row>
-    </Column>
+    </Stack>
   )
 }