diff --git a/.changeset/moody-buttons-swim.md b/.changeset/moody-buttons-swim.md new file mode 100644 index 00000000000..0e494d7ff6a --- /dev/null +++ b/.changeset/moody-buttons-swim.md @@ -0,0 +1,5 @@ +--- +'@primer/components': major +--- + +Dialog no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal. diff --git a/docs/content/Dialog.md b/docs/content/Dialog.md index fb89a80dacb..46a16893bc2 100644 --- a/docs/content/Dialog.md +++ b/docs/content/Dialog.md @@ -84,25 +84,22 @@ You can also pass any non-text content into the header: ``` -## System props - - - -System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. - - +## Component props -`Dialog` components get the `COMMON` and `LAYOUT` categories of system props. `Dialog.Header` components get `COMMON`, `LAYOUT`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props. +### Dialog -## Component props +| Prop name | Type | Default | Description | +| :-------------- | :---------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | +| isOpen | Boolean | | Set whether or not the dialog is shown | +| onDismiss | Function | | A user-provided function that should close the dialog | +| returnFocusRef | React ref | | The element to restore focus back to after the `Dialog` is closed | +| initialFocusRef | React ref | | Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused. | +| aria-labelledby | string | | Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both. | +| aria-label | string | | Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both. | +| sx | SystemStyleObject | {} | Style to be applied to the component | -| Prop name | Type | Description | -| :-------------- | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | -| isOpen | Boolean | Set whether or not the dialog is shown | -| onDismiss | Function | A user-provided function that should close the dialog | -| returnFocusRef | React ref | The element to restore focus back to after the `Dialog` is closed | -| initialFocusRef | React ref | Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused. | -| aria-labelledby | string | Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both. | -| aria-label | string | Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both. | +### Dialog.Header -`Dialog.Header` does not take any non-system props. +| Prop name | Type | Default | Description | +| :-------- | :---------------- | :------ | :----------------------------------- | +| sx | SystemStyleObject | {} | Style to be applied to the component | diff --git a/src/Dialog.tsx b/src/Dialog.tsx index 4f1aa8f0440..aee39d5979f 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -1,7 +1,7 @@ import React, {forwardRef, useRef} from 'react' import styled from 'styled-components' import ButtonClose from './Button/ButtonClose' -import {COMMON, get, LAYOUT, SystemCommonProps, SystemLayoutProps} from './constants' +import {get} from './constants' import Box from './Box' import useDialog from './hooks/useDialog' import sx, {SxProp} from './sx' @@ -14,9 +14,7 @@ const noop = () => null type StyledDialogBaseProps = { narrow?: boolean wide?: boolean -} & SystemLayoutProps & - SystemCommonProps & - SxProp +} & SxProp const DialogBase = styled.div` box-shadow: ${get('shadows.shadow.large')}; @@ -39,8 +37,6 @@ const DialogBase = styled.div` height: 100vh; } - ${LAYOUT}; - ${COMMON}; ${sx}; ` diff --git a/src/__tests__/Dialog.types.test.tsx b/src/__tests__/Dialog.types.test.tsx new file mode 100644 index 00000000000..de6b44c65ea --- /dev/null +++ b/src/__tests__/Dialog.types.test.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import Dialog from '../Dialog' + +export function shouldAcceptCallWithNoProps() { + return +} + +export function shouldNotAcceptSystemProps() { + // @ts-expect-error system props should not be accepted + return +}