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) {