From e77d4726faacf3e7cde6f0d92be2fa7ee5e4611b Mon Sep 17 00:00:00 2001 From: Esteban Gonzalez Date: Wed, 7 Sep 2022 18:25:24 -0700 Subject: [PATCH] feat(autocomplete): Create MdAutocompleteList to unset min-width. PiperOrigin-RevId: 472863263 --- autocomplete/autocomplete-list.ts | 28 +++++++++++++++++++ autocomplete/filled-autocomplete.ts | 4 +-- autocomplete/lib/autocomplete.ts | 5 +--- .../autocompletelist/_autocomplete-list.scss | 13 +++++++++ .../autocomplete-list-styles.scss | 8 ++++++ .../lib/autocompletelist/autocomplete-list.ts | 22 +++++++++++++++ autocomplete/lib/autocompletelist/harness.ts | 12 ++++++++ list/lib/list.ts | 8 +++++- 8 files changed, 93 insertions(+), 7 deletions(-) create mode 100644 autocomplete/autocomplete-list.ts create mode 100644 autocomplete/lib/autocompletelist/_autocomplete-list.scss create mode 100644 autocomplete/lib/autocompletelist/autocomplete-list-styles.scss create mode 100644 autocomplete/lib/autocompletelist/autocomplete-list.ts create mode 100644 autocomplete/lib/autocompletelist/harness.ts diff --git a/autocomplete/autocomplete-list.ts b/autocomplete/autocomplete-list.ts new file mode 100644 index 0000000000..673ddc6e2c --- /dev/null +++ b/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]; +} diff --git a/autocomplete/filled-autocomplete.ts b/autocomplete/filled-autocomplete.ts index cd749f001e..7260cf2338 100644 --- a/autocomplete/filled-autocomplete.ts +++ b/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`; diff --git a/autocomplete/lib/autocomplete.ts b/autocomplete/lib/autocomplete.ts index bf301d0d46..c67e6165e4 100644 --- a/autocomplete/lib/autocomplete.ts +++ b/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"> `; diff --git a/autocomplete/lib/autocompletelist/_autocomplete-list.scss b/autocomplete/lib/autocompletelist/_autocomplete-list.scss new file mode 100644 index 0000000000..7e7fcb77bf --- /dev/null +++ b/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; + } +} diff --git a/autocomplete/lib/autocompletelist/autocomplete-list-styles.scss b/autocomplete/lib/autocompletelist/autocomplete-list-styles.scss new file mode 100644 index 0000000000..f9c8d248dd --- /dev/null +++ b/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; diff --git a/autocomplete/lib/autocompletelist/autocomplete-list.ts b/autocomplete/lib/autocompletelist/autocomplete-list.ts new file mode 100644 index 0000000000..9af7ec3051 --- /dev/null +++ b/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, + }; + } +} diff --git a/autocomplete/lib/autocompletelist/harness.ts b/autocomplete/lib/autocompletelist/harness.ts new file mode 100644 index 0000000000..4514699b40 --- /dev/null +++ b/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 {} diff --git a/list/lib/list.ts b/list/lib/list.ts index 6b77061928..7cdf88f582 100644 --- a/list/lib/list.ts +++ b/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` -