From 35147b25b0687ae33c86dc81374d1243e697baa6 Mon Sep 17 00:00:00 2001 From: Material Web Team Date: Fri, 10 Mar 2023 15:15:51 -0800 Subject: [PATCH] feat(list): add spacing tokens and inherit min-width In this PR: - Added spacing tokens to list-item - Made list inherit min-width from host - Propagated that min-width from menu to list - Small fix to single-line list item pushing the icon out of the list item if the supporting text was too long PiperOrigin-RevId: 515750933 --- list/lib/_list.scss | 3 +- list/lib/listitem/_list-item.scss | 61 ++++++++++++++++++++----------- menu/lib/_menu.scss | 4 ++ 3 files changed, 45 insertions(+), 23 deletions(-) diff --git a/list/lib/_list.scss b/list/lib/_list.scss index 1a1d8aed0c..f2dc8791c2 100644 --- a/list/lib/_list.scss +++ b/list/lib/_list.scss @@ -37,6 +37,7 @@ } color: unset; + min-width: 300px; } .md3-list { @@ -44,7 +45,7 @@ display: block; list-style-type: none; margin: 0; - min-width: 300px; + min-width: inherit; outline: none; padding: 8px 0; // Add position so the elevation overlay (which is absolutely positioned) diff --git a/list/lib/listitem/_list-item.scss b/list/lib/listitem/_list-item.scss index b65f2605cb..ff6c16c85e 100644 --- a/list/lib/listitem/_list-item.scss +++ b/list/lib/listitem/_list-item.scss @@ -115,14 +115,13 @@ .with-three-line & { justify-content: start; } + } - .with-leading-thumbnail &, - .with-leading-image & { - padding-inline-start: 16px; - } - - .with-leading-video & { - padding-inline-start: 0; + slot[name='start'] { + &::slotted([data-variant='icon']), + &::slotted([data-variant='image']), + &::slotted([data-variant='avatar']) { + margin-inline-start: var(--_list-item-leading-element-leading-space); } } @@ -132,7 +131,8 @@ flex-direction: column; box-sizing: border-box; flex: 1 0 0; - padding-inline-start: 16px; + padding-inline-start: var(--_list-item-leading-space); + padding-inline-end: var(--_list-item-trailing-space); z-index: 1; } @@ -141,7 +141,6 @@ flex-direction: column; justify-content: center; flex: 0 0 auto; - padding-inline-end: 24px; z-index: 1; .with-three-line & { @@ -149,6 +148,13 @@ } } + slot[name='end']::slotted(*), + .trailing-supporting-text { + margin-inline-end: var( + --_list-item-trailing-element-headline-trailing-element-space + ); + } + .label-text { display: flex; color: var(--_list-item-label-text-color); @@ -173,14 +179,21 @@ } .supporting-text { - display: block; text-overflow: ellipsis; - white-space: nowrap; + white-space: normal; overflow: hidden; width: 100%; color: var(--_list-item-supporting-text-color); font: var(--_list-item-supporting-text-type); + // Box is supposed to be deprecated, but line-clamp is not. It's still on + // standards track and can only be applied with display: -webkit-box and + // -webkit-box-orient: vertical. Must change once un-prefixed line-clamp + // ships + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + display: -webkit-box; + .disabled & { color: var(--_list-item-disabled-label-text-color); opacity: var(--_list-item-disabled-label-text-opacity); @@ -188,11 +201,7 @@ } .supporting-text--multi-line { - -webkit-box-orient: vertical; -webkit-line-clamp: 2; - display: -webkit-box; - overflow: hidden; - white-space: normal; } .trailing-supporting-text { @@ -230,7 +239,6 @@ @mixin _image() { ::slotted([data-variant='image']) { display: inline-flex; - margin-inline-start: 16px; height: var(--_list-item-leading-image-height); width: var(--_list-item-leading-image-width); border-radius: var(--_list-item-leading-image-shape); @@ -287,10 +295,6 @@ } } - ::slotted([data-variant='icon']) { - padding-inline-start: 16px; - } - :hover { slot[name='start']::slotted([data-variant='icon']) { @include icon.theme( @@ -373,7 +377,6 @@ display: inline-flex; justify-content: center; align-items: center; - margin-inline-start: 16px; background-color: var(--_list-item-leading-avatar-color); height: var(--_list-item-leading-avatar-size); width: var(--_list-item-leading-avatar-size); @@ -391,6 +394,7 @@ height: var(--_list-item-small-leading-video-height); width: var(--_list-item-leading-video-width); border-radius: var(--_list-item-leading-video-shape); + margin-inline-start: var(--_list-item-leading-video-leading-space); /* Min height is three-line height */ padding-block: calc( ( @@ -427,7 +431,20 @@ /// So here we resolve list-items tokens by selecting only tokens that have /// 'list-item' in its name. @function resolve-tokens($tokens) { - $list-item-tokens: (); + // Values pulled from b/198759625 spreadsheet + $list-item-tokens: ( + 'list-item-leading-space': 16px, + 'list-item-trailing-space': 16px, + 'list-item-leading-element-leading-space': 16px, + 'list-item-leading-video-leading-space': 0px, + // Commented out until the comments in the spreadsheet linked above are + // resolved regarding vertical alignment. + // 'list-item-leading-item-top-space': 8px, + // 'list-item-leading-video-top-space': 0px, + // 'list-item-leading-item-bottom-space': 8px, + // 'list-item-leading-video-bottom-space': 0px, + 'list-item-trailing-element-headline-trailing-element-space': 16px, + ); @each $token, $value in $tokens { $index: string.index($token, 'list-item'); diff --git a/menu/lib/_menu.scss b/menu/lib/_menu.scss index 0af8e8c52d..c55a59e58f 100644 --- a/menu/lib/_menu.scss +++ b/menu/lib/_menu.scss @@ -57,6 +57,8 @@ $_custom-property-prefix: 'menu'; shape: var(--_container-shape), ) ); + + min-width: 300px; } .menu { @@ -68,6 +70,7 @@ $_custom-property-prefix: 'menu'; user-select: none; max-height: inherit; height: inherit; + min-width: inherit; &.fixed { position: fixed; @@ -78,6 +81,7 @@ $_custom-property-prefix: 'menu'; max-height: inherit; display: block; overflow: auto; + min-width: inherit; } &.has-overflow md-list {