From 0c96a2c837635c392080a86108e49a448131c86e Mon Sep 17 00:00:00 2001
From: siddharthkp <siddharth.kshetrapal@gmail.com>
Date: Thu, 21 May 2020 23:09:24 +0200
Subject: [PATCH 1/3] add stack children + fix copy position

---
 packages/docs/src/components/example.js       |  7 ++--
 packages/docs/src/pages/components/stack.js   | 38 ++++++++++++++++++-
 .../react-ui/src/components/stack/index.js    | 13 ++++++-
 3 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/packages/docs/src/components/example.js b/packages/docs/src/components/example.js
index df30096..075fd4d 100644
--- a/packages/docs/src/components/example.js
+++ b/packages/docs/src/components/example.js
@@ -96,16 +96,17 @@ const Code = ({ children, lang = 'jsx', ...props }) => {
   const html = highlight(dedent(children), languages[lang])
 
   return (
-    <>
+    <Element css={{ position: 'relative' }}>
       <Button
         variant="link"
         css={{
           position: 'absolute',
           right: 0,
-          top: '10px',
+          top: 0,
           svg: { color: copied ? '#38C172' : '#929FB1' },
           ':hover, :focus': { svg: { color: copied ? '#38C172' : '#c6cbd1' } }
         }}
+        style={{ backgroundColor: '#0008' }}
         onClick={copyCode}
       >
         {icon}
@@ -132,7 +133,7 @@ const Code = ({ children, lang = 'jsx', ...props }) => {
         }}
         {...props}
       />
-    </>
+    </Element>
   )
 }
 
diff --git a/packages/docs/src/pages/components/stack.js b/packages/docs/src/pages/components/stack.js
index b578e48..c5b6097 100644
--- 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>
+
+        <Example title="Additive margins">
+          <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.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/react-ui/src/components/stack/index.js b/packages/react-ui/src/components/stack/index.js
index 04f5eba..055b3ed 100644
--- a/packages/react-ui/src/components/stack/index.js
+++ b/packages/react-ui/src/components/stack/index.js
@@ -39,6 +39,15 @@ 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 as={inline ? 'span' : 'div'} key={index}>
+        {child}
+      </Element>
+    ))
+  }
+
   return (
     <Element
       ref={ref}
@@ -46,7 +55,9 @@ const Stack = React.forwardRef(function Stack(
       component="Stack"
       css={merge(styles, css)}
       {...props}
-    />
+    >
+      {children}
+    </Element>
   )
 })
 

From 0d3d153a586bd53b8a0b66b335d985a60cf43b2a Mon Sep 17 00:00:00 2001
From: siddharthkp <siddharth.kshetrapal@gmail.com>
Date: Thu, 21 May 2020 23:10:56 +0200
Subject: [PATCH 2/3] simplify changes

---
 packages/docs/src/components/example.js     |  5 ++---
 packages/docs/src/pages/components/stack.js | 18 +++++++++---------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/docs/src/components/example.js b/packages/docs/src/components/example.js
index 075fd4d..498439a 100644
--- a/packages/docs/src/components/example.js
+++ b/packages/docs/src/components/example.js
@@ -96,7 +96,7 @@ const Code = ({ children, lang = 'jsx', ...props }) => {
   const html = highlight(dedent(children), languages[lang])
 
   return (
-    <Element css={{ position: 'relative' }}>
+    <>
       <Button
         variant="link"
         css={{
@@ -106,7 +106,6 @@ const Code = ({ children, lang = 'jsx', ...props }) => {
           svg: { color: copied ? '#38C172' : '#929FB1' },
           ':hover, :focus': { svg: { color: copied ? '#38C172' : '#c6cbd1' } }
         }}
-        style={{ backgroundColor: '#0008' }}
         onClick={copyCode}
       >
         {icon}
@@ -133,7 +132,7 @@ const Code = ({ children, lang = 'jsx', ...props }) => {
         }}
         {...props}
       />
-    </Element>
+    </>
   )
 }
 
diff --git a/packages/docs/src/pages/components/stack.js b/packages/docs/src/pages/components/stack.js
index c5b6097..11d93c2 100644
--- a/packages/docs/src/pages/components/stack.js
+++ b/packages/docs/src/pages/components/stack.js
@@ -199,16 +199,16 @@ const Documentation = () => {
           `}</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">
-          <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.Preview direction="vertical" gap={10}>
             <Stack gap={2}>
               <Avatar

From f5df8b9cb3087454d35d94e875eace44fb014d41 Mon Sep 17 00:00:00 2001
From: siddharthkp <siddharth.kshetrapal@gmail.com>
Date: Thu, 21 May 2020 23:57:08 +0200
Subject: [PATCH 3/3] fix docs

---
 packages/docs/src/pages/components/alert.js     | 10 ++++++----
 packages/docs/src/pages/components/button.js    | 17 +++++++++--------
 packages/docs/src/pages/components/checkbox.js  |  2 +-
 packages/docs/src/pages/components/link.js      | 15 ++++++++-------
 packages/docs/src/pages/components/skeleton.js  | 12 +++++++-----
 packages/docs/src/pages/components/spinner.js   | 10 ++++++----
 packages/docs/src/pages/components/switch.js    | 10 ++++++----
 packages/docs/src/pages/components/tabs.js      |  2 +-
 packages/docs/src/pages/components/textarea.js  | 12 ++++++++----
 packages/docs/src/pages/components/tooltip.js   | 14 +++++++++-----
 .../src/components/skeleton/skeleton.styles.js  |  1 +
 packages/react-ui/src/components/stack/index.js |  2 +-
 12 files changed, 63 insertions(+), 44 deletions(-)

diff --git a/packages/docs/src/pages/components/alert.js b/packages/docs/src/pages/components/alert.js
index 19fce8d..790a291 100644
--- 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
index d3bff34..a6d7dc2 100644
--- 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
index e848034..c32c25e 100644
--- 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
index 56a8e49..7371d4f 100644
--- 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,15 +177,14 @@ 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"
@@ -191,7 +192,7 @@ const Documentation = () => {
                 >
                   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
index c0f0205..f172e79 100644
--- 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
index 52b39d5..61078e8 100644
--- 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/switch.js b/packages/docs/src/pages/components/switch.js
index e910755..53a7e6e 100644
--- 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
index 0c795db..8550273 100644
--- 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
index 631af97..74421be 100644
--- 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
index 6c9f755..e7381a0 100644
--- 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
index fd74826..cc701e6 100644
--- 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
index 055b3ed..8481282 100644
--- a/packages/react-ui/src/components/stack/index.js
+++ b/packages/react-ui/src/components/stack/index.js
@@ -42,7 +42,7 @@ const Stack = React.forwardRef(function Stack(
   let children = props.children
   if (gap) {
     children = React.Children.map(props.children, (child, index) => (
-      <Element as={inline ? 'span' : 'div'} key={index}>
+      <Element key={index} as={inline ? 'span' : 'div'} component="StackItem">
         {child}
       </Element>
     ))