diff --git a/.changeset/modern-chicken-happen.md b/.changeset/modern-chicken-happen.md new file mode 100644 index 00000000000..d39feed1824 --- /dev/null +++ b/.changeset/modern-chicken-happen.md @@ -0,0 +1,6 @@ +--- +"@primer/react": major +"@primer/styled-react": patch +--- + +chore: remove sx from deprecated Dialog diff --git a/packages/react/src/DialogV1/Dialog.tsx b/packages/react/src/DialogV1/Dialog.tsx index 3764f29d6de..da422694c88 100644 --- a/packages/react/src/DialogV1/Dialog.tsx +++ b/packages/react/src/DialogV1/Dialog.tsx @@ -1,13 +1,11 @@ import React, {forwardRef, useRef, type HTMLAttributes} from 'react' import {IconButton} from '../Button' import useDialog from '../hooks/useDialog' -import type {SxProp} from '../sx' import type {ComponentProps} from '../utils/types' import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' import {XIcon} from '@primer/octicons-react' import {clsx} from 'clsx' import classes from './Dialog.module.css' -import {BoxWithFallback} from '../internal/components/BoxWithFallback' // Dialog v1 const noop = () => null @@ -15,19 +13,22 @@ const noop = () => null type StyledDialogBaseProps = { narrow?: boolean wide?: boolean -} & SxProp + as?: React.ElementType +} -export type DialogHeaderProps = React.PropsWithChildren> & SxProp +export type DialogHeaderProps = React.PropsWithChildren> & { + as?: React.ElementType +} -function DialogHeader({children, className, ...rest}: DialogHeaderProps) { +function DialogHeader({children, className, as: Component = 'div', ...rest}: DialogHeaderProps) { if (React.Children.toArray(children).every(ch => typeof ch === 'string')) { children = {children} } return ( - + {children} - + ) } @@ -36,11 +37,15 @@ type InternalDialogProps = { onDismiss?: () => void initialFocusRef?: React.RefObject returnFocusRef?: React.RefObject + as?: React.ElementType } & StyledDialogBaseProps & HTMLAttributes const Dialog = forwardRef( - ({children, onDismiss = noop, isOpen, initialFocusRef, returnFocusRef, className, ...props}, forwardedRef) => { + ( + {children, onDismiss = noop, isOpen, initialFocusRef, returnFocusRef, className, as: Component = 'div', ...props}, + forwardedRef, + ) => { const overlayRef = useRef(null) const modalRef = useRef(null) useRefObjectAsForwardedRef(forwardedRef, modalRef) @@ -65,9 +70,8 @@ const Dialog = forwardRef( return isOpen ? ( <> - - + ( className={classes.CloseIcon} /> {children} - + ) : null }, diff --git a/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx index 30c495916ce..4e7c24af6ab 100644 --- a/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx +++ b/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx @@ -5,13 +5,15 @@ import {Button} from '../index' describe('@primer/react/deprecated', () => { test('Dialog supports `sx` prop', () => { - render() + render() expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') + expect(screen.getByTestId('component').role).toBe('dialog') }) test('Dialog.Header supports `sx` prop', () => { - render() + render() expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') + expect(screen.getByTestId('component').className.includes('Header')).toBe(true) }) test('Octicon supports `sx` prop', () => { diff --git a/packages/styled-react/src/components/DialogV1.tsx b/packages/styled-react/src/components/DialogV1.tsx new file mode 100644 index 00000000000..a9907282fde --- /dev/null +++ b/packages/styled-react/src/components/DialogV1.tsx @@ -0,0 +1,36 @@ +import {Dialog as PrimerDialog} from '@primer/react/deprecated' +import type { + DialogProps as PrimerDialogProps, + DialogHeaderProps as PrimerDialogHeaderProps, +} from '@primer/react/deprecated' +import {Box} from './Box' +import type {SxProp} from '../sx' +import {forwardRef} from 'react' +import type {ForwardRefComponent} from '../polymorphic' + +type DialogProps = PrimerDialogProps & SxProp + +const StyledDialog = forwardRef(function Dialog(props, ref) { + return +}) + +const DialogImpl = forwardRef(({as, ...props}: DialogProps, ref) => ( + +)) as ForwardRefComponent<'div', DialogProps> + +type DialogHeaderProps = PrimerDialogHeaderProps & SxProp + +const StyledDialogHeader = forwardRef(function DialogHeader(props, ref) { + return +}) + +const DialogHeader = forwardRef(({as, ...props}: DialogHeaderProps, ref) => ( + +)) as ForwardRefComponent<'div', DialogHeaderProps> + +const Dialog = Object.assign(DialogImpl, { + Header: DialogHeader, +}) + +export {Dialog} +export type {DialogProps, DialogHeaderProps} diff --git a/packages/styled-react/src/deprecated.tsx b/packages/styled-react/src/deprecated.tsx index fb375d8b666..b5b2a030438 100644 --- a/packages/styled-react/src/deprecated.tsx +++ b/packages/styled-react/src/deprecated.tsx @@ -1,2 +1,3 @@ export {TabNav, type TabNavProps, type TabNavLinkProps} from './components/TabNav' -export {Dialog, Octicon, Tooltip, type TooltipProps} from '@primer/react/deprecated' +export {Dialog, type DialogProps, type DialogHeaderProps} from './components/DialogV1' +export {Octicon, Tooltip, type TooltipProps} from '@primer/react/deprecated'