material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-16 09:00:32 +03:00
Code Issues Projects Releases Wiki Activity

fix(iconbutton): rename selectedIcon slot to selected

Browse Source 
BREAKING CHANGE: change `slot="selectedIcon"` to `slot="selected"` for toggle icon buttons.

PiperOrigin-RevId: 561740365
This commit is contained in:
Elizabeth Mitchell 2023-08-31 13:14:06 -07:00 committed by Copybara-Service
parent 17ddcd3c2e
commit 9647f5e514
9 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
catalog/eleventy-helpers/shortcodes/playground-example.cjs
View File

@ -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>

2
catalog/src/components/top-app-bar.ts
View File

@ -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}

2
docs/components/figures/iconbutton/buttons.html
View File

@ -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>

16
docs/components/figures/iconbutton/usage-toggle.html
View File

@ -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>

18
docs/components/icon-button.md
View File

@ -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>
```

2
docs/components/text-field.md
View File

@ -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>

8
iconbutton/demo/stories.ts
View File

@ -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>

6
iconbutton/internal/icon-button.ts
View File

@ -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() {

2
progress/demo/stories.ts
View File

@ -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>