diff --git a/packages/react-core/src/components/Drawer/DrawerCloseButton.tsx b/packages/react-core/src/components/Drawer/DrawerCloseButton.tsx index cbab0ae4ac3..73eb1ec5ee1 100644 --- a/packages/react-core/src/components/Drawer/DrawerCloseButton.tsx +++ b/packages/react-core/src/components/Drawer/DrawerCloseButton.tsx @@ -1,6 +1,6 @@ import styles from '@patternfly/react-styles/css/components/Drawer/drawer'; import { css } from '@patternfly/react-styles'; -import { Button } from '../Button'; +import { Button, ButtonProps } from '../Button'; import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon'; export interface DrawerCloseButtonProps extends React.HTMLProps { @@ -10,16 +10,30 @@ export interface DrawerCloseButtonProps extends React.HTMLProps onClose?: () => void; /** Accessible label for the drawer close button */ 'aria-label'?: string; + /** Additional properties spread to the close button */ + buttonProps?: Omit; } export const DrawerCloseButton: React.FunctionComponent = ({ className = '', onClose = () => undefined as any, 'aria-label': ariaLabel = 'Close drawer panel', + buttonProps, ...props -}: DrawerCloseButtonProps) => ( -
-
-); +}: DrawerCloseButtonProps) => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { onClick: _onClick, ...restButtonProps } = (buttonProps ?? {}) as ButtonProps; + + return ( +
+
+ ); +}; DrawerCloseButton.displayName = 'DrawerCloseButton'; diff --git a/packages/react-core/src/components/Drawer/__tests__/DrawerCloseButton.test.tsx b/packages/react-core/src/components/Drawer/__tests__/DrawerCloseButton.test.tsx new file mode 100644 index 00000000000..4d367000205 --- /dev/null +++ b/packages/react-core/src/components/Drawer/__tests__/DrawerCloseButton.test.tsx @@ -0,0 +1,39 @@ +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { ButtonProps } from '../../Button'; +import { DrawerCloseButton } from '../DrawerCloseButton'; + +test('Renders with spread buttonProps', () => { + render(); + expect(screen.getByRole('button')).toBeDisabled(); +}); + +test('Calls onClose when clicked', async () => { + const onClose = jest.fn(); + const user = userEvent.setup(); + + render(); + await user.click(screen.getByRole('button')); + expect(onClose).toHaveBeenCalledTimes(1); +}); + +test('Does not spread onClick from buttonProps but spreads other props', async () => { + const onClose = jest.fn(); + const buttonOnClick = jest.fn(); + const user = userEvent.setup(); + + render( + + ); + + const button = screen.getByRole('button'); + expect(button).toHaveAttribute('id', 'drawer-close-button'); + + await user.click(button); + + expect(onClose).toHaveBeenCalledTimes(1); + expect(buttonOnClick).not.toHaveBeenCalled(); +});