diff --git a/docs/components/figures/list/theming-avatar.html b/docs/components/figures/list/theming-avatar.html index bb9672aa509..d3829ce8e56 100644 --- a/docs/components/figures/list/theming-avatar.html +++ b/docs/components/figures/list/theming-avatar.html @@ -17,13 +17,13 @@ - EM + EM - LM + LM - AJ + AJ diff --git a/docs/components/figures/list/theming-icon.html b/docs/components/figures/list/theming-icon.html index bf173a2a4b3..13b9588c075 100644 --- a/docs/components/figures/list/theming-icon.html +++ b/docs/components/figures/list/theming-icon.html @@ -18,16 +18,16 @@ - egg - recommend + egg + recommend - icecream - dangerous + icecream + dangerous - nutrition - recommend + nutrition + recommend diff --git a/docs/components/figures/list/theming-image.html b/docs/components/figures/list/theming-image.html index f674c1b92b0..14b07229b25 100644 --- a/docs/components/figures/list/theming-image.html +++ b/docs/components/figures/list/theming-image.html @@ -15,13 +15,13 @@ - + - + - + diff --git a/docs/components/figures/list/theming-video.html b/docs/components/figures/list/theming-video.html index 827488c8606..25ed7554d9a 100644 --- a/docs/components/figures/list/theming-video.html +++ b/docs/components/figures/list/theming-video.html @@ -16,8 +16,7 @@ ``` ## Icon Items -Icons can be slotted into list-items' `start` slot using the -`data-variant="icon"` attribute. +Icons can be slotted into list-items' `start-icon` or `end-icon` slot. @@ -109,18 +108,18 @@ Angular.](images/list/usage-icon.webp) ```html - + - polymer + polymer - + @@ -130,8 +129,7 @@ Angular.](images/list/usage-icon.webp) ## Avatar Items -Image or text avatars can be slotted into list-items' `start` slot using the -`data-variant="avatar"` attribute. +Image or text avatars can be slotted into list-items' `start-avatar` slot. @@ -145,19 +143,18 @@ item has a circular image of a person silhouette](images/list/usage-avatar.webp) ```html - EM + EM - + ``` ## Image Items -Images can be slotted into list-items' `start` slot using the -`data-variant="image"` attribute. +Images can be slotted into list-items' `start-image` slot. @@ -172,23 +169,23 @@ Cate.](images/list/usage-image.webp) ```html - + - + - + ``` ## Video Items -Videos can also be slotted into list-items' `start` slot using the -`data-variant="video"` attribute. +Videos can also be slotted into list-items' `start-video"` or +`start-video-large` slots. @@ -201,8 +198,7 @@ Videos can also be slotted into list-items' `start` slot using the = { .disabled=${disabled} .noninteractive=${noninteractive}> diff --git a/list/internal/listitem/_list-item.scss b/list/internal/listitem/_list-item.scss index 50f3ba47c94..dd74a402982 100644 --- a/list/internal/listitem/_list-item.scss +++ b/list/internal/listitem/_list-item.scss @@ -126,12 +126,13 @@ } } - slot[name='start'] { - &::slotted([data-variant='icon']), - &::slotted([data-variant='image']), - &::slotted([data-variant='avatar']) { - margin-inline-start: var(--_leading-element-leading-space); - } + slot[name='start']::slotted([data-variant='icon']), + slot[name='start']::slotted([data-variant='image']), + slot[name='start']::slotted([data-variant='avatar']), + slot[name='start-icon']::slotted(*), + slot[name='start-image']::slotted(*), + slot[name='start-avatar']::slotted(*) { + margin-inline-start: var(--_leading-element-leading-space); } .body { @@ -158,6 +159,7 @@ } slot[name='end']::slotted(*), + slot[name='end-icon']::slotted(*), .trailing-supporting-text { margin-inline-start: var( --_trailing-element-headline-trailing-element-space @@ -254,7 +256,8 @@ } @mixin _image() { - ::slotted([data-variant='image']) { + ::slotted([data-variant='image']), + slot[name='start-image']::slotted(*) { display: inline-flex; height: var(--_leading-image-height); width: var(--_leading-image-width); @@ -275,7 +278,8 @@ fill: currentColor; } - slot[name='start']::slotted([data-variant='icon']) { + slot[name='start']::slotted([data-variant='icon']), + slot[name='start-icon']::slotted(*) { font-size: var(--_leading-icon-size); width: var(--_leading-icon-size); height: var(--_leading-icon-size); @@ -289,7 +293,8 @@ } } - slot[name='end']::slotted([data-variant='icon']) { + slot[name='end']::slotted([data-variant='icon']), + slot[name='end-icon']::slotted(*) { font-size: var(--_trailing-icon-size); width: var(--_trailing-icon-size); height: var(--_trailing-icon-size); @@ -304,42 +309,50 @@ } :hover { - slot[name='start']::slotted([data-variant='icon']) { + slot[name='start']::slotted([data-variant='icon']), + slot[name='start-icon']::slotted(*) { color: var(--_hover-leading-icon-icon-color); } - slot[name='end']::slotted([data-variant='icon']) { + slot[name='end']::slotted([data-variant='icon']), + slot[name='end-icon']::slotted(*) { color: var(--_hover-trailing-icon-icon-color); } } :focus { - slot[name='start']::slotted([data-variant='icon']) { + slot[name='start']::slotted([data-variant='icon']), + slot[name='start-icon']::slotted(*) { color: var(--_focus-leading-icon-icon-color); } - slot[name='end']::slotted([data-variant='icon']) { + slot[name='end']::slotted([data-variant='icon']), + slot[name='end-icon']::slotted(*) { color: var(--_focus-trailing-icon-icon-color); } } :active { - slot[name='start']::slotted([data-variant='icon']) { + slot[name='start']::slotted([data-variant='icon']), + slot[name='start-icon']::slotted(*) { color: var(--_pressed-leading-icon-icon-color); } - slot[name='end']::slotted([data-variant='icon']) { + slot[name='end']::slotted([data-variant='icon']), + slot[name='end-icon']::slotted(*) { color: var(--_pressed-trailing-icon-icon-color); } } .disabled { - slot[name='start']::slotted([data-variant='icon']) { + slot[name='start']::slotted([data-variant='icon']), + slot[name='start-icon']::slotted(*) { opacity: var(--_disabled-leading-icon-opacity); color: var(--_disabled-leading-icon-color); } - slot[name='end']::slotted([data-variant='icon']) { + slot[name='end']::slotted([data-variant='icon']), + slot[name='end-icon']::slotted(*) { opacity: var(--_disabled-trailing-icon-opacity); color: var(--_disabled-trailing-icon-color); } @@ -347,7 +360,8 @@ } @mixin _avatar() { - ::slotted([data-variant='avatar']) { + ::slotted([data-variant='avatar']), + slot[name='start-avatar']::slotted(*) { display: inline-flex; justify-content: center; align-items: center; @@ -365,7 +379,9 @@ @mixin _video() { ::slotted([data-variant='video']), - ::slotted([data-variant='video-large']) { + ::slotted([data-variant='video-large']), + slot[name='start-video']::slotted(*), + slot[name='start-video-large']::slotted(*) { display: inline-flex; object-fit: cover; height: var(--_small-leading-video-height); @@ -385,7 +401,8 @@ } } - ::slotted([data-variant='video-large']) { + ::slotted([data-variant='video-large']), + slot[name='start-video-large']::slotted(*) { // Min height is three-line height margin-block: calc( (var(--_three-line-container-height) - var(--_large-leading-video-height)) / diff --git a/list/internal/listitem/list-item.ts b/list/internal/listitem/list-item.ts index 946a1b8d40b..2ceebfabeed 100644 --- a/list/internal/listitem/list-item.ts +++ b/list/internal/listitem/list-item.ts @@ -185,7 +185,15 @@ export class ListItemEl extends LitElement implements ListItem { * The content rendered at the start of the list item. */ protected renderStart() { - return html`
`; + return html` +
+ + + + + + +
`; } /** @@ -222,8 +230,12 @@ export class ListItemEl extends LitElement implements ListItem { const supportingText = this.trailingSupportingText !== '' ? this.renderTrailingSupportingText() : ''; - return html`
${supportingText}
`; + return html` +
+ ${supportingText} + + +
`; } /** diff --git a/list/list-item.ts b/list/list-item.ts index 61b26a226e8..a25dd6e139e 100644 --- a/list/list-item.ts +++ b/list/list-item.ts @@ -36,20 +36,26 @@ declare global { * item in a collection and act on it. * - Lists should present icons, text, and actions in a consistent format. * - * Acceptable slottable child variants are: + * Acceptable slot child variants are: * - * - `video[data-variant=video]` - * - `img,span[data-variant=avatar]` - * - `img[data-variant=image]` - * - `md-icon[data-variant=icon]` + * - `video[slot=start-video]` + * - `video[slot=start-video-large]` + * - `img,span[slot=start-avatar]` + * - `img[slot=start-image]` + * - `md-icon[slot=start-icon]` + * - `svg[slot=start-icon]` + * - `img[slot=start-icon]` + * - `md-icon[slot=end-icon]` + * - `svg[slot=end-icon]` + * - `img[slot=end-icon]` * * @example * ```html * - * account_circle - * check + * account_circle + * check * * ``` * diff --git a/menu/demo/stories.ts b/menu/demo/stories.ts index d73ecd3639c..9ec801b917a 100644 --- a/menu/demo/stories.ts +++ b/menu/demo/stories.ts @@ -156,7 +156,7 @@ const linkable: MaterialStoryInit = { .target=${ knobs.target as '' | '_blank' | '_parent' | '_self' | '_top'} .href=${knobs.href}> - + ${knobs['link icon']} @@ -246,7 +246,7 @@ const submenu: MaterialStoryInit = { .typeaheadDelay=${knobs.typeaheadDelay}> ${layer2} - + ${knobs['submenu icon']} `; @@ -288,7 +288,7 @@ const submenu: MaterialStoryInit = { .typeaheadDelay=${knobs.typeaheadDelay}> ${layer1} - + ${knobs['submenu icon']} `;