chore: styles updated and moved to story.scss

carbon-design-system · Feb 29, 2024 · 3e8be93 · 3e8be93
1 parent e743025
commit 3e8be93
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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;
-}