feat(contained-list): add support for sizes (#12609)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Nov 15, 2022 · f4e5e53 · f4e5e53
1 parent db973af
commit f4e5e53
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 89 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1363,6 +1363,17 @@ Map {
  "isRequired": true,
  "type": "oneOfType",
  },
+ "size": Object {
+ "args": Array [
+ Array [
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ ],
+ "type": "oneOf",
+ },
  },
  },
  "ContainedListItem" => Object {

diff --git a/packages/react/src/components/ContainedList/ContainedList.js b/packages/react/src/components/ContainedList/ContainedList.js
@@ -19,13 +19,15 @@ function ContainedList({
  className,
  kind = variants[0],
  label,
+ size = 'lg',
 }) {
  const labelId = `${useId('contained-list')}-header`;
  const prefix = usePrefix();
 
  const classes = classNames(
  `${prefix}--contained-list`,
  `${prefix}--contained-list--${kind}`,
+ `${prefix}--contained-list--${size}`,
  className
  );
 
@@ -69,6 +71,11 @@ ContainedList.propTypes = {
  * A label describing the contained list.
  */
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+
+ /**
+ * Specify the size of the contained list.
+ */
+ size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
 };
 
 export default ContainedList;
diff --git a/packages/react/src/components/ContainedList/ContainedList.stories.js b/packages/react/src/components/ContainedList/ContainedList.stories.js
@@ -90,16 +90,14 @@ export const WithInteractiveItems = () => {
  const onClick = action('onClick (ContainedListItem)');
 
  return (
- <VStack gap={12}>
- <ContainedList label="List title" kind="on-page">
- <ContainedListItem onClick={onClick}>List item</ContainedListItem>
- <ContainedListItem onClick={onClick} disabled>
- List item
- </ContainedListItem>
- <ContainedListItem onClick={onClick}>List item</ContainedListItem>
- <ContainedListItem onClick={onClick}>List item</ContainedListItem>
- </ContainedList>
- </VStack>
+ <ContainedList label="List title" kind="on-page">
+ <ContainedListItem onClick={onClick}>List item</ContainedListItem>
+ <ContainedListItem onClick={onClick} disabled>
+ List item
+ </ContainedListItem>
+ <ContainedListItem onClick={onClick}>List item</ContainedListItem>
+ <ContainedListItem onClick={onClick}>List item</ContainedListItem>
+ </ContainedList>
  );
 };
 
@@ -114,19 +112,17 @@ export const WithActions = () => {
  );
 
  return (
- <VStack gap={12}>
- <ContainedList
- label="List title"
- kind="on-page"
- action={<ExpandableSearch placeholder="Find item" size="lg" />}>
- <ContainedListItem action={itemAction}>List item</ContainedListItem>
- <ContainedListItem action={itemAction} disabled>
- List item
- </ContainedListItem>
- <ContainedListItem action={itemAction}>List item</ContainedListItem>
- <ContainedListItem action={itemAction}>List item</ContainedListItem>
- </ContainedList>
- </VStack>
+ <ContainedList
+ label="List title"
+ kind="on-page"
+ action={<ExpandableSearch placeholder="Find item" size="lg" />}>
+ <ContainedListItem action={itemAction}>List item</ContainedListItem>
+ <ContainedListItem action={itemAction} disabled>
+ List item
+ </ContainedListItem>
+ <ContainedListItem action={itemAction}>List item</ContainedListItem>
+ <ContainedListItem action={itemAction}>List item</ContainedListItem>
+ </ContainedList>
  );
 };
 
@@ -142,89 +138,81 @@ export const WithInteractiveItemsAndActions = () => {
  );
 
  return (
- <VStack gap={12}>
- <ContainedList
- label="List title"
- kind="on-page"
- action={<ExpandableSearch placeholder="Find item" size="lg" />}>
- <ContainedListItem action={itemAction} onClick={onClick}>
- List item
- </ContainedListItem>
- <ContainedListItem action={itemAction} onClick={onClick}>
- List item
- </ContainedListItem>
- <ContainedListItem action={itemAction} onClick={onClick}>
- List item
- </ContainedListItem>
- <ContainedListItem action={itemAction} onClick={onClick}>
- List item
- </ContainedListItem>
- </ContainedList>
- </VStack>
+ <ContainedList
+ label="List title"
+ kind="on-page"
+ action={<ExpandableSearch placeholder="Find item" size="lg" />}>
+ <ContainedListItem action={itemAction} onClick={onClick}>
+ List item
+ </ContainedListItem>
+ <ContainedListItem action={itemAction} onClick={onClick}>
+ List item
+ </ContainedListItem>
+ <ContainedListItem action={itemAction} onClick={onClick}>
+ List item
+ </ContainedListItem>
+ <ContainedListItem action={itemAction} onClick={onClick}>
+ List item
+ </ContainedListItem>
+ </ContainedList>
  );
 };
 
 export const WithListTitleDecorators = () => {
  return (
- <VStack gap={12}>
- <ContainedList
- label={
- <div
- style={{
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'space-between',
- }}>
- <span>List title</span>
- <Tag size="sm">4</Tag>
- </div>
- }
- kind="on-page">
- <ContainedListItem>List item</ContainedListItem>
- <ContainedListItem>List item</ContainedListItem>
- <ContainedListItem>List item</ContainedListItem>
- <ContainedListItem>List item</ContainedListItem>
- </ContainedList>
- </VStack>
+ <ContainedList
+ label={
+ <div
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ }}>
+ <span>List title</span>
+ <Tag size="sm">4</Tag>
+ </div>
+ }
+ kind="on-page">
+ <ContainedListItem>List item</ContainedListItem>
+ <ContainedListItem>List item</ContainedListItem>
+ <ContainedListItem>List item</ContainedListItem>
+ <ContainedListItem>List item</ContainedListItem>
+ </ContainedList>
  );
 };
 
 export const WithIcons = () => {
  return (
- <VStack gap={12}>
- <ContainedList label="List title" kind="on-page">
- <ContainedListItem renderIcon={Apple}>List item</ContainedListItem>
- <ContainedListItem renderIcon={Wheat}>List item</ContainedListItem>
- <ContainedListItem renderIcon={Strawberry}>List item</ContainedListItem>
- <ContainedListItem renderIcon={Fish}>List item</ContainedListItem>
- </ContainedList>
- </VStack>
+ <ContainedList label="List title" kind="on-page">
+ <ContainedListItem renderIcon={Apple}>List item</ContainedListItem>
+ <ContainedListItem renderIcon={Wheat}>List item</ContainedListItem>
+ <ContainedListItem renderIcon={Strawberry}>List item</ContainedListItem>
+ <ContainedListItem renderIcon={Fish}>List item</ContainedListItem>
+ </ContainedList>
  );
 };
 
 export const WithLayer = () => {
  return (
- <VStack gap={12}>
- <VStack gap={5}>
- <ContainedList label="List title" kind="on-page">
- <ContainedListItem>List item</ContainedListItem>
- <ContainedListItem>List item</ContainedListItem>
- </ContainedList>
- <Layer>
- <VStack gap={5}>
+ <VStack gap={5}>
+ <ContainedList label="List title" kind="on-page">
+ <ContainedListItem>List item</ContainedListItem>
+ <ContainedListItem>List item</ContainedListItem>
+ </ContainedList>
+ <Layer>
+ <VStack gap={5}>
+ <ContainedList label="List title" kind="on-page">
+ <ContainedListItem>List item</ContainedListItem>
+ <ContainedListItem>List item</ContainedListItem>
+ </ContainedList>
+ <Layer>
  <ContainedList label="List title" kind="on-page">
  <ContainedListItem>List item</ContainedListItem>
  <ContainedListItem>List item</ContainedListItem>
  </ContainedList>
- <Layer>
- <ContainedList label="List title" kind="on-page">
- <ContainedListItem>List item</ContainedListItem>
- <ContainedListItem>List item</ContainedListItem>
- </ContainedList>
- </Layer>
- </VStack>
- </Layer>
- </VStack>
+ </Layer>
+ </VStack>
+ </Layer>
  </VStack>
  );
 };
