mirror of
https://github.com/material-components/material-web.git
synced 2024-10-26 13:40:03 +03:00
fix(iconbutton)!: rename <md-standard-icon-button> to <md-icon-button>
PiperOrigin-RevId: 552545415
This commit is contained in:
parent
2d1c58022e
commit
a117b06b7b
4
all.ts
4
all.ts
@ -34,8 +34,8 @@ import './focus/md-focus-ring.js';
|
|||||||
import './icon/icon.js';
|
import './icon/icon.js';
|
||||||
import './iconbutton/filled-icon-button.js';
|
import './iconbutton/filled-icon-button.js';
|
||||||
import './iconbutton/filled-tonal-icon-button.js';
|
import './iconbutton/filled-tonal-icon-button.js';
|
||||||
|
import './iconbutton/icon-button.js';
|
||||||
import './iconbutton/outlined-icon-button.js';
|
import './iconbutton/outlined-icon-button.js';
|
||||||
import './iconbutton/standard-icon-button.js';
|
|
||||||
import './list/list.js';
|
import './list/list.js';
|
||||||
import './list/list-item.js';
|
import './list/list-item.js';
|
||||||
import './list/list-item-link.js';
|
import './list/list-item-link.js';
|
||||||
@ -82,8 +82,8 @@ export * from './focus/md-focus-ring.js';
|
|||||||
export * from './icon/icon.js';
|
export * from './icon/icon.js';
|
||||||
export * from './iconbutton/filled-icon-button.js';
|
export * from './iconbutton/filled-icon-button.js';
|
||||||
export * from './iconbutton/filled-tonal-icon-button.js';
|
export * from './iconbutton/filled-tonal-icon-button.js';
|
||||||
|
export * from './iconbutton/icon-button.js';
|
||||||
export * from './iconbutton/outlined-icon-button.js';
|
export * from './iconbutton/outlined-icon-button.js';
|
||||||
export * from './iconbutton/standard-icon-button.js';
|
|
||||||
export * from './list/list.js';
|
export * from './list/list.js';
|
||||||
export * from './list/list-item.js';
|
export * from './list/list-item.js';
|
||||||
export * from './list/list-item-link.js';
|
export * from './list/list-item-link.js';
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
* SPDX-License-Identifier: Apache-2.0
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import '@material/web/iconbutton/standard-icon-button.js';
|
import '@material/web/iconbutton/icon-button.js';
|
||||||
import '@material/web/icon/icon.js';
|
import '@material/web/icon/icon.js';
|
||||||
|
|
||||||
import {css, html, LitElement} from 'lit';
|
import {css, html, LitElement} from 'lit';
|
||||||
@ -24,7 +24,7 @@ export class CopyCodeButton extends LitElement {
|
|||||||
--_border-radius: calc(var(--catalog-code-block-border-radius) / 4);
|
--_border-radius: calc(var(--catalog-code-block-border-radius) / 4);
|
||||||
}
|
}
|
||||||
|
|
||||||
md-standard-icon-button {
|
md-icon-button {
|
||||||
color: red;
|
color: red;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: var(--catalog-copy-code-button-inset, var(--_border-radius) var(--_border-radius) auto auto);
|
inset: var(--catalog-copy-code-button-inset, var(--_border-radius) var(--_border-radius) auto auto);
|
||||||
@ -60,11 +60,11 @@ export class CopyCodeButton extends LitElement {
|
|||||||
const icon = this.showCheckmark ? 'check' : 'content_copy';
|
const icon = this.showCheckmark ? 'check' : 'content_copy';
|
||||||
return html`
|
return html`
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
<md-standard-icon-button @click=${this.onClick} title=${this.buttonTitle}>
|
<md-icon-button @click=${this.onClick} title=${this.buttonTitle}>
|
||||||
<md-icon aria-live="polite" aria-label=${label}>
|
<md-icon aria-live="polite" aria-label=${label}>
|
||||||
<span aria-hidden="true">${icon}</span>
|
<span aria-hidden="true">${icon}</span>
|
||||||
</md-icon>
|
</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -5,10 +5,10 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import '@material/web/focus/md-focus-ring.js';
|
import '@material/web/focus/md-focus-ring.js';
|
||||||
import '@material/web/iconbutton/standard-icon-button.js';
|
import '@material/web/iconbutton/icon-button.js';
|
||||||
import '@material/web/icon/icon.js';
|
import '@material/web/icon/icon.js';
|
||||||
|
|
||||||
import type {MdStandardIconButton} from '@material/web/iconbutton/standard-icon-button.js';
|
import type {MdIconButton} from '@material/web/iconbutton/icon-button.js';
|
||||||
import {css, html, LitElement} from 'lit';
|
import {css, html, LitElement} from 'lit';
|
||||||
import {customElement, query, state} from 'lit/decorators.js';
|
import {customElement, query, state} from 'lit/decorators.js';
|
||||||
import {live} from 'lit/directives/live.js';
|
import {live} from 'lit/directives/live.js';
|
||||||
@ -28,15 +28,14 @@ import {materialDesign} from '../svg/material-design-logo.js';
|
|||||||
*/
|
*/
|
||||||
@state() private menuOpen = false;
|
@state() private menuOpen = false;
|
||||||
|
|
||||||
@query('.end md-standard-icon-button')
|
@query('.end md-icon-button') private paletteButton!: MdIconButton;
|
||||||
private paletteButton!: MdStandardIconButton;
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<header>
|
<header>
|
||||||
<div class="default-content">
|
<div class="default-content">
|
||||||
<section class="start">
|
<section class="start">
|
||||||
<md-standard-icon-button
|
<md-icon-button
|
||||||
toggle
|
toggle
|
||||||
class="menu-button"
|
class="menu-button"
|
||||||
.selected=${live(drawerOpenSignal.value)}
|
.selected=${live(drawerOpenSignal.value)}
|
||||||
@ -44,10 +43,10 @@ import {materialDesign} from '../svg/material-design-logo.js';
|
|||||||
>
|
>
|
||||||
<span><md-icon>menu</md-icon></span>
|
<span><md-icon>menu</md-icon></span>
|
||||||
<span slot="selectedIcon"><md-icon>menu_open</md-icon></span>
|
<span slot="selectedIcon"><md-icon>menu_open</md-icon></span>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
<md-standard-icon-button href="/" class="home-button">
|
<md-icon-button href="/" class="home-button">
|
||||||
${materialDesign}
|
${materialDesign}
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<a href="/" id="home-link">
|
<a href="/" id="home-link">
|
||||||
@ -71,9 +70,9 @@ import {materialDesign} from '../svg/material-design-logo.js';
|
|||||||
>
|
>
|
||||||
<theme-changer></theme-changer>
|
<theme-changer></theme-changer>
|
||||||
</md-menu>
|
</md-menu>
|
||||||
<md-standard-icon-button @click="${this.onPaletteClick}">
|
<md-icon-button @click="${this.onPaletteClick}">
|
||||||
<md-icon>palette</md-icon>
|
<md-icon>palette</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
</lit-island>
|
</lit-island>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@ -106,7 +105,7 @@ import {materialDesign} from '../svg/material-design-logo.js';
|
|||||||
* Toggles the sidebar's open state.
|
* Toggles the sidebar's open state.
|
||||||
*/
|
*/
|
||||||
private onMenuIconToggle(e: InputEvent) {
|
private onMenuIconToggle(e: InputEvent) {
|
||||||
drawerOpenSignal.value = (e.target as MdStandardIconButton).selected;
|
drawerOpenSignal.value = (e.target as MdIconButton).selected;
|
||||||
}
|
}
|
||||||
|
|
||||||
static styles = css`
|
static styles = css`
|
||||||
@ -135,14 +134,14 @@ import {materialDesign} from '../svg/material-design-logo.js';
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
md-standard-icon-button:not(:defined) {
|
md-icon-button:not(:defined) {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
md-standard-icon-button * {
|
md-icon-button * {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
* SPDX-License-Identifier: Apache-2.0
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import '@material/web/iconbutton/standard-icon-button.js';
|
import '@material/web/iconbutton/icon-button.js';
|
||||||
import '@material/web/iconbutton/filled-icon-button.js';
|
import '@material/web/iconbutton/filled-icon-button.js';
|
||||||
import '@material/web/iconbutton/filled-tonal-icon-button.js';
|
import '@material/web/iconbutton/filled-tonal-icon-button.js';
|
||||||
import '@material/web/iconbutton/outlined-icon-button.js';
|
import '@material/web/iconbutton/outlined-icon-button.js';
|
||||||
|
@ -18,7 +18,7 @@ import '@material/web/list/list-item-link.js';
|
|||||||
import '@material/web/progress/circular-progress.js';
|
import '@material/web/progress/circular-progress.js';
|
||||||
import '@material/web/tabs/tabs.js';
|
import '@material/web/tabs/tabs.js';
|
||||||
import '@material/web/tabs/tab.js';
|
import '@material/web/tabs/tab.js';
|
||||||
import '@material/web/iconbutton/standard-icon-button.js';
|
import '@material/web/iconbutton/icon-button.js';
|
||||||
import '@material/web/iconbutton/filled-icon-button.js';
|
import '@material/web/iconbutton/filled-icon-button.js';
|
||||||
import '@material/web/iconbutton/filled-tonal-icon-button.js';
|
import '@material/web/iconbutton/filled-tonal-icon-button.js';
|
||||||
import '@material/web/iconbutton/outlined-icon-button.js';
|
import '@material/web/iconbutton/outlined-icon-button.js';
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
/* Fork of Lit stories story-knob-renderer with m3 components and theming */
|
/* Fork of Lit stories story-knob-renderer with m3 components and theming */
|
||||||
|
|
||||||
import '@material/web/iconbutton/standard-icon-button.js';
|
import '@material/web/iconbutton/icon-button.js';
|
||||||
import '@material/web/icon/icon.js';
|
import '@material/web/icon/icon.js';
|
||||||
import '@material/web/elevation/elevation.js';
|
import '@material/web/elevation/elevation.js';
|
||||||
|
|
||||||
@ -72,9 +72,9 @@ export class StoryKnobPanel extends LitElement {
|
|||||||
|
|
||||||
if (this.showCloseIcon) {
|
if (this.showCloseIcon) {
|
||||||
closeIcon = html`
|
closeIcon = html`
|
||||||
<md-standard-icon-button aria-label="close" @click=${this.close}>
|
<md-icon-button aria-label="close" @click=${this.close}>
|
||||||
<md-icon>close</md-icon>
|
<md-icon>close</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -96,13 +96,13 @@ export class StoryKnobPanel extends LitElement {
|
|||||||
const iconLabel = this.draggable ? 'dock' : 'pop out';
|
const iconLabel = this.draggable ? 'dock' : 'pop out';
|
||||||
|
|
||||||
dragIcon = html`
|
dragIcon = html`
|
||||||
<md-standard-icon-button
|
<md-icon-button
|
||||||
class="dragIconButton"
|
class="dragIconButton"
|
||||||
aria-label=${iconLabel}
|
aria-label=${iconLabel}
|
||||||
@click=${this.onDragIconClick}
|
@click=${this.onDragIconClick}
|
||||||
>
|
>
|
||||||
<md-icon>${iconSvg}</md-icon>
|
<md-icon>${iconSvg}</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -23,7 +23,7 @@ import './chips/assist-chip.js';
|
|||||||
import './chips/filter-chip.js';
|
import './chips/filter-chip.js';
|
||||||
import './dialog/dialog.js';
|
import './dialog/dialog.js';
|
||||||
import './icon/icon.js';
|
import './icon/icon.js';
|
||||||
import './iconbutton/standard-icon-button.js';
|
import './iconbutton/icon-button.js';
|
||||||
import './list/list.js';
|
import './list/list.js';
|
||||||
import './list/list-item.js';
|
import './list/list-item.js';
|
||||||
import './list/list-item-link.js';
|
import './list/list-item-link.js';
|
||||||
@ -52,7 +52,7 @@ export * from './chips/assist-chip.js';
|
|||||||
export * from './chips/filter-chip.js';
|
export * from './chips/filter-chip.js';
|
||||||
export * from './dialog/dialog.js';
|
export * from './dialog/dialog.js';
|
||||||
export * from './icon/icon.js';
|
export * from './icon/icon.js';
|
||||||
export * from './iconbutton/standard-icon-button.js';
|
export * from './iconbutton/icon-button.js';
|
||||||
export * from './list/list.js';
|
export * from './list/list.js';
|
||||||
export * from './list/list-item.js';
|
export * from './list/list-item.js';
|
||||||
export * from './list/list-item-link.js';
|
export * from './list/list-item-link.js';
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
* SPDX-License-Identifier: Apache-2.0
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import '@material/web/iconbutton/standard-icon-button.js';
|
import '@material/web/iconbutton/icon-button.js';
|
||||||
import '@material/web/textfield/filled-text-field.js';
|
import '@material/web/textfield/filled-text-field.js';
|
||||||
import '@material/web/radio/radio.js';
|
import '@material/web/radio/radio.js';
|
||||||
import '@material/web/icon/icon.js';
|
import '@material/web/icon/icon.js';
|
||||||
@ -208,7 +208,7 @@ const contacts: MaterialStoryInit<StoryKnobs> = {
|
|||||||
.stacked=${stacked}
|
.stacked=${stacked}
|
||||||
>
|
>
|
||||||
<span slot="header">
|
<span slot="header">
|
||||||
<md-standard-icon-button dialog-action="close"><md-icon>close</md-icon></md-standard-icon-button>
|
<md-icon-button dialog-action="close"><md-icon>close</md-icon></md-icon-button>
|
||||||
<span class="headline">Create new contact</span>
|
<span class="headline">Create new contact</span>
|
||||||
</span>
|
</span>
|
||||||
<div class="contact-content">
|
<div class="contact-content">
|
||||||
@ -250,7 +250,7 @@ const floatingSheet: MaterialStoryInit<StoryKnobs> = {
|
|||||||
>
|
>
|
||||||
<span slot="header">
|
<span slot="header">
|
||||||
<span style="flex: 1;">Floating Sheet</span>
|
<span style="flex: 1;">Floating Sheet</span>
|
||||||
<md-standard-icon-button dialog-action="close"><md-icon>close</md-icon></md-standard-icon-button>
|
<md-icon-button dialog-action="close"><md-icon>close</md-icon></md-icon-button>
|
||||||
</span>
|
</span>
|
||||||
<div>This is a floating sheet with title.
|
<div>This is a floating sheet with title.
|
||||||
Floating sheets offer no action buttons at the bottom,
|
Floating sheets offer no action buttons at the bottom,
|
||||||
|
@ -37,13 +37,13 @@
|
|||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<md-standard-icon-button>
|
<md-icon-button>
|
||||||
<md-icon>favorite</md-icon>
|
<md-icon>favorite</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
<md-standard-icon-button toggle selected>
|
<md-icon-button toggle selected>
|
||||||
<md-icon slot="selectedIcon" class="filled">bookmark</md-icon>
|
<md-icon slot="selectedIcon" class="filled">bookmark</md-icon>
|
||||||
<md-icon class="filled">bookmark</md-icon>
|
<md-icon class="filled">bookmark</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
</div>
|
</div>
|
||||||
<span>1</span>
|
<span>1</span>
|
||||||
</div>
|
</div>
|
||||||
@ -63,4 +63,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
@ -15,8 +15,8 @@
|
|||||||
--md-sys-color-on-surface-variant: #dc362e;
|
--md-sys-color-on-surface-variant: #dc362e;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<md-standard-icon-button>
|
<md-icon-button>
|
||||||
<md-icon>check</md-icon>
|
<md-icon>check</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
@ -3,8 +3,8 @@
|
|||||||
style="justify-content:center;gap: 8px;"
|
style="justify-content:center;gap: 8px;"
|
||||||
title="Standard Icon Button with Check icon"
|
title="Standard Icon Button with Check icon"
|
||||||
aria-label="A check icon">
|
aria-label="A check icon">
|
||||||
<md-standard-icon-button>
|
<md-icon-button>
|
||||||
<md-icon>check</md-icon>
|
<md-icon>check</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
@ -3,10 +3,10 @@
|
|||||||
style="gap:8px;flex-direction:column;padding-block:8px;"
|
style="gap:8px;flex-direction:column;padding-block:8px;"
|
||||||
aria-label="Two rows of toggling icon buttons, the top row is unselected and the bottom row is selected">
|
aria-label="Two rows of toggling icon buttons, the top row is unselected and the bottom row is selected">
|
||||||
<div style="display:flex;gap:8px;">
|
<div style="display:flex;gap:8px;">
|
||||||
<md-standard-icon-button toggle>
|
<md-icon-button toggle>
|
||||||
<md-icon>close</md-icon>
|
<md-icon>close</md-icon>
|
||||||
<md-icon slot="selectedIcon">check</md-icon>
|
<md-icon slot="selectedIcon">check</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
<md-filled-icon-button toggle>
|
<md-filled-icon-button toggle>
|
||||||
<md-icon>close</md-icon>
|
<md-icon>close</md-icon>
|
||||||
<md-icon slot="selectedIcon">check</md-icon>
|
<md-icon slot="selectedIcon">check</md-icon>
|
||||||
@ -21,10 +21,10 @@
|
|||||||
</md-outlined-icon-button>
|
</md-outlined-icon-button>
|
||||||
</div>
|
</div>
|
||||||
<div style="display:flex;gap:8px;">
|
<div style="display:flex;gap:8px;">
|
||||||
<md-standard-icon-button toggle selected>
|
<md-icon-button toggle selected>
|
||||||
<md-icon>close</md-icon>
|
<md-icon>close</md-icon>
|
||||||
<md-icon slot="selectedIcon">check</md-icon>
|
<md-icon slot="selectedIcon">check</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
<md-filled-icon-button toggle selected>
|
<md-filled-icon-button toggle selected>
|
||||||
<md-icon>close</md-icon>
|
<md-icon>close</md-icon>
|
||||||
<md-icon slot="selectedIcon">check</md-icon>
|
<md-icon slot="selectedIcon">check</md-icon>
|
||||||
@ -39,4 +39,4 @@
|
|||||||
</md-outlined-icon-button>
|
</md-outlined-icon-button>
|
||||||
</div>
|
</div>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
@ -3,9 +3,9 @@
|
|||||||
style="justify-content:center;gap: 8px;"
|
style="justify-content:center;gap: 8px;"
|
||||||
title="Icon buttons can be used within other components, such as a bottom app bar"
|
title="Icon buttons can be used within other components, such as a bottom app bar"
|
||||||
aria-label="A row of icon buttons">
|
aria-label="A row of icon buttons">
|
||||||
<md-standard-icon-button>
|
<md-icon-button>
|
||||||
<md-icon>check</md-icon>
|
<md-icon>check</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
<md-filled-icon-button>
|
<md-filled-icon-button>
|
||||||
<md-icon>check</md-icon>
|
<md-icon>check</md-icon>
|
||||||
</md-filled-icon-button>
|
</md-filled-icon-button>
|
||||||
@ -16,4 +16,4 @@
|
|||||||
<md-icon>check</md-icon>
|
<md-icon>check</md-icon>
|
||||||
</md-outlined-icon-button>
|
</md-outlined-icon-button>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
@ -60,7 +60,7 @@ people take supplementary actions with a single tap.
|
|||||||
<!-- no-catalog-end -->
|
<!-- no-catalog-end -->
|
||||||
<!-- catalog-include "figures/iconbutton/buttons.html" -->
|
<!-- catalog-include "figures/iconbutton/buttons.html" -->
|
||||||
|
|
||||||
1. [Standard Icon Button](#standard-icon-button)
|
1. [Icon Button](#icon-button)
|
||||||
2. [Filled Icon Button](#filled-icon-button)
|
2. [Filled Icon Button](#filled-icon-button)
|
||||||
3. [Filled Tonal Icon Button](#filled-tonal-icon-button)
|
3. [Filled Tonal Icon Button](#filled-tonal-icon-button)
|
||||||
4. [Outlined Icon Button](#outlined-icon-button)
|
4. [Outlined Icon Button](#outlined-icon-button)
|
||||||
@ -85,9 +85,9 @@ the icon font.
|
|||||||
<!-- catalog-include "figures/iconbutton/usage.html" -->
|
<!-- catalog-include "figures/iconbutton/usage.html" -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<md-standard-icon-button>
|
<md-icon-button>
|
||||||
<md-icon>check</md-icon>
|
<md-icon>check</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
<md-filled-icon-button>
|
<md-filled-icon-button>
|
||||||
<md-icon>check</md-icon>
|
<md-icon>check</md-icon>
|
||||||
</md-filled-icon-button>
|
</md-filled-icon-button>
|
||||||
@ -108,9 +108,9 @@ and optionally a
|
|||||||
attribute to turn the icon button into a link.
|
attribute to turn the icon button into a link.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<md-standard-icon-button href="https://google.com">
|
<md-icon-button href="https://google.com">
|
||||||
<md-icon>check</md-icon>
|
<md-icon>check</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Toggle
|
### Toggle
|
||||||
@ -129,10 +129,10 @@ adding or removing something from favorites.
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<div>
|
<div>
|
||||||
<md-standard-icon-button toggle>
|
<md-icon-button toggle>
|
||||||
<md-icon>close</md-icon>
|
<md-icon>close</md-icon>
|
||||||
<md-icon slot="selectedIcon">check</md-icon>
|
<md-icon slot="selectedIcon">check</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
<md-filled-icon-button toggle>
|
<md-filled-icon-button toggle>
|
||||||
<md-icon>close</md-icon>
|
<md-icon>close</md-icon>
|
||||||
<md-icon slot="selectedIcon">check</md-icon>
|
<md-icon slot="selectedIcon">check</md-icon>
|
||||||
@ -147,10 +147,10 @@ adding or removing something from favorites.
|
|||||||
</md-outlined-icon-button>
|
</md-outlined-icon-button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<md-standard-icon-button toggle selected>
|
<md-icon-button toggle selected>
|
||||||
<md-icon>close</md-icon>
|
<md-icon>close</md-icon>
|
||||||
<md-icon slot="selectedIcon">check</md-icon>
|
<md-icon slot="selectedIcon">check</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
<md-filled-icon-button toggle selected>
|
<md-filled-icon-button toggle selected>
|
||||||
<md-icon>close</md-icon>
|
<md-icon>close</md-icon>
|
||||||
<md-icon slot="selectedIcon">check</md-icon>
|
<md-icon slot="selectedIcon">check</md-icon>
|
||||||
@ -173,9 +173,9 @@ Add an
|
|||||||
attribute to buttons whose labels need a more descriptive label.
|
attribute to buttons whose labels need a more descriptive label.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<md-standard-icon-button aria-label="Search for Contact">
|
<md-icon-button aria-label="Search for Contact">
|
||||||
<md-icon>search</md-icon>
|
<md-icon>search</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Toggle
|
### Toggle
|
||||||
@ -184,17 +184,15 @@ Add a `selected-aria-label` attribute to toggle buttons whose labels need a more
|
|||||||
descriptive label when selected.
|
descriptive label when selected.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<md-standard-icon-button toggle
|
<md-icon-button toggle
|
||||||
aria-label="Unselected"
|
aria-label="Unselected"
|
||||||
selected-aria-label="Selected">
|
selected-aria-label="Selected">
|
||||||
<md-icon>close</md-icon>
|
<md-icon>close</md-icon>
|
||||||
<md-icon slot="selectedIcon">check</md-icon>
|
<md-icon slot="selectedIcon">check</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Standard Icon Button
|
## Icon Button
|
||||||
|
|
||||||
<!-- go/md-standard-icon-button -->
|
|
||||||
|
|
||||||
Use
|
Use
|
||||||
[icon buttons](https://m3.material.io/components/icon-buttons/guidelines)<!-- {.external} -->
|
[icon buttons](https://m3.material.io/components/icon-buttons/guidelines)<!-- {.external} -->
|
||||||
@ -212,9 +210,9 @@ Icon buttons can be grouped together or they can stand alone.
|
|||||||
<!-- catalog-include "figures/iconbutton/usage-standard.html" -->
|
<!-- catalog-include "figures/iconbutton/usage-standard.html" -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<md-standard-icon-button>
|
<md-icon-button>
|
||||||
<md-icon>check</md-icon>
|
<md-icon>check</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Filled Icon Button
|
## Filled Icon Button
|
||||||
@ -285,7 +283,7 @@ filled tonal icon button.
|
|||||||
Icon Button supports [Material theming](../theming.md) and can be customized in
|
Icon Button supports [Material theming](../theming.md) and can be customized in
|
||||||
terms of color, and shape.
|
terms of color, and shape.
|
||||||
|
|
||||||
### Standard Icon Button tokens
|
### Icon Button tokens
|
||||||
|
|
||||||
Token | Default value
|
Token | Default value
|
||||||
---------------------------------------- | -----------------------------------
|
---------------------------------------- | -----------------------------------
|
||||||
@ -296,7 +294,7 @@ Token | Default value
|
|||||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-icon-button.scss)
|
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-icon-button.scss)
|
||||||
<!-- {.external} -->
|
<!-- {.external} -->
|
||||||
|
|
||||||
### Standard Icon Button example
|
### Icon Button example
|
||||||
|
|
||||||
<!-- no-catalog-start -->
|
<!-- no-catalog-start -->
|
||||||
|
|
||||||
@ -314,9 +312,9 @@ Token | Default value
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<md-standard-icon-button>
|
<md-icon-button>
|
||||||
<md-icon>check</md-icon>
|
<md-icon>check</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Filled Icon Button tokens
|
### Filled Icon Button tokens
|
||||||
|
@ -3,4 +3,4 @@
|
|||||||
// SPDX-License-Identifier: Apache-2.0
|
// SPDX-License-Identifier: Apache-2.0
|
||||||
//
|
//
|
||||||
|
|
||||||
@forward './internal/standard-icon-button' show theme;
|
@forward './internal/icon-button' show theme;
|
@ -8,7 +8,7 @@ import '@material/web/icon/icon.js';
|
|||||||
import '@material/web/iconbutton/filled-icon-button.js';
|
import '@material/web/iconbutton/filled-icon-button.js';
|
||||||
import '@material/web/iconbutton/filled-tonal-icon-button.js';
|
import '@material/web/iconbutton/filled-tonal-icon-button.js';
|
||||||
import '@material/web/iconbutton/outlined-icon-button.js';
|
import '@material/web/iconbutton/outlined-icon-button.js';
|
||||||
import '@material/web/iconbutton/standard-icon-button.js';
|
import '@material/web/iconbutton/icon-button.js';
|
||||||
|
|
||||||
import {isRtl} from '@material/web/internal/controller/is-rtl.js';
|
import {isRtl} from '@material/web/internal/controller/is-rtl.js';
|
||||||
import {MaterialStoryInit} from './material-collection.js';
|
import {MaterialStoryInit} from './material-collection.js';
|
||||||
@ -29,25 +29,25 @@ export interface StoryKnobs {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const standard: MaterialStoryInit<StoryKnobs> = {
|
const standard: MaterialStoryInit<StoryKnobs> = {
|
||||||
name: '<md-standard-icon-button>',
|
name: '<md-icon-button>',
|
||||||
render(knobs) {
|
render(knobs) {
|
||||||
const {icon, ariaLabel, disabled, flipIconInRtl} = knobs;
|
const {icon, ariaLabel, disabled, flipIconInRtl} = knobs;
|
||||||
return html`
|
return html`
|
||||||
<md-standard-icon-button
|
<md-icon-button
|
||||||
.ariaLabel=${ariaLabel}
|
.ariaLabel=${ariaLabel}
|
||||||
.disabled=${disabled}
|
.disabled=${disabled}
|
||||||
.flipIconInRtl=${flipIconInRtl}
|
.flipIconInRtl=${flipIconInRtl}
|
||||||
${ref(rtlRefCallback(knobs))}>
|
${ref(rtlRefCallback(knobs))}>
|
||||||
<md-icon>${icon}</md-icon>
|
<md-icon>${icon}</md-icon>
|
||||||
</md-standard-icon-button>`;
|
</md-icon-button>`;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const link: MaterialStoryInit<StoryKnobs> = {
|
const link: MaterialStoryInit<StoryKnobs> = {
|
||||||
name: '<md-standard-icon-button> link',
|
name: '<md-icon-button> link',
|
||||||
render(knobs) {
|
render(knobs) {
|
||||||
const {icon, ariaLabel, href, target, disabled, flipIconInRtl} = knobs;
|
const {icon, ariaLabel, href, target, disabled, flipIconInRtl} = knobs;
|
||||||
return html`
|
return html`
|
||||||
<md-standard-icon-button
|
<md-icon-button
|
||||||
.ariaLabel=${ariaLabel}
|
.ariaLabel=${ariaLabel}
|
||||||
.disabled=${disabled}
|
.disabled=${disabled}
|
||||||
.flipIconInRtl=${flipIconInRtl}
|
.flipIconInRtl=${flipIconInRtl}
|
||||||
@ -55,11 +55,11 @@ const link: MaterialStoryInit<StoryKnobs> = {
|
|||||||
.target="${target}"
|
.target="${target}"
|
||||||
${ref(rtlRefCallback(knobs))}>
|
${ref(rtlRefCallback(knobs))}>
|
||||||
<md-icon>${icon}</md-icon>
|
<md-icon>${icon}</md-icon>
|
||||||
</md-standard-icon-button>`;
|
</md-icon-button>`;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const toggle: MaterialStoryInit<StoryKnobs> = {
|
const toggle: MaterialStoryInit<StoryKnobs> = {
|
||||||
name: '<md-standard-icon-button> toggle',
|
name: '<md-icon-button> toggle',
|
||||||
render(knobs) {
|
render(knobs) {
|
||||||
const {
|
const {
|
||||||
icon,
|
icon,
|
||||||
@ -70,7 +70,7 @@ const toggle: MaterialStoryInit<StoryKnobs> = {
|
|||||||
disabled,
|
disabled,
|
||||||
} = knobs;
|
} = knobs;
|
||||||
return html`
|
return html`
|
||||||
<md-standard-icon-button
|
<md-icon-button
|
||||||
toggle
|
toggle
|
||||||
.disabled=${disabled}
|
.disabled=${disabled}
|
||||||
.selectedAriaLabel=${selectedAriaLabel}
|
.selectedAriaLabel=${selectedAriaLabel}
|
||||||
@ -81,7 +81,7 @@ const toggle: MaterialStoryInit<StoryKnobs> = {
|
|||||||
html`<md-icon slot="selectedIcon">${selectedIcon}</md-icon>` :
|
html`<md-icon slot="selectedIcon">${selectedIcon}</md-icon>` :
|
||||||
nothing}
|
nothing}
|
||||||
<md-icon>${icon}</md-icon>
|
<md-icon>${icon}</md-icon>
|
||||||
</md-standard-icon-button>`;
|
</md-icon-button>`;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const outlined: MaterialStoryInit<StoryKnobs> = {
|
const outlined: MaterialStoryInit<StoryKnobs> = {
|
||||||
|
@ -12,7 +12,7 @@ import {styles} from './internal/standard-styles.css.js';
|
|||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface HTMLElementTagNameMap {
|
interface HTMLElementTagNameMap {
|
||||||
'md-standard-icon-button': MdStandardIconButton;
|
'md-icon-button': MdIconButton;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -31,8 +31,8 @@ declare global {
|
|||||||
* - Add to Favorites
|
* - Add to Favorites
|
||||||
* - Print
|
* - Print
|
||||||
*/
|
*/
|
||||||
@customElement('md-standard-icon-button')
|
@customElement('md-icon-button')
|
||||||
export class MdStandardIconButton extends IconButton {
|
export class MdIconButton extends IconButton {
|
||||||
static override styles = [sharedStyles, styles];
|
static override styles = [sharedStyles, styles];
|
||||||
|
|
||||||
protected override getRenderClasses() {
|
protected override getRenderClasses() {
|
@ -5,7 +5,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import '../icon/icon.js';
|
import '../icon/icon.js';
|
||||||
import './standard-icon-button.js';
|
import './icon-button.js';
|
||||||
|
|
||||||
import {html} from 'lit';
|
import {html} from 'lit';
|
||||||
|
|
||||||
@ -14,20 +14,20 @@ import {Environment} from '../testing/environment.js';
|
|||||||
import {IconButtonHarness} from './harness.js';
|
import {IconButtonHarness} from './harness.js';
|
||||||
|
|
||||||
const ICON_BUTTON_TEMPLATE = html`
|
const ICON_BUTTON_TEMPLATE = html`
|
||||||
<md-standard-icon-button aria-label="Star">
|
<md-icon-button aria-label="Star">
|
||||||
<md-icon>star</md-icon>
|
<md-icon>star</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
`;
|
`;
|
||||||
const LINK_ICON_BUTTON_TEMPLATE = html`
|
const LINK_ICON_BUTTON_TEMPLATE = html`
|
||||||
<md-standard-icon-button aria-label="Star" href="https://google.com">
|
<md-icon-button aria-label="Star" href="https://google.com">
|
||||||
<md-icon>star</md-icon>
|
<md-icon>star</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
`;
|
`;
|
||||||
const ICON_BUTTON_TOGGLE_TEMPLATE = html`
|
const ICON_BUTTON_TOGGLE_TEMPLATE = html`
|
||||||
<md-standard-icon-button toggle aria-label="Star">
|
<md-icon-button toggle aria-label="Star">
|
||||||
<md-icon slot="onIcon">star</md-icon>
|
<md-icon slot="onIcon">star</md-icon>
|
||||||
<md-icon slot="offIcon">star_border</md-icon>
|
<md-icon slot="offIcon">star_border</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
interface IconButtonInternals {
|
interface IconButtonInternals {
|
||||||
@ -37,7 +37,7 @@ interface IconButtonInternals {
|
|||||||
describe('icon button tests', () => {
|
describe('icon button tests', () => {
|
||||||
const env = new Environment();
|
const env = new Environment();
|
||||||
|
|
||||||
describe('md-standard-icon-button', () => {
|
describe('md-icon-button', () => {
|
||||||
it('setting `disabled` updates the disabled attribute on the native ' +
|
it('setting `disabled` updates the disabled attribute on the native ' +
|
||||||
'button element',
|
'button element',
|
||||||
async () => {
|
async () => {
|
||||||
@ -65,7 +65,7 @@ describe('icon button tests', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('md-standard-icon-button link', () => {
|
describe('md-icon-button link', () => {
|
||||||
it('setting `ariaLabel` updates the aria-label attribute on the anchor' +
|
it('setting `ariaLabel` updates the aria-label attribute on the anchor' +
|
||||||
'tag',
|
'tag',
|
||||||
async () => {
|
async () => {
|
||||||
@ -79,7 +79,7 @@ describe('icon button tests', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('md-standard-icon-button toggle', () => {
|
describe('md-icon-button toggle', () => {
|
||||||
it('setting `disabled` updates the disabled attribute on the native ' +
|
it('setting `disabled` updates the disabled attribute on the native ' +
|
||||||
'button element',
|
'button element',
|
||||||
async () => {
|
async () => {
|
||||||
@ -165,12 +165,11 @@ describe('icon button tests', () => {
|
|||||||
it('if `flipsIconInRtl=true`, flips icon in an RTL context', async () => {
|
it('if `flipsIconInRtl=true`, flips icon in an RTL context', async () => {
|
||||||
const template = html`
|
const template = html`
|
||||||
<div dir="rtl">
|
<div dir="rtl">
|
||||||
<md-standard-icon-button aria-label="Star" .flipIconInRtl="${true}">
|
<md-icon-button aria-label="Star" .flipIconInRtl="${true}">
|
||||||
star
|
star
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
</div>`;
|
</div>`;
|
||||||
const element =
|
const element = env.render(template).querySelector('md-icon-button')!;
|
||||||
env.render(template).querySelector('md-standard-icon-button')!;
|
|
||||||
await env.waitForStability();
|
await env.waitForStability();
|
||||||
|
|
||||||
expect((element as unknown as IconButtonInternals).flipIcon).toBeTrue();
|
expect((element as unknown as IconButtonInternals).flipIcon).toBeTrue();
|
||||||
@ -180,13 +179,11 @@ describe('icon button tests', () => {
|
|||||||
async () => {
|
async () => {
|
||||||
const template = html`
|
const template = html`
|
||||||
<div dir="ltr">
|
<div dir="ltr">
|
||||||
<md-standard-icon-button aria-label="Star" .flipIconInRtl="${
|
<md-icon-button aria-label="Star" .flipIconInRtl="${true}">
|
||||||
true}">
|
|
||||||
star
|
star
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
</div>`;
|
</div>`;
|
||||||
const element =
|
const element = env.render(template).querySelector('md-icon-button')!;
|
||||||
env.render(template).querySelector('md-standard-icon-button')!;
|
|
||||||
await env.waitForStability();
|
await env.waitForStability();
|
||||||
|
|
||||||
expect((element as unknown as IconButtonInternals).flipIcon)
|
expect((element as unknown as IconButtonInternals).flipIcon)
|
||||||
@ -210,8 +207,7 @@ describe('icon button tests', () => {
|
|||||||
throw new Error('Invalid tag name: ' + type);
|
throw new Error('Invalid tag name: ' + type);
|
||||||
}
|
}
|
||||||
|
|
||||||
const element =
|
const element = env.render(template).querySelector('md-icon-button')!;
|
||||||
env.render(template).querySelector('md-standard-icon-button')!;
|
|
||||||
await env.waitForStability();
|
await env.waitForStability();
|
||||||
return {
|
return {
|
||||||
element,
|
element,
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
//
|
//
|
||||||
|
|
||||||
// go/keep-sorted start
|
// go/keep-sorted start
|
||||||
@use './standard-icon-button';
|
@use './icon-button';
|
||||||
// go/keep-sorted end
|
// go/keep-sorted end
|
||||||
|
|
||||||
@include standard-icon-button.styles;
|
@include icon-button.styles;
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
import '@material/web/progress/linear-progress.js';
|
import '@material/web/progress/linear-progress.js';
|
||||||
import '@material/web/button/tonal-button.js';
|
import '@material/web/button/tonal-button.js';
|
||||||
import '@material/web/icon/icon.js';
|
import '@material/web/icon/icon.js';
|
||||||
import '@material/web/iconbutton/standard-icon-button.js';
|
import '@material/web/iconbutton/icon-button.js';
|
||||||
import '@material/web/progress/circular-progress.js';
|
import '@material/web/progress/circular-progress.js';
|
||||||
|
|
||||||
import {MaterialStoryInit} from './material-collection.js';
|
import {MaterialStoryInit} from './material-collection.js';
|
||||||
@ -102,7 +102,7 @@ const components: MaterialStoryInit<StoryKnobs> = {
|
|||||||
width: 48px;
|
width: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.around-icon md-standard-icon-button {
|
.around-icon md-icon-button {
|
||||||
inset: 0;
|
inset: 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -146,13 +146,13 @@ const components: MaterialStoryInit<StoryKnobs> = {
|
|||||||
<div class="around-icon">
|
<div class="around-icon">
|
||||||
<md-circular-progress value=${value} max=${max}
|
<md-circular-progress value=${value} max=${max}
|
||||||
aria-label="Playback progress"></md-circular-progress>
|
aria-label="Playback progress"></md-circular-progress>
|
||||||
<md-standard-icon-button toggle
|
<md-icon-button toggle
|
||||||
aria-label="Play or pause music"
|
aria-label="Play or pause music"
|
||||||
@change=${toggleIndeterminate}
|
@change=${toggleIndeterminate}
|
||||||
>
|
>
|
||||||
<md-icon>play_arrow</md-icon>
|
<md-icon>play_arrow</md-icon>
|
||||||
<md-icon slot="selectedIcon">pause</md-icon>
|
<md-icon slot="selectedIcon">pause</md-icon>
|
||||||
</md-standard-icon-button>
|
</md-icon-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import '@material/web/icon/icon.js';
|
import '@material/web/icon/icon.js';
|
||||||
import '@material/web/iconbutton/standard-icon-button.js';
|
import '@material/web/iconbutton/icon-button.js';
|
||||||
import '@material/web/tabs/tabs.js';
|
import '@material/web/tabs/tabs.js';
|
||||||
|
|
||||||
import {MaterialStoryInit} from './material-collection.js';
|
import {MaterialStoryInit} from './material-collection.js';
|
||||||
@ -385,14 +385,13 @@ const dynamic: MaterialStoryInit<StoryKnobs> = {
|
|||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<md-standard-icon-button @click=${
|
<md-icon-button @click=${addTab}><md-icon>add</md-icon></md-icon-button>
|
||||||
addTab}><md-icon>add</md-icon></md-standard-icon-button>
|
<md-icon-button @click=${
|
||||||
<md-standard-icon-button @click=${
|
removeTab}><md-icon>remove</md-icon></md-icon-button>
|
||||||
removeTab}><md-icon>remove</md-icon></md-standard-icon-button>
|
<md-icon-button @click=${
|
||||||
<md-standard-icon-button @click=${
|
moveTabTowardsStart}><md-icon>chevron_left</md-icon></md-icon-button>
|
||||||
moveTabTowardsStart}><md-icon>chevron_left</md-icon></md-standard-icon-button>
|
<md-icon-button @click=${
|
||||||
<md-standard-icon-button @click=${
|
moveTabTowardsEnd}><md-icon>chevron_right</md-icon></md-icon-button>
|
||||||
moveTabTowardsEnd}><md-icon>chevron_right</md-icon></md-standard-icon-button>
|
|
||||||
</div>
|
</div>
|
||||||
<md-tabs
|
<md-tabs
|
||||||
class=${classMap(classes)}
|
class=${classMap(classes)}
|
||||||
|
Loading…
Reference in New Issue
Block a user