From f4e5e53deec6dd36b7e7172ec9c1f7ce244d3791 Mon Sep 17 00:00:00 2001 From: Jan Hassel Date: Tue, 15 Nov 2022 15:27:43 +0100 Subject: [PATCH] feat(contained-list): add support for sizes (#12609) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../__snapshots__/PublicAPI-test.js.snap | 11 ++ .../components/ContainedList/ContainedList.js | 7 + .../ContainedList/ContainedList.stories.js | 165 +++++++++--------- .../contained-list/_contained-list.scss | 33 +++- 4 files changed, 127 insertions(+), 89 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 318439b116fd..4f65b27dfd83 100644 --- 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 index 85440bdf5807..d4cc2b2ddfef 100644 --- a/packages/react/src/components/ContainedList/ContainedList.js +++ b/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; diff --git a/packages/react/src/components/ContainedList/ContainedList.stories.js b/packages/react/src/components/ContainedList/ContainedList.stories.js index 0835b9d476be..abf0236b603e 100644 --- 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 ( - - - List item - - List item - - List item - List item - - + + List item + + List item + + List item + List item + ); }; @@ -114,19 +112,17 @@ export const WithActions = () => { ); return ( - - }> - List item - - List item - - List item - List item - - + }> + List item + + List item + + List item + List item + ); }; @@ -142,89 +138,81 @@ export const WithInteractiveItemsAndActions = () => { ); return ( - - }> - - List item - - - List item - - - List item - - - List item - - - + }> + + List item + + + List item + + + List item + + + List item + + ); }; export const WithListTitleDecorators = () => { return ( - - - List title - 4 - - } - kind="on-page"> - List item - List item - List item - List item - - + + List title + 4 + + } + kind="on-page"> + List item + List item + List item + List item + ); }; export const WithIcons = () => { return ( - - - List item - List item - List item - List item - - + + List item + List item + List item + List item + ); }; export const WithLayer = () => { return ( - - - - List item - List item - - - + + + List item + List item + + + + + List item + List item + + List item List item - - - List item - List item - - - - - + + + ); }; @@ -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 index 8d8958bf86cf..225dffdc4d1b 100644 --- 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; }