From 3e8be93d5fcbab3663c996080a541ea703a3ffe7 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <nikhiltomar753@gmail.com>
Date: Thu, 29 Feb 2024 14:51:54 +0530
Subject: [PATCH] chore: styles updated and moved to story.scss

---
 .../components/Accordion/Accordion.stories.js | 41 +++++++++----------
 .../react/src/components/Accordion/story.scss | 14 +++++++
 .../scss/components/accordion/_accordion.scss |  6 ---
 3 files changed, 34 insertions(+), 27 deletions(-)
 create mode 100644 packages/react/src/components/Accordion/story.scss

diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js
index ad30bcec2133..764cd69ed157 100644
--- a/packages/react/src/components/Accordion/Accordion.stories.js
+++ b/packages/react/src/components/Accordion/Accordion.stories.js
@@ -8,6 +8,7 @@
 /* eslint-disable no-console */
 
 import React from 'react';
+import './story.scss';
 import {
   default as Accordion,
   AccordionItem,
@@ -16,8 +17,6 @@ import {
 import Button from '../Button';
 import ButtonSet from '../ButtonSet';
 import mdx from './Accordion.mdx';
-import { usePrefix } from '../../internal/usePrefix';
-
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
 
 export default {
@@ -73,27 +72,27 @@ export const Default = () => (
 
 export const Controlled = () => {
   const [expandAll, setExpandAll] = React.useState(false);
-  const prefix = usePrefix();
   return (
     <>
-      <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>
+      <ButtonSet className={'controlled-accordion-btnset'}>
+        <Button
+          className={'controlled-accordion-btn'}
+          onClick={() => {
+            expandAll === true ? setExpandAll(1) : setExpandAll(true);
+          }}>
+          Click to expand all
+        </Button>
+        <Button
+          className={'controlled-accordion-btn'}
+          onClick={() => {
+            expandAll || expandAll === null
+              ? setExpandAll(false)
+              : setExpandAll(null);
+          }}>
+          Click to collapse all
+        </Button>
+      </ButtonSet>
+
       <Accordion>
         <AccordionItem title="Section 1 title" open={expandAll}>
           <p>
diff --git a/packages/react/src/components/Accordion/story.scss b/packages/react/src/components/Accordion/story.scss
new file mode 100644
index 000000000000..635d0c797ae7
--- /dev/null
+++ b/packages/react/src/components/Accordion/story.scss
@@ -0,0 +1,14 @@
+//
+// Copyright IBM Corp. 2016, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+.controlled-accordion-btnset {
+  padding-block-end: 0.5rem;
+}
+
+.controlled-accordion-btnset .controlled-accordion-btn {
+  max-inline-size: 13.25rem;
+}
diff --git a/packages/styles/scss/components/accordion/_accordion.scss b/packages/styles/scss/components/accordion/_accordion.scss
index 4aca8431281b..214067fd960e 100644
--- a/packages/styles/scss/components/accordion/_accordion.scss
+++ b/packages/styles/scss/components/accordion/_accordion.scss
@@ -305,9 +305,3 @@ $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;
-}