feat: added $layer token in the background-color (carbon-design-syste…

…m#14726) * feat: added layer toke in the background color * fix: remove scss * fix: fixed vrt test name * fix: added background style * fix: removed storybook and vrt testing * fix: added layer stories * fix: removed wrong files --------- Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: Andrea N. Cardona <[email protected]>
Tresau · Nov 14, 2023 · 0f090f0 · 0f090f0
1 parent 0c30e68
commit 0f090f0
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 29 deletions.
diff --git a/e2e/components/StructuredList/StructuredList-test.e2e.js b/e2e/components/StructuredList/StructuredList-test.e2e.js
@@ -22,6 +22,14 @@ test.describe('StructuredList', () => {
         });
       });
 
+      test('with layer @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'StructuredList',
+          id: 'components-structuredlist--with-background-layer',
+          theme,
+        });
+      });
+
       test('selection @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'StructuredList',

diff --git a/packages/react/src/components/StructuredList/StructuredList.stories.js b/packages/react/src/components/StructuredList/StructuredList.stories.js
@@ -8,6 +8,7 @@
 import React from 'react';
 import { CheckmarkFilled } from '@carbon/icons-react';
 import mdx from './StructuredList.mdx';
+import { WithLayer } from '../../../.storybook/templates/WithLayer';
 
 import {
   StructuredListWrapper,
@@ -102,35 +103,36 @@ Default.argTypes = {
   },
 };
 
+const structuredListBodyRowGenerator = (numRows) => {
+  return Array.apply(null, Array(numRows)).map((n, i) => (
+    <StructuredListRow key={`row-${i}`}>
+      <StructuredListCell>Row {i}</StructuredListCell>
+      <StructuredListCell>Row {i}</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
+        finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
+        euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
+        porttitor interdum.
+      </StructuredListCell>
+      <StructuredListInput
+        id={`row-${i}`}
+        value={`row-${i}`}
+        title={`row-${i}`}
+        name="row-0"
+        aria-label={`row-${i}`}
+      />
+      <StructuredListCell>
+        <CheckmarkFilled
+          className={`${prefix}--structured-list-svg`}
+          aria-label="select an option">
+          <title>select an option</title>
+        </CheckmarkFilled>
+      </StructuredListCell>
+    </StructuredListRow>
+  ));
+};
+
 export const Selection = (args) => {
-  const structuredListBodyRowGenerator = (numRows) => {
-    return Array.apply(null, Array(numRows)).map((n, i) => (
-      <StructuredListRow key={`row-${i}`}>
-        <StructuredListCell>Row {i}</StructuredListCell>
-        <StructuredListCell>Row {i}</StructuredListCell>
-        <StructuredListCell>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
-          magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
-          sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
-          vulputate nisl a porttitor interdum.
-        </StructuredListCell>
-        <StructuredListInput
-          id={`row-${i}`}
-          value={`row-${i}`}
-          title={`row-${i}`}
-          name="row-0"
-          aria-label={`row-${i}`}
-        />
-        <StructuredListCell>
-          <CheckmarkFilled
-            className={`${prefix}--structured-list-svg`}
-            aria-label="select an option">
-            <title>select an option</title>
-          </CheckmarkFilled>
-        </StructuredListCell>
-      </StructuredListRow>
-    ));
-  };
   return (
     <StructuredListWrapper selection {...args}>
       <StructuredListHead>
@@ -160,6 +162,23 @@ Selection.argTypes = {
   },
 };
 
+export const WithBackgroundLayer = () => (
+  <WithLayer>
+    <StructuredListWrapper selection>
+      <StructuredListHead>
+        <StructuredListRow head>
+          <StructuredListCell head>ColumnA</StructuredListCell>
+          <StructuredListCell head>ColumnB</StructuredListCell>
+          <StructuredListCell head>ColumnC</StructuredListCell>
+        </StructuredListRow>
+      </StructuredListHead>
+      <StructuredListBody>
+        {structuredListBodyRowGenerator(4)}
+      </StructuredListBody>
+    </StructuredListWrapper>
+  </WithLayer>
+);
+
 export const Skeleton = (args) => (
   <div style={{ width: '800px' }}>
     <StructuredListSkeleton {...args} />

diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss
@@ -32,7 +32,7 @@
 
     display: table;
 
-    background-color: transparent;
+    background-color: $layer transparent;
     border-collapse: collapse;
     border-spacing: 0;
     inline-size: 100%;