mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
fix(select): update select docs and fix initial selection
PiperOrigin-RevId: 567884899
This commit is contained in:
parent
205bdc6ccf
commit
5e4434bfed
@ -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;
|
||||
}
|
||||
</style>
|
||||
<md-filled-select>
|
||||
<md-select-option selected value="apple" headline="Apple"></md-select-option>
|
||||
<md-select-option value="tomato" headline="Tomato"></md-select-option>
|
||||
<md-select-option selected value="apple">
|
||||
<div slot="headline">Apple</div>
|
||||
</md-select-option>
|
||||
<md-select-option value="tomato">
|
||||
<div slot="headline">Tomato</div>
|
||||
</md-select-option>
|
||||
</md-filled-select>
|
||||
</figure>
|
||||
</div>
|
||||
|
@ -5,6 +5,9 @@
|
||||
aria-label="Image of an outlined select with a different theme applied"
|
||||
>
|
||||
<style>
|
||||
.styled-example {
|
||||
background-color: #f4fbfa;
|
||||
}
|
||||
.styled-example.outlined {
|
||||
--md-outlined-select-text-field-outline-color: #6e7979;
|
||||
--md-outlined-select-text-field-container-shape: 0px;
|
||||
@ -14,13 +17,16 @@
|
||||
.styled-example.outlined md-outlined-select::part(menu) {
|
||||
--md-menu-container-color: #f4fbfa;
|
||||
--md-menu-container-shape: 0px;
|
||||
--md-menu-item-container-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-outlined-select>
|
||||
<md-select-option selected value="apple" headline="Apple"></md-select-option>
|
||||
<md-select-option value="tomato" headline="Tomato"></md-select-option>
|
||||
<md-select-option selected value="apple">
|
||||
<div slot="headline">Apple</div>
|
||||
</md-select-option>
|
||||
<md-select-option value="tomato">
|
||||
<div slot="headline">Tomato</div>
|
||||
</md-select-option>
|
||||
</md-outlined-select>
|
||||
</figure>
|
||||
</div>
|
||||
|
@ -13,15 +13,23 @@
|
||||
aria-label="An outlined dropdown menu filled with Apple, and a filled dropdown menu."
|
||||
>
|
||||
<md-outlined-select>
|
||||
<md-select-option headline=""></md-select-option>
|
||||
<md-select-option selected value="apple" headline="Apple"></md-select-option>
|
||||
<md-select-option value="apricot" headline="Apricot"></md-select-option>
|
||||
<md-select-option aria-label="blank"></md-select-option>
|
||||
<md-select-option selected value="apple">
|
||||
<div slot="headline">Apple</div>
|
||||
</md-select-option>
|
||||
<md-select-option value="apricot">
|
||||
<div slot="headline">Apricot</div>
|
||||
</md-select-option>
|
||||
</md-outlined-select>
|
||||
|
||||
<md-filled-select>
|
||||
<md-select-option headline=""></md-select-option>
|
||||
<md-select-option value="apple" headline="Apple"></md-select-option>
|
||||
<md-select-option value="apricot" headline="Apricot"></md-select-option>
|
||||
<md-select-option aria-label="blank"></md-select-option>
|
||||
<md-select-option value="apple">
|
||||
<div slot="headline">Apple</div>
|
||||
</md-select-option>
|
||||
<md-select-option value="apricot">
|
||||
<div slot="headline">Apricot</div>
|
||||
</md-select-option>
|
||||
</md-filled-select>
|
||||
</figure>
|
||||
</div>
|
||||
|
@ -57,15 +57,23 @@ fixed list of available options. It is analogous to the native HTML
|
||||
|
||||
```html
|
||||
<md-outlined-select>
|
||||
<md-select-option headline=""></md-select-option>
|
||||
<md-select-option selected value="apple" headline="Apple"></md-select-option>
|
||||
<md-select-option value="apricot" headline="Apricot"></md-select-option>
|
||||
<md-select-option aria-label="blank"></md-select-option>
|
||||
<md-select-option selected value="apple">
|
||||
<div slot="headline">Apple</div>
|
||||
</md-select-option>
|
||||
<md-select-option value="apricot">
|
||||
<div slot="headline">Apricot</div>
|
||||
</md-select-option>
|
||||
</md-outlined-select>
|
||||
|
||||
<md-filled-select>
|
||||
<md-select-option headline=""></md-select-option>
|
||||
<md-select-option value="apple" headline="Apple"></md-select-option>
|
||||
<md-select-option value="apricot" headline="Apricot"></md-select-option>
|
||||
<md-select-option aria-label="blank"></md-select-option>
|
||||
<md-select-option value="apple">
|
||||
<div slot="headline">Apple</div>
|
||||
</md-select-option>
|
||||
<md-select-option value="apricot">
|
||||
<div slot="headline">Apricot</div>
|
||||
</md-select-option>
|
||||
</md-filled-select>
|
||||
```
|
||||
|
||||
@ -75,8 +83,12 @@ Indicate that a selection is mandatory by adding the `required` attribute.
|
||||
|
||||
```html
|
||||
<md-filled-select required>
|
||||
<md-select-option value="one" headline="One"></md-select-option>
|
||||
<md-select-option value="two" headline="Two"></md-select-option>
|
||||
<md-select-option value="one">
|
||||
<div slot="headline">One</div>
|
||||
</md-select-option>
|
||||
<md-select-option value="two">
|
||||
<div slot="headline">Two</div>
|
||||
</md-select-option>
|
||||
</md-filled-select>
|
||||
```
|
||||
|
||||
@ -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)
|
||||
<!-- {.external} -->
|
||||
@ -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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-filled-select>
|
||||
<md-select-option selected value="apple" headline="Apple"></md-select-option>
|
||||
<md-select-option value="tomato" headline="Tomato"></md-select-option>
|
||||
<md-select-option selected value="apple">
|
||||
<div slot="headline">Apple</div>
|
||||
</md-select-option>
|
||||
<md-select-option value="tomato">
|
||||
<div slot="headline">Tomato</div>
|
||||
</md-select-option>
|
||||
</md-filled-select>
|
||||
```
|
||||
|
||||
@ -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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-outlined-select>
|
||||
<md-select-option selected value="apple" headline="Apple"></md-select-option>
|
||||
<md-select-option value="tomato" headline="Tomato"></md-select-option>
|
||||
<md-select-option selected value="apple">
|
||||
<div slot="headline">Apple</div>
|
||||
</md-select-option>
|
||||
<md-select-option value="tomato">
|
||||
<div slot="headline">Tomato</div>
|
||||
</md-select-option>
|
||||
</md-outlined-select>
|
||||
```
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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.
|
||||
|
Loading…
Reference in New Issue
Block a user