fix(Flex): extend Box for easier styling

LexSwed · Oct 31, 2020 · fd77ffb · fd77ffb · vercel · Oct 31, 2020
1 parent d726436
commit fd77ffb
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/src/lib/Box/Box.tsx b/src/lib/Box/Box.tsx
@@ -27,7 +27,6 @@ const Box: React.FC<Props> = ({ children, css, ...props }) => {
       ),
     Object.values(props) //eslint-disable-line
   );
-
   return <Div css={Object.assign(style, css)} {...attrs} children={children} />;
 };
 

diff --git a/src/lib/Flex/Flex.tsx b/src/lib/Flex/Flex.tsx
@@ -3,8 +3,9 @@ import React from 'react';
 import { StitchesProps, StitchesVariants } from '@stitches/react';
 import { styled } from '../stitches.config';
 import { gaps } from '../theme/variants';
+import Box from '../Box';
 
-const FlexBox = styled('div', {
+const FlexBox = styled(Box, {
   display: 'flex',
 
   variants: {
@@ -81,7 +82,7 @@ const FlexBox = styled('div', {
 
 const Flex = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<typeof FlexBox> & { as?: keyof JSX.IntrinsicElements }
+  React.ComponentProps<typeof FlexBox> & { as?: keyof JSX.IntrinsicElements | React.ReactElement }
 >(({ space = 'none', flow = 'column', wrap = 'nowrap', main = 'start', cross = 'start', ...props }, ref) => (
   <FlexBox space={space} flow={flow} wrap={wrap} main={main} cross={cross} {...props} ref={ref} />
 ));

diff --git a/src/pages/components/Flex.mdx b/src/pages/components/Flex.mdx
@@ -9,6 +9,16 @@ import { ExampleBox } from '../../pages-helpers';
 
 # Flex
 
+A `Box` with `flex` shorthands alignment properties.
+
+<Playground>
+  <Flex width="200px" bc="$orange050" cross="center" space="sm">
+    <ExampleBox />
+    <ExampleBox />
+    <ExampleBox />
+  </Flex>
+</Playground>
+
 ## Space
 
 Define gap between elements via `space` prop:
-Original file line number
+Diff line change
@@ Expand Up @@
           ),
         Object.values(props) //eslint-disable-line
       );
       return <Div css={Object.assign(style, css)} {...attrs} children={children} />;
     };
@@ Expand Down @@