Rename Flex Components

pages/_app.js

@@ -6,7 +6,7 @@ import * as primerComponents from '..'
 import * as docComponents from './doc-components'
 import Index from './index.mdx'
 
-const {BaseStyles, Box, FlexContainer, Link} = primerComponents
+const {BaseStyles, Box, Flex, Link} = primerComponents
 const {SideNav, Header, IndexHero, customTheme} = docComponents
 
 const iconComponents = Object.keys(iconsByName).reduce((map, key) => {
@@ -46,15 +46,15 @@ export default class MyApp extends App {
         <Container>
           <Layout components={components} routes={[]} theme={customTheme}>
             <Header />
-            <FlexContainer display={['block', 'block', 'flex', 'flex']} flexDirection="row-reverse">
+            <Flex display={['block', 'block', 'flex', 'flex']} flexDirection="row-reverse">
               <Box width="100%">
                 {isIndex && <IndexHero />}
                 <Box color="gray.9" maxWidth={1012} width={'100%'} my={6} mx={'auto'} px={6} className="markdown-body">
                   {isIndex ? <Index /> : <Component {...page} />}
                 </Box>
               </Box>
               <SideNav />
-            </FlexContainer>
+            </Flex>
           </Layout>
         </Container>
       </BaseStyles>

pages/components/docs/Flex.md

@@ -1,41 +1,41 @@
-# FlexContainer and FlexItem
+# Flex and Flex.Item
 
-FlexContainer and FlexItem are wrapping components that will give the content flexbox properties.
+Flex and Flex.Item are wrapping components that will give the content flexbox properties. Flex.Item is included in the export for Flex.
 
 ## Default example
 
 ```.jsx
 <BorderBox width={300} height={300} borderRadius={0}>
-  <FlexContainer flexWrap="nowrap">
-    <FlexItem>
+  <Flex flexWrap="nowrap">
+    <Flex.Item>
       <Box p={3} bg="blue.5">
         Item 1
       </Box>
-    </FlexItem>
-    <FlexItem>
+    </Flex.Item>
+    <Flex.Item>
       <Box p={3} bg="green.5">
         Item 2
       </Box>
-    </FlexItem>
-    <FlexItem>
+    </Flex.Item>
+    <Flex.Item>
       <Box p={3} bg="yellow.5">
         Item 3
       </Box>
-    </FlexItem>
-  </FlexContainer>
+    </Flex.Item>
+  </Flex>
 </BorderBox>
 ```
 
 ## System props
 
-FlexContainer components get `FLEX_CONTAINER`, `COMMON`, and `LAYOUT` system props.
+Flex components get `FLEX_CONTAINER`, `COMMON`, and `LAYOUT` system props.
 
-FlexItem components get `FLEX_ITEM`, `COMMON`, and `LAYOUT` system props.
+Flex.Item components get `FLEX_ITEM`, `COMMON`, and `LAYOUT` system props.
 
 Read our [System Props](/components/docs/system-props) doc page for a full list of available props.
 
 ## Component props
 
-FlexContainer and FlexItem do not get any additional props other than the system props mentioned above.
+Flex and Flex.Item do not get any additional props other than the system props mentioned above.
 
 export const meta = {displayName: 'Flex'}

pages/doc-components/Header.js

@@ -3,18 +3,18 @@ import {withRouter} from 'next/router'
 import Octicon, {MarkGithub} from '@githubprimer/octicons-react'
 import NextLink from 'next/link'
 import BoxShadow from './BoxShadow'
-import {Text, FlexContainer, Link, Sticky, Box} from '../..'
+import {Text, Flex, Link, Sticky, Box} from '../..'
 
 const Header = ({router}) => (
   <Sticky zIndex={100}>
     <BoxShadow py={3} bg="gray.9" color="white">
-      <FlexContainer className="p-responsive" alignItems="center" justifyContent="space-between">
+      <Flex className="p-responsive" alignItems="center" justifyContent="space-between">
         <NextLink href="/components">
           <Link ml={3} color="white" href="/components">
-            <FlexContainer alignItems="center" justifyContent="center">
+            <Flex alignItems="center" justifyContent="center">
               <Octicon icon={MarkGithub} size="medium" />
               <Text ml={3}>Primer Components</Text>
-            </FlexContainer>
+            </Flex>
           </Link>
         </NextLink>
         <Box display={['none', 'none', 'block']}>
@@ -57,7 +57,7 @@ const Header = ({router}) => (
             </Box>
           </Link>
         </Box>
-      </FlexContainer>
+      </Flex>
     </BoxShadow>
   </Sticky>
 )

pages/doc-components/SideNav.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import {withRouter} from 'next/router'
 import {default as NextLink} from 'next/link'
-import {Text, Box, Link, FlexContainer, Relative} from '../..'
+import {Text, Box, Link, Flex, Relative} from '../..'
 import * as docs from '../components/docs'
 
 const getLink = router => {
@@ -37,7 +37,7 @@ const SideNav = ({router}) => (
       borderColor="gray.2"
       id="sidenav"
     >
-      <FlexContainer flexDirection="column" alignItems="start" p={5} borderBottom={1} borderColor="gray.2">
+      <Flex flexDirection="column" alignItems="start" p={5} borderBottom={1} borderColor="gray.2">
         <NextLink href="/components/docs/system-props">
           <Link
             color="gray.9"
@@ -59,7 +59,7 @@ const SideNav = ({router}) => (
             Primer Theme
           </Link>
         </NextLink>
-      </FlexContainer>
+      </Flex>
       <Box pt={5} pl={5}>
         <Text is="p" color="black" m={0} mb={3}>
           <NextLink href="/components/docs/Avatar">

src/CircleOcticon.js

@@ -1,26 +1,26 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Octicon from '@githubprimer/octicons-react'
-import FlexContainer from './FlexContainer'
+import Flex from './Flex'
 
 function CircleOcticon(props) {
   const {size} = props
   const {icon, ...rest} = props
   return (
-    <FlexContainer {...rest} size={size} alignItems="center" justifyContent="center">
+    <Flex {...rest} size={size} alignItems="center" justifyContent="center">
       <Octicon icon={icon} size={size} />
-    </FlexContainer>
+    </Flex>
   )
 }
 
 CircleOcticon.defaultProps = {
-  ...FlexContainer.defaultProps,
+  ...Flex.defaultProps,
   size: 32,
   borderRadius: '50%'
 }
 
 CircleOcticon.propTypes = {
-  ...FlexContainer.propTypes,
+  ...Flex.propTypes,
   icon: Octicon.propTypes.icon,
   size: PropTypes.number
 }

src/Dropdown.js

@@ -7,14 +7,14 @@ import Button from './Button'
 import Box from './Box'
 import Caret from './Caret'
 import Details from './Details'
-import FlexContainer from './FlexContainer'
+import Flex from './Flex'
 import {withSystemProps, COMMON} from './system-props'
 
 function Dropdown({title, scheme, children, className, ...rest}) {
   const {minWidth} = rest
   return (
     <div className={classnames(className, 'BtnGroup')} {...rest}>
-      <FlexContainer is={Details} className="BtnGroup-form" css={{position: 'relative'}}>
+      <Flex is={Details} className="BtnGroup-form" css={{position: 'relative'}}>
         {({toggle}) => (
           <React.Fragment>
             <Button is="summary" scheme={scheme} grouped onClick={toggle}>
@@ -38,7 +38,7 @@ function Dropdown({title, scheme, children, className, ...rest}) {
             </Box>
           </React.Fragment>
         )}
-      </FlexContainer>
+      </Flex>
     </div>
   )
 }

src/Flex.js

@@ -0,0 +1,13 @@
+import {withSystemProps, FLEX_CONTAINER, FLEX_ITEM} from './system-props'
+
+const Flex = withSystemProps(
+  {
+    is: 'div',
+    display: 'flex'
+  },
+  FLEX_CONTAINER
+)
+
+Flex.Item = withSystemProps('div', FLEX_ITEM)
+
+export default Flex

src/__tests__/FlexContainer.js

@@ -1,54 +1,54 @@
 import React from 'react'
-import FlexContainer from '../FlexContainer'
+import Flex from '../Flex'
 import {FLEX_CONTAINER} from '../system-props'
 import {render} from '../utils/testing'
 
-describe('FlexContainer', () => {
+describe('Flex', () => {
   it('is a system component', () => {
-    expect(FlexContainer.systemComponent).toEqual(true)
+    expect(Flex.systemComponent).toEqual(true)
   })
 
   it('implements flex system props', () => {
-    expect(FlexContainer).toImplementSystemProps(FLEX_CONTAINER)
+    expect(Flex).toImplementSystemProps(FLEX_CONTAINER)
   })
 
   it('gets display: flex by default', () => {
-    expect(render(<FlexContainer />)).toHaveStyleRule('display', 'flex')
+    expect(render(<Flex />)).toHaveStyleRule('display', 'flex')
   })
 
   it('respects flexWrap', () => {
-    expect(render(<FlexContainer flexWrap="nowrap" />)).toMatchSnapshot()
+    expect(render(<Flex flexWrap="nowrap" />)).toMatchSnapshot()
   })
 
   it('respects flexDirection', () => {
-    expect(render(<FlexContainer flexDirection="row" />)).toMatchSnapshot()
+    expect(render(<Flex flexDirection="row" />)).toMatchSnapshot()
   })
 
   it('respects justifyContent', () => {
-    expect(render(<FlexContainer justifyContent="start" />)).toMatchSnapshot()
+    expect(render(<Flex justifyContent="start" />)).toMatchSnapshot()
   })
 
   it('respects alignItems', () => {
-    expect(render(<FlexContainer alignItems="start" />)).toMatchSnapshot()
+    expect(render(<Flex alignItems="start" />)).toMatchSnapshot()
   })
 
   it('respects alignContent', () => {
-    expect(render(<FlexContainer alignContent="start" />)).toMatchSnapshot()
+    expect(render(<Flex alignContent="start" />)).toMatchSnapshot()
   })
 
   it('respects display', () => {
-    expect(render(<FlexContainer display="inline-flex" />)).toHaveStyleRule('display', 'inline-flex')
+    expect(render(<Flex display="inline-flex" />)).toHaveStyleRule('display', 'inline-flex')
   })
 
   it('respects responsive display', () => {
-    expect(render(<FlexContainer display={['flex', 'inline-flex']} />)).toMatchSnapshot()
+    expect(render(<Flex display={['flex', 'inline-flex']} />)).toMatchSnapshot()
   })
 
   it('respects the "is" prop', () => {
-    expect(render(<FlexContainer is="span" />).type).toEqual('span')
+    expect(render(<Flex is="span" />).type).toEqual('span')
   })
 
   it('renders a div by default', () => {
-    expect(render(<FlexContainer />).type).toEqual('div')
+    expect(render(<Flex />).type).toEqual('div')
   })
 })

src/__tests__/FlexItem.js

@@ -1,26 +1,26 @@
 import React from 'react'
-import FlexItem from '../FlexItem'
+import Flex from '../Flex'
 import {FLEX_ITEM} from '../system-props'
 import {render} from '../utils/testing'
 
-describe('FlexItem', () => {
+describe('Flex.Item', () => {
   it('is a system component', () => {
-    expect(FlexItem.systemComponent).toEqual(true)
+    expect(Flex.Item.systemComponent).toEqual(true)
   })
 
   it('implements FLEX_ITEM props', () => {
-    expect(FlexItem).toImplementSystemProps(FLEX_ITEM)
+    expect(Flex.Item).toImplementSystemProps(FLEX_ITEM)
   })
 
   it('respects alignSelf', () => {
-    expect(render(<FlexItem alignSelf="center" />)).toMatchSnapshot()
+    expect(render(<Flex.Item alignSelf="center" />)).toMatchSnapshot()
   })
 
   it('renders as correct tag', () => {
     const item = render(
-      <FlexItem is="button" alignSelf="center">
+      <Flex.Item is="button" alignSelf="center">
         hi
-      </FlexItem>
+      </Flex.Item>
     )
     expect(item.type).toEqual('button')
     expect(item).toMatchSnapshot()

src/__tests__/__snapshots__/FlexContainer.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FlexContainer respects alignContent 1`] = `
+exports[`Flex respects alignContent 1`] = `
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -16,7 +16,7 @@ exports[`FlexContainer respects alignContent 1`] = `
 />
 `;
 
-exports[`FlexContainer respects alignItems 1`] = `
+exports[`Flex respects alignItems 1`] = `
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -33,7 +33,7 @@ exports[`FlexContainer respects alignItems 1`] = `
 />
 `;
 
-exports[`FlexContainer respects flexDirection 1`] = `
+exports[`Flex respects flexDirection 1`] = `
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -49,7 +49,7 @@ exports[`FlexContainer respects flexDirection 1`] = `
 />
 `;
 
-exports[`FlexContainer respects flexWrap 1`] = `
+exports[`Flex respects flexWrap 1`] = `
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -65,7 +65,7 @@ exports[`FlexContainer respects flexWrap 1`] = `
 />
 `;
 
-exports[`FlexContainer respects justifyContent 1`] = `
+exports[`Flex respects justifyContent 1`] = `
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -82,7 +82,7 @@ exports[`FlexContainer respects justifyContent 1`] = `
 />
 `;
 
-exports[`FlexContainer respects responsive display 1`] = `
+exports[`Flex respects responsive display 1`] = `
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;