siddharthkp · siddharthkp · May 21, 2020 · May 21, 2020 · May 21, 2020
diff --git a/packages/docs/src/components/example.js b/packages/docs/src/components/example.js
@@ -102,7 +102,7 @@ const Code = ({ children, lang = 'jsx', ...props }) => {
         css={{
           position: 'absolute',
           right: 0,
-          top: '10px',
+          top: 0,
           svg: { color: copied ? '#38C172' : '#929FB1' },
           ':hover, :focus': { svg: { color: copied ? '#38C172' : '#c6cbd1' } }
         }}

diff --git a/packages/docs/src/pages/components/alert.js b/packages/docs/src/pages/components/alert.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { ThemeProvider, Alert, Link, Text } from 'react-ui'
+import { ThemeProvider, Alert, Link, Text, Stack } from 'react-ui'
 
 import {
   Page,
@@ -126,7 +126,7 @@ const Documentation = () => {
             <Alert variant="success">You did the thing!</Alert>
           </ThemeProvider>
         `}</Example.Code>
-          <Example.Preview direction="vertical" gap={4}>
+          <Example.Preview direction="vertical">
             <ThemeProvider
               components={{
                 Alert: {
@@ -149,8 +149,10 @@ const Documentation = () => {
                 }
               }}
             >
-              <Alert variant="warning">You should pay attention</Alert>
-              <Alert variant="success">You did the thing!</Alert>
+              <Stack direction="vertical" gap={4}>
+                <Alert variant="warning">You should pay attention</Alert>
+                <Alert variant="success">You did the thing!</Alert>
+              </Stack>
             </ThemeProvider>
           </Example.Preview>
         </Example>

diff --git a/packages/docs/src/pages/components/button.js b/packages/docs/src/pages/components/button.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { ThemeProvider, Button, Link, Text } from 'react-ui'
+import { ThemeProvider, Stack, Button, Link, Text } from 'react-ui'
 import {
   Page,
   Section,
@@ -57,7 +57,6 @@ const Documentation = () => {
 
       <Section title="Examples">
         <Example title="Variants">
-
           <Example.Preview gap={4}>
             <Button>Log in</Button>
             <Button variant="secondary" debug>
@@ -84,7 +83,7 @@ const Documentation = () => {
         </Para>
 
         <Example title="Full width">
-          <Example.Preview gap={4}>
+          <Example.Preview>
             <Button fullWidth>Sign up</Button>
           </Example.Preview>
           <Example.Code>{`
@@ -168,7 +167,7 @@ const Documentation = () => {
             <Button variant="danger" size="small">Delete</Button>
           </ThemeProvider>
         `}</Example.Code>
-          <Example.Preview gap={4} align="center">
+          <Example.Preview>
             <ThemeProvider
               components={{
                 Button: {
@@ -194,10 +193,12 @@ const Documentation = () => {
                 }
               }}
             >
-              <Button variant="primary">Cancel</Button>
-              <Button variant="danger" size="small">
-                Delete
-              </Button>
+              <Stack gap={4} align="center">
+                <Button variant="primary">Cancel</Button>
+                <Button variant="danger" size="small">
+                  Delete
+                </Button>
+              </Stack>
             </ThemeProvider>
           </Example.Preview>
         </Example>

diff --git a/packages/docs/src/pages/components/checkbox.js b/packages/docs/src/pages/components/checkbox.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Checkbox } from 'react-ui'
-import { Table, Page, Section, Props, Badge, Example } from '../../components'
+import { Page, Section, Props, Badge, Example } from '../../components'
 
 const Documentation = () => {
   return (

diff --git a/packages/docs/src/pages/components/link.js b/packages/docs/src/pages/components/link.js
@@ -1,12 +1,14 @@
 import React from 'react'
-import { ThemeProvider, Link, Text } from 'react-ui'
+import { ThemeProvider, Link, Text, Stack } from 'react-ui'
 import { Page, Props, Example, Section, Table, Para } from '../../components'
 
 const Documentation = () => {
   return (
     <Page title="Link" tagline="Use Links to connect pages with each other">
       <Para>
-        Extends <Link href="/components/Text">Text</Link>.
+        <Text>
+          Extends <Link href="/components/Text">Text</Link>.
+        </Text>
       </Para>
       <Example>
         <Example.Preview>
@@ -157,7 +159,7 @@ const Documentation = () => {
             </Link>
           </ThemeProvider>
         `}</Example.Code>
-          <Example.Preview direction="vertical" gap={2}>
+          <Example.Preview direction="vertical">
             <ThemeProvider
               components={{
                 Link: {
@@ -175,23 +177,22 @@ const Documentation = () => {
                 }
               }}
             >
-              <span>
+              <Stack direction="vertical" gap={2}>
                 <Link
                   href="https://github.com/siddharthkp/react-ui"
                   target="_blank"
                 >
                   Open GitHub repository
                 </Link>
-              </span>
-              <span>
+
                 <Link
                   variant="subtle"
                   href="https://github.com/siddharthkp/react-ui"
                   target="_blank"
                 >
                   Open GitHub repository
                 </Link>
-              </span>
+              </Stack>
             </ThemeProvider>
           </Example.Preview>
         </Example>

diff --git a/packages/docs/src/pages/components/skeleton.js b/packages/docs/src/pages/components/skeleton.js
@@ -9,7 +9,7 @@ const Documentation = () => {
       tagline="Use a skeleton to hint that some content is on it's way"
     >
       <Example>
-        <Example.Preview direction="vertical" gap={2}>
+        <Example.Preview>
           <Skeleton />
         </Example.Preview>
         <Example.Code>
@@ -34,8 +34,8 @@ const Documentation = () => {
 
       <Section title="Examples">
         <Example title="Width">
-          <Example.Preview>
-            <Stack direction="vertical" gap={2}>
+          <Example.Preview direction="vertical">
+            <Stack direction="vertical" gap={2} css={{ width: 200 }}>
               <Skeleton />
               <Skeleton width={120} />
             </Stack>
@@ -110,8 +110,10 @@ const Documentation = () => {
                 }
               }}
             >
-              <Skeleton />
-              <Skeleton width={120} />
+              <Stack direction="vertical" gap={2}>
+                <Skeleton />
+                <Skeleton width={120} />
+              </Stack>
             </ThemeProvider>
           </Example.Preview>
         </Example>

diff --git a/packages/docs/src/pages/components/spinner.js b/packages/docs/src/pages/components/spinner.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { ThemeProvider, Spinner, Link, Text } from 'react-ui'
+import { ThemeProvider, Spinner, Link, Text, Stack } from 'react-ui'
 import { Page, Props, Example, Section, Table, Para } from '../../components'
 
 const Documentation = () => {
@@ -98,7 +98,7 @@ const Documentation = () => {
             <Spinner size="large" />
           </ThemeProvider>
         `}</Example.Code>
-          <Example.Preview align="center" gap={4}>
+          <Example.Preview>
             <ThemeProvider
               components={{
                 Spinner: {
@@ -108,8 +108,10 @@ const Documentation = () => {
                 }
               }}
             >
-              <Spinner size="medium" />
-              <Spinner size="large" />
+              <Stack align="center" gap={4}>
+                <Spinner size="medium" />
+                <Spinner size="large" />
+              </Stack>
             </ThemeProvider>
           </Example.Preview>
         </Example>

diff --git a/packages/docs/src/pages/components/stack.js b/packages/docs/src/pages/components/stack.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Avatar, Link, Stack, Text, Input, Button } from 'react-ui'
-import { Page, Props, Example, Section, Badge } from '../../components'
+import { Page, Props, Para, Example, Section, Badge } from '../../components'
 
 const Documentation = () => {
   return (
@@ -198,6 +198,42 @@ const Documentation = () => {
             </Stack>
           `}</Example.Code>
         </Example>
+
+        <Para>
+          <Text>
+            Based on the{' '}
+            <Link href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+              working draft for flex gap
+            </Link>
+            , margin on the child element is added to the gap.
+          </Text>
+        </Para>
+        <Example title="Additive margins">
+          <Example.Preview direction="vertical" gap={10}>
+            <Stack gap={2}>
+              <Avatar
+                size="small"
+                src="https://react-ui.dev/favicon-light.png"
+              />
+              <Avatar
+                size="small"
+                marginLeft={2}
+                src="https://react-ui.dev/favicon-light.png"
+              />
+              <Avatar
+                size="small"
+                src="https://react-ui.dev/favicon-light.png"
+              />
+            </Stack>
+          </Example.Preview>
+          <Example.Code>{`
+            <Stack gap={2}>
+              <Avatar size="small" src="https://react-ui.dev/favicon-light.png" />
+              <Avatar marginLeft={2} size="small" src="https://react-ui.dev/favicon-light.png" />
+              <Avatar size="small" src="https://react-ui.dev/favicon-light.png" />
+            </Stack>
+          `}</Example.Code>
+        </Example>
       </Section>
     </Page>
   )

diff --git a/packages/docs/src/pages/components/switch.js b/packages/docs/src/pages/components/switch.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { ThemeProvider, Switch, Link, Text } from 'react-ui'
+import { ThemeProvider, Switch, Link, Text, Stack } from 'react-ui'
 import { Page, Props, Example, Section, Table, Para } from '../../components'
 
 const Documentation = () => {
@@ -123,7 +123,7 @@ const Documentation = () => {
             <Switch defaultValue={true} />
           </ThemeProvider>
         `}</Example.Code>
-          <Example.Preview direction="vertical" gap={2}>
+          <Example.Preview>
             <ThemeProvider
               components={{
                 Switch: {
@@ -134,8 +134,10 @@ const Documentation = () => {
                 }
               }}
             >
-              <Switch />
-              <Switch defaultValue={true} />
+              <Stack direction="vertical" gap={2}>
+                <Switch />
+                <Switch defaultValue={true} />
+              </Stack>
             </ThemeProvider>
           </Example.Preview>
         </Example>

diff --git a/packages/docs/src/pages/components/tabs.js b/packages/docs/src/pages/components/tabs.js
@@ -102,7 +102,7 @@ const Documentation = () => {
             <Tabs>
               <Tabs.Tab
                 label={
-                  <Stack as="span" inline align="center" gap={2}>
+                  <Stack inline align="center" gap={2}>
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       width="16"

diff --git a/packages/docs/src/pages/components/textarea.js b/packages/docs/src/pages/components/textarea.js
@@ -9,7 +9,9 @@ const Documentation = () => {
       tagline="Use Textarea to request a lot of information from user."
     >
       <Para>
-        Extends <Link href="/components/Input">Input</Link>.
+        <Text>
+          Extends <Link href="/components/Input">Input</Link>.
+        </Text>
       </Para>
       <Example>
         <Example.Preview>
@@ -41,9 +43,11 @@ const Documentation = () => {
 
       <Section title="Examples">
         <Para>
-          Texarea can be used with{' '}
-          <Link href="/components/Form">Form.Field</Link> which adds accessible
-          labels and error states.
+          <Text>
+            Texarea can be used with{' '}
+            <Link href="/components/Form">Form.Field</Link> which adds
+            accessible labels and error states.
+          </Text>
         </Para>
 
         <Example>

diff --git a/packages/docs/src/pages/components/tooltip.js b/packages/docs/src/pages/components/tooltip.js
@@ -19,11 +19,15 @@ const Documentation = () => {
       badges={[<Badge key={0}>accessible</Badge>]}
     >
       <Para>
-        Extends{' '}
-        <Link href="https://reacttraining.com/reach-ui/tooltip" target="_blank">
-          reach-ui/tooltip
-        </Link>
-        .
+        <Text>
+          Extends{' '}
+          <Link
+            href="https://reacttraining.com/reach-ui/tooltip"
+            target="_blank"
+          >
+            reach-ui/tooltip
+          </Link>
+        </Text>
       </Para>
       <Example>
         <Example.Preview>

diff --git a/packages/react-ui/src/components/skeleton/skeleton.styles.js b/packages/react-ui/src/components/skeleton/skeleton.styles.js
@@ -7,6 +7,7 @@ const shine = keyframes`
 
 export const styles = {
   Skeleton: {
+    display: 'inline-block',
     backgroundSize: '200% 200%',
     animationName: `${shine}`,
     animationIterationCount: 'infinite',

diff --git a/packages/react-ui/src/components/stack/index.js b/packages/react-ui/src/components/stack/index.js
@@ -39,14 +39,25 @@ const Stack = React.forwardRef(function Stack(
     styles['> * + *'] = createGap(direction, gap)
   }
 
+  let children = props.children
+  if (gap) {
+    children = React.Children.map(props.children, (child, index) => (
+      <Element key={index} as={inline ? 'span' : 'div'} component="StackItem">
+        {child}
+      </Element>
+    ))
+  }
+
   return (
     <Element
       ref={ref}
       as="div"
       component="Stack"
       css={merge(styles, css)}
       {...props}
-    />
+    >
+      {children}
+    </Element>
   )
 })