From e743025065b63065852b896006f6c88bad19c1f5 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <nikhiltomar753@gmail.com>
Date: Tue, 27 Feb 2024 19:02:57 +0530
Subject: [PATCH] refactor(controlled-accordion): changes button styles

---
 .../components/Accordion/Accordion.stories.js | 35 +++++++++++--------
 .../scss/components/accordion/_accordion.scss |  6 ++++
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js
index db43494e5820..ad30bcec2133 100644
--- 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
index 214067fd960e..4aca8431281b 100644
--- 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;
+}