feat(autocomplete): Create MdAutocompleteList to unset min-width.

PiperOrigin-RevId: 472863263

autocomplete/autocomplete-list.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators.js';
+
+import {styles} from '../list/lib/list-styles.css.js';
+
+import {AutocompleteList} from './lib/autocompletelist/autocomplete-list.js';
+import {styles as autocompleteStyles} from './lib/autocompletelist/autocomplete-list-styles.css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-autocomplete-list': MdAutocompleteList;
+  }
+}
+
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-autocomplete-list')
+export class MdAutocompleteList extends AutocompleteList {
+  static override styles = [styles, autocompleteStyles];
+}

autocomplete/filled-autocomplete.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/list/list.js';
+import '@material/web/autocomplete/autocomplete-list.js';
 import '@material/web/menu-surface/menu-surface.js';
 import '@material/web/field/filled-field.js';
 
@@ -36,7 +36,7 @@ export class MdFilledAutocomplete extends Autocomplete {
     sharedStyles, filledStyles, filledForcedColorsStyles, autocompleteStyles
   ];
 
-  protected override readonly listTag = literal`md-list`;
+  protected override readonly listTag = literal`md-autocomplete-list`;
   protected override readonly menuSurfaceTag = literal`md-menu-surface`;
   protected override readonly fieldTag = literal`md-filled-field`;
 

autocomplete/lib/autocomplete.ts

@@ -81,10 +81,7 @@ export abstract class Autocomplete extends TextField {
       .corner="BOTTOM_START"
       ?stayOpenOnBodyClick=${true}
     >
-      <${this.listTag}
-        class="md3-autocomplete__list"
-        listId=${this.listId}
-        role="listbox">
+      <${this.listTag} class="md3-autocomplete__list">
         <slot></slot>
       </${this.listTag}>
     </${this.menuSurfaceTag}>`;

autocomplete/lib/autocompletelist/_autocomplete-list.scss

@@ -0,0 +1,13 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@mixin static-styles() {
+  .md3-autocomplete-list {
+    min-width: unset;
+  }
+}

autocomplete/lib/autocompletelist/autocomplete-list-styles.scss

@@ -0,0 +1,8 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './autocomplete-list';
+
+@include autocomplete-list.static-styles;

autocomplete/lib/autocompletelist/autocomplete-list.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {List} from '@material/web/list/lib/list.js';
+import {ARIARole} from '@material/web/types/aria.js';
+import {ClassInfo} from 'lit/directives/class-map.js';
+
+/** Base class for autocomplete list component. */
+export class AutocompleteList extends List {
+  override role: ARIARole = 'listbox';
+
+  /** @soyTemplate */
+  protected override getRenderClasses(): ClassInfo {
+    return {
+      ...super.getRenderClasses(),
+      'md3-autocomplete-list': true,
+    };
+  }
+}

autocomplete/lib/autocompletelist/harness.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ListHarness} from '@material/web/list/harness.js';
+
+/**
+ * Test harness for autocomplete list.
+ */
+export class AutocompleteListHarness extends ListHarness {}

list/lib/list.ts

@@ -8,6 +8,7 @@ import {ariaProperty} from '@material/web/decorators/aria-property.js';
 import {ARIARole} from '@material/web/types/aria.js';
 import {html, LitElement, PropertyValues, TemplateResult} from 'lit';
 import {property, query, queryAssignedElements} from 'lit/decorators.js';
+import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 
 import {ListItem} from './listitem/list-item.js';
@@ -60,7 +61,7 @@ export class List extends LitElement {
   /** @soyTemplate */
   override render(): TemplateResult {
     return html`
-      <ul class="md3-list"
+      <ul class="md3-list ${classMap(this.getRenderClasses())}"
           aria-label="${ifDefined(this.ariaLabel)}"
           id=${ifDefined(this.listId || undefined)}
           tabindex=${this.listTabIndex}
@@ -74,6 +75,11 @@ export class List extends LitElement {
     `;
   }
 
+  /** @soyTemplate */
+  protected getRenderClasses(): ClassInfo {
+    return {};
+  }
+
   handleKeydown(event: KeyboardEvent) {
     if (Object.values(NAVIGATABLE_KEYS).indexOf(event.key) === -1) return;