fix(structuredlist): expose isCondensed and isFlush props

packages/react/src/components/StructuredList/next/StructuredList-test.js

@@ -46,6 +46,20 @@ describe('StructuredListWrapper', () => {
         wrapper.find('div').hasClass(`${prefix}--structured-list--selection`)
       ).toEqual(true);
     });
+
+    it('Should add the modifier class for condensed when isCondensed prop is true', () => {
+      wrapper.setProps({ isCondensed: true });
+      expect(
+        wrapper.find('div').hasClass(`${prefix}--structured-list--condensed`)
+      ).toEqual(true);
+    });
+
+    it('Should add the modifier class for flush when isFlush prop is true', () => {
+      wrapper.setProps({ isFlush: true });
+      expect(
+        wrapper.find('div').hasClass(`${prefix}--structured-list--flush`)
+      ).toEqual(true);
+    });
   });
 });
 

packages/react/src/components/StructuredList/next/StructuredList.js

@@ -16,10 +16,20 @@ const GridSelectedRowStateContext = React.createContext(null);
 const GridSelectedRowDispatchContext = React.createContext(null);
 
 export function StructuredListWrapper(props) {
-  const { children, selection, className, ariaLabel, ...other } = props;
+  const {
+    children,
+    selection,
+    className,
+    ariaLabel,
+    isCondensed,
+    isFlush,
+    ...other
+  } = props;
   const prefix = usePrefix();
   const classes = classNames(`${prefix}--structured-list`, className, {
     [`${prefix}--structured-list--selection`]: selection,
+    [`${prefix}--structured-list--condensed`]: isCondensed,
+    [`${prefix}--structured-list--flush`]: isFlush,
   });
   const [selectedRow, setSelectedRow] = React.useState(null);
 
@@ -50,6 +60,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
    */
@@ -58,6 +78,8 @@ StructuredListWrapper.propTypes = {
 
 StructuredListWrapper.defaultProps = {
   selection: false,
+  isCondensed: false,
+  isFlush: false,
   ariaLabel: 'Structured list section',
 };
 

packages/react/src/components/StructuredList/next/StructuredList.stories.js

@@ -36,6 +36,13 @@ export default {
       page: mdx,
     },
   },
+  argTypes: {
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 export const Simple = () => (
@@ -80,45 +87,65 @@ Simple.parameters = {
   },
 };
 
-export const Playground = () => (
-  <StructuredListWrapper>
-    <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>
-);
+export const Playground = (props) => {
+  const { className, selection, isCondensed, isFlush } = props;
+  return (
+    <StructuredListWrapper
+      className={className}
+      selection={selection}
+      isCondensed={isCondensed}
+      isFlush={isFlush}>
+      <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.
-      `,
+Playground.argTypes = {
+  selection: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  isCondensed: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  isFlush: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
   },
 };