-
-
-
-
-
-
- ${knobs['start icon']}
-
-
- ${knobs['end icon']}
-
-
-
-
- ${knobs['link end icon']}
-
-
-
- 
-
-
-
-
- ${knobs['avatar label']}
-
-
-
-
- ![]()
-
-
-
-
-
-
-
+ Supporting text
+ ${getKnobContent(knobs)}
+
+
+ ${getKnobContent(knobs, /* threeLines */ true)}
+ Second line text
+ Third line text
+ ${knobs.overline}
` :
+ nothing;
+
+ const classes = {
+ 'align-start': threeLines,
+ };
+
+ const trailingText = knobs.trailingSupportingText ?
+ html`${
+ knobs.trailingSupportingText}
` :
+ nothing;
+
+ const leadingIcon = knobs.leadingIcon ?
+ html`- {
*/
protected override async getInteractiveElement() {
await this.element.updateComplete;
- return this.element.renderRoot.querySelector('.list') as HTMLElement;
+ return this.element as List;
}
/** @return List item harnesses. */
@@ -60,8 +60,7 @@ export class ListHarness extends Harness
- {
* @param key The key to dispatch on the list.
*/
override async keypress(key: string, init = {} as KeyboardEventInit) {
- const nativeList = this.element.renderRoot.querySelector('ul')!;
init = {code: key, ...init};
- this.simulateKeypress(nativeList, key, init);
+ await super.keypress(key, init);
}
}
diff --git a/list/internal/_list.scss b/list/internal/_list.scss
index cf931ae6f7..df92e2fdbf 100644
--- a/list/internal/_list.scss
+++ b/list/internal/_list.scss
@@ -6,7 +6,6 @@
// go/keep-sorted start
@use 'sass:list';
@use 'sass:map';
-@use 'sass:string';
// go/keep-sorted end
// go/keep-sorted start
@use '../../tokens';
@@ -29,23 +28,15 @@
@mixin styles() {
$tokens: tokens.md-comp-list-values();
+ @each $token, $value in $tokens {
+ $tokens: map.set($tokens, $token, var(--md-list-#{$token}, #{$value}));
+ }
:host {
- @each $token, $value in $tokens {
- --_#{$token}: var(--md-list-#{$token}, #{$value});
- }
-
+ background: map.get($tokens, 'container-color');
color: unset;
display: flex;
- }
-
- .list {
- background-color: var(--_container-color);
- border-radius: inherit;
- display: block;
- list-style-type: none;
- margin: 0;
- min-width: inherit;
+ flex-direction: column;
outline: none;
padding: 8px 0;
// Add position so the elevation overlay (which is absolutely positioned)
diff --git a/list/internal/list.ts b/list/internal/list.ts
index 745eb1cdb9..29215ab242 100644
--- a/list/internal/list.ts
+++ b/list/internal/list.ts
@@ -92,30 +92,13 @@ export class List extends LitElement {
}
protected override render() {
- return this.renderList();
- }
-
- /**
- * Renders the main list element.
- */
- private renderList() {
- return html`
-
-
- ${this.renderContent()}
-
- ${this.renderStart()}
+
+
+
`);
}
@@ -149,15 +136,29 @@ export class ListItemEl extends LitElement implements ListItem {
* @param content the child content of the list item.
*/
protected renderListItem(content: unknown) {
- const isAnchor = !!this.href;
- const tag = isAnchor ? literal`a` : literal`li`;
- const role = isAnchor || this.type === 'none' ? nothing : this.type;
+ const isAnchor = this.type === 'link';
+ let tag: StaticValue;
+ switch (this.type) {
+ case 'link':
+ tag = literal`a`;
+ break;
+ case 'button':
+ tag = literal`button`;
+ break;
+ default:
+ case 'text':
+ tag = literal`li`;
+ break;
+ }
+
+ // TODO(b/265339866): announce "button"/"link" inside of a list item. Until
+ // then all are "listitem" roles for correct announcement.
const target = isAnchor && !!this.target ? this.target : nothing;
return staticHtml`
<${tag}
id="item"
- tabindex="${this.disabled ? -1 : 0}"
- role=${role}
+ tabindex="${this.disabled && !isAnchor ? -1 : 0}"
+ role="listitem"
aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}
aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}
aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}
@@ -166,10 +167,6 @@ export class ListItemEl extends LitElement implements ListItem {
href=${this.href || nothing}
target=${target}
@focus=${this.onFocus}
- @click=${this.onClick}
- @mouseenter=${this.onMouseenter}
- @mouseleave=${this.onMouseleave}
- @keydown=${this.onKeydown}
>${content}
`;
}
@@ -178,6 +175,10 @@ export class ListItemEl extends LitElement implements ListItem {
* Handles rendering of the ripple element.
*/
protected renderRipple(): TemplateResult|typeof nothing {
+ if (this.type === 'text') {
+ return nothing;
+ }
+
return html`
+ ${this.renderRipple()}
+ ${this.renderFocusRing()}
+
+
-
`;
+ protected getRenderClasses(): ClassInfo {
+ // TODO(b/265339866): links may not be disabled
+ return {'disabled': this.disabled};
}
/**
* Handles rendering the headline and supporting text.
*/
protected renderBody() {
- const supportingText =
- this.supportingText !== '' ? this.renderSupportingText() : '';
-
- return html`${this.headline}${supportingText}
`;
- }
-
- /**
- * Renders the one-line supporting text.
- */
- protected renderSupportingText() {
- return html`${this.supportingText}`;
- }
-
- /**
- * Gets the classes for the supporting text node
- */
- protected getSupportingTextClasses() {
- return {'supporting-text--multi-line': this.multiLineSupportingText};
- }
-
- /**
- * The content rendered at the end of the list item.
- */
- protected renderEnd() {
- const supportingText = this.trailingSupportingText !== '' ?
- this.renderTrailingSupportingText() :
- '';
return html`
-
- ${supportingText}
-
`;
+