Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 5 commits into from
May 14, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6bab847
feat: add prop for condensed list
jnm2377 Apr 16, 2021
65a8e87
Merge branch 'main' of github.com:carbon-design-system/carbon into st…
jnm2377 Apr 29, 2021
30a1a81
fix: add flush and condensed styles
jnm2377 Apr 29, 2021
0703244
fix: spacing
jnm2377 May 13, 2021
486105d
Merge branch 'main' into structured-list-condensed
kodiakhq[bot] May 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions packages/components/src/components/structured-list/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand All @@ -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;
}
28 changes: 28 additions & 0 deletions packages/components/src/components/structured-list/_structured-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
52 changes: 51 additions & 1 deletion packages/react/src/components/StructuredList/StructuredList-story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@

import React from 'react';
import { CheckmarkFilled16 } from '@carbon/icons-react';
import { withKnobs, boolean } from '@storybook/addon-knobs';

import {
StructuredListWrapper,
StructuredListHead,
Expand All @@ -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,
Expand Down Expand Up @@ -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) => (
Expand Down Expand Up @@ -111,7 +161,7 @@ export const Selection = () => {
));
};
return (
<StructuredListWrapper selection>
<StructuredListWrapper selection {...props()}>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
Expand Down
16 changes: 16 additions & 0 deletions packages/react/src/components/StructuredList/StructuredList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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
*/
Expand All @@ -68,6 +82,8 @@ StructuredListWrapper.propTypes = {
StructuredListWrapper.defaultProps = {
selection: false,
ariaLabel: 'Structured list section',
isCondensed: false,
isFlush: false,
};

export function StructuredListHead(props) {
Expand Down