From 5e4434bfed93db4ea0b02f3987483860ed7b2411 Mon Sep 17 00:00:00 2001 From: Elliott Marquez Date: Sat, 23 Sep 2023 11:14:03 -0700 Subject: [PATCH] fix(select): update select docs and fix initial selection PiperOrigin-RevId: 567884899 --- .../figures/select/theming-filled.html | 13 ++-- .../figures/select/theming-outlined.html | 12 +++- docs/components/figures/select/usage.html | 20 ++++-- docs/components/select.md | 62 ++++++++++++------- menu/internal/menuitem/menu-item.ts | 1 + select/internal/select.ts | 12 +++- select/internal/selectoption/select-option.ts | 2 + .../selectoption/selectOptionController.ts | 2 +- 8 files changed, 86 insertions(+), 38 deletions(-) diff --git a/docs/components/figures/select/theming-filled.html b/docs/components/figures/select/theming-filled.html index bbe466e00c..07c16aaf30 100644 --- a/docs/components/figures/select/theming-filled.html +++ b/docs/components/figures/select/theming-filled.html @@ -8,18 +8,21 @@ .styled-example.filled { --md-filled-select-text-field-container-shape: 0px; --md-filled-select-text-field-container-color: #f7faf9; - --md-filled-field-content-color: #005353; - --md-filled-field-content-font: system-ui; + --md-filled-select-text-field-input-text-color: #005353; + --md-filled-select-text-field-input-text-font: system-ui; } .styled-example.filled md-filled-select::part(menu) { --md-menu-container-color: #f4fbfa; --md-menu-container-shape: 0px; - --md-menu-item-container-color: transparent; } - - + +
Apple
+ + +
Tomato
+ diff --git a/docs/components/figures/select/theming-outlined.html b/docs/components/figures/select/theming-outlined.html index 6bf94f8e03..a4125aad66 100644 --- a/docs/components/figures/select/theming-outlined.html +++ b/docs/components/figures/select/theming-outlined.html @@ -5,6 +5,9 @@ aria-label="Image of an outlined select with a different theme applied" > - - + +
Apple
+ + +
Tomato
+ diff --git a/docs/components/figures/select/usage.html b/docs/components/figures/select/usage.html index 779ce21f13..5c284b7a25 100644 --- a/docs/components/figures/select/usage.html +++ b/docs/components/figures/select/usage.html @@ -13,15 +13,23 @@ aria-label="An outlined dropdown menu filled with Apple, and a filled dropdown menu." > - - - + + +
Apple
+ + +
Apricot
+ - - - + + +
Apple
+ + +
Apricot
+ diff --git a/docs/components/select.md b/docs/components/select.md index 3b46073cf7..63d4a568dd 100644 --- a/docs/components/select.md +++ b/docs/components/select.md @@ -57,15 +57,23 @@ fixed list of available options. It is analogous to the native HTML ```html - - - + + +
Apple
+ + +
Apricot
+ - - - + + +
Apple
+ + +
Apricot
+ ``` @@ -75,8 +83,12 @@ Indicate that a selection is mandatory by adding the `required` attribute. ```html - - + +
One
+ + +
Two
+ ``` @@ -101,12 +113,12 @@ and can be customized in terms of color, typography, and shape. ### Filled Select tokens -Token | Default value ------------------------------------------------ | ------------- -`--md-filled-select-text-field-container-color` | `--md-sys-color-surface-container-highest` -`--md-filled-select-text-field-container-shape` | `4px` -`--md-filled-field-content-color` | `--md-sys-color-on-surface` -`--md-filled-field-content-font` | `--md-sys-typescale-body-large-font` +Token | Default value +------------------------------------------------ | ------------- +`--md-filled-select-text-field-container-color` | `--md-sys-color-surface-container-highest` +`--md-filled-select-text-field-container-shape` | `4px` +`--md-filled-select-text-field-input-text-color` | `--md-sys-color-on-surface` +`--md-filled-select-text-field-input-text-font` | `--md-sys-typescale-body-large-font` * [Filled Select tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-select.scss) @@ -128,20 +140,23 @@ To theme the select's dropdown menu, use the `md-menu` component tokens on the :root { --md-filled-select-text-field-container-shape: 0px; --md-filled-select-text-field-container-color: #f7faf9; - --md-filled-field-content-color: #005353; - --md-filled-field-content-font: system-ui; + --md-filled-select-text-field-input-text-color: #005353; + --md-filled-select-text-field-input-text-font: system-ui; } md-filled-select::part(menu) { --md-menu-container-color: #f4fbfa; --md-menu-container-shape: 0px; - --md-menu-item-container-color: transparent; } - - + +
Apple
+ + +
Tomato
+ ``` @@ -178,13 +193,16 @@ Token | Default value md-outlined-select::part(menu) { --md-menu-container-color: #f4fbfa; --md-menu-container-shape: 0px; - --md-menu-item-container-color: transparent; } - - + +
Apple
+ + +
Tomato
+ ``` diff --git a/menu/internal/menuitem/menu-item.ts b/menu/internal/menuitem/menu-item.ts index fff85bbdb3..107f1a3d1e 100644 --- a/menu/internal/menuitem/menu-item.ts +++ b/menu/internal/menuitem/menu-item.ts @@ -75,6 +75,7 @@ export class MenuItemEl extends LitElement implements MenuItem { return this.menuItemController.typeaheadText; } + @property({attribute: 'typeahead-text'}) set typeaheadText(text: string) { this.menuItemController.setTypeaheadText(text); } diff --git a/select/internal/select.ts b/select/internal/select.ts index 4c268030df..dadaef3ab9 100644 --- a/select/internal/select.ts +++ b/select/internal/select.ts @@ -6,7 +6,7 @@ import '../../menu/menu.js'; -import {html, LitElement, nothing, PropertyValues} from 'lit'; +import {html, isServer, LitElement, nothing, PropertyValues} from 'lit'; import {property, query, queryAssignedElements, state} from 'lit/decorators.js'; import {classMap} from 'lit/directives/class-map.js'; import {html as staticHtml, StaticValue} from 'lit/static-html.js'; @@ -113,6 +113,7 @@ export abstract class Select extends LitElement { } set value(value: string) { + if (isServer) return; this.lastUserSetValue = value; this.select(value); } @@ -393,6 +394,15 @@ export abstract class Select extends LitElement { this.initUserSelection(); } + // Case for when the DOM is streaming, there are no children, and a child + // has [selected] set on it, we need to wait for DOM to render something. + if (!this.lastSelectedOptionRecords.length && !isServer && + !this.options.length) { + setTimeout(() => { + this.updateValueAndDisplayText(); + }); + } + super.firstUpdated(changed); } diff --git a/select/internal/selectoption/select-option.ts b/select/internal/selectoption/select-option.ts index f84cbc51d7..2ee4b316f3 100644 --- a/select/internal/selectoption/select-option.ts +++ b/select/internal/selectoption/select-option.ts @@ -70,6 +70,7 @@ export class SelectOptionEl extends LitElement implements SelectOption { return this.selectOptionController.typeaheadText; } + @property({attribute: 'typeahead-text'}) set typeaheadText(text: string) { this.selectOptionController.setTypeaheadText(text); } @@ -82,6 +83,7 @@ export class SelectOptionEl extends LitElement implements SelectOption { return this.selectOptionController.displayText; } + @property({attribute: 'display-text'}) set displayText(text: string) { this.selectOptionController.setDisplayText(text); } diff --git a/select/internal/selectoption/selectOptionController.ts b/select/internal/selectoption/selectOptionController.ts index 0c2c244d92..b545371f5c 100644 --- a/select/internal/selectoption/selectOptionController.ts +++ b/select/internal/selectoption/selectOptionController.ts @@ -71,7 +71,7 @@ export class SelectOptionController implements ReactiveController { SelectOptionConfig['getHeadlineElements']; private internalDisplayText: string|null = null; private lastSelected = this.host.selected; - private firstUpdate = false; + private firstUpdate = true; /** * The recommended role of the select option.