From e97fdc753b35de004c891c825ce1605ae85ece76 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Tue, 22 Jun 2021 10:12:26 -0500 Subject: [PATCH 01/29] add utility props to Box --- src/Box.tsx | 57 ++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 48 insertions(+), 9 deletions(-) diff --git a/src/Box.tsx b/src/Box.tsx index d5790f69ddd..88ede10f465 100644 --- a/src/Box.tsx +++ b/src/Box.tsx @@ -1,14 +1,53 @@ 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` - ${COMMON} - ${FLEX} - ${LAYOUT} - ${sx}; -` +type BoxProps = SpaceProps & + ColorProps & + TypographyProps & + LayoutProps & + FlexboxProps & + GridProps & + BackgroundProps & + BorderProps & + PositionProps & + ShadowProps & + SxProp + +const Box = styled.div( + space, + color, + typography, + layout, + flexbox, + grid, + background, + border, + position, + shadow, + sx +) -export type BoxProps = ComponentProps export default Box From 4ccefb03a415d64f837bdfb385255524124397ff Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Tue, 22 Jun 2021 10:51:37 -0500 Subject: [PATCH 02/29] update box docs --- docs/content/Box.md | 80 ++++++++++++++++++++++++++++++++++----------- 1 file changed, 61 insertions(+), 19 deletions(-) diff --git a/docs/content/Box.md b/docs/content/Box.md index ea2b5dd8ac0..eb13237625e 100644 --- a/docs/content/Box.md +++ b/docs/content/Box.md @@ -4,33 +4,75 @@ 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 can be used to create both{' '} - - inline - {' '} - and - - block-level elements, +## Examples + +### Default + +```jsx live + + Hello + +``` + +### Border on all sides + +```jsx live + + Hello + +``` + +### Border on one side + +```jsx live + + Hello + +``` + +### Flexbox + +Use `Box` to create [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) layouts. + +```jsx live + + + 1 + + + 2 + + + 3 + + +``` + +### Grid + +Use `Box` to create [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids) layouts. + +```jsx live + + + 1 - - elements with fixed or responsive width and height, + + 2 - - and more! + + 3 ``` ## System props -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. +Box components may receive system props of any category. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props -| Prop name | Type | Default | Description | -| :-------- | :----- | :-----: | :---------------------------------- | -| as | String | `div` | sets the HTML tag for the component | +| Prop | Type | Default | Description | +| :--- | :------------------ | :----------------------------------------------------------------------: | :---------- | +| `as` | | [`"div"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) | | +| `sx` | `SystemStyleObject` | — | | From 26d08f67ff90a9a9e7ea9354e3e80482de5c816d Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Tue, 22 Jun 2021 11:08:53 -0500 Subject: [PATCH 03/29] export box props --- src/Box.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Box.tsx b/src/Box.tsx index 88ede10f465..7a85932bea3 100644 --- a/src/Box.tsx +++ b/src/Box.tsx @@ -24,7 +24,7 @@ import { import sx, {SxProp} from './sx' -type BoxProps = SpaceProps & +export type BoxProps = SpaceProps & ColorProps & TypographyProps & LayoutProps & From 29e6d9f6c75258c68296c6a1ecfc2aba093768c1 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Tue, 22 Jun 2021 11:20:16 -0500 Subject: [PATCH 04/29] update snapshots --- .../__snapshots__/Pagination.tsx.snap | 1 - .../__snapshots__/AvatarStack.tsx.snap | 10 +--- .../__snapshots__/BorderBox.tsx.snap | 4 ++ src/__tests__/__snapshots__/Box.tsx.snap | 16 ------ src/__tests__/__snapshots__/Button.tsx.snap | 1 - .../__snapshots__/CircleOcticon.tsx.snap | 12 ++-- src/__tests__/__snapshots__/Dialog.tsx.snap | 8 --- src/__tests__/__snapshots__/Flex.tsx.snap | 37 ------------ src/__tests__/__snapshots__/Grid.tsx.snap | 32 ++++------- .../__snapshots__/PointerBox.tsx.snap | 16 ++++++ src/__tests__/__snapshots__/Popover.tsx.snap | 56 +++++++++++++++++++ src/__tests__/__snapshots__/Position.tsx.snap | 7 +++ src/__tests__/__snapshots__/SideNav.tsx.snap | 4 ++ src/__tests__/__snapshots__/Timeline.tsx.snap | 32 +++-------- 14 files changed, 114 insertions(+), 122 deletions(-) diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap index a8933148916..a591902ba47 100644 --- 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 index d2d0d3c1302..d2d2279b163 100644 --- a/src/__tests__/__snapshots__/AvatarStack.tsx.snap +++ b/src/__tests__/__snapshots__/AvatarStack.tsx.snap @@ -2,16 +2,13 @@ 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; display: flex; width: 38px; position: absolute; + position: absolute; } .c0 { @@ -194,16 +191,13 @@ 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; display: flex; width: 38px; position: absolute; + position: absolute; } .c0 { diff --git a/src/__tests__/__snapshots__/BorderBox.tsx.snap b/src/__tests__/__snapshots__/BorderBox.tsx.snap index b19c011ef99..e860b3a024c 100644 --- a/src/__tests__/__snapshots__/BorderBox.tsx.snap +++ b/src/__tests__/__snapshots__/BorderBox.tsx.snap @@ -6,6 +6,10 @@ exports[`BorderBox renders consistently 1`] = ` border-style: solid; border-color: #e1e4e8; border-radius: 6px; + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; }
and 1`] = ` .c0 { background-color: #ffeef0; + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; position: relative; border-width: 1px; border-style: solid; @@ -47,6 +51,10 @@ exports[`PointerBox passes the "bg" prop to both and 1`] = ` exports[`PointerBox passes the "borderColor" prop to both and 1`] = ` .c0 { + border-color: #d73a49; + border-width: 1px; + border-style: solid; + border-radius: 6px; position: relative; border-color: #d73a49; border-width: 1px; @@ -91,6 +99,10 @@ exports[`PointerBox passes the "borderColor" prop to both and in with relative positioning 1`] = ` .c0 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; position: relative; border-width: 1px; border-style: solid; @@ -135,6 +147,10 @@ exports[`PointerBox renders a in with relative positioning 1 exports[`PointerBox renders consistently 1`] = ` .c0 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; position: relative; border-width: 1px; border-style: solid; diff --git a/src/__tests__/__snapshots__/Popover.tsx.snap b/src/__tests__/__snapshots__/Popover.tsx.snap index c49d4641b73..6fac1c7fb0b 100644 --- a/src/__tests__/__snapshots__/Popover.tsx.snap +++ b/src/__tests__/__snapshots__/Popover.tsx.snap @@ -8,6 +8,10 @@ exports[`Popover Popover.Content renders consistently 1`] = ` } .c2 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; border-width: 1px; border-style: solid; border-color: #e1e4e8; @@ -217,6 +221,10 @@ exports[`Popover renders consistently 1`] = ` } .c2 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; border-width: 1px; border-style: solid; border-color: #e1e4e8; @@ -426,6 +434,10 @@ exports[`Popover renders correctly for a caret position of bottom 1`] = ` } .c2 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; border-width: 1px; border-style: solid; border-color: #e1e4e8; @@ -784,6 +796,10 @@ exports[`Popover renders correctly for a caret position of bottom-left 1`] = ` } .c2 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; border-width: 1px; border-style: solid; border-color: #e1e4e8; @@ -1142,6 +1158,10 @@ exports[`Popover renders correctly for a caret position of bottom-right 1`] = ` } .c2 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; border-width: 1px; border-style: solid; border-color: #e1e4e8; @@ -1500,6 +1520,10 @@ exports[`Popover renders correctly for a caret position of left 1`] = ` } .c2 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; border-width: 1px; border-style: solid; border-color: #e1e4e8; @@ -1858,6 +1882,10 @@ exports[`Popover renders correctly for a caret position of left-bottom 1`] = ` } .c2 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; border-width: 1px; border-style: solid; border-color: #e1e4e8; @@ -2216,6 +2244,10 @@ exports[`Popover renders correctly for a caret position of left-top 1`] = ` } .c2 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; border-width: 1px; border-style: solid; border-color: #e1e4e8; @@ -2574,6 +2606,10 @@ exports[`Popover renders correctly for a caret position of right 1`] = ` } .c2 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; border-width: 1px; border-style: solid; border-color: #e1e4e8; @@ -2932,6 +2968,10 @@ exports[`Popover renders correctly for a caret position of right-bottom 1`] = ` } .c2 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; border-width: 1px; border-style: solid; border-color: #e1e4e8; @@ -3290,6 +3330,10 @@ exports[`Popover renders correctly for a caret position of right-top 1`] = ` } .c2 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; border-width: 1px; border-style: solid; border-color: #e1e4e8; @@ -3648,6 +3692,10 @@ exports[`Popover renders correctly for a caret position of top 1`] = ` } .c2 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; border-width: 1px; border-style: solid; border-color: #e1e4e8; @@ -4006,6 +4054,10 @@ exports[`Popover renders correctly for a caret position of top-left 1`] = ` } .c2 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; border-width: 1px; border-style: solid; border-color: #e1e4e8; @@ -4364,6 +4416,10 @@ exports[`Popover renders correctly for a caret position of top-right 1`] = ` } .c2 { + border-width: 1px; + border-style: solid; + border-color: #e1e4e8; + border-radius: 6px; border-width: 1px; border-style: solid; border-color: #e1e4e8; diff --git a/src/__tests__/__snapshots__/Position.tsx.snap b/src/__tests__/__snapshots__/Position.tsx.snap index 5bcd50ad24c..df26be4f8ff 100644 --- a/src/__tests__/__snapshots__/Position.tsx.snap +++ b/src/__tests__/__snapshots__/Position.tsx.snap @@ -3,6 +3,7 @@ exports[`position components Absolute renders consistently 1`] = ` .c0 { position: absolute; + position: absolute; }
Date: Tue, 22 Jun 2021 11:26:15 -0500 Subject: [PATCH 05/29] Create green-worms-nail.md --- .changeset/green-worms-nail.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/green-worms-nail.md diff --git a/.changeset/green-worms-nail.md b/.changeset/green-worms-nail.md new file mode 100644 index 00000000000..ebafa512f65 --- /dev/null +++ b/.changeset/green-worms-nail.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Box may accept all system props. From 6556f3f43780a00e50a95b5f15c20f68ee7dc115 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Tue, 22 Jun 2021 12:18:52 -0500 Subject: [PATCH 06/29] AvatarStack story in storybook --- src/stories/AvatarStack.stories.tsx | 37 +++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 src/stories/AvatarStack.stories.tsx diff --git a/src/stories/AvatarStack.stories.tsx b/src/stories/AvatarStack.stories.tsx new file mode 100644 index 00000000000..298a9fd7f27 --- /dev/null +++ b/src/stories/AvatarStack.stories.tsx @@ -0,0 +1,37 @@ +import AvatarStack from '../AvatarStack' +import {Meta} from '@storybook/react' +import React from 'react' +import {ThemeProvider} from '..' +import BaseStyles from '../BaseStyles' + +const meta: Meta = { + title: 'Composite components/AvatarStack', + component: AvatarStack, + decorators: [ + (Story: React.ComponentType): JSX.Element => ( + + + + + + ) + ], + parameters: { + controls: { + disabled: true + } + } +} +export default meta + +export function AvatarStackStory(): JSX.Element { + return ( + + + + + + + ) +} +AvatarStackStory.storyName = 'AvatarStack' From 3456605a7c0c047382feb4af8531991f32e9dcf4 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Fri, 2 Jul 2021 08:05:23 -0500 Subject: [PATCH 07/29] Update .changeset/green-worms-nail.md Co-authored-by: Cole Bemis --- .changeset/green-worms-nail.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/green-worms-nail.md b/.changeset/green-worms-nail.md index ebafa512f65..1dfbf5809e3 100644 --- a/.changeset/green-worms-nail.md +++ b/.changeset/green-worms-nail.md @@ -2,4 +2,4 @@ "@primer/components": patch --- -Box may accept all system props. +`Box` now accepts all system props. From 52143fcc9ff1c86e81f10f7ec62f4c56753481ef Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Fri, 2 Jul 2021 08:11:52 -0500 Subject: [PATCH 08/29] Update docs/content/Box.md Co-authored-by: Cole Bemis --- docs/content/Box.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/content/Box.md b/docs/content/Box.md index eb13237625e..10e4cc10e4f 100644 --- a/docs/content/Box.md +++ b/docs/content/Box.md @@ -76,3 +76,4 @@ Box components may receive system props of any category. Read our [System Props] | :--- | :------------------ | :----------------------------------------------------------------------: | :---------- | | `as` | | [`"div"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) | | | `sx` | `SystemStyleObject` | — | | +`Box` also accepts all [styled system props]. From 403f03db0ad7f3a6049d4efa87a2576ce1f4b22d Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 19 Jul 2021 14:36:49 -0700 Subject: [PATCH 09/29] Remove duplicate border system prop definitions --- src/BorderBox.tsx | 13 ++--- src/Box.tsx | 1 - .../__snapshots__/BorderBox.tsx.snap | 4 -- .../__snapshots__/CircleOcticon.tsx.snap | 4 -- .../__snapshots__/PointerBox.tsx.snap | 20 ------- src/__tests__/__snapshots__/Popover.tsx.snap | 56 ------------------- src/__tests__/__snapshots__/SideNav.tsx.snap | 4 -- 7 files changed, 4 insertions(+), 98 deletions(-) diff --git a/src/BorderBox.tsx b/src/BorderBox.tsx index 3890718cbfe..8b835069130 100644 --- 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)` - ${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 export default BorderBox diff --git a/src/Box.tsx b/src/Box.tsx index 7a85932bea3..9d34c0421e2 100644 --- a/src/Box.tsx +++ b/src/Box.tsx @@ -21,7 +21,6 @@ import { typography, TypographyProps } from 'styled-system' - import sx, {SxProp} from './sx' export type BoxProps = SpaceProps & diff --git a/src/__tests__/__snapshots__/BorderBox.tsx.snap b/src/__tests__/__snapshots__/BorderBox.tsx.snap index e860b3a024c..b19c011ef99 100644 --- a/src/__tests__/__snapshots__/BorderBox.tsx.snap +++ b/src/__tests__/__snapshots__/BorderBox.tsx.snap @@ -6,10 +6,6 @@ exports[`BorderBox renders consistently 1`] = ` border-style: solid; border-color: #e1e4e8; border-radius: 6px; - border-width: 1px; - border-style: solid; - border-color: #e1e4e8; - border-radius: 6px; }
and 1`] = ` border-color: #e1e4e8; border-radius: 6px; position: relative; - border-width: 1px; - border-style: solid; - border-color: #e1e4e8; - border-radius: 6px; - position: relative; }
and in with relative positioning 1 border-color: #e1e4e8; border-radius: 6px; position: relative; - border-width: 1px; - border-style: solid; - border-color: #e1e4e8; - border-radius: 6px; - position: relative; }
Date: Mon, 19 Jul 2021 14:45:15 -0700 Subject: [PATCH 10/29] Remove duplicate grid system props definitions --- src/Grid.tsx | 11 ++++------- src/__tests__/__snapshots__/Grid.tsx.snap | 12 ------------ 2 files changed, 4 insertions(+), 19 deletions(-) diff --git a/src/Grid.tsx b/src/Grid.tsx index 04d7e2e0676..9d8c5880881 100644 --- 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)` - ${GRID}; -` +export type GridProps = BoxProps + +const Grid = styled(Box)`` Grid.defaultProps = { display: 'grid' } -export type GridProps = ComponentProps export default Grid diff --git a/src/__tests__/__snapshots__/Grid.tsx.snap b/src/__tests__/__snapshots__/Grid.tsx.snap index f74a19680e4..d9e774b5bd6 100644 --- a/src/__tests__/__snapshots__/Grid.tsx.snap +++ b/src/__tests__/__snapshots__/Grid.tsx.snap @@ -15,7 +15,6 @@ exports[`Grid respects gridArea 1`] = ` .c0 { display: grid; grid-area: sidebar; - grid-area: sidebar; }
Date: Mon, 19 Jul 2021 14:45:36 -0700 Subject: [PATCH 11/29] Update FlexProps definition --- src/Flex.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Flex.tsx b/src/Flex.tsx index b026b8675f8..4218fc3daa5 100644 --- a/src/Flex.tsx +++ b/src/Flex.tsx @@ -1,6 +1,7 @@ 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)`` @@ -8,5 +9,4 @@ Flex.defaultProps = { display: 'flex' } -export type FlexProps = ComponentProps export default Flex From 3c582171005b1d2416ff1bde7fb2f0a0e4e0fff9 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 19 Jul 2021 14:54:47 -0700 Subject: [PATCH 12/29] Remove duplicate position system prop definitions --- src/Position.tsx | 9 ++------- src/__tests__/__snapshots__/AvatarStack.tsx.snap | 2 -- src/__tests__/__snapshots__/Position.tsx.snap | 7 ------- src/__tests__/__snapshots__/Timeline.tsx.snap | 2 -- 4 files changed, 2 insertions(+), 18 deletions(-) diff --git a/src/Position.tsx b/src/Position.tsx index 41153e5c9a1..51806af7cb0 100644 --- 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)` - ${POSITION}; - ${sx}; -` +const Position = styled(Box)`` export type PositionProps = ComponentProps export default Position diff --git a/src/__tests__/__snapshots__/AvatarStack.tsx.snap b/src/__tests__/__snapshots__/AvatarStack.tsx.snap index d2d2279b163..1ad913e36db 100644 --- a/src/__tests__/__snapshots__/AvatarStack.tsx.snap +++ b/src/__tests__/__snapshots__/AvatarStack.tsx.snap @@ -8,7 +8,6 @@ exports[`Avatar renders consistently 1`] = ` display: flex; width: 38px; position: absolute; - position: absolute; } .c0 { @@ -197,7 +196,6 @@ exports[`Avatar respects alignRight props 1`] = ` display: flex; width: 38px; position: absolute; - position: absolute; } .c0 { diff --git a/src/__tests__/__snapshots__/Position.tsx.snap b/src/__tests__/__snapshots__/Position.tsx.snap index df26be4f8ff..5bcd50ad24c 100644 --- a/src/__tests__/__snapshots__/Position.tsx.snap +++ b/src/__tests__/__snapshots__/Position.tsx.snap @@ -3,7 +3,6 @@ exports[`position components Absolute renders consistently 1`] = ` .c0 { position: absolute; - position: absolute; }
Date: Mon, 19 Jul 2021 14:58:20 -0700 Subject: [PATCH 13/29] Update Box documentation --- .changeset/green-worms-nail.md | 2 +- docs/content/Box.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/green-worms-nail.md b/.changeset/green-worms-nail.md index 1dfbf5809e3..db9272d1016 100644 --- a/.changeset/green-worms-nail.md +++ b/.changeset/green-worms-nail.md @@ -2,4 +2,4 @@ "@primer/components": patch --- -`Box` now accepts all system props. +`Box` now accepts all [styled system props](https://styled-system.com/table/). diff --git a/docs/content/Box.md b/docs/content/Box.md index 10e4cc10e4f..692ba7e2a27 100644 --- a/docs/content/Box.md +++ b/docs/content/Box.md @@ -76,4 +76,4 @@ Box components may receive system props of any category. Read our [System Props] | :--- | :------------------ | :----------------------------------------------------------------------: | :---------- | | `as` | | [`"div"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) | | | `sx` | `SystemStyleObject` | — | | -`Box` also accepts all [styled system props]. +`Box` also accepts all [styled system props](https://styled-system.com/table/). From b726076644e0afb15240366657ad2f4fd6de8775 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 19 Jul 2021 15:04:14 -0700 Subject: [PATCH 14/29] Update BoxProps --- src/Box.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Box.tsx b/src/Box.tsx index 9d34c0421e2..12c2309dbe0 100644 --- a/src/Box.tsx +++ b/src/Box.tsx @@ -22,8 +22,9 @@ import { TypographyProps } from 'styled-system' import sx, {SxProp} from './sx' +import {ComponentProps} from './utils/types' -export type BoxProps = SpaceProps & +type StyledBoxProps = SpaceProps & ColorProps & TypographyProps & LayoutProps & @@ -35,7 +36,7 @@ export type BoxProps = SpaceProps & ShadowProps & SxProp -const Box = styled.div( +const Box = styled.div( space, color, typography, @@ -49,4 +50,5 @@ const Box = styled.div( sx ) +export type BoxProps = ComponentProps export default Box From 12eeb7e8ae564ec127b697e9af475ca6a46b1b39 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 19 Jul 2021 15:21:15 -0700 Subject: [PATCH 15/29] Update Box docs --- docs/content/Box.md | 27 +++++++++++---------------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/docs/content/Box.md b/docs/content/Box.md index 692ba7e2a27..8749803a2bd 100644 --- a/docs/content/Box.md +++ b/docs/content/Box.md @@ -2,11 +2,10 @@ 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. +import {Props} from '../src/props' +import {Box} from '@primer/components' -## Examples - -### Default +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 @@ -14,6 +13,14 @@ The Box component serves as a wrapper component for most layout related needs. U ``` +## Props + + + +Box also accepts all [styled system props](https://styled-system.com/table/). + +## Examples + ### Border on all sides ```jsx live @@ -65,15 +72,3 @@ Use `Box` to create [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CS ``` - -## System props - -Box components may receive system props of any category. Read our [System Props](/system-props) doc page for a full list of available props. - -## Component props - -| Prop | Type | Default | Description | -| :--- | :------------------ | :----------------------------------------------------------------------: | :---------- | -| `as` | | [`"div"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) | | -| `sx` | `SystemStyleObject` | — | | -`Box` also accepts all [styled system props](https://styled-system.com/table/). From 54768f47b3e2d2a2f9ad15b37c72780702ad874d Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 19 Jul 2021 15:22:23 -0700 Subject: [PATCH 16/29] Update Box props --- docs/content/Box.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/Box.md b/docs/content/Box.md index 8749803a2bd..a5d101c9bb8 100644 --- a/docs/content/Box.md +++ b/docs/content/Box.md @@ -39,7 +39,7 @@ Box also accepts all [styled system props](https://styled-system.com/table/). ### Flexbox -Use `Box` to create [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) layouts. +Use Box to create [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) layouts. ```jsx live @@ -57,7 +57,7 @@ Use `Box` to create [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS ### Grid -Use `Box` to create [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids) layouts. +Use Box to create [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids) layouts. ```jsx live From 409d6a8180acda3dded7a652b6cbd667afeb1847 Mon Sep 17 00:00:00 2001 From: Clay Miller Date: Wed, 23 Jun 2021 13:06:31 -0400 Subject: [PATCH 17/29] fix: Type 'DropdownButton' as 'button' (#1318) * fix: Type 'DropdownButton' as 'button' * chore: Update snapshots --- src/DropdownMenu/DropdownButton.tsx | 2 +- src/__tests__/__snapshots__/DropdownMenu.tsx.snap | 1 + src/__tests__/__snapshots__/SelectPanel.tsx.snap | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/DropdownMenu/DropdownButton.tsx b/src/DropdownMenu/DropdownButton.tsx index df2a7f36d87..450e6133429 100644 --- a/src/DropdownMenu/DropdownButton.tsx +++ b/src/DropdownMenu/DropdownButton.tsx @@ -7,7 +7,7 @@ export type DropdownButtonProps = ButtonProps export const DropdownButton = React.forwardRef>( ({children, ...props}: React.PropsWithChildren, ref): JSX.Element => ( - diff --git a/src/__tests__/__snapshots__/DropdownMenu.tsx.snap b/src/__tests__/__snapshots__/DropdownMenu.tsx.snap index 0e1fd83dd83..ff413f760bd 100644 --- a/src/__tests__/__snapshots__/DropdownMenu.tsx.snap +++ b/src/__tests__/__snapshots__/DropdownMenu.tsx.snap @@ -79,6 +79,7 @@ exports[`DropdownMenu renders consistently 1`] = ` onClick={[Function]} onKeyDown={[Function]} tabIndex={0} + type="button" >
diff --git a/src/__tests__/__snapshots__/ActionMenu.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.tsx.snap index 7db066bfa39..a92e9626f63 100644 --- a/src/__tests__/__snapshots__/ActionMenu.tsx.snap +++ b/src/__tests__/__snapshots__/ActionMenu.tsx.snap @@ -70,9 +70,9 @@ exports[`ActionMenu renders consistently 1`] = ` } - > - Contents - + + + } + > + + + + ) } @@ -78,7 +85,7 @@ describe('AnchoredOverlay', () => { const anchoredOverlay = HTMLRender( ) - const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="listbox"]')! + const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]')! fireEvent.click(anchor) expect(mockOpenCallback).toHaveBeenCalledTimes(1) @@ -92,7 +99,7 @@ describe('AnchoredOverlay', () => { const anchoredOverlay = HTMLRender( ) - const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="listbox"]')! + const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]')! fireEvent.keyDown(anchor, {key: ' '}) expect(mockOpenCallback).toHaveBeenCalledTimes(1) @@ -127,7 +134,7 @@ describe('AnchoredOverlay', () => { onCloseCallback={mockCloseCallback} /> ) - const overlay = await anchoredOverlay.findByRole('listbox') + const overlay = await anchoredOverlay.findByRole('none') fireEvent.keyDown(overlay, {key: 'Escape'}) expect(mockOpenCallback).toHaveBeenCalledTimes(0) diff --git a/src/__tests__/Overlay.tsx b/src/__tests__/Overlay.tsx index 21ef6374335..9976156665f 100644 --- a/src/__tests__/Overlay.tsx +++ b/src/__tests__/Overlay.tsx @@ -3,6 +3,9 @@ import {Overlay, Position, Flex, Text, ButtonDanger, Button} from '..' import {render, cleanup, waitFor, fireEvent, act} from '@testing-library/react' import userEvent from '@testing-library/user-event' import {axe, toHaveNoViolations} from 'jest-axe' +import theme from '../theme' +import BaseStyles from '../BaseStyles' +import {ThemeProvider} from '../ThemeProvider' expect.extend(toHaveNoViolations) @@ -22,30 +25,34 @@ const TestComponent = ({initialFocus, callback}: TestComponentSettings) => { } } return ( - - - - {isOpen ? ( - - - Are you sure? - Cancel - - - - ) : null} - + + + + + + {isOpen ? ( + + + Are you sure? + Cancel + + + + ) : null} + + + ) } diff --git a/src/__tests__/__snapshots__/ActionMenu.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.tsx.snap index a92e9626f63..43aaddf600d 100644 --- a/src/__tests__/__snapshots__/ActionMenu.tsx.snap +++ b/src/__tests__/__snapshots__/ActionMenu.tsx.snap @@ -68,7 +68,7 @@ exports[`ActionMenu renders consistently 1`] = ` } + +
`; diff --git a/src/__tests__/__snapshots__/DropdownMenu.tsx.snap b/src/__tests__/__snapshots__/DropdownMenu.tsx.snap index 0ed5d845df6..0324c63d005 100644 --- a/src/__tests__/__snapshots__/DropdownMenu.tsx.snap +++ b/src/__tests__/__snapshots__/DropdownMenu.tsx.snap @@ -72,7 +72,7 @@ exports[`DropdownMenu renders consistently 1`] = ` }