feat(autocomplete): Create MdAutocompleteSurface to adjust width

PiperOrigin-RevId: 477450294
material-components · Sep 28, 2022 · cc4603e · cc4603e
1 parent e65ebd8
commit cc4603e
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 13 deletions.
diff --git a/autocomplete/autocomplete-surface.ts b/autocomplete/autocomplete-surface.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 '../menusurface/lib/menu-surface-styles.css.js';
+
+import {AutocompleteSurface} from './lib/autocompletesurface/autocomplete-surface.js';
+import {styles as autocompleteStyles} from './lib/autocompletesurface/autocomplete-surface-styles.css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-autocomplete-surface': MdAutocompleteSurface;
+  }
+}
+
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-autocomplete-surface')
+export class MdAutocompleteSurface extends AutocompleteSurface {
+  static override styles = [styles, autocompleteStyles];
+}
diff --git a/autocomplete/filled-autocomplete.ts b/autocomplete/filled-autocomplete.ts
@@ -5,7 +5,7 @@
  */
 
 import '@material/web/autocomplete/autocomplete-list.js';
-import '@material/web/menu-surface/menu-surface.js';
+import '@material/web/autocomplete/autocomplete-surface.js';
 import '@material/web/field/filled-field.js';
 
 import {customElement} from 'lit/decorators.js';
@@ -37,7 +37,7 @@ export class MdFilledAutocomplete extends Autocomplete {
   ];
 
   protected override readonly listTag = literal`md-autocomplete-list`;
-  protected override readonly menuSurfaceTag = literal`md-menu-surface`;
+  protected override readonly menuSurfaceTag = literal`md-autocomplete-surface`;
   protected override readonly fieldTag = literal`md-filled-field`;
 
   /** @soyTemplate */

diff --git a/autocomplete/lib/autocomplete.ts b/autocomplete/lib/autocomplete.ts
@@ -78,10 +78,7 @@ export abstract class Autocomplete extends TextField {
   /** @soyTemplate */
   protected renderMenuSurface(): TemplateResult {
     return staticHtml`<${this.menuSurfaceTag}
-      class="md3-autocomplete__menu-surface"
-      .corner="BOTTOM_START"
-      ?stayOpenOnBodyClick=${true}
-    >
+      class="md3-autocomplete__menu-surface">
       <${this.listTag} class="md3-autocomplete__list">
         <slot></slot>
       </${this.listTag}>

diff --git a/autocomplete/lib/autocompletesurface/_autocomplete-surface.scss b/autocomplete/lib/autocompletesurface/_autocomplete-surface.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-surface {
+    width: 100%;
+  }
+}
diff --git a/autocomplete/lib/autocompletesurface/autocomplete-surface-styles.scss b/autocomplete/lib/autocompletesurface/autocomplete-surface-styles.scss
@@ -0,0 +1,8 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './autocomplete-surface';
+
+@include autocomplete-surface.static-styles;
diff --git a/autocomplete/lib/autocompletesurface/autocomplete-surface.ts b/autocomplete/lib/autocompletesurface/autocomplete-surface.ts
@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {MenuSurface} from '@material/web/menu-surface/lib/menu-surface.js';
+import {ClassInfo} from 'lit/directives/class-map.js';
+
+/** Base class for autocomplete surface component. */
+export class AutocompleteSurface extends MenuSurface {
+  override stayOpenOnBodyClick = true;
+
+  /** @soyTemplate */
+  protected override getRenderClasses(): ClassInfo {
+    return {
+      ...super.getRenderClasses(),
+      'md3-autocomplete-surface': true,
+    };
+  }
+}
diff --git a/menusurface/lib/menu-surface.ts b/menusurface/lib/menu-surface.ts
@@ -13,7 +13,7 @@ import {deepActiveElementPath, doesElementContainFocus} from '@material/web/comp
 import {isRtl} from '@material/web/controller/is-rtl.js';
 import {html, LitElement} from 'lit';
 import {property, query, state} from 'lit/decorators.js';
-import {classMap} from 'lit/directives/class-map.js';
+import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 import {styleMap} from 'lit/directives/style-map.js';
 
 import {MDCMenuSurfaceAdapter} from './adapter.js';
@@ -165,11 +165,6 @@ export abstract class MenuSurface extends LitElement {
   protected onBodyClickBound: (evt: MouseEvent) => void = () => undefined;
 
   override render() {
-    const classes = {
-      'md3-menu-surface--fixed': this.fixed,
-      'md3-menu-surface--fullwidth': this.fullwidth,
-    };
-
     const styles = {
       'top': this.styleTop,
       'left': this.styleLeft,
@@ -181,7 +176,7 @@ export abstract class MenuSurface extends LitElement {
 
     return html`
       <div
-          class="md3-menu-surface ${classMap(classes)}"
+          class="md3-menu-surface ${classMap(this.getRenderClasses())}"
           style="${styleMap(styles)}"
           @keydown=${this.onKeydown}
           @opened=${this.registerBodyClick}
@@ -190,6 +185,14 @@ export abstract class MenuSurface extends LitElement {
       </div>`;
   }
 
+  /** @soyTemplate */
+  protected getRenderClasses(): ClassInfo {
+    return {
+      'md3-menu-surface--fixed': this.fixed,
+      'md3-menu-surface--fullwidth': this.fullwidth,
+    };
+  }
+
   protected override firstUpdated() {
     if (this.mdcFoundation !== undefined) {
       this.mdcFoundation.destroy();