From 07597ea879f6c82c835bcd076f5c9e167703b4f8 Mon Sep 17 00:00:00 2001 From: Alexis Rico Date: Wed, 24 Nov 2021 13:40:36 +0100 Subject: [PATCH 01/10] Update Octicon docs --- docs/content/StyledOcticon.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/StyledOcticon.md b/docs/content/StyledOcticon.md index a61e54858b8..9e67ba53b15 100644 --- a/docs/content/StyledOcticon.md +++ b/docs/content/StyledOcticon.md @@ -9,8 +9,8 @@ StyledOcticon renders an [Octicon](https://octicons.github.com) with common syst ```jsx live <> - - + + ``` From e71fa2543666e8fda53e60b5fb52ebb6bbc1b0fb Mon Sep 17 00:00:00 2001 From: Alexis Rico Date: Thu, 25 Nov 2021 13:47:13 +0100 Subject: [PATCH 02/10] Fix all lint issues in docs before next major Signed-off-by: Alexis Rico --- .eslintrc.json | 3 +- docs/content/AnchoredOverlay.mdx | 4 +-- docs/content/Buttons.md | 2 +- docs/content/CircleOcticon.md | 2 +- docs/content/Flex.md | 4 +-- docs/content/Grid.md | 4 +-- docs/content/Header.md | 10 +++--- docs/content/Heading.md | 2 +- docs/content/PointerBox.md | 4 +-- docs/content/Position.md | 30 ++++++++--------- docs/content/SideNav.md | 20 ++++++------ docs/content/StyledOcticon.md | 4 +-- docs/content/SubNav.md | 2 +- docs/content/TextInputWithTokens.mdx | 4 +-- docs/content/Timeline.md | 6 ++-- docs/content/Token.mdx | 48 ++++++++++++++-------------- docs/content/Truncate.md | 2 +- docs/content/overriding-styles.mdx | 6 ++-- 18 files changed, 79 insertions(+), 78 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 524e372acf2..01077da45e3 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -130,7 +130,8 @@ "jsx-a11y/label-has-for": 0, "@typescript-eslint/no-unnecessary-condition": 0, "@typescript-eslint/no-unused-vars": 0, - "primer-react/no-deprecated-colors": ["error", {"skipImportCheck": true}] + "primer-react/no-deprecated-colors": ["error", {"skipImportCheck": true}], + "primer-react/no-system-props": ["error", {"skipImportCheck": true}] } } ] diff --git a/docs/content/AnchoredOverlay.mdx b/docs/content/AnchoredOverlay.mdx index 396a5df8949..3b9ad4afe66 100644 --- a/docs/content/AnchoredOverlay.mdx +++ b/docs/content/AnchoredOverlay.mdx @@ -26,8 +26,8 @@ See also [Overlay positioning](/Overlay#positioning).

This menu automatically receives a focus trap and focus zone. Use up/down keys to navigate between buttons

- - + + diff --git a/docs/content/Buttons.md b/docs/content/Buttons.md index c7eabe8ea38..14baf9364cb 100644 --- a/docs/content/Buttons.md +++ b/docs/content/Buttons.md @@ -19,7 +19,7 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. ` Button Invisible window.alert('button clicked')} /> - + diff --git a/docs/content/CircleOcticon.md b/docs/content/CircleOcticon.md index 3df5b989e72..4e9382383ec 100644 --- a/docs/content/CircleOcticon.md +++ b/docs/content/CircleOcticon.md @@ -7,7 +7,7 @@ CircleOcticon renders any Octicon with a circle background. CircleOcticons are m ## Default example ```jsx live - + ``` ## Component props diff --git a/docs/content/Flex.md b/docs/content/Flex.md index 6bc5109d54b..a0672e72230 100644 --- a/docs/content/Flex.md +++ b/docs/content/Flex.md @@ -12,7 +12,7 @@ Use [Box](/Box) instead. **Before** ```jsx - + Item 1 @@ -33,7 +33,7 @@ Use [Box](/Box) instead. ```jsx live - + Item 1 diff --git a/docs/content/Grid.md b/docs/content/Grid.md index 75ab8f981ec..0c6d2611190 100644 --- a/docs/content/Grid.md +++ b/docs/content/Grid.md @@ -12,7 +12,7 @@ Use [Box](/Box) instead. **Before** ```jsx - + 1 @@ -38,7 +38,7 @@ Use [Box](/Box) instead. ## Default example ```jsx live - + 1 diff --git a/docs/content/Header.md b/docs/content/Header.md index 632262a9c50..16ab4106de2 100644 --- a/docs/content/Header.md +++ b/docs/content/Header.md @@ -13,13 +13,13 @@ All items directly under the Header component should be a `Header.Item` componen ```jsx live
- - + + GitHub Menu - +
@@ -30,10 +30,10 @@ All items directly under the Header component should be a `Header.Item` componen ```jsx live
Item 1 - + Item 2 - Item 3 + Item 3
``` diff --git a/docs/content/Heading.md b/docs/content/Heading.md index c1efd4a7e84..20d7e9bf0f0 100644 --- a/docs/content/Heading.md +++ b/docs/content/Heading.md @@ -8,7 +8,7 @@ The Heading component will render an html `h2` tag without any default styling. ## Default example ```jsx live -H2 heading with fontSize={1} +H2 heading with fontSize={1} ``` ## System props diff --git a/docs/content/PointerBox.md b/docs/content/PointerBox.md index 64f7264eed9..5e8d9c7a83f 100644 --- a/docs/content/PointerBox.md +++ b/docs/content/PointerBox.md @@ -7,7 +7,7 @@ PointerBox is a [BorderBox](./BorderBox) component with a caret added to it. ## Default example ```jsx live - + PointerBox ``` @@ -23,7 +23,7 @@ function PointerBoxDemo(props) { - + {' '} Content{' '} diff --git a/docs/content/Position.md b/docs/content/Position.md index 05e1bf1450d..14f2c30f8bc 100644 --- a/docs/content/Position.md +++ b/docs/content/Position.md @@ -13,7 +13,7 @@ Use [Box](/Box) instead. ```jsx <> - ... + ... ... ... ... @@ -37,37 +37,37 @@ Use [Box](/Box) instead. ```jsx live - Relative + Absolute - + Relative + Absolute + - + rt - + lt - + rb - + lb - + bl - + br - + tl - + tr - Sticky + Sticky - + I'm sticky! - Fixed + Fixed

(see the bottom right of the screen)

- + I'm fixed to the bottom right. diff --git a/docs/content/SideNav.md b/docs/content/SideNav.md index aed96002641..5ec0cce40ac 100644 --- a/docs/content/SideNav.md +++ b/docs/content/SideNav.md @@ -7,7 +7,7 @@ The Side Nav is a vertical list of navigational links, typically used on the lef ## Default example ```jsx live - + Account @@ -30,12 +30,12 @@ Different kinds of content can be added inside a SideNav item. Use system props Add the `variant='full'` prop to a `SideNav.Link` to spread child elements across the link, which is useful for status icons, labels, and the like. ```jsx live - + Text Only - + With an avatar @@ -44,7 +44,7 @@ Add the `variant='full'` prop to a `SideNav.Link` to spread child elements acros With a status icon - + With a label @@ -86,7 +86,7 @@ Add the `variant="lightweight"` prop to `SideNav` to render an alternative, more mb={2} pb={1} > - + Menu @@ -110,17 +110,17 @@ Add the `variant="lightweight"` prop to `SideNav` to render an alternative, more It can also appear nested, as a sub navigation. Use margin/padding [System Props](/system-props) to add indentation. ```jsx live - + - + Account - + Profile - + Sub item 1 @@ -133,7 +133,7 @@ It can also appear nested, as a sub navigation. Use margin/padding [System Props - + Emails diff --git a/docs/content/StyledOcticon.md b/docs/content/StyledOcticon.md index 9e67ba53b15..8a2150f0b13 100644 --- a/docs/content/StyledOcticon.md +++ b/docs/content/StyledOcticon.md @@ -9,8 +9,8 @@ StyledOcticon renders an [Octicon](https://octicons.github.com) with common syst ```jsx live <> - - + + ``` diff --git a/docs/content/SubNav.md b/docs/content/SubNav.md index 95c5f96205f..5d1b91e1a9d 100644 --- a/docs/content/SubNav.md +++ b/docs/content/SubNav.md @@ -60,7 +60,7 @@ This ensures that the NavLink gets `activeClassName='selected'` - + diff --git a/docs/content/TextInputWithTokens.mdx b/docs/content/TextInputWithTokens.mdx index 47bad4b09b3..f51521e9c08 100644 --- a/docs/content/TextInputWithTokens.mdx +++ b/docs/content/TextInputWithTokens.mdx @@ -197,11 +197,11 @@ const MaxHeightExample = () => { Tokens restricted to a max height ) diff --git a/docs/content/Timeline.md b/docs/content/Timeline.md index be0b7fcff4c..00c39b9f46b 100644 --- a/docs/content/Timeline.md +++ b/docs/content/Timeline.md @@ -19,7 +19,7 @@ The Timeline.Item component is used to display items on a vertical timeline, con created one hot potato - + Just now @@ -57,7 +57,7 @@ of the child `StyledOcticon` if necessary. - + Background when opened or passed events occur @@ -99,7 +99,7 @@ To create a visual break in the timeline, use Timeline.Break. This adds a horizo - + Background used when closed events occur diff --git a/docs/content/Token.mdx b/docs/content/Token.mdx index 51d1b4dae7b..5ddd6513838 100644 --- a/docs/content/Token.mdx +++ b/docs/content/Token.mdx @@ -164,32 +164,32 @@ The default `Token` component }} > { console.log('remove me') - }} + }} sx={{size: "small"}} /> { console.log('remove me') - }} + }} sx={{size: "medium"}} /> { console.log('remove me') - }} + }} sx={{size: "large"}} /> { console.log('remove me') - }} + }} sx={{size: "extralarge"}} /> @@ -253,35 +253,35 @@ Tokens that represent Issue labels should use the `IssueLabelToken` component. > { console.log('remove me') - }} + }} sx={{size: "small"}} /> { console.log('remove me') - }} + }} sx={{size: "medium"}} /> { console.log('remove me') - }} + }} sx={{size: "large"}} /> { console.log('remove me') - }} + }} sx={{size: "extralarge"}} /> @@ -345,35 +345,35 @@ Tokens that represent GitHub users should use the `AvatarToken` component. > { console.log('remove me') - }} + }} sx={{size: "small"}} /> { console.log('remove me') - }} + }} sx={{size: "medium"}} /> { console.log('remove me') - }} + }} sx={{size: "large"}} /> { console.log('remove me') - }} + }} sx={{size: "extralarge"}} /> diff --git a/docs/content/Truncate.md b/docs/content/Truncate.md index 1325f27e598..a17281daecc 100644 --- a/docs/content/Truncate.md +++ b/docs/content/Truncate.md @@ -19,7 +19,7 @@ Truncate will prevent text that overflows from wrapping. The default max-width i You can override the maximum width of the truncated text with the `maxWidth` prop. ```jsx live - + Some text with a branch-name-that-is-really-long ``` diff --git a/docs/content/overriding-styles.mdx b/docs/content/overriding-styles.mdx index 64990acc5af..882dfbb1346 100644 --- a/docs/content/overriding-styles.mdx +++ b/docs/content/overriding-styles.mdx @@ -19,14 +19,14 @@ This example demonstrates applying a bottom border to `Heading`, a component tha ```jsx live <> - Heading + Heading Heading with bottom border From eb0e50c96ac7c4ad75f2f33ce7b9f5e43e0a1955 Mon Sep 17 00:00:00 2001 From: Alexis Rico Date: Thu, 25 Nov 2021 13:56:25 +0100 Subject: [PATCH 03/10] Prettify code on docs Signed-off-by: Alexis Rico --- contributor-docs/CONTRIBUTING.md | 2 +- docs/content/Buttons.md | 2 +- docs/content/CircleOcticon.md | 2 +- docs/content/Flex.md | 4 +-- docs/content/Grid.md | 4 +-- docs/content/Header.md | 10 +++--- docs/content/Heading.md | 9 ++--- docs/content/PointerBox.md | 7 ++-- docs/content/Position.md | 59 +++++++++----------------------- docs/content/SideNav.md | 20 +++++------ docs/content/SubNav.md | 2 +- docs/content/TextInput.md | 9 ++++- docs/content/Timeline.md | 6 ++-- docs/content/Truncate.md | 2 +- 14 files changed, 62 insertions(+), 76 deletions(-) diff --git a/contributor-docs/CONTRIBUTING.md b/contributor-docs/CONTRIBUTING.md index 36c656da898..d3936225e5d 100644 --- a/contributor-docs/CONTRIBUTING.md +++ b/contributor-docs/CONTRIBUTING.md @@ -91,7 +91,7 @@ const Component = styled.div` Component.defaultProps = { m: 0, - fontSize: 5, + fontSize: 5 } export default Component diff --git a/docs/content/Buttons.md b/docs/content/Buttons.md index 14baf9364cb..83a78f4a77a 100644 --- a/docs/content/Buttons.md +++ b/docs/content/Buttons.md @@ -19,7 +19,7 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. ` Button Invisible window.alert('button clicked')} /> - + diff --git a/docs/content/CircleOcticon.md b/docs/content/CircleOcticon.md index 4e9382383ec..d165189f477 100644 --- a/docs/content/CircleOcticon.md +++ b/docs/content/CircleOcticon.md @@ -7,7 +7,7 @@ CircleOcticon renders any Octicon with a circle background. CircleOcticons are m ## Default example ```jsx live - + ``` ## Component props diff --git a/docs/content/Flex.md b/docs/content/Flex.md index a0672e72230..eaaa4c663ed 100644 --- a/docs/content/Flex.md +++ b/docs/content/Flex.md @@ -12,7 +12,7 @@ Use [Box](/Box) instead. **Before** ```jsx - + Item 1 @@ -33,7 +33,7 @@ Use [Box](/Box) instead. ```jsx live - + Item 1 diff --git a/docs/content/Grid.md b/docs/content/Grid.md index 0c6d2611190..f752e3207a4 100644 --- a/docs/content/Grid.md +++ b/docs/content/Grid.md @@ -12,7 +12,7 @@ Use [Box](/Box) instead. **Before** ```jsx - + 1 @@ -38,7 +38,7 @@ Use [Box](/Box) instead. ## Default example ```jsx live - + 1 diff --git a/docs/content/Header.md b/docs/content/Header.md index 16ab4106de2..fc6ca6abcb2 100644 --- a/docs/content/Header.md +++ b/docs/content/Header.md @@ -13,13 +13,13 @@ All items directly under the Header component should be a `Header.Item` componen ```jsx live
- - + + GitHub Menu - +
@@ -30,10 +30,10 @@ All items directly under the Header component should be a `Header.Item` componen ```jsx live
Item 1 - + Item 2 - Item 3 + Item 3
``` diff --git a/docs/content/Heading.md b/docs/content/Heading.md index 20d7e9bf0f0..0268ff09509 100644 --- a/docs/content/Heading.md +++ b/docs/content/Heading.md @@ -7,8 +7,9 @@ The Heading component will render an html `h2` tag without any default styling. **Attention:** Make sure to include a valid heading element to render a Heading component other than `h2` (`H1 Element`). ## Default example + ```jsx live -H2 heading with fontSize={1} +H2 heading with fontSize={1} ``` ## System props @@ -17,6 +18,6 @@ Heading components get `TYPOGRAPHY` and `COMMON` system props. Read our [System ## Component props -| Prop name | Type | Description | -| :-------- | :------ | :----------------------------------------------- | -| as | String or React element | sets the HTML tag for the component | +| Prop name | Type | Description | +| :-------- | :---------------------- | :---------------------------------- | +| as | String or React element | sets the HTML tag for the component | diff --git a/docs/content/PointerBox.md b/docs/content/PointerBox.md index 5e8d9c7a83f..8ff25ba2379 100644 --- a/docs/content/PointerBox.md +++ b/docs/content/PointerBox.md @@ -7,7 +7,7 @@ PointerBox is a [BorderBox](./BorderBox) component with a caret added to it. ## Default example ```jsx live - + PointerBox ``` @@ -23,7 +23,10 @@ function PointerBoxDemo(props) { - + {' '} Content{' '} diff --git a/docs/content/Position.md b/docs/content/Position.md index 14f2c30f8bc..ae3222f657d 100644 --- a/docs/content/Position.md +++ b/docs/content/Position.md @@ -13,7 +13,7 @@ Use [Box](/Box) instead. ```jsx <> - ... + ... ... ... ... @@ -37,55 +37,30 @@ Use [Box](/Box) instead. ```jsx live - Relative + Absolute - + Relative + Absolute + - - rt - - - lt - - - rb - - - lb - - - bl - - - br - - - tl - - - tr - + rt + lt + rb + lb + bl + br + tl + tr - Sticky - - - - I'm sticky! - + Sticky + + + I'm sticky! - Fixed + Fixed

(see the bottom right of the screen)

- + I'm fixed to the bottom right. diff --git a/docs/content/SideNav.md b/docs/content/SideNav.md index 5ec0cce40ac..ef89ae6fff6 100644 --- a/docs/content/SideNav.md +++ b/docs/content/SideNav.md @@ -7,7 +7,7 @@ The Side Nav is a vertical list of navigational links, typically used on the lef ## Default example ```jsx live - + Account @@ -30,12 +30,12 @@ Different kinds of content can be added inside a SideNav item. Use system props Add the `variant='full'` prop to a `SideNav.Link` to spread child elements across the link, which is useful for status icons, labels, and the like. ```jsx live - + Text Only - + With an avatar @@ -44,7 +44,7 @@ Add the `variant='full'` prop to a `SideNav.Link` to spread child elements acros With a status icon - + With a label @@ -86,7 +86,7 @@ Add the `variant="lightweight"` prop to `SideNav` to render an alternative, more mb={2} pb={1} > - + Menu @@ -110,17 +110,17 @@ Add the `variant="lightweight"` prop to `SideNav` to render an alternative, more It can also appear nested, as a sub navigation. Use margin/padding [System Props](/system-props) to add indentation. ```jsx live - + - + Account - + Profile - + Sub item 1 @@ -133,7 +133,7 @@ It can also appear nested, as a sub navigation. Use margin/padding [System Props - + Emails diff --git a/docs/content/SubNav.md b/docs/content/SubNav.md index 5d1b91e1a9d..202957643bc 100644 --- a/docs/content/SubNav.md +++ b/docs/content/SubNav.md @@ -60,7 +60,7 @@ This ensures that the NavLink gets `activeClassName='selected'` - + diff --git a/docs/content/TextInput.md b/docs/content/TextInput.md index f6782defe53..a64f17a2dc0 100644 --- a/docs/content/TextInput.md +++ b/docs/content/TextInput.md @@ -14,7 +14,14 @@ TextInput is a form component to add default styling to the native text input. - + ``` diff --git a/docs/content/Timeline.md b/docs/content/Timeline.md index 00c39b9f46b..219c0fd91e5 100644 --- a/docs/content/Timeline.md +++ b/docs/content/Timeline.md @@ -19,7 +19,7 @@ The Timeline.Item component is used to display items on a vertical timeline, con created one hot potato - + Just now @@ -57,7 +57,7 @@ of the child `StyledOcticon` if necessary. - + Background when opened or passed events occur @@ -99,7 +99,7 @@ To create a visual break in the timeline, use Timeline.Break. This adds a horizo - + Background used when closed events occur diff --git a/docs/content/Truncate.md b/docs/content/Truncate.md index a17281daecc..d21a0788370 100644 --- a/docs/content/Truncate.md +++ b/docs/content/Truncate.md @@ -19,7 +19,7 @@ Truncate will prevent text that overflows from wrapping. The default max-width i You can override the maximum width of the truncated text with the `maxWidth` prop. ```jsx live - + Some text with a branch-name-that-is-really-long ``` From cea80322d43b33a00ef0158e7f06a9d220da701f Mon Sep 17 00:00:00 2001 From: Alexis Rico Date: Thu, 25 Nov 2021 13:57:45 +0100 Subject: [PATCH 04/10] Prettify code on mdx files Signed-off-by: Alexis Rico --- docs/content/AnchoredOverlay.mdx | 4 +-- docs/content/TextInputWithTokens.mdx | 4 +-- docs/content/Token.mdx | 48 +++++++++++++-------------- docs/content/overriding-styles.mdx | 6 ++-- docs/content/useOpenAndCloseFocus.mdx | 25 +++++++------- 5 files changed, 44 insertions(+), 43 deletions(-) diff --git a/docs/content/AnchoredOverlay.mdx b/docs/content/AnchoredOverlay.mdx index 3b9ad4afe66..5d38162b9fc 100644 --- a/docs/content/AnchoredOverlay.mdx +++ b/docs/content/AnchoredOverlay.mdx @@ -26,8 +26,8 @@ See also [Overlay positioning](/Overlay#positioning).

This menu automatically receives a focus trap and focus zone. Use up/down keys to navigate between buttons

- - + + diff --git a/docs/content/TextInputWithTokens.mdx b/docs/content/TextInputWithTokens.mdx index f51521e9c08..40f1befd93b 100644 --- a/docs/content/TextInputWithTokens.mdx +++ b/docs/content/TextInputWithTokens.mdx @@ -197,11 +197,11 @@ const MaxHeightExample = () => { Tokens restricted to a max height ) diff --git a/docs/content/Token.mdx b/docs/content/Token.mdx index 5ddd6513838..401577adafe 100644 --- a/docs/content/Token.mdx +++ b/docs/content/Token.mdx @@ -164,32 +164,32 @@ The default `Token` component }} > { console.log('remove me') - }} sx={{size: "small"}} + }} + sx={{size: 'small'}} /> { console.log('remove me') - }} sx={{size: "medium"}} + }} + sx={{size: 'medium'}} /> { console.log('remove me') - }} sx={{size: "large"}} + }} + sx={{size: 'large'}} /> { console.log('remove me') - }} sx={{size: "extralarge"}} + }} + sx={{size: 'extralarge'}} /> @@ -253,35 +253,35 @@ Tokens that represent Issue labels should use the `IssueLabelToken` component. > { console.log('remove me') - }} sx={{size: "small"}} + }} + sx={{size: 'small'}} /> { console.log('remove me') - }} sx={{size: "medium"}} + }} + sx={{size: 'medium'}} /> { console.log('remove me') - }} sx={{size: "large"}} + }} + sx={{size: 'large'}} /> { console.log('remove me') - }} sx={{size: "extralarge"}} + }} + sx={{size: 'extralarge'}} /> @@ -345,35 +345,35 @@ Tokens that represent GitHub users should use the `AvatarToken` component. > { console.log('remove me') - }} sx={{size: "small"}} + }} + sx={{size: 'small'}} /> { console.log('remove me') - }} sx={{size: "medium"}} + }} + sx={{size: 'medium'}} /> { console.log('remove me') - }} sx={{size: "large"}} + }} + sx={{size: 'large'}} /> { console.log('remove me') - }} sx={{size: "extralarge"}} + }} + sx={{size: 'extralarge'}} /> diff --git a/docs/content/overriding-styles.mdx b/docs/content/overriding-styles.mdx index 882dfbb1346..9b54707e477 100644 --- a/docs/content/overriding-styles.mdx +++ b/docs/content/overriding-styles.mdx @@ -19,14 +19,14 @@ This example demonstrates applying a bottom border to `Heading`, a component tha ```jsx live <> - Heading + Heading Heading with bottom border diff --git a/docs/content/useOpenAndCloseFocus.mdx b/docs/content/useOpenAndCloseFocus.mdx index 6391fe5ff1c..2a26f88f849 100644 --- a/docs/content/useOpenAndCloseFocus.mdx +++ b/docs/content/useOpenAndCloseFocus.mdx @@ -6,7 +6,6 @@ title: useOpenAndCloseFocus If no ref is passed to `inititalFocusRef` , the hook focuses the first focusable element inside of the container. - ### Usage ```javascript live noinline @@ -25,25 +24,27 @@ function Component() { const initialFocusRef = React.useRef(null) const [isOpen, setIsOpen] = React.useState(false) return ( - - - {isOpen && + + + {isOpen && ( - } + + )} ) } -render() +render() ``` - #### useOpenAndCloseFocus settings -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| initialFocusRef | `React.RefObject` | | Optional. The element to focus when the container is mounted on the page. | -| returnFocusRef | `React.RefObject` | | Required. The element to focus when the container is unmounted. | -| containerRef | `React.RefObject` | | Required. A ref for the containing element. | +| Name | Type | Default | Description | +| :-------------- | :----------------------------- | :-----: | :------------------------------------------------------------------------ | +| initialFocusRef | `React.RefObject` | | Optional. The element to focus when the container is mounted on the page. | +| returnFocusRef | `React.RefObject` | | Required. The element to focus when the container is unmounted. | +| containerRef | `React.RefObject` | | Required. A ref for the containing element. | From a47631ee273fdc63cfa567d15b580505e1af1fac Mon Sep 17 00:00:00 2001 From: Alexis Rico Date: Thu, 25 Nov 2021 14:00:42 +0100 Subject: [PATCH 05/10] Fix false positive on circle octicon Signed-off-by: Alexis Rico --- docs/content/CircleOcticon.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/CircleOcticon.md b/docs/content/CircleOcticon.md index d165189f477..6e9e95cd66e 100644 --- a/docs/content/CircleOcticon.md +++ b/docs/content/CircleOcticon.md @@ -7,7 +7,7 @@ CircleOcticon renders any Octicon with a circle background. CircleOcticons are m ## Default example ```jsx live - + ``` ## Component props From 2188306953099ff13d5366b77878e3337406baf3 Mon Sep 17 00:00:00 2001 From: Alexis Rico Date: Wed, 8 Dec 2021 22:41:14 +0100 Subject: [PATCH 06/10] Re-add sx on heading docs --- docs/content/Heading.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/content/Heading.md b/docs/content/Heading.md index e5d90cfcd1d..f382b58626b 100644 --- a/docs/content/Heading.md +++ b/docs/content/Heading.md @@ -18,3 +18,4 @@ The Heading component will render an html `h2` tag without any default styling. | Name | Type | Default | Description | | :--- | :---------------------- | :-----: | :----------------------------------- | | as | String or React element | | sets the HTML tag for the component | +| sx | SystemStyleObject | {} | Style to be applied to the component | From 0f11eacd4fcd57194f0b59a7762365f728e01aff Mon Sep 17 00:00:00 2001 From: Alexis Rico Date: Wed, 12 Jan 2022 08:47:37 +0100 Subject: [PATCH 07/10] Update docs with latest changes Signed-off-by: Alexis Rico --- docs/content/Buttons.mdx | 2 +- docs/content/StyledOcticon.mdx | 4 ++-- docs/content/Token.mdx | 8 ++++---- docs/content/drafts/ActionMenu2.mdx | 2 +- docs/content/drafts/Button2.mdx | 10 ++++------ docs/content/drafts/IconButton.mdx | 4 ++-- docs/content/drafts/LinkButton.mdx | 4 +--- docs/content/useOnEscapePress.mdx | 21 +++++++++------------ docs/content/useOverlay.mdx | 29 +++++++++++++++-------------- docs/content/useSafeTimeout.mdx | 1 - 10 files changed, 39 insertions(+), 46 deletions(-) diff --git a/docs/content/Buttons.mdx b/docs/content/Buttons.mdx index 226659a465a..511b28d94a9 100644 --- a/docs/content/Buttons.mdx +++ b/docs/content/Buttons.mdx @@ -25,7 +25,7 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. ` Button invisible window.alert('button clicked')} /> - + diff --git a/docs/content/StyledOcticon.mdx b/docs/content/StyledOcticon.mdx index 36b53b56219..ce6e176dd61 100644 --- a/docs/content/StyledOcticon.mdx +++ b/docs/content/StyledOcticon.mdx @@ -10,8 +10,8 @@ componentId: styled_octicon ```jsx live <> - - + + ``` diff --git a/docs/content/Token.mdx b/docs/content/Token.mdx index 0d650cf7c70..d0cfdb620ec 100644 --- a/docs/content/Token.mdx +++ b/docs/content/Token.mdx @@ -82,32 +82,32 @@ All types of tokens may have the same interactive qualities as links or buttons. }} > { console.log('remove me') }} + sx={{size: 'small'}} /> { console.log('remove me') }} + sx={{size: 'medium'}} /> { console.log('remove me') }} + sx={{size: 'large'}} /> { console.log('remove me') }} + sx={{size: 'extralarge'}} /> diff --git a/docs/content/drafts/ActionMenu2.mdx b/docs/content/drafts/ActionMenu2.mdx index 950a4f5f6c6..c2266bd0650 100644 --- a/docs/content/drafts/ActionMenu2.mdx +++ b/docs/content/drafts/ActionMenu2.mdx @@ -239,7 +239,7 @@ const handleEscape = () => alert('you hit escape!') render( Open Actions Menu - + Open current Codespace diff --git a/docs/content/drafts/Button2.mdx b/docs/content/drafts/Button2.mdx index c97feb64249..0f54701d20b 100644 --- a/docs/content/drafts/Button2.mdx +++ b/docs/content/drafts/Button2.mdx @@ -57,11 +57,9 @@ The `invisible` variant of `Button` indicates that the action is a low priority ```jsx live <> - Search + Search Search - - Search - + Search ``` @@ -96,13 +94,13 @@ A separate component called `IconButton` is used if the action shows only an ico ```jsx live <> - + Search Search - + Search diff --git a/docs/content/drafts/IconButton.mdx b/docs/content/drafts/IconButton.mdx index 2e6521dd05f..fe731b5d02a 100644 --- a/docs/content/drafts/IconButton.mdx +++ b/docs/content/drafts/IconButton.mdx @@ -31,13 +31,13 @@ A separate component called `IconButton` is used if the action shows only an ico ```jsx live <> - + Search Search - + Search diff --git a/docs/content/drafts/LinkButton.mdx b/docs/content/drafts/LinkButton.mdx index 107ae00d225..80f05853a6c 100644 --- a/docs/content/drafts/LinkButton.mdx +++ b/docs/content/drafts/LinkButton.mdx @@ -39,9 +39,7 @@ The `LinkButton` can be considered an extension of `Button` component. It accept ```jsx live Small link - - Large link - + Large link Invisible link diff --git a/docs/content/useOnEscapePress.mdx b/docs/content/useOnEscapePress.mdx index 66f4ddbcc02..1da7e7bf160 100644 --- a/docs/content/useOnEscapePress.mdx +++ b/docs/content/useOnEscapePress.mdx @@ -18,11 +18,7 @@ Similar to `useCallback`, `useOnEscapePress` takes a `React.DependencyList` as i ```javascript live noinline const OverlayDemo = ({onEscape, children}) => { useOnEscapePress(onEscape) - return ( - - {children} - - ) + return {children} } function DemoComponent() { @@ -36,21 +32,22 @@ function DemoComponent() { return ( <> - {isOpen && + {isOpen && ( - } + + )} ) } -render() +render() ``` #### useOnEscapePress -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| onEscape | `(event: KeyboardEvent) => void` | | Function to call when user presses the Escape key | -| callbackDependencies | `React.DependencyList` | | Array of dependencies for memoizing the given callback | +| Name | Type | Default | Description | +| :------------------- | :------------------------------- | :-----: | :----------------------------------------------------- | +| onEscape | `(event: KeyboardEvent) => void` | | Function to call when user presses the Escape key | +| callbackDependencies | `React.DependencyList` | | Array of dependencies for memoizing the given callback | diff --git a/docs/content/useOverlay.mdx b/docs/content/useOverlay.mdx index 8e24dc18773..dffa8e2f5c8 100644 --- a/docs/content/useOverlay.mdx +++ b/docs/content/useOverlay.mdx @@ -18,10 +18,9 @@ These behaviors include: ### Usage ```javascript live noinline - const DemoOverlay = ({onClickOutside, initialFocusRef, returnFocusRef, ignoreClickRefs, onEscape, ...rest}) => { - const overlayProps = useOverlay({returnFocusRef, onEscape, ignoreClickRefs, onClickOutside, initialFocusRef}) - return + const overlayProps = useOverlay({returnFocusRef, onEscape, ignoreClickRefs, onClickOutside, initialFocusRef}) + return } const DemoComponent = () => { @@ -31,8 +30,10 @@ const DemoComponent = () => { const closeOverlay = () => setIsOpen(false) return ( <> - - {isOpen && + + {isOpen && ( { > - } + + )} ) } -render() +render() ``` - #### UseOverlaySettings -| Name | Type | Required | Description | -| :- | :- | :-: | :- | -| onEscapePress | `function` | required | Function to call when user presses the Escape key | -| onOutsideClick | `function` | required | Function to call when user clicks outside of the overlay | +| Name | Type | Required | Description | +| :-------------- | :-------------------------------- | :------: | :------------------------------------------------------------------------------------------------------------------------------------ | +| onEscapePress | `function` | required | Function to call when user presses the Escape key | +| onOutsideClick | `function` | required | Function to call when user clicks outside of the overlay | | ignoreClickRefs | `React.RefObject []` | optional | Refs to click clicks on in the `onOutsideClick` function, useful for ignoring clicks on elements that trigger the overlay visibility. | -| initialFocusRef | `React.RefObject` | optional | Ref to focus when overlay is mounted. | -| returnFocusRef | `React.RefObject` | required | Ref to focus when overlay is unmounted. Important for accessibility. | \ No newline at end of file +| initialFocusRef | `React.RefObject` | optional | Ref to focus when overlay is mounted. | +| returnFocusRef | `React.RefObject` | required | Ref to focus when overlay is unmounted. Important for accessibility. | diff --git a/docs/content/useSafeTimeout.mdx b/docs/content/useSafeTimeout.mdx index c0c6ece8882..9a5be943732 100644 --- a/docs/content/useSafeTimeout.mdx +++ b/docs/content/useSafeTimeout.mdx @@ -4,7 +4,6 @@ title: useSafeTimeout `useSafeTimeout` is a utility Hook that allows you to safely call `setTimeout` and `clearTimeout` within a component, ensuring that all timeouts are cleared when the component unmounts. - ### Usage ```jsx live From 93a0c475cc54daa375c532d948b4c38435fe7a72 Mon Sep 17 00:00:00 2001 From: Alexis Rico Date: Wed, 12 Jan 2022 08:56:46 +0100 Subject: [PATCH 08/10] Revert token size changes Signed-off-by: Alexis Rico --- docs/content/Token.mdx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/docs/content/Token.mdx b/docs/content/Token.mdx index d0cfdb620ec..3764e70ce7f 100644 --- a/docs/content/Token.mdx +++ b/docs/content/Token.mdx @@ -82,32 +82,32 @@ All types of tokens may have the same interactive qualities as links or buttons. }} > { console.log('remove me') }} - sx={{size: 'small'}} /> { console.log('remove me') }} - sx={{size: 'medium'}} /> { console.log('remove me') }} - sx={{size: 'large'}} /> { console.log('remove me') }} - sx={{size: 'extralarge'}} /> @@ -167,7 +167,6 @@ These rules apply to all token components mentioned in this document. onRemove={() => { console.log('remove me') }} - sx={{size: 'medium'}} /> { console.log('remove me') }} - sx={{size: 'large'}} /> { console.log('remove me') }} - sx={{size: 'extralarge'}} /> From 43bf67f729bd24f147992b3c8add368c23c5c304 Mon Sep 17 00:00:00 2001 From: Alexis Rico Date: Wed, 12 Jan 2022 08:59:26 +0100 Subject: [PATCH 09/10] Revert size props on token subcomponents Signed-off-by: Alexis Rico --- docs/content/Token.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/content/Token.mdx b/docs/content/Token.mdx index 3764e70ce7f..f2a735c6e83 100644 --- a/docs/content/Token.mdx +++ b/docs/content/Token.mdx @@ -243,35 +243,35 @@ Tokens that represent Issue labels should use the `IssueLabelToken` component. > { console.log('remove me') }} - sx={{size: 'small'}} /> { console.log('remove me') }} - sx={{size: 'medium'}} /> { console.log('remove me') }} - sx={{size: 'large'}} /> { console.log('remove me') }} - sx={{size: 'extralarge'}} /> @@ -331,35 +331,35 @@ Tokens that represent GitHub users should use the `AvatarToken` component. > { console.log('remove me') }} - sx={{size: 'small'}} /> { console.log('remove me') }} - sx={{size: 'medium'}} /> { console.log('remove me') }} - sx={{size: 'large'}} /> { console.log('remove me') }} - sx={{size: 'extralarge'}} /> From ca7fff67bc418d4cd69f429ed94cf4779e4b8c81 Mon Sep 17 00:00:00 2001 From: Alexis Rico Date: Wed, 12 Jan 2022 09:04:07 +0100 Subject: [PATCH 10/10] Revert changes on drafts folder Signed-off-by: Alexis Rico --- docs/content/drafts/Button2.mdx | 10 ++++++---- docs/content/drafts/IconButton.mdx | 4 ++-- docs/content/drafts/LinkButton.mdx | 4 +++- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/docs/content/drafts/Button2.mdx b/docs/content/drafts/Button2.mdx index 0f54701d20b..c97feb64249 100644 --- a/docs/content/drafts/Button2.mdx +++ b/docs/content/drafts/Button2.mdx @@ -57,9 +57,11 @@ The `invisible` variant of `Button` indicates that the action is a low priority ```jsx live <> - Search + Search Search - Search + + Search + ``` @@ -94,13 +96,13 @@ A separate component called `IconButton` is used if the action shows only an ico ```jsx live <> - + Search Search - + Search diff --git a/docs/content/drafts/IconButton.mdx b/docs/content/drafts/IconButton.mdx index fe731b5d02a..2e6521dd05f 100644 --- a/docs/content/drafts/IconButton.mdx +++ b/docs/content/drafts/IconButton.mdx @@ -31,13 +31,13 @@ A separate component called `IconButton` is used if the action shows only an ico ```jsx live <> - + Search Search - + Search diff --git a/docs/content/drafts/LinkButton.mdx b/docs/content/drafts/LinkButton.mdx index 80f05853a6c..107ae00d225 100644 --- a/docs/content/drafts/LinkButton.mdx +++ b/docs/content/drafts/LinkButton.mdx @@ -39,7 +39,9 @@ The `LinkButton` can be considered an extension of `Button` component. It accept ```jsx live Small link - Large link + + Large link + Invisible link