@@ -250,4 +238,7 @@ Playground.argTypes = {
  kind: {
  defaultValue: 'on-page',
  },
+ size: {
+ defaultValue: 'lg',
+ },
 };
diff --git a/packages/styles/scss/components/contained-list/_contained-list.scss b/packages/styles/scss/components/contained-list/_contained-list.scss
@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:list';
+
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
@@ -31,6 +33,35 @@
  width: 100%;
  }
 
+ // Sizes
+
+ $sizes: (
+ // size: (height, item-block-padding)
+ 'sm': (rem(32px), $spacing-03),
+ 'md': (rem(40px), $spacing-04),
+ 'lg': (rem(48px), $spacing-05),
+ 'xl': (rem(64px), $spacing-06)
+ );
+
+ @each $size, $definition in $sizes {
+ $height: list.nth($definition, 1);
+ $item-block-padding: list.nth($definition, 2);
+
+ .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--#{$size}
+ .#{$prefix}--contained-list__header {
+ height: $height;
+ }
+
+ .#{$prefix}--contained-list--#{$size}
+ .#{$prefix}--contained-list-item__content,
+ .#{$prefix}--contained-list--#{$size}
+ .#{$prefix}--contained-list-item--clickable
+ .#{$prefix}--contained-list-item__content {
+ min-height: $height;
+ padding: calc(#{$item-block-padding} - #{rem(2px)}) $spacing-05;
+ }
+ }
+
  // "On Page" variant
 
  .#{$prefix}--contained-list--on-page + .#{$prefix}--contained-list--on-page {
@@ -40,7 +71,6 @@
  .#{$prefix}--contained-list--on-page .#{$prefix}--contained-list__header {
  @include type-style('heading-compact-01');
 
- height: $spacing-09;
  border-bottom: 1px solid $border-subtle;
  background-color: $background;
  color: $text-primary;
@@ -92,7 +122,6 @@
  .#{$prefix}--contained-list-item__content {
  @include type-style('body-01');
 
- padding: calc(#{$spacing-05} - #{rem(2px)}) $spacing-05;
  color: $text-primary;
  }