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 10c16ea3249..d9f7a0a54d1 100644 --- a/docs/content/AnchoredOverlay.mdx +++ b/docs/content/AnchoredOverlay.mdx @@ -29,8 +29,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.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/Header.mdx b/docs/content/Header.mdx index c90371efe72..a27e3e27bc0 100644 --- a/docs/content/Header.mdx +++ b/docs/content/Header.mdx @@ -15,13 +15,13 @@ All items directly under the Header component should be a `Header.Item` componen ```jsx live
- - + + GitHub Menu - +
@@ -32,10 +32,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/PointerBox.md b/docs/content/PointerBox.md index e916d87cc78..df21a72a98f 100644 --- a/docs/content/PointerBox.md +++ b/docs/content/PointerBox.md @@ -9,7 +9,7 @@ PointerBox is a [BorderBox](./BorderBox) component with a caret added to it. ## Default example ```jsx live - + PointerBox ``` @@ -25,7 +25,10 @@ function PointerBoxDemo(props) { - + {' '} Content{' '} diff --git a/docs/content/SideNav.md b/docs/content/SideNav.md index bb6d6bf3f67..fa60a51d2db 100644 --- a/docs/content/SideNav.md +++ b/docs/content/SideNav.md @@ -9,7 +9,7 @@ The Side Nav is a vertical list of navigational links, typically used on the lef ## Default example ```jsx live - + Account @@ -32,12 +32,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 @@ -46,7 +46,7 @@ Add the `variant='full'` prop to a `SideNav.Link` to spread child elements acros With a status icon - + With a label @@ -88,7 +88,7 @@ Add the `variant="lightweight"` prop to `SideNav` to render an alternative, more mb={2} pb={1} > - + Menu @@ -112,17 +112,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 @@ -135,7 +135,7 @@ It can also appear nested, as a sub navigation. Use margin/padding [System Props - + Emails 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/SubNav.md b/docs/content/SubNav.md index 7fecd4f8454..bccbde9b156 100644 --- a/docs/content/SubNav.md +++ b/docs/content/SubNav.md @@ -62,7 +62,7 @@ This ensures that the NavLink gets `activeClassName='selected'` - + diff --git a/docs/content/TextInputWithTokens.mdx b/docs/content/TextInputWithTokens.mdx index 89e7b69058c..cc32016fed6 100644 --- a/docs/content/TextInputWithTokens.mdx +++ b/docs/content/TextInputWithTokens.mdx @@ -172,11 +172,11 @@ const MaxHeightExample = () => { Tokens restricted to a max height ) diff --git a/docs/content/Timeline.md b/docs/content/Timeline.md index 65a30d46022..5c517a3acd5 100644 --- a/docs/content/Timeline.md +++ b/docs/content/Timeline.md @@ -21,7 +21,7 @@ The Timeline.Item component is used to display items on a vertical timeline, con created one hot potato - + Just now @@ -59,7 +59,7 @@ of the child `StyledOcticon` if necessary. - + Background when opened or passed events occur @@ -101,7 +101,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 c202da9da16..16033b8fb06 100644 --- a/docs/content/Truncate.md +++ b/docs/content/Truncate.md @@ -21,7 +21,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/deprecated/Flex.md b/docs/content/deprecated/Flex.md index 67e7fa385b7..ce7fd674fde 100644 --- a/docs/content/deprecated/Flex.md +++ b/docs/content/deprecated/Flex.md @@ -13,7 +13,7 @@ Use [Box](/Box) instead. **Before** ```jsx - + Item 1 @@ -34,7 +34,7 @@ Use [Box](/Box) instead. ```jsx live - + Item 1 diff --git a/docs/content/deprecated/Grid.md b/docs/content/deprecated/Grid.md index 305bed992be..bec992b5b5f 100644 --- a/docs/content/deprecated/Grid.md +++ b/docs/content/deprecated/Grid.md @@ -13,7 +13,7 @@ Use [Box](/Box) instead. **Before** ```jsx - + 1 @@ -39,7 +39,7 @@ Use [Box](/Box) instead. ## Default example ```jsx live - + 1 diff --git a/docs/content/deprecated/Position.md b/docs/content/deprecated/Position.md index 74212be10fa..e3c73898822 100644 --- a/docs/content/deprecated/Position.md +++ b/docs/content/deprecated/Position.md @@ -14,7 +14,7 @@ Use [Box](/Box) instead. ```jsx <> - ... + ... ... ... ... @@ -38,48 +38,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 + Sticky - - I'm 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/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/overriding-styles.mdx b/docs/content/overriding-styles.mdx index 64990acc5af..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/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/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. | 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