Skip to content

Commit 85d0202

Browse files
VanAndersoncolebemissmockledgreifmattcosta7
authored
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 <[email protected]> * Update docs/content/Box.md Co-authored-by: Cole Bemis <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> Co-authored-by: Clay Miller <[email protected]> Co-authored-by: Dusty Greif <[email protected]> Co-authored-by: Matthew Costabile <[email protected]>
1 parent ec11d7b commit 85d0202

File tree

17 files changed

+134
-183
lines changed

17 files changed

+134
-183
lines changed

‎.changeset/green-worms-nail.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/components": minor
3+
---
4+
5+
`Box` now accepts all [styled system props](https://styled-system.com/table/).

‎docs/content/Box.md‎

Lines changed: 62 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,73 @@
22
title: Box
33
---
44

5-
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.
6-
7-
## Default example
8-
9-
```jsx live live
10-
<Box>
11-
Box can be used to create both{' '}
12-
<Box as="span" color="text.inverse" bg="bg.successInverse">
13-
inline
14-
</Box>{' '}
15-
and
16-
<Box color="text.inverse" bg="bg.dangerInverse">
17-
block-level elements,
5+
import {Props} from '../src/props'
6+
import {Box} from '@primer/components'
7+
8+
Box is a low-level utility component that accepts [styled system props](https://styled-system.com/table/) to enable custom theme-aware styling.
9+
10+
```jsx live
11+
<Box color="text.secondary" bg="bg.tertiary" p={3}>
12+
Hello
13+
</Box>
14+
```
15+
16+
## Props
17+
18+
<Props of={Box} />
19+
20+
Box also accepts all [styled system props](https://styled-system.com/table/).
21+
22+
## Examples
23+
24+
### Border on all sides
25+
26+
```jsx live
27+
<Box borderColor="border.primary" borderWidth={1} borderStyle="solid" p={3}>
28+
Hello
29+
</Box>
30+
```
31+
32+
### Border on one side
33+
34+
```jsx live
35+
<Box borderColor="border.primary" borderBottomWidth={1} borderBottomStyle="solid" pb={3}>
36+
Hello
37+
</Box>
38+
```
39+
40+
### Flexbox
41+
42+
Use Box to create [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) layouts.
43+
44+
```jsx live
45+
<Box display="flex">
46+
<Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
47+
1
1848
</Box>
19-
<Box color="text.inverse" bg="bg.warningInverse" width={[1, 1, 1 / 2]}>
20-
elements with fixed or responsive width and height,
49+
<Box flexGrow={1} p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
50+
2
2151
</Box>
22-
<Box color="text.inverse" bg="bg.infoInverse" p={4} mt={2}>
23-
and more!
52+
<Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
53+
3
2454
</Box>
2555
</Box>
2656
```
2757

28-
## System props
58+
### Grid
2959

30-
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.
60+
Use Box to create [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids) layouts.
3161

32-
## Component props
33-
34-
| Prop name | Type | Default | Description |
35-
| :-------- | :----- | :-----: | :---------------------------------- |
36-
| as | String | `div` | sets the HTML tag for the component |
62+
```jsx live
63+
<Box display="grid" gridTemplateColumns="1fr 1fr" gridGap={3}>
64+
<Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
65+
1
66+
</Box>
67+
<Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
68+
2
69+
</Box>
70+
<Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
71+
3
72+
</Box>
73+
</Box>
74+
```

‎src/BorderBox.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import styled from 'styled-components'
2-
import Box from './Box'
3-
import {BORDER, SystemBorderProps} from './constants'
4-
import sx from './sx'
5-
import {ComponentProps} from './utils/types'
2+
import Box, {BoxProps} from './Box'
63

7-
const BorderBox = styled(Box)<SystemBorderProps>`
8-
${BORDER};
9-
${sx};
10-
`
4+
export type BorderBoxProps = BoxProps
5+
6+
const BorderBox = styled(Box)``
117

128
BorderBox.defaultProps = {
139
borderWidth: '1px',
@@ -16,5 +12,4 @@ BorderBox.defaultProps = {
1612
borderRadius: 2
1713
}
1814

19-
export type BorderBoxProps = ComponentProps<typeof BorderBox>
2015
export default BorderBox

‎src/Box.tsx‎

Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,54 @@
11
import styled from 'styled-components'
2-
import {COMMON, FLEX, LAYOUT, SystemCommonProps, SystemFlexProps, SystemLayoutProps} from './constants'
2+
import {
3+
background,
4+
BackgroundProps,
5+
border,
6+
BorderProps,
7+
color,
8+
ColorProps,
9+
flexbox,
10+
FlexboxProps,
11+
grid,
12+
GridProps,
13+
layout,
14+
LayoutProps,
15+
position,
16+
PositionProps,
17+
shadow,
18+
ShadowProps,
19+
space,
20+
SpaceProps,
21+
typography,
22+
TypographyProps
23+
} from 'styled-system'
324
import sx, {SxProp} from './sx'
425
import {ComponentProps} from './utils/types'
526

6-
const Box = styled.div<SystemCommonProps & SystemFlexProps & SystemLayoutProps & SxProp>`
7-
${COMMON}
8-
${FLEX}
9-
${LAYOUT}
10-
${sx};
11-
`
27+
type StyledBoxProps = SpaceProps &
28+
ColorProps &
29+
TypographyProps &
30+
LayoutProps &
31+
FlexboxProps &
32+
GridProps &
33+
BackgroundProps &
34+
BorderProps &
35+
PositionProps &
36+
ShadowProps &
37+
SxProp
38+
39+
const Box = styled.div<StyledBoxProps>(
40+
space,
41+
color,
42+
typography,
43+
layout,
44+
flexbox,
45+
grid,
46+
background,
47+
border,
48+
position,
49+
shadow,
50+
sx
51+
)
1252

1353
export type BoxProps = ComponentProps<typeof Box>
1454
export default Box

‎src/Flex.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import styled from 'styled-components'
2-
import Box from './Box'
3-
import {ComponentProps} from './utils/types'
2+
import Box, {BoxProps} from './Box'
3+
4+
export type FlexProps = BoxProps
45

56
const Flex = styled(Box)``
67

78
Flex.defaultProps = {
89
display: 'flex'
910
}
1011

11-
export type FlexProps = ComponentProps<typeof Flex>
1212
export default Flex

‎src/Grid.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
import styled from 'styled-components'
2-
import Box from './Box'
3-
import {GRID, SystemGridProps} from './constants'
4-
import {ComponentProps} from './utils/types'
2+
import Box, {BoxProps} from './Box'
53

6-
const Grid = styled(Box)<SystemGridProps>`
7-
${GRID};
8-
`
4+
export type GridProps = BoxProps
5+
6+
const Grid = styled(Box)``
97

108
Grid.defaultProps = {
119
display: 'grid'
1210
}
1311

14-
export type GridProps = ComponentProps<typeof Grid>
1512
export default Grid

‎src/Position.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
11
import React from 'react'
22
import styled from 'styled-components'
33
import Box from './Box'
4-
import {POSITION, SystemPositionProps} from './constants'
5-
import sx from './sx'
64
import {ComponentProps} from './utils/types'
75

8-
type StyledPositionProps = {as?: React.ElementType} & SystemPositionProps
6+
type StyledPositionProps = {as?: React.ElementType}
97

10-
const Position = styled(Box)<StyledPositionProps>`
11-
${POSITION};
12-
${sx};
13-
`
8+
const Position = styled(Box)<StyledPositionProps>``
149

1510
export type PositionProps = ComponentProps<typeof Position>
1611
export default Position

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
exports[`Pagination renders consistently 1`] = `
44
.c1 {
55
display: inline-block;
6-
display: inline-block;
76
}
87
98
.c2 {

‎src/__tests__/__snapshots__/AvatarStack.tsx.snap‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22

33
exports[`Avatar renders consistently 1`] = `
44
.c1 {
5-
display: -webkit-box;
6-
display: -webkit-flex;
7-
display: -ms-flexbox;
8-
display: flex;
95
display: -webkit-box;
106
display: -webkit-flex;
117
display: -ms-flexbox;
@@ -194,10 +190,6 @@ exports[`Avatar renders consistently 1`] = `
194190

195191
exports[`Avatar respects alignRight props 1`] = `
196192
.c1 {
197-
display: -webkit-box;
198-
display: -webkit-flex;
199-
display: -ms-flexbox;
200-
display: flex;
201193
display: -webkit-box;
202194
display: -webkit-flex;
203195
display: -ms-flexbox;

‎src/__tests__/__snapshots__/Box.tsx.snap‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,6 @@ exports[`Box renders padding 3`] = `
141141
exports[`Box respects display 1`] = `
142142
.c0 {
143143
display: inline;
144-
display: inline;
145144
}
146145
147146
<div
@@ -153,7 +152,6 @@ exports[`Box respects display 1`] = `
153152
exports[`Box respects display 2`] = `
154153
.c0 {
155154
display: inline-block;
156-
display: inline-block;
157155
}
158156
159157
<div
@@ -165,7 +163,6 @@ exports[`Box respects display 2`] = `
165163
exports[`Box respects display 3`] = `
166164
.c0 {
167165
display: none;
168-
display: none;
169166
}
170167
171168
<div
@@ -177,19 +174,6 @@ exports[`Box respects display 3`] = `
177174
exports[`Box respects display 4`] = `
178175
.c0 {
179176
display: none;
180-
display: none;
181-
}
182-
183-
@media screen and (min-width:544px) {
184-
.c0 {
185-
display: none;
186-
}
187-
}
188-
189-
@media screen and (min-width:768px) {
190-
.c0 {
191-
display: block;
192-
}
193177
}
194178
195179
@media screen and (min-width:544px) {

0 commit comments

Comments
 (0)