fix(layer): add border-subtle-00 to layerset map (#13469)

* fix(layer): add border-subtle-00 to layerset map * docs(Accordion): add with layer story * fix(Accordion): dont use withLayer function
carbon-design-system · Apr 10, 2023 · 5ff24e4 · 5ff24e4
1 parent 5c645da
commit 5ff24e4
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js
@@ -16,6 +16,8 @@ import {
 import Button from '../Button';
 import mdx from './Accordion.mdx';
 
+import { WithLayer } from '../../../.storybook/templates/WithLayer';
+
 export default {
   title: 'Components/Accordion',
   component: Accordion,
@@ -67,6 +69,45 @@ export const Default = () => (
   </Accordion>
 );
 
+export const _WithLayer = () => (
+  <WithLayer>
+    <Accordion>
+      <AccordionItem title="Section 1 title">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+      </AccordionItem>
+      <AccordionItem title="Section 2 title">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+      </AccordionItem>
+      <AccordionItem title="Section 3 title">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+      </AccordionItem>
+      <AccordionItem title="Section 4 title">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+      </AccordionItem>
+    </Accordion>
+  </WithLayer>
+);
+
 export const Skeleton = (args) => (
   <AccordionSkeleton open count={4} {...args} />
 );

diff --git a/packages/styles/scss/layer/_layer-sets.scss b/packages/styles/scss/layer/_layer-sets.scss
@@ -60,6 +60,7 @@ $-default-layer-sets: (
     theme.$field-hover-03,
   ),
   border-subtle: (
+    theme.$border-subtle-00,
     theme.$border-subtle-01,
     theme.$border-subtle-02,
     theme.$border-subtle-03,