feat(listitem): add noninteractive to list item

PiperOrigin-RevId: 532595788

Author: Elliott Marquez

list/demo/demo.ts

@@ -40,6 +40,7 @@ const collection =
 
       new Knob('md-list-item', {ui: title()}),
       new Knob('disabled', {ui: boolInput(), defaultValue: false}),
+      new Knob('noninteractive', {ui: boolInput(), defaultValue: false}),
       new Knob('active', {ui: boolInput(), defaultValue: false}),
       new Knob(
           'multiLineSupportingText', {ui: boolInput(), defaultValue: false}),

list/demo/stories.ts

@@ -19,6 +19,7 @@ export interface StoryKnobs {
 
   'md-list-item': void;
   disabled: boolean;
+  noninteractive: boolean;
   active: boolean;
   multiLineSupportingText: boolean;
   headline: string;
@@ -65,6 +66,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
     const {
       listTabIndex,
       disabled,
+      noninteractive,
       active,
       multiLineSupportingText,
       headline,
@@ -86,6 +88,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
               .multiLineSupportingText=${multiLineSupportingText}
               .trailingSupportingText=${trailingSupportingText}
               .disabled=${disabled}
+              .noninteractive=${noninteractive}
               .itemTabIndex=${itemTabIndex}
               .active=${active}>
           </md-list-item>
@@ -96,6 +99,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
               .multiLineSupportingText=${multiLineSupportingText}
               .trailingSupportingText=${trailingSupportingText}
               .disabled=${disabled}
+              .noninteractive=${noninteractive}
               .itemTabIndex=${itemTabIndex}
               .active=${active}>
             <md-icon data-variant="icon" slot="start">
@@ -112,6 +116,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
               .multiLineSupportingText=${multiLineSupportingText}
               .trailingSupportingText=${trailingSupportingText}
               .disabled=${disabled}
+              .noninteractive=${noninteractive}
               .itemTabIndex=${itemTabIndex}
               .href=${href}
               .target=${target}
@@ -128,6 +133,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
               .multiLineSupportingText=${multiLineSupportingText}
               .trailingSupportingText=${trailingSupportingText}
               .disabled=${disabled}
+              .noninteractive=${noninteractive}
               .itemTabIndex=${itemTabIndex}
               .active=${active}>
             <img src=${knobs['avatar img']} slot="start" data-variant="avatar">
@@ -139,6 +145,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
               .multiLineSupportingText=${multiLineSupportingText}
               .trailingSupportingText=${trailingSupportingText}
               .disabled=${disabled}
+              .noninteractive=${noninteractive}
               .itemTabIndex=${itemTabIndex}
               .active=${active}>
             <span slot="start" data-variant="avatar">
@@ -152,6 +159,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
               .multiLineSupportingText=${multiLineSupportingText}
               .trailingSupportingText=${trailingSupportingText}
               .disabled=${disabled}
+              .noninteractive=${noninteractive}
               .itemTabIndex=${itemTabIndex}
               .active=${active}>
             <img .src=${image} data-variant="image" slot="start">
@@ -163,6 +171,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
               .multiLineSupportingText=${multiLineSupportingText}
               .trailingSupportingText=${trailingSupportingText}
               .disabled=${disabled}
+              .noninteractive=${noninteractive}
               .itemTabIndex=${itemTabIndex}
               .active=${active}>
             <video

list/lib/listitem/_list-item.scss

@@ -76,7 +76,7 @@
     // hide android tap color since we have ripple
     -webkit-tap-highlight-color: transparent;
 
-    &:not(.disabled) {
+    &:not(.disabled):not(.noninteractive) {
       cursor: pointer;
     }
 

list/lib/listitem/list-item-only.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {nothing} from 'lit';
+import {property} from 'lit/decorators.js';
+
+import {ListItemEl} from './list-item.js';
+
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
+export class ListItemOnly extends ListItemEl {
+  /**
+   * Removes the hover and click ripples from the item when true.
+   */
+  @property() noninteractive = false;
+
+  override getRenderClasses() {
+    return {
+      ...super.getRenderClasses(),
+      'noninteractive': this.noninteractive,
+    };
+  }
+
+  override renderRipple() {
+    return this.noninteractive ? nothing : super.renderRipple();
+  }
+}

list/lib/listitem/list-item.ts

@@ -100,7 +100,7 @@ export class ListItemEl extends LitElement implements ListItem {
     return this.ripple;
   };
 
-  private isFirstUpdate = true;
+  protected isFirstUpdate = true;
 
   protected override willUpdate(changed: PropertyValues<this>) {
     if (changed.has('active') && !this.disabled) {
@@ -149,7 +149,7 @@ export class ListItemEl extends LitElement implements ListItem {
   /**
    * Handles rendering of the ripple element.
    */
-  private renderRipple() {
+  protected renderRipple() {
     return this.showRipple ?
         html`<md-ripple ?disabled="${this.disabled}"></md-ripple>` :
         nothing;
@@ -158,7 +158,7 @@ export class ListItemEl extends LitElement implements ListItem {
   /**
    * Handles rendering of the focus ring.
    */
-  private renderFocusRing() {
+  protected renderFocusRing() {
     return html`<md-focus-ring class="focus-ring" for="item"></md-focus-ring>`;
   }
 
@@ -179,14 +179,14 @@ export class ListItemEl extends LitElement implements ListItem {
   /**
    * The content rendered at the start of the list item.
    */
-  private renderStart() {
+  protected renderStart() {
     return html`<div class="start"><slot name="start"></slot></div>`;
   }
 
   /**
    * Handles rendering the headline and supporting text.
    */
-  private renderBody() {
+  protected renderBody() {
     const supportingText =
         this.supportingText !== '' ? this.renderSupportingText() : '';
 
@@ -197,7 +197,7 @@ export class ListItemEl extends LitElement implements ListItem {
   /**
    * Renders the one-line supporting text.
    */
-  private renderSupportingText() {
+  protected renderSupportingText() {
     return html`<span
         class="supporting-text ${classMap(this.getSupportingTextClasses())}"
       >${this.supportingText}</span>`;
@@ -206,7 +206,7 @@ export class ListItemEl extends LitElement implements ListItem {
   /**
    * Gets the classes for the supporting text node
    */
-  private getSupportingTextClasses() {
+  protected getSupportingTextClasses() {
     return {'supporting-text--multi-line': this.multiLineSupportingText};
   }
 
@@ -224,7 +224,7 @@ export class ListItemEl extends LitElement implements ListItem {
   /**
    * Renders the supporting text at the end of the list item.
    */
-  private renderTrailingSupportingText() {
+  protected renderTrailingSupportingText() {
     return html`<span class="trailing-supporting-text"
       >${this.trailingSupportingText}</span>`;
   }

list/lib/listitemlink/list-item-link-only.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {nothing} from 'lit';
+import {property} from 'lit/decorators.js';
+
+import {ListItemLink} from './list-item-link.js';
+
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
+export class ListItemLinkOnly extends ListItemLink {
+  /**
+   * Removes the hover and click ripples from the item when true. Clicking the
+   * link will still cause link navigation.
+   */
+  @property() noninteractive = false;
+
+  override getRenderClasses() {
+    return {
+      ...super.getRenderClasses(),
+      'noninteractive': this.noninteractive,
+    };
+  }
+
+  override renderRipple() {
+    return this.noninteractive ? nothing : super.renderRipple();
+  }
+}

list/list-item-link.ts

@@ -8,7 +8,7 @@ import {customElement} from 'lit/decorators.js';
 
 import {styles as forcedColors} from './lib/listitem/forced-colors-styles.css.js';
 import {styles} from './lib/listitem/list-item-styles.css.js';
-import {ListItemLink} from './lib/listitemlink/list-item-link.js';
+import {ListItemLinkOnly as ListItemLink} from './lib/listitemlink/list-item-link-only.js';
 
 declare global {
   interface HTMLElementTagNameMap {

list/list-item.ts

@@ -7,7 +7,7 @@
 import {customElement} from 'lit/decorators.js';
 
 import {styles as forcedColors} from './lib/listitem/forced-colors-styles.css.js';
-import {ListItemEl as ListItem} from './lib/listitem/list-item.js';
+import {ListItemOnly as ListItem} from './lib/listitem/list-item-only.js';
 import {styles} from './lib/listitem/list-item-styles.css.js';
 
 declare global {