diff --git a/packages/components/src/components/structured-list/_mixins.scss b/packages/components/src/components/structured-list/_mixins.scss
index 106d2fa41cd7..fa6fdff23103 100644
--- 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,8 +33,8 @@
/// @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
@@ -43,6 +42,6 @@
/// @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
index ad01758e2247..936cf722b7f6 100644
--- 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
index 8056b2f2335f..f657d07968f8 100644
--- 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 = () => (
+
+
+
+ ColumnA
+ ColumnB
+ ColumnC
+
+
+
+
+ Row 1
+ Row 1
+
+ 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.
+
+
+
+ Row 2
+ Row 2
+
+ 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.
+
+
+
+
+);
+
+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 (
-
+
ColumnA
diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index 54ab05b00803..7a2eaf9ca2f6 100644
--- 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) {