Box may accept all system props.

.changeset/green-worms-nail.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+`Box` now accepts all [styled system props](https://styled-system.com/table/).

docs/content/Box.md

@@ -2,35 +2,73 @@
 title: Box
 ---
 
-The Box component serves as a wrapper component for most layout related needs. Use Box to set values such as `display`, `width`, `height`, and more. See the LAYOUT section of our [System Props](/system-props) documentation for the full list of available props. In practice, this component is used frequently as a wrapper around other components to achieve Box Model related styling.
-
-## Default example
-
-```jsx live live
-<Box>
-  Box can be used to create both{' '}
-  <Box as="span" color="text.inverse" bg="bg.successInverse">
-    inline
-  </Box>{' '}
-  and
-  <Box color="text.inverse" bg="bg.dangerInverse">
-    block-level elements,
+import {Props} from '../src/props'
+import {Box} from '@primer/components'
+
+Box is a low-level utility component that accepts [styled system props](https://styled-system.com/table/) to enable custom theme-aware styling.
+
+```jsx live
+<Box color="text.secondary" bg="bg.tertiary" p={3}>
+  Hello
+</Box>
+```
+
+## Props
+
+<Props of={Box} />
+
+Box also accepts all [styled system props](https://styled-system.com/table/).
+
+## Examples
+
+### Border on all sides
+
+```jsx live
+<Box borderColor="border.primary" borderWidth={1} borderStyle="solid" p={3}>
+  Hello
+</Box>
+```
+
+### Border on one side
+
+```jsx live
+<Box borderColor="border.primary" borderBottomWidth={1} borderBottomStyle="solid" pb={3}>
+  Hello
+</Box>
+```
+
+### Flexbox
+
+Use Box to create [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) layouts.
+
+```jsx live
+<Box display="flex">
+  <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+    1
   </Box>
-  <Box color="text.inverse" bg="bg.warningInverse" width={[1, 1, 1 / 2]}>
-    elements with fixed or responsive width and height,
+  <Box flexGrow={1} p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+    2
   </Box>
-  <Box color="text.inverse" bg="bg.infoInverse" p={4} mt={2}>
-    and more!
+  <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+    3
   </Box>
 </Box>
 ```
 
-## System props
+### Grid
 
-Box components get the `COMMON`, `LAYOUT`, and `FLEX` categories of system props. Read our [System Props](/system-props) doc page for a full list of available props.
+Use Box to create [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids) layouts.
 
-## Component props
-
-| Prop name | Type   | Default | Description                         |
-| :-------- | :----- | :-----: | :---------------------------------- |
-| as        | String |  `div`  | sets the HTML tag for the component |
+```jsx live
+<Box display="grid" gridTemplateColumns="1fr 1fr" gridGap={3}>
+  <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+    1
+  </Box>
+  <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+    2
+  </Box>
+  <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+    3
+  </Box>
+</Box>
+```

src/BorderBox.tsx

@@ -1,13 +1,9 @@
 import styled from 'styled-components'
-import Box from './Box'
-import {BORDER, SystemBorderProps} from './constants'
-import sx from './sx'
-import {ComponentProps} from './utils/types'
+import Box, {BoxProps} from './Box'
 
-const BorderBox = styled(Box)<SystemBorderProps>`
-  ${BORDER};
-  ${sx};
-`
+export type BorderBoxProps = BoxProps
+
+const BorderBox = styled(Box)``
 
 BorderBox.defaultProps = {
   borderWidth: '1px',
@@ -16,5 +12,4 @@ BorderBox.defaultProps = {
   borderRadius: 2
 }
 
-export type BorderBoxProps = ComponentProps<typeof BorderBox>
 export default BorderBox

src/Box.tsx

@@ -1,14 +1,54 @@
 import styled from 'styled-components'
-import {COMMON, FLEX, LAYOUT, SystemCommonProps, SystemFlexProps, SystemLayoutProps} from './constants'
+import {
+  background,
+  BackgroundProps,
+  border,
+  BorderProps,
+  color,
+  ColorProps,
+  flexbox,
+  FlexboxProps,
+  grid,
+  GridProps,
+  layout,
+  LayoutProps,
+  position,
+  PositionProps,
+  shadow,
+  ShadowProps,
+  space,
+  SpaceProps,
+  typography,
+  TypographyProps
+} from 'styled-system'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-const Box = styled.div<SystemCommonProps & SystemFlexProps & SystemLayoutProps & SxProp>`
-  ${COMMON}
-  ${FLEX}
-  ${LAYOUT}
-  ${sx};
-`
+type StyledBoxProps = SpaceProps &
+  ColorProps &
+  TypographyProps &
+  LayoutProps &
+  FlexboxProps &
+  GridProps &
+  BackgroundProps &
+  BorderProps &
+  PositionProps &
+  ShadowProps &
+  SxProp
+
+const Box = styled.div<StyledBoxProps>(
+  space,
+  color,
+  typography,
+  layout,
+  flexbox,
+  grid,
+  background,
+  border,
+  position,
+  shadow,
+  sx
+)
 
 export type BoxProps = ComponentProps<typeof Box>
 export default Box

src/Flex.tsx

@@ -1,12 +1,12 @@
 import styled from 'styled-components'
-import Box from './Box'
-import {ComponentProps} from './utils/types'
+import Box, {BoxProps} from './Box'
+
+export type FlexProps = BoxProps
 
 const Flex = styled(Box)``
 
 Flex.defaultProps = {
   display: 'flex'
 }
 
-export type FlexProps = ComponentProps<typeof Flex>
 export default Flex

src/Grid.tsx

@@ -1,15 +1,12 @@
 import styled from 'styled-components'
-import Box from './Box'
-import {GRID, SystemGridProps} from './constants'
-import {ComponentProps} from './utils/types'
+import Box, {BoxProps} from './Box'
 
-const Grid = styled(Box)<SystemGridProps>`
-  ${GRID};
-`
+export type GridProps = BoxProps
+
+const Grid = styled(Box)``
 
 Grid.defaultProps = {
   display: 'grid'
 }
 
-export type GridProps = ComponentProps<typeof Grid>
 export default Grid

src/Position.tsx

@@ -1,16 +1,11 @@
 import React from 'react'
 import styled from 'styled-components'
 import Box from './Box'
-import {POSITION, SystemPositionProps} from './constants'
-import sx from './sx'
 import {ComponentProps} from './utils/types'
 
-type StyledPositionProps = {as?: React.ElementType} & SystemPositionProps
+type StyledPositionProps = {as?: React.ElementType}
 
-const Position = styled(Box)<StyledPositionProps>`
-  ${POSITION};
-  ${sx};
-`
+const Position = styled(Box)<StyledPositionProps>``
 
 export type PositionProps = ComponentProps<typeof Position>
 export default Position

src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap

@@ -3,7 +3,6 @@
 exports[`Pagination renders consistently 1`] = `
 .c1 {
   display: inline-block;
-  display: inline-block;
 }
 
 .c2 {

src/__tests__/__snapshots__/AvatarStack.tsx.snap

@@ -2,10 +2,6 @@
 
 exports[`Avatar renders consistently 1`] = `
 .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -194,10 +190,6 @@ exports[`Avatar renders consistently 1`] = `
 
 exports[`Avatar respects alignRight props 1`] = `
 .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

src/__tests__/__snapshots__/Box.tsx.snap

@@ -141,7 +141,6 @@ exports[`Box renders padding 3`] = `
 exports[`Box respects display 1`] = `
 .c0 {
   display: inline;
-  display: inline;
 }
 
 <div
@@ -153,7 +152,6 @@ exports[`Box respects display 1`] = `
 exports[`Box respects display 2`] = `
 .c0 {
   display: inline-block;
-  display: inline-block;
 }
 
 <div
@@ -165,7 +163,6 @@ exports[`Box respects display 2`] = `
 exports[`Box respects display 3`] = `
 .c0 {
   display: none;
-  display: none;
 }
 
 <div
@@ -177,19 +174,6 @@ exports[`Box respects display 3`] = `
 exports[`Box respects display 4`] = `
 .c0 {
   display: none;
-  display: none;
-}
-
-@media screen and (min-width:544px) {
-  .c0 {
-    display: none;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c0 {
-    display: block;
-  }
 }
 
 @media screen and (min-width:544px) {

src/__tests__/__snapshots__/Button.tsx.snap

@@ -298,7 +298,6 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
 
 exports[`ButtonGroup renders consistently 1`] = `
 .c0 {
-  display: inline-block;
   display: inline-block;
   vertical-align: middle;
 }

src/__tests__/__snapshots__/CircleOcticon.tsx.snap

@@ -16,6 +16,8 @@ exports[`CircleOcticon renders consistently 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 32px;
+  height: 32px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -24,12 +26,6 @@ exports[`CircleOcticon renders consistently 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 32px;
-  height: 32px;
 }
 
 <div

src/__tests__/__snapshots__/Dialog.tsx.snap

@@ -15,10 +15,6 @@ exports[`Dialog Dialog.Header renders consistently 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   border-radius: 6px 6px 0px 0px;
   border-bottom: 1px solid #e1e4e8;
 }
@@ -122,10 +118,6 @@ Array [
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   border-radius: 6px 6px 0px 0px;
   border-bottom: 1px solid #e1e4e8;
 }