feat(controlledAccordions): supports toggles, disabled panels

carbon-design-system · Feb 27, 2024 · c6b4187 · c6b4187
1 parent 07f8651
commit c6b4187
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js
@@ -73,7 +73,12 @@ export const Controlled = () => {
   const [expandAll, setExpandAll] = React.useState(false);
   return (
     <>
-      <Button onClick={() => setExpandAll(true)}>Click to expand all</Button>
+      <Button
+        onClick={() => {
+          expandAll === true ? setExpandAll(1) : setExpandAll(true);
+        }}>
+        Click to expand all
+      </Button>
       <Button
         onClick={() => {
           expandAll || expandAll === null

diff --git a/packages/react/src/components/Accordion/AccordionItem.tsx b/packages/react/src/components/Accordion/AccordionItem.tsx
@@ -129,7 +129,7 @@ function AccordionItem({
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--accordion__item`]: true,
-    [`${prefix}--accordion__item--active`]: isOpen,
+    [`${prefix}--accordion__item--active`]: isOpen && !disabled,
     [`${prefix}--accordion__item--disabled`]: disabled,
     [customClassName]: !!customClassName,
   });