refactor(list,menu)!: add href to (list|menu)-item and remove (menu|l…

…ist)-item-link

BREAKING CHANGE: list-item-link and menu-item-link have been removed and their functionality has been added to menu-item and list-item respectively.

PiperOrigin-RevId: 553894393

all.ts

@@ -38,10 +38,8 @@ import './iconbutton/icon-button.js';
 import './iconbutton/outlined-icon-button.js';
 import './list/list.js';
 import './list/list-item.js';
-import './list/list-item-link.js';
 import './menu/menu.js';
 import './menu/menu-item.js';
-import './menu/menu-item-link.js';
 import './menu/sub-menu-item.js';
 import './progress/circular-progress.js';
 import './progress/linear-progress.js';
@@ -86,10 +84,8 @@ export * from './iconbutton/icon-button.js';
 export * from './iconbutton/outlined-icon-button.js';
 export * from './list/list.js';
 export * from './list/list-item.js';
-export * from './list/list-item-link.js';
 export * from './menu/menu.js';
 export * from './menu/menu-item.js';
-export * from './menu/menu-item-link.js';
 export * from './menu/sub-menu-item.js';
 export * from './progress/circular-progress.js';
 export * from './progress/linear-progress.js';

catalog/site/_includes/default.html

@@ -59,13 +59,13 @@
           <md-list listtabindex="-1">
             {% for component in collections.component|filtersort('data.name') %}
               <li>
-                <md-list-item-link
+                <md-list-item
                   href="{{ component.url }}"
                   headline="{{ component.data.name }}"
                   {% if component.url == page.url %}selected{% endif %}
                   data-role=""
                   itemtabindex="0"
-                ></md-list-item-link>
+                ></md-list-item>
               </li>
             {% endfor %}
           </md-list>

catalog/site/css/global.css

@@ -85,18 +85,18 @@ a:focus-visible {
   text-decoration: underline;
 }
 
