Make Box accept all system props (#1315)

* add utility props to Box * update box docs * export box props * update snapshots * Create green-worms-nail.md * AvatarStack story in storybook * Update .changeset/green-worms-nail.md Co-authored-by: Cole Bemis <colebemis@github.com> * Update docs/content/Box.md Co-authored-by: Cole Bemis <colebemis@github.com> * Remove duplicate border system prop definitions * Remove duplicate grid system props definitions * Update FlexProps definition * Remove duplicate position system prop definitions * Update Box documentation * Update BoxProps * Update Box docs * Update Box props * fix: Type 'DropdownButton' as 'button' (#1318) * fix: Type 'DropdownButton' as 'button' * chore: Update snapshots * chore: Set test directory via config rather than flag (#1319) * feat(useFocusZone): update active-descendant on mousemove (#1308) * fix: Split `<Item>` labels (#1320) * fix: Separate 'Item' content into 'label' and 'description' * fix: Only add 'aria-describedby' when 'description' exists * fix: Memoize 'id' so 'Item's and labels match * fix: Don’t rely on 'id' which is possibly not globally-unique * fix: Restore semi-full-width 'Item' dividers, without giving up the semantic nesting. By “semantic nesting”, I mean that the 'Item' label and description are now siblings, which is preferable to the previous implementation, where the description node was a child of the label node. As a general principle, we should align DOM hierarchies with information hierarchies. An analogy: If I were using a bulleted list to describe a dog, I would not indent its breed as a second-level bullet beneath the bullet for its name, because a dog’s breed is not dependent/derived data from its name. Similarly, description is not dependent/derived from label, and so should not be nested in DOM. * fix: Reduce styled-components class permutations. https://www.joshwcomeau.com/css/styled-components/ * feat(Overlay): slide away from anchor based on position (#1322) * feat(Overlay): slide away from anchor based on position * fix: handle position changes when re-opening AnchoredOverlay * refactor: use js animation for slide to fix safari * fix: Tests were failing with Axe violations - https://dequeuniversity.com/rules/axe/4.1/aria-dialog-name - https://dequeuniversity.com/rules/axe/4.2/presentation-role-conflict - https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-button/menu-button-links.html First, 'Overlay's aren’t 'listbox'es, because (when used in 'DropdownMenu' or 'ActionMenu') they contain 'menuitem's, 'menuitemradio's, or 'menuitemcheckbox'es. Second, 'Overlay's aren’t 'dialog's, because (as demonstrated in the WAI ARIA practices page linked above), 'menu's need not be contained in a 'dialog', and also (as noted in the 'aria-dialog-name' link above), 'dialog's must have an 'aria-label', 'aria-labelledby', or 'title', but neither 'DropdownMenu' nor 'ActionMenu' have any kind of header element that could be used for this. Third, if 'Overlay's are 'none', they can’t be focusable (as noted in the 'presentation-role-conflict' link above), but one of our hooks (maybe 'FocusTrap', maybe 'FocusZone') was setting 'tabIndex' to '0' (in the test component), because it did not contain a focusable child. This PR adds a focusable button child so the 'none' 'Overlay' container won’t receive 'tabIndex' '0'. * fix: Resolve lint errors Co-authored-by: Clay Miller <clay@smockle.com> * Generate prop documentation (#1323) * Add new filesystem source * Add component metadata type * Create Props component * Update props table * Handle empty and error states * Add required label * Update required prop styles * Clean up code comments * Remove filesystem plugin * Remove extra markdown file * Add component comment Co-authored-by: Clay Miller <clay@smockle.com> * Improve treeshaking by setting package.json sideEffects (#1332) * fix: mark sideEffects free * fix: update sideEffects delcaration in package.json to improve treeshaking * fix: update sideEffects delcaration in package.json to improve treeshaking * fix: BaseStyles doesnt use sideeffects * chore: add changeset * Update Box documentation * Update BoxProps * Update Box docs * Update Box props * Remove AvatarStack story * Update .changeset/green-worms-nail.md Co-authored-by: Cole Bemis <colebemis@github.com> Co-authored-by: Clay Miller <clay@smockle.com> Co-authored-by: Dusty Greif <dgreif@users.noreply.github.com> Co-authored-by: Matthew Costabile <mattcosta7@github.com>
primer · Jul 19, 2021 · 85d0202 · 85d0202 · vercel · Jul 19, 2021
1 parent ec11d7b
commit 85d0202
Show file tree

Hide file tree

Showing 17 changed files with 134 additions and 183 deletions.
diff --git a/.changeset/green-worms-nail.md b/.changeset/green-worms-nail.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": minor
+---
+
+`Box` now accepts all [styled system props](https://styled-system.com/table/).
diff --git a/docs/content/Box.md b/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>
+```
diff --git a/src/BorderBox.tsx b/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
diff --git a/src/Box.tsx b/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
diff --git a/src/Flex.tsx b/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
diff --git a/src/Grid.tsx b/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
diff --git a/src/Position.tsx b/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

diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap
@@ -3,7 +3,6 @@
 exports[`Pagination renders consistently 1`] = `
 .c1 {
   display: inline-block;
-  display: inline-block;
 }
 
 .c2 {

diff --git a/src/__tests__/__snapshots__/AvatarStack.tsx.snap b/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;

diff --git a/src/__tests__/__snapshots__/Box.tsx.snap b/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) {

diff --git a/src/__tests__/__snapshots__/Button.tsx.snap b/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;
 }

diff --git a/src/__tests__/__snapshots__/CircleOcticon.tsx.snap b/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

diff --git a/src/__tests__/__snapshots__/Dialog.tsx.snap b/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;
 }