(temp)

packages/fuselage/src/components/Box/Flex/index.js

@@ -4,14 +4,18 @@ import React from 'react';
 import { useProps } from '../../../hooks';
 
 export function FlexContainer({ inline = false, children, direction, wrap, justifyContent, alignItems, alignContent }) {
-  const [, PropsProvider] = useProps(({ style, ...props }) => ({
+  const [, PropsProvider] = useProps(({ className, style, ...props }) => ({
+    className: [
+      className,
+      'rcx-box--flex',
+      inline && 'rcx-box--flex-inline',
+      direction && `rcx-box--flex-${ direction }`,
+      wrap && `rcx-box--flex-${ wrap }`,
+      alignItems && `rcx-box--flex-items-${ alignItems }`,
+    ].filter(Boolean).join(' '),
     style: {
       ...style,
-      display: inline ? 'inline-flex' : 'flex',
-      flexDirection: direction,
-      flexWrap: wrap,
       justifyContent,
-      alignItems,
       alignContent,
     },
     ...props,
@@ -23,30 +27,17 @@ export function FlexContainer({ inline = false, children, direction, wrap, justi
 FlexContainer.propTypes = {
   inline: PropTypes.bool,
   direction: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
-  wrap: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']),
+  wrap: PropTypes.oneOf(['no-wrap', 'wrap', 'wrap-reverse']),
   justifyContent: PropTypes.oneOf([
     'flex-start', 'flex-end', 'center',
     'space-between', 'space-around', 'space-evenly',
     'start', 'end', 'left', 'right',
-    'flex-start safe', 'flex-end safe', 'center safe',
-    'space-between safe', 'space-around safe', 'space-evenly safe',
-    'start safe', 'end safe', 'left safe', 'right safe',
-  ]),
-  alignItems: PropTypes.oneOf([
-    'stretch', 'flex-start', 'flex-end', 'center',
-    'baseline', 'first baseline', 'last baseline',
-    'start', 'end', 'self-start', 'self-end',
-    'stretch safe', 'flex-start safe', 'flex-end safe', 'center safe',
-    'baseline safe', 'first baseline safe', 'last baseline safe',
-    'start safe', 'end safe', 'self-start safe', 'self-end safe',
   ]),
+  alignItems: PropTypes.oneOf(['stretch', 'start', 'center', 'end', 'baseline']),
   alignContent: PropTypes.oneOf([
     'flex-start', 'flex-end', 'center',
     'space-between', 'space-around', 'space-evenly', 'stretch',
     'start', 'end', 'baseline', 'first baseline', 'last baseline',
-    'flex-start safe', 'flex-end safe', 'center safe',
-    'space-between safe', 'space-around safe', 'space-evenly safe', 'stretch safe',
-    'start safe', 'end safe', 'baseline safe', 'first baseline safe', 'last baseline safe',
   ]),
 };
 

packages/fuselage/src/components/Box/Flex/stories.mdx

@@ -10,7 +10,7 @@ import { Box, Flex, Tile } from '../../..';
   <Story name='Default'>
     <Flex.Container>
       <Tile>
-        {Array.from({ length: 3 }).map((_, i) =>
+        {Array.from({ length: 3 }, (_, i) =>
           <Flex.Item key={i}>
             <Tile>#{i + 1}</Tile>
           </Flex.Item>
@@ -30,7 +30,7 @@ import { Box, Flex, Tile } from '../../..';
   <Story name='Direction'>
     <Flex.Container direction='row-reverse'>
       <Tile>
-        {Array.from({ length: 3 }).map((_, i) =>
+        {Array.from({ length: 3 }, (_, i) =>
           <Flex.Item key={i}>
             <Tile>#{i + 1}</Tile>
           </Flex.Item>
@@ -46,7 +46,7 @@ import { Box, Flex, Tile } from '../../..';
   <Story name='Wrap'>
     <Flex.Container wrap='wrap'>
       <Tile>
-        {Array.from({ length: 12 }).map((_, i) =>
+        {Array.from({ length: 24 }, (_, i) =>
           <Flex.Item key={i}>
             <Tile>#{i + 1}</Tile>
           </Flex.Item>
@@ -62,7 +62,7 @@ import { Box, Flex, Tile } from '../../..';
   <Story name='Justify Content'>
     <Flex.Container justifyContent='space-around'>
       <Tile>
-        {Array.from({ length: 3 }).map((_, i) =>
+        {Array.from({ length: 3 }, (_, i) =>
           <Flex.Item key={i}>
             <Tile>#{i + 1}</Tile>
           </Flex.Item>
@@ -76,9 +76,9 @@ import { Box, Flex, Tile } from '../../..';
 
 <Preview>
   <Story name='Align Items'>
-    <Flex.Container alignItems='flex-end'>
+    <Flex.Container alignItems='end'>
       <Tile>
-        {Array.from({ length: 3 }).map((_, i) =>
+        {Array.from({ length: 3 }, (_, i) =>
           <Flex.Item key={i}>
             <Tile style={{ height: i * 100 }}>#{i + 1}</Tile>
           </Flex.Item>
@@ -94,7 +94,7 @@ import { Box, Flex, Tile } from '../../..';
   <Story name='Align Content'>
     <Flex.Container wrap='wrap' alignContent='flex-end'>
       <Tile style={{ minHeight: 400 }}>
-        {Array.from({ length: 12 }).map((_, i) =>
+        {Array.from({ length: 12 }, (_, i) =>
           <Flex.Item key={i}>
             <Tile>#{i + 1}</Tile>
           </Flex.Item>

packages/fuselage/src/components/Box/Flex/styles.scss

+.rcx-box {
+  &--flex {
+    display: flex !important;
+
+    &-inline {
+      display: inline-flex !important;
+    }
+
+    &-row {
+      flex-direction: row !important;
+    }
+
+    &-row-reverse {
+      flex-direction: row-reverse !important;
+    }
+
+    &-col {
+      flex-direction: column !important;
+    }
+
+    &-col-reverse {
+      flex-direction: column-reverse !important;
+    }
+
+    &-wrap {
+      flex-wrap: wrap !important;
+    }
+
+    &-no-wrap {
+      flex-wrap: nowrap !important;
+    }
+
+    &-wrap-reverse {
+      flex-wrap: wrap-reverse !important;
+    }
+
+    &-items-stretch {
+      align-items: stretch !important;
+    }
+
+    &-items-start {
+      align-items: flex-start !important;
+    }
+
+    &-items-center {
+      align-items: center !important;
+    }
+
+    &-items-end {
+      align-items: flex-end !important;
+    }
+
+    &-items-baseline {
+      align-items: baseline !important;
+    }
+  }
+}

packages/fuselage/src/components/Box/styles.scss

@@ -48,6 +48,7 @@
 }
 
 @import './AnimatedVisibility/styles.scss';
+@import './Flex/styles.scss';
 @import './Margins/styles.scss';
 @import './Position/styles.scss';
 @import './Scrollable/styles.scss';