feat(StructuredList): add prop for condensed list (#8446)

* feat: add prop for condensed list * fix: add flush and condensed styles * fix: spacing Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · May 14, 2021 · ce06628 · ce06628
1 parent ed86983
commit ce06628
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 6 deletions.
diff --git a/packages/components/src/components/structured-list/_mixins.scss b/packages/components/src/components/structured-list/_mixins.scss
@@ -11,7 +11,6 @@
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding-td--condensed($padding: $structured-list-padding) {
   padding: $padding / 4;
-  padding-left: 0;
 }
 
 /// Used only for [data-structured-list]
@@ -34,15 +33,15 @@
 /// @group structured-list
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding-th($padding: $structured-list-padding) {
-  padding: $carbon--spacing-05 $carbon--spacing-05 $carbon--spacing-03
-    $carbon--spacing-05;
+  padding: $carbon--spacing-05 $carbon--spacing-03 $carbon--spacing-03
+    $carbon--spacing-03;
 }
 
 /// Used only for normal structured-list
 /// @access private
 /// @group structured-list
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding-td($padding: $structured-list-padding) {
-  padding: $carbon--spacing-05 $carbon--spacing-05 $carbon--spacing-06
-    $carbon--spacing-05;
+  padding: $carbon--spacing-05 $carbon--spacing-03 $carbon--spacing-06
+    $carbon--spacing-03;
 }
diff --git a/packages/components/src/components/structured-list/_structured-list.scss b/packages/components/src/components/structured-list/_structured-list.scss
@@ -39,9 +39,37 @@
     overflow-x: auto;
     overflow-y: hidden;
 
+    // Condensed list
     &.#{$prefix}--structured-list--condensed .#{$prefix}--structured-list-td,
     &.#{$prefix}--structured-list--condensed .#{$prefix}--structured-list-th {
       @include padding-td--condensed;
+      //8px padding all over
+    }
+
+    .#{$prefix}--structured-list-row
+      .#{$prefix}--structured-list-td:first-of-type,
+    .#{$prefix}--structured-list-row
+      .#{$prefix}--structured-list-th:first-of-type {
+      padding-left: 1rem;
+      // specs require 16px spacing between columns
+      // 8px side padding between col creates 16 px, with exception of 1st col, which needs an override to be 16px
+    }
+
+    // Flush list
+    &.#{$prefix}--structured-list--flush
+      .#{$prefix}--structured-list-row
+      .#{$prefix}--structured-list-td,
+    &.#{$prefix}--structured-list--flush
+      .#{$prefix}--structured-list-row
+      .#{$prefix}--structured-list-th,
+    &.#{$prefix}--structured-list--flush
+      .#{$prefix}--structured-list-row
+      .#{$prefix}--structured-list-td:first-of-type,
+    &.#{$prefix}--structured-list--flush
+      .#{$prefix}--structured-list-row
+      .#{$prefix}--structured-list-th:first-of-type {
+      padding-right: 1rem;
+      padding-left: 0;
     }
   }
 

diff --git a/packages/react/src/components/StructuredList/StructuredList-story.js b/packages/react/src/components/StructuredList/StructuredList-story.js
@@ -7,6 +7,8 @@
 
 import React from 'react';
 import { CheckmarkFilled16 } from '@carbon/icons-react';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+
 import {
   StructuredListWrapper,
   StructuredListHead,
@@ -21,8 +23,14 @@ import mdx from './StructuredList.mdx';
 
 const { prefix } = settings;
 
+const props = () => ({
+  isCondensed: boolean('Condensed', false),
+  isFlush: boolean('Flush alignment', false),
+});
+
 export default {
   title: 'Components/StructuredList',
+  decorators: [withKnobs],
 
   parameters: {
     component: StructuredListWrapper,
@@ -81,6 +89,48 @@ Simple.parameters = {
   },
 };
 
+export const Playground = () => (
+  <StructuredListWrapper {...props()}>
+    <StructuredListHead>
+      <StructuredListRow head>
+        <StructuredListCell head>ColumnA</StructuredListCell>
+        <StructuredListCell head>ColumnB</StructuredListCell>
+        <StructuredListCell head>ColumnC</StructuredListCell>
+      </StructuredListRow>
+    </StructuredListHead>
+    <StructuredListBody>
+      <StructuredListRow>
+        <StructuredListCell noWrap>Row 1</StructuredListCell>
+        <StructuredListCell>Row 1</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>
+      </StructuredListRow>
+      <StructuredListRow>
+        <StructuredListCell noWrap>Row 2</StructuredListCell>
+        <StructuredListCell>Row 2</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>
+      </StructuredListRow>
+    </StructuredListBody>
+  </StructuredListWrapper>
+);
+
+Playground.parameters = {
+  info: {
+    text: `
+        Structured Lists group content that is similar or related, such as terms or definitions.
+      `,
+  },
+};
+
 export const Selection = () => {
   const structuredListBodyRowGenerator = (numRows) => {
     return Array.apply(null, Array(numRows)).map((n, i) => (
@@ -111,7 +161,7 @@ export const Selection = () => {
     ));
   };
   return (
-    <StructuredListWrapper selection>
+    <StructuredListWrapper selection {...props()}>
       <StructuredListHead>
         <StructuredListRow head>
           <StructuredListCell head>ColumnA</StructuredListCell>

diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
@@ -21,11 +21,15 @@ export function StructuredListWrapper(props) {
     selection,
     className,
     ariaLabel,
+    isCondensed,
+    isFlush,
     border: _border,
     ...other
   } = props;
   const classes = classNames(`${prefix}--structured-list`, className, {
     [`${prefix}--structured-list--selection`]: selection,
+    [`${prefix}--structured-list--condensed`]: isCondensed,
+    [`${prefix}--structured-list--flush`]: isFlush,
   });
 
   return (
@@ -59,6 +63,16 @@ StructuredListWrapper.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Specify if structured list is condensed, default is false
+   */
+  isCondensed: PropTypes.bool,
+
+  /**
+   * Specify if structured list is flush, default is false
+   */
+  isFlush: PropTypes.bool,
+
   /**
    * Specify whether your StructuredListWrapper should have selections
    */
@@ -68,6 +82,8 @@ StructuredListWrapper.propTypes = {
 StructuredListWrapper.defaultProps = {
   selection: false,
   ariaLabel: 'Structured list section',
+  isCondensed: false,
+  isFlush: false,
 };
 
 export function StructuredListHead(props) {