feat(contained-list): add support for sizes
MODIFY
packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
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 {

MODIFY
packages/react/src/components/ContainedList/ContainedList.js
packages/react/src/components/ContainedList/ContainedList.js
@@ -19,6 +19,7 @@ function ContainedList({
className,
kind = variants[0],
label,
+ size = 'lg',
}) {
const labelId = `${useId('contained-list')}-header`;
const prefix = usePrefix();
@@ -26,6 +27,7 @@ function ContainedList({
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;

MODIFY
packages/react/src/components/ContainedList/ContainedList.stories.js
packages/react/src/components/ContainedList/ContainedList.stories.js
@@ -90,7 +90,6 @@ 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>
@@ -99,7 +98,6 @@ export const WithInteractiveItems = () => {
<ContainedListItem onClick={onClick}>List item</ContainedListItem>
<ContainedListItem onClick={onClick}>List item</ContainedListItem>
</ContainedList>
- </VStack>
);
};
@@ -114,7 +112,6 @@ export const WithActions = () => {
);
return (
- <VStack gap={12}>
<ContainedList
label="List title"
kind="on-page"
@@ -126,7 +123,6 @@ export const WithActions = () => {
<ContainedListItem action={itemAction}>List item</ContainedListItem>
<ContainedListItem action={itemAction}>List item</ContainedListItem>
</ContainedList>
- </VStack>
);
};
@@ -142,7 +138,6 @@ export const WithInteractiveItemsAndActions = () => {
);
return (
- <VStack gap={12}>
<ContainedList
label="List title"
kind="on-page"
@@ -160,13 +155,11 @@ export const WithInteractiveItemsAndActions = () => {
List item
</ContainedListItem>
</ContainedList>
- </VStack>
);
};
export const WithListTitleDecorators = () => {
return (
- <VStack gap={12}>
<ContainedList
label={
<div
@@ -185,26 +178,22 @@ export const WithListTitleDecorators = () => {
<ContainedListItem>List item</ContainedListItem>
<ContainedListItem>List item</ContainedListItem>
</ContainedList>
- </VStack>
);
};
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>
);
};
export const WithLayer = () => {
return (
- <VStack gap={12}>
<VStack gap={5}>
<ContainedList label="List title" kind="on-page">
<ContainedListItem>List item</ContainedListItem>
@@ -225,7 +214,6 @@ export const WithLayer = () => {
</VStack>
</Layer>
</VStack>
- </VStack>
);
};
@@ -250,4 +238,7 @@ Playground.argTypes = {
kind: {
defaultValue: 'on-page',
},
+ size: {
+ defaultValue: 'lg',
+ },
};

MODIFY
packages/styles/scss/components/contained-list/_contained-list.scss
packages/styles/scss/components/contained-list/_contained-list.scss
// LICENSE file in the root directory of this source tree.
//
+@use 'sass:list';
+
@use '../../config' as *;
@use '../../motion' as *;
@use '../../spacing' as *;
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 {
.#{$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;
.#{$prefix}--contained-list-item__content {
@include type-style('body-01');
- padding: calc(#{$spacing-05} - #{rem(2px)}) $spacing-05;
color: $text-primary;
}

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

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>