From d44e1df2c59214be4d9af91e432526171c55d4ab Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Fri, 14 Aug 2026 14:13:06 -0400
Subject: [PATCH 1/2] fix(DrawerCloseButton): Allow props spread to button

Props were previously only spread to parent div. This allows for props spread to button.

Enables https://github.com/patternfly/chatbot/issues/834

Assisted-by: Cursor
---
 .../components/Drawer/DrawerCloseButton.tsx   | 26 ++++++++++---
 .../__tests__/DrawerCloseButton.test.tsx      | 39 +++++++++++++++++++
 2 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 packages/react-core/src/components/Drawer/__tests__/DrawerCloseButton.test.tsx

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<HTMLDivElement> {
@@ -10,16 +10,30 @@ export interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement>
   onClose?: () => void;
   /** Accessible label for the drawer close button */
   'aria-label'?: string;
+  /** Additional properties spread to the close button */
+  buttonProps?: Omit<ButtonProps, 'onClick'>;
 }
 
 export const DrawerCloseButton: React.FunctionComponent<DrawerCloseButtonProps> = ({
   className = '',
   onClose = () => undefined as any,
   'aria-label': ariaLabel = 'Close drawer panel',
+  buttonProps,
   ...props
-}: DrawerCloseButtonProps) => (
-  <div className={css(styles.drawerClose, className)} {...props}>
-    <Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<RhMicronsCloseIcon />} />
-  </div>
-);
+}: DrawerCloseButtonProps) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { onClick: _onClick, ...restButtonProps } = (buttonProps ?? {}) as ButtonProps;
+
+  return (
+    <div className={css(styles.drawerClose, className)} {...props}>
+      <Button
+        variant="plain"
+        onClick={onClose}
+        aria-label={ariaLabel}
+        icon={<RhMicronsCloseIcon />}
+        {...restButtonProps}
+      />
+    </div>
+  );
+};
 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..8bcbea32b12
--- /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(<DrawerCloseButton buttonProps={{ isDisabled: true }} />);
+  expect(screen.getByRole('button')).toHaveAttribute('disabled');
+});
+
+test('Calls onClose when clicked', async () => {
+  const onClose = jest.fn();
+  const user = userEvent.setup();
+
+  render(<DrawerCloseButton onClose={onClose} buttonProps={{ isDisabled: false }} />);
+  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(
+    <DrawerCloseButton
+      onClose={onClose}
+      buttonProps={{ id: 'drawer-close-button', onClick: buttonOnClick } as ButtonProps}
+    />
+  );
+
+  const button = screen.getByRole('button');
+  expect(button).toHaveAttribute('id', 'drawer-close-button');
+
+  await user.click(button);
+
+  expect(onClose).toHaveBeenCalledTimes(1);
+  expect(buttonOnClick).not.toHaveBeenCalled();
+});

From 01afc2aaa40d5904a93caee38df1dd123e0e81c8 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Mon, 17 Aug 2026 09:45:03 -0400
Subject: [PATCH 2/2] Address feedback

---
 .../src/components/Drawer/__tests__/DrawerCloseButton.test.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Drawer/__tests__/DrawerCloseButton.test.tsx b/packages/react-core/src/components/Drawer/__tests__/DrawerCloseButton.test.tsx
index 8bcbea32b12..4d367000205 100644
--- a/packages/react-core/src/components/Drawer/__tests__/DrawerCloseButton.test.tsx
+++ b/packages/react-core/src/components/Drawer/__tests__/DrawerCloseButton.test.tsx
@@ -5,7 +5,7 @@ import { DrawerCloseButton } from '../DrawerCloseButton';
 
 test('Renders with spread buttonProps', () => {
   render(<DrawerCloseButton buttonProps={{ isDisabled: true }} />);
-  expect(screen.getByRole('button')).toHaveAttribute('disabled');
+  expect(screen.getByRole('button')).toBeDisabled();
 });
 
 test('Calls onClose when clicked', async () => {