feat: sync v11 structured list component (carbon-design-system#10350)

* docs(structured-list): remove story styles * feat(structured-list): add `condensed` and `flush` variants * fix(structured-list): apply condensed styles * fix(structured-list): use spacing tokens update flush/condensed styles * fix(structured-list): update selection variant * refactor(structured-list): remove redundant attrs * refactor(structured-list): use spacing token * fix(structured-list): update last child bottom border * fix(container): set box-sizing * fix(structured-list): fix color tokens and increase selector specificity --------- Co-authored-by: kennylam <[email protected]>
kennylam · May 17, 2023 · f8a1d3c · f8a1d3c
1 parent 2e1638c
commit f8a1d3c
Show file tree

Hide file tree

Showing 6 changed files with 273 additions and 104 deletions.
diff --git a/web-components/packages/carbon-web-components/.storybook/_container.scss b/web-components/packages/carbon-web-components/.storybook/_container.scss
@@ -10,6 +10,12 @@
 @use '@carbon/styles' as *;
 @include reset();
 
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 // The default theme is "white" (White)
 :root {
   @include theme($white);

diff --git a/.../packages/carbon-web-components/src/components/structured-list/structured-list-story.scss b/.../packages/carbon-web-components/src/components/structured-list/structured-list-story.scss
diff --git a/...ts/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts b/...ts/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts
@@ -19,7 +19,6 @@ import './structured-list-row';
 import './structured-list-cell';
 import './structured-list-header-cell-skeleton';
 import storyDocs from './structured-list-story.mdx';
-import styles from './structured-list-story.scss';
 import { prefix } from '../../globals/settings';
 
 export const Default = (args) => {
@@ -36,58 +35,144 @@ export const Default = (args) => {
     <cds-structured-list selection-name=${ifDefined(selectionName)}>
       <cds-structured-list-head>
         <cds-structured-list-header-row>
-          <cds-structured-list-header-cell
-            >ColumnA</cds-structured-list-header-cell
-          >
-          <cds-structured-list-header-cell
-            >ColumnB</cds-structured-list-header-cell
-          >
-          <cds-structured-list-header-cell
-            >ColumnC</cds-structured-list-header-cell
-          >
-        </cds-structured-list-header-row>
+          <cds-structured-list-header-cell>
+            ColumnA
+          </cds-structured-list-header-cell>
+          <cds-structured-list-header-cell>
+            ColumnB
+          </cds-structured-list-header-cell>
+          <cds-structured-list-header-cell>
+            ColumnC
+          </cds-structured-list-header-cell>
       </cds-structured-list-head>
       <cds-structured-list-body>
         <cds-structured-list-row
           selection-value=${ifDefined(selectionValues[0])}>
           <cds-structured-list-cell>Row 1</cds-structured-list-cell>
           <cds-structured-list-cell>Row 1</cds-structured-list-cell>
-          <cds-structured-list-cell
-            >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+          <cds-structured-list-cell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
             magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
-            sem vel euismod dignissim.</cds-structured-list-cell
-          >
+            sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+            vulputate nisl a porttitor interdum.</cds-structured-list-cell>
         </cds-structured-list-row>
         <cds-structured-list-row
           selection-value=${ifDefined(selectionValues[1])}>
           <cds-structured-list-cell>Row 2</cds-structured-list-cell>
           <cds-structured-list-cell>Row 2</cds-structured-list-cell>
-          <cds-structured-list-cell
-            >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+          <cds-structured-list-cell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
             magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
-            sem vel euismod dignissim.</cds-structured-list-cell
-          >
+            sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+            vulputate nisl a porttitor interdum.</cds-structured-list-cell>
         </cds-structured-list-row>
+      </cds-structured-list-body>
+    </cds-structured-list>
+  `;
+};
+
+export const Selection = () => {
+  const selectionName = 'structured-list-selection';
+  const selectionValues = [
+    'structured-list-selection-0',
+    'structured-list-selection-1',
+    'structured-list-selection-2',
+    'structured-list-selection-3',
+  ];
+  return html`
+    <cds-structured-list selection-name=${ifDefined(selectionName)}>
+      <cds-structured-list-head>
+        <cds-structured-list-header-row>
+          <cds-structured-list-header-cell>
+            ColumnA
+          </cds-structured-list-header-cell>
+          <cds-structured-list-header-cell>
+            ColumnB
+          </cds-structured-list-header-cell>
+          <cds-structured-list-header-cell>
+            ColumnC
+          </cds-structured-list-header-cell>
+        </cds-structured-list-header-row>
+      </cds-structured-list-head>
+      <cds-structured-list-body>
+        ${selectionValues.map(
+          (selectionValue, index) => html` <cds-structured-list-row
+            selection-value=${ifDefined(selectionValue)}>
+            <cds-structured-list-cell>Row ${index}</cds-structured-list-cell>
+            <cds-structured-list-cell>Row ${index}</cds-structured-list-cell>
+            <cds-structured-list-cell>
+              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.</cds-structured-list-cell
+            >
+          </cds-structured-list-row>`
+        )}
+      </cds-structured-list-body>
+    </cds-structured-list>
+  `;
+};
+
+export const Playground = (args) => {
+  const { condensed, flush, hasSelection } =
+    args?.[`${prefix}-structured-list`] ?? {};
+  const selectionName = !hasSelection ? undefined : 'structured-list-selection';
+  const selectionValues = !hasSelection
+    ? []
+    : [
+        'structured-list-selection-0',
+        'structured-list-selection-1',
+        'structured-list-selection-2',
+      ];
+  return html`
+    <cds-structured-list
+    selection-name=${ifDefined(selectionName)}
+    ?condensed=${condensed}
+    ?flush=${flush}>
+      <cds-structured-list-head>
+        <cds-structured-list-header-row>
+          <cds-structured-list-header-cell>
+            ColumnA
+          </cds-structured-list-header-cell>
+          <cds-structured-list-header-cell>
+            ColumnB
+          </cds-structured-list-header-cell>
+          <cds-structured-list-header-cell>
+            ColumnC
+          </cds-structured-list-header-cell>
+      </cds-structured-list-head>
+      <cds-structured-list-body>
         <cds-structured-list-row
-          selection-value=${ifDefined(selectionValues[2])}>
-          <cds-structured-list-cell>Row 3</cds-structured-list-cell>
-          <cds-structured-list-cell>Row 3</cds-structured-list-cell>
-          <cds-structured-list-cell
-            >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+          selection-value=${ifDefined(selectionValues[0])}>
+          <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+          <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+          <cds-structured-list-cell>
+            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.</cds-structured-list-cell>
+        </cds-structured-list-row>
+        <cds-structured-list-row
+          selection-value=${ifDefined(selectionValues[1])}>
+          <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+          <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+          <cds-structured-list-cell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
             magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
-            sem vel euismod dignissim.</cds-structured-list-cell
-          >
+            sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+            vulputate nisl a porttitor interdum.</cds-structured-list-cell>
         </cds-structured-list-row>
       </cds-structured-list-body>
     </cds-structured-list>
   `;
 };
 
-Default.storyName = 'Default';
-
-Default.parameters = {
+Playground.parameters = {
   knobs: {
     [`${prefix}-structured-list`]: () => ({
+      condensed: boolean('Condensed (condensed)', false),
+      flush: boolean('Flush (flush)', false),
       hasSelection: boolean(
         'Supports selection feature (has-selection)',
         false
@@ -97,35 +182,33 @@ Default.parameters = {
 };
 
 export const skeleton = () => html`
-  <style>
-    ${styles}
-  </style>
-  <cds-structured-list>
-    <cds-structured-list-head>
-      <cds-structured-list-header-row>
-        <cds-structured-list-header-cell-skeleton></cds-structured-list-header-cell-skeleton>
-        <cds-structured-list-header-cell-skeleton></cds-structured-list-header-cell-skeleton>
-        <cds-structured-list-header-cell-skeleton></cds-structured-list-header-cell-skeleton>
-      </cds-structured-list-header-row>
-    </cds-structured-list-head>
-    <cds-structured-list-body>
-      <cds-structured-list-row>
-        <cds-structured-list-cell></cds-structured-list-cell>
-        <cds-structured-list-cell></cds-structured-list-cell>
-        <cds-structured-list-cell></cds-structured-list-cell>
-      </cds-structured-list-row>
-      <cds-structured-list-row>
-        <cds-structured-list-cell></cds-structured-list-cell>
-        <cds-structured-list-cell></cds-structured-list-cell>
-        <cds-structured-list-cell></cds-structured-list-cell>
-      </cds-structured-list-row>
-      <cds-structured-list-row>
-        <cds-structured-list-cell></cds-structured-list-cell>
-        <cds-structured-list-cell></cds-structured-list-cell>
-        <cds-structured-list-cell></cds-structured-list-cell>
-      </cds-structured-list-row>
-    </cds-structured-list-body>
-  </cds-structured-list>
+  <div style="width:800px">
+    ${Array.apply(null, Array(2)).map(
+      () => html`
+        <cds-structured-list>
+          <cds-structured-list-head>
+            <cds-structured-list-header-row>
+              ${Array.apply(null, Array(3)).map(
+                () => html`
+                  <cds-structured-list-header-cell-skeleton>
+                  </cds-structured-list-header-cell-skeleton>
+                `
+              )}
+            </cds-structured-list-header-row>
+          </cds-structured-list-head>
+          <cds-structured-list-body>
+            ${Array.apply(null, Array(5)).map(
+              () => html`<cds-structured-list-row>
+                <cds-structured-list-cell></cds-structured-list-cell>
+                <cds-structured-list-cell></cds-structured-list-cell>
+                <cds-structured-list-cell></cds-structured-list-cell>
+              </cds-structured-list-row>`
+            )}
+          </cds-structured-list-body>
+        </cds-structured-list>
+      `
+    )}
+  </div>
 `;
 
 skeleton.parameters = {