-nav-drawer md-list-item-link[selected] {
+nav-drawer md-list-item[href][selected] {
   --md-list-item-list-item-container-color: var(
     --md-sys-color-surface-container-highest
   );
 }
 
 @media (forced-colors: active) {
-  nav-drawer md-list-item-link[selected] {
+  nav-drawer md-list-item[href][selected] {
     border: 4px double CanvasText;
   }
 
-  nav-drawer md-list-item-link {
+  nav-drawer md-list-item[href] {
     border-radius: var(--catalog-shape-xl);
     border: 1px solid CanvasText;
   }
@@ -110,12 +110,12 @@ md-list {
   min-width: unset;
 }
 
-md-list-item-link {
+md-list-item[href] {
   margin-block: var(--catalog-spacing-m);
   display: block;
 }
 
-md-list-item-link:first-of-type {
+md-list-item[href]:first-of-type {
   margin-block: 4px;
 }
 

catalog/src/hydration-entrypoints/navigation.ts

@@ -6,4 +6,4 @@
 
 import '../components/nav-drawer.js';
 import '../components/top-app-bar.js';
-import '@material/web/list/list-item-link.js';
+import '@material/web/list/list-item.js';

catalog/src/ssr.ts

@@ -14,7 +14,7 @@ import './components/theme-changer.js';
 import '@material/web/menu/menu.js';
 import '@material/web/checkbox/checkbox.js';
 import '@material/web/list/list.js';
-import '@material/web/list/list-item-link.js';
+import '@material/web/list/list-item.js';
 import '@material/web/progress/circular-progress.js';
 import '@material/web/tabs/tabs.js';
 import '@material/web/tabs/tab.js';

common.ts

@@ -26,10 +26,8 @@ import './icon/icon.js';
 import './iconbutton/icon-button.js';
 import './list/list.js';
 import './list/list-item.js';
-import './list/list-item-link.js';
 import './menu/menu.js';
 import './menu/menu-item.js';
-import './menu/menu-item-link.js';
 import './menu/sub-menu-item.js';
 import './progress/circular-progress.js';
 import './progress/linear-progress.js';
@@ -55,10 +53,8 @@ export * from './icon/icon.js';
 export * from './iconbutton/icon-button.js';
 export * from './list/list.js';
 export * from './list/list-item.js';
-export * from './list/list-item-link.js';
 export * from './menu/menu.js';
 export * from './menu/menu-item.js';
-export * from './menu/menu-item-link.js';
 export * from './menu/sub-menu-item.js';
 export * from './progress/circular-progress.js';
 export * from './progress/linear-progress.js';

list/demo/demo.ts

@@ -48,17 +48,14 @@ const collection =
       new Knob('supportingText', {ui: textInput(), defaultValue: ''}),
       new Knob('trailingSupportingText', {ui: textInput(), defaultValue: ''}),
       new Knob('itemTabIndex', {ui: numberInput(), defaultValue: 0}),
+      new Knob('href', {ui: textInput(), defaultValue: 'https://google.com'}),
+      new Knob('target', {ui: textInput(), defaultValue: '_blank'}),
+      new Knob('link end icon', {ui: textInput(), defaultValue: 'open_in_new'}),
 
       new Knob('data-variant=icon', {ui: title()}),
       new Knob('start icon', {ui: textInput(), defaultValue: 'account_circle'}),
       new Knob('end icon', {ui: textInput(), defaultValue: 'check_circle'}),
 
-
-      new Knob('data-variant=link', {ui: title()}),
-      new Knob('href', {ui: textInput(), defaultValue: 'https://google.com'}),
-      new Knob('target', {ui: textInput(), defaultValue: '_blank'}),
-      new Knob('link end icon', {ui: textInput(), defaultValue: 'open_in_new'}),
-
       new Knob('data-variant=avatar', {ui: title()}),
       new Knob('avatar img', {ui: textInput(), defaultValue: AVATAR_URL}),
       new Knob('avatar label', {ui: textInput(), defaultValue: 'EM'}),

list/demo/stories.ts

@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/list/list-item-link.js';
 import '@material/web/list/list-item.js';
 import '@material/web/divider/divider.js';
 import '@material/web/list/list.js';
@@ -110,7 +109,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
             </md-icon>
           </md-list-item>
 
-          <md-list-item-link
+          <md-list-item
               .headline=${headline}
               .supportingText=${supportingText}
               .multiLineSupportingText=${multiLineSupportingText}
@@ -119,11 +118,11 @@ const standard: MaterialStoryInit<StoryKnobs> = {
               .noninteractive=${noninteractive}
               .itemTabIndex=${itemTabIndex}
               .href=${href}
-              .target=${target}
+              .target=${target as '' | '_blank' | '_parent' | '_self' | '_top'}
               .active=${active}>
             <md-icon data-variant="icon" slot="end">${
         knobs['link end icon']}</md-icon>
-          </md-list-item-link>
+          </md-list-item>
 
           <md-divider></md-divider>
 

list/internal/listitem/list-item.ts

@@ -10,6 +10,7 @@ import '../../../focus/md-focus-ring.js';
 import {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';
 import {property, query} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
+import {html as staticHtml, literal} from 'lit/static-html.js';
 
 import {ARIAMixinStrict} from '../../../internal/aria/aria.js';
 import {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';
@@ -82,17 +83,29 @@ export class ListItemEl extends LitElement implements ListItem {
   @property({type: Boolean, reflect: true}) active = false;
 
   /**
-   * Sets the role of the list item. Set to '' to clear the role.
+   * Sets the role of the list item. Set to 'nothing' to clear the role. This
+   * property will be ignored if `href` is set since the underlying element will
+   * be a native anchor tag.
    */
-  @property()
-  type: ListItemRole = 'listitem';
+  @property() type: ListItemRole = 'listitem';
 
   /**
    * READONLY. Sets the `md-list-item` attribute on the element.
    */
   @property({type: Boolean, attribute: 'md-list-item', reflect: true})
   isListItem = true;
 
+  /**
+   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
+   */
+  @property() href = '';
+
+  /**
+   * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is
+   * set.
+   */
+  @property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';
+
   @query('.list-item') protected readonly listItemRoot!: HTMLElement|null;
 
   /**
@@ -134,19 +147,25 @@ export class ListItemEl extends LitElement implements ListItem {
    * @param content the child content of the list item.
    */
   protected renderListItem(content: unknown) {
-    return html`
-      <li
+    const isAnchor = !!this.href;
+    const tag = isAnchor ? literal`a` : literal`li`;
+    const role = isAnchor || this.type === 'none' ? nothing : this.type;
+    const target = isAnchor && !!this.target ? this.target : nothing;
+    return staticHtml`
+      <${tag}
         id="item"
         tabindex=${this.disabled ? -1 : this.itemTabIndex}
-        role=${this.type === 'none' ? nothing : this.type}
+        role=${role}
         aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}
         aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}
         class="list-item ${classMap(this.getRenderClasses())}"
+        href=${this.href || nothing}
+        target=${target}
         @click=${this.onClick}
         @pointerenter=${this.onPointerenter}
         @pointerleave=${this.onPointerleave}
         @keydown=${this.onKeydown}
-      >${content}</li>
+      >${content}</${tag}>
     `;
   }