refactor(controlled-accordion): changes button styles

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

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js
@@ -14,7 +14,9 @@ import {
   AccordionSkeleton,
 } from '../Accordion';
 import Button from '../Button';
+import ButtonSet from '../ButtonSet';
 import mdx from './Accordion.mdx';
+import { usePrefix } from '../../internal/usePrefix';
 
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
 
@@ -71,22 +73,27 @@ export const Default = () => (
 
 export const Controlled = () => {
   const [expandAll, setExpandAll] = React.useState(false);
+  const prefix = usePrefix();
   return (
     <>
-      <Button
-        onClick={() => {
-          expandAll === true ? setExpandAll(1) : setExpandAll(true);
-        }}>
-        Click to expand all
-      </Button>
-      <Button
-        onClick={() => {
-          expandAll || expandAll === null
-            ? setExpandAll(false)
-            : setExpandAll(null);
-        }}>
-        Click to collapse all
-      </Button>
+      <div className={`${prefix}--controlled__accordion`}>
+        <ButtonSet>
+          <Button
+            onClick={() => {
+              expandAll === true ? setExpandAll(1) : setExpandAll(true);
+            }}>
+            Click to expand all
+          </Button>
+          <Button
+            onClick={() => {
+              expandAll || expandAll === null
+                ? setExpandAll(false)
+                : setExpandAll(null);
+            }}>
+            Click to collapse all
+          </Button>
+        </ButtonSet>
+      </div>
       <Accordion>
         <AccordionItem title="Section 1 title" open={expandAll}>
           <p>

diff --git a/packages/styles/scss/components/accordion/_accordion.scss b/packages/styles/scss/components/accordion/_accordion.scss
@@ -305,3 +305,9 @@ $content-padding: 0 0 0 $spacing-05 !default;
   inline-size: calc(100% + 32px);
   inset-inline-start: -1rem;
 }
+
+//controlled-accordion
+.#{$prefix}--controlled__accordion .#{$prefix}--btn-set .#{$prefix}--btn {
+  inline-size: 100%;
+  max-inline-size: 13.25rem;
+}