mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
fix(iconbutton): rename selectedIcon
slot to selected
BREAKING CHANGE: change `slot="selectedIcon"` to `slot="selected"` for toggle icon buttons. PiperOrigin-RevId: 561740365
This commit is contained in:
parent
17ddcd3c2e
commit
9647f5e514
@ -49,7 +49,7 @@ function playgroundExample(eleventyConfig) {
|
||||
<summary>
|
||||
<md-outlined-icon-button toggle tabindex="-1" aria-hidden="true">
|
||||
<md-icon aria-hidden="true">expand_more</md-icon>
|
||||
<md-icon aria-hidden="true" slot="selectedIcon">expand_less</md-icon>
|
||||
<md-icon aria-hidden="true" slot="selected">expand_less</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
Expand interactive demo.
|
||||
</summary>
|
||||
|
@ -40,7 +40,7 @@ import {materialDesign} from '../svg/material-design-logo.js';
|
||||
@input=${this.onMenuIconToggle}
|
||||
>
|
||||
<span><md-icon>menu</md-icon></span>
|
||||
<span slot="selectedIcon"><md-icon>menu_open</md-icon></span>
|
||||
<span slot="selected"><md-icon>menu_open</md-icon></span>
|
||||
</md-icon-button>
|
||||
<md-icon-button href="/" class="home-button">
|
||||
${materialDesign}
|
||||
|
@ -41,7 +41,7 @@
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-icon-button>
|
||||
<md-icon-button toggle selected>
|
||||
<md-icon slot="selectedIcon" class="filled">bookmark</md-icon>
|
||||
<md-icon slot="selected" class="filled">bookmark</md-icon>
|
||||
<md-icon class="filled">bookmark</md-icon>
|
||||
</md-icon-button>
|
||||
</div>
|
||||
|
@ -5,37 +5,37 @@
|
||||
<div style="display:flex;gap:8px;">
|
||||
<md-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-icon-button>
|
||||
<md-filled-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-filled-icon-button>
|
||||
<md-filled-tonal-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-filled-tonal-icon-button>
|
||||
<md-outlined-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<md-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-icon-button>
|
||||
<md-filled-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-filled-icon-button>
|
||||
<md-filled-tonal-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-filled-tonal-icon-button>
|
||||
<md-outlined-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
</div>
|
||||
</figure>
|
||||
|
@ -131,37 +131,37 @@ adding or removing something from favorites.
|
||||
<div>
|
||||
<md-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-icon-button>
|
||||
<md-filled-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-filled-icon-button>
|
||||
<md-filled-tonal-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-filled-tonal-icon-button>
|
||||
<md-outlined-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
</div>
|
||||
<div>
|
||||
<md-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-icon-button>
|
||||
<md-filled-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-filled-icon-button>
|
||||
<md-filled-tonal-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-filled-tonal-icon-button>
|
||||
<md-outlined-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
</div>
|
||||
```
|
||||
@ -188,7 +188,7 @@ descriptive label when selected.
|
||||
aria-label="Unselected"
|
||||
aria-label-selected="Selected">
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
<md-icon slot="selected">check</md-icon>
|
||||
</md-icon-button>
|
||||
```
|
||||
|
||||
|
@ -176,7 +176,7 @@ icon), or to express errors.
|
||||
<md-outlined-text-field label="Password" type="password">
|
||||
<md-icon-button toggle slot="trailingicon">
|
||||
<md-icon>visibility</md-icon>
|
||||
<md-icon slot="selectedIcon">visibility_off</md-icon>
|
||||
<md-icon slot="selected">visibility_off</md-icon>
|
||||
</md-icon-button>
|
||||
</md-outlined-text-field>
|
||||
|
||||
|
@ -84,7 +84,7 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
|
||||
?disabled=${disabled}
|
||||
>
|
||||
<md-icon>${icon}</md-icon>
|
||||
<md-icon slot="selectedIcon">${selectedIcon}</md-icon>
|
||||
<md-icon slot="selected">${selectedIcon}</md-icon>
|
||||
</md-icon-button>
|
||||
|
||||
<md-outlined-icon-button
|
||||
@ -93,7 +93,7 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
|
||||
?disabled=${disabled}
|
||||
>
|
||||
<md-icon>${icon}</md-icon>
|
||||
<md-icon slot="selectedIcon">${selectedIcon}</md-icon>
|
||||
<md-icon slot="selected">${selectedIcon}</md-icon>
|
||||
</md-outlined-icon-button>
|
||||
|
||||
<md-filled-icon-button
|
||||
@ -102,7 +102,7 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
|
||||
?disabled=${disabled}
|
||||
>
|
||||
<md-icon>${icon}</md-icon>
|
||||
<md-icon slot="selectedIcon">${selectedIcon}</md-icon>
|
||||
<md-icon slot="selected">${selectedIcon}</md-icon>
|
||||
</md-filled-icon-button>
|
||||
|
||||
<md-filled-tonal-icon-button
|
||||
@ -111,7 +111,7 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
|
||||
?disabled=${disabled}
|
||||
>
|
||||
<md-icon>${icon}</md-icon>
|
||||
<md-icon slot="selectedIcon">${selectedIcon}</md-icon>
|
||||
<md-icon slot="selected">${selectedIcon}</md-icon>
|
||||
</md-filled-tonal-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -68,8 +68,8 @@ export class IconButton extends LitElement implements FormSubmitter {
|
||||
|
||||
/**
|
||||
* Sets the selected state. When false, displays the default icon. When true,
|
||||
* displays the `selectedIcon`, or the default icon If no `selectedIcon` is
|
||||
* provided.
|
||||
* displays the selected icon, or the default icon If no `slot="selected"`
|
||||
* icon is provided.
|
||||
*/
|
||||
@property({type: Boolean, reflect: true}) selected = false;
|
||||
|
||||
@ -169,7 +169,7 @@ export class IconButton extends LitElement implements FormSubmitter {
|
||||
|
||||
private renderSelectedIcon() {
|
||||
// Use default slot as fallback to not require specifying multiple icons
|
||||
return html`<span class="icon icon--selected"><slot name="selectedIcon"><slot></slot></slot></span>`;
|
||||
return html`<span class="icon icon--selected"><slot name="selected"><slot></slot></slot></span>`;
|
||||
}
|
||||
|
||||
private renderTouchTarget() {
|
||||
|
@ -152,7 +152,7 @@ const components: MaterialStoryInit<StoryKnobs> = {
|
||||
@change=${toggleIndeterminate}
|
||||
>
|
||||
<md-icon>play_arrow</md-icon>
|
||||
<md-icon slot="selectedIcon">pause</md-icon>
|
||||
<md-icon slot="selected">pause</md-icon>
|
||||
</md-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user