feat(AccordionHeader): add disabled prop (#6940)

kyletsang · web-flow · commit 376c9aeda3bf · 2025-06-26T21:52:32.000-07:00
diff --git a/src/AccordionHeader.tsx b/src/AccordionHeader.tsx
@@ -15,6 +15,11 @@ export interface AccordionHeaderProps
    * @default 'accordion-header'
    */
   bsPrefix?: string | undefined;
+
+  /**
+   * Disables the button in the header.
+   */
+  disabled?: boolean | undefined;
 }
 
 const AccordionHeader: DynamicRefForwardingComponent<
@@ -29,6 +34,7 @@ const AccordionHeader: DynamicRefForwardingComponent<
       bsPrefix,
       className,
       children,
+      disabled,
       onClick,
       ...props
     },
@@ -38,7 +44,11 @@ const AccordionHeader: DynamicRefForwardingComponent<
 
     return (
       <Component ref={ref} {...props} className={clsx(className, bsPrefix)}>
-        <AccordionButton onClick={onClick} aria-controls={ariaControls}>
+        <AccordionButton
+          onClick={onClick}
+          aria-controls={ariaControls}
+          disabled={disabled}
+        >
           {children}
         </AccordionButton>
       </Component>
diff --git a/test/AccordionHeaderSpec.tsx b/test/AccordionHeaderSpec.tsx
@@ -1,5 +1,6 @@
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { AccordionHeader } from '../src';
 
 describe('<AccordionHeader>', () => {
@@ -10,4 +11,14 @@ describe('<AccordionHeader>', () => {
       'test',
     );
   });
+
+  it('should disable the header button when disabled prop is true', async () => {
+    const user = userEvent.setup();
+    const onClickFn = vi.fn();
+    render(<AccordionHeader disabled onClick={onClickFn} />);
+
+    await user.click(screen.getByRole('button'));
+
+    expect(onClickFn).not.toHaveBeenCalled();
+  });
 });
