mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +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 './iconbutton/filled-icon-button.js';
|
||||
import './iconbutton/filled-tonal-icon-button.js';
|
||||
import './iconbutton/icon-button.js';
|
||||
import './iconbutton/outlined-icon-button.js';
|
||||
import './iconbutton/standard-icon-button.js';
|
||||
import './list/list.js';
|
||||
import './list/list-item.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 './iconbutton/filled-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/standard-icon-button.js';
|
||||
export * from './list/list.js';
|
||||
export * from './list/list-item.js';
|
||||
export * from './list/list-item-link.js';
|
||||
|
@ -4,7 +4,7 @@
|
||||
* 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 {css, html, LitElement} from 'lit';
|
||||
@ -24,7 +24,7 @@ export class CopyCodeButton extends LitElement {
|
||||
--_border-radius: calc(var(--catalog-code-block-border-radius) / 4);
|
||||
}
|
||||
|
||||
md-standard-icon-button {
|
||||
md-icon-button {
|
||||
color: red;
|
||||
position: absolute;
|
||||
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';
|
||||
return html`
|
||||
<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}>
|
||||
<span aria-hidden="true">${icon}</span>
|
||||
</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
`;
|
||||
}
|
||||
|
||||
|
@ -5,10 +5,10 @@
|
||||
*/
|
||||
|
||||
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 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 {customElement, query, state} from 'lit/decorators.js';
|
||||
import {live} from 'lit/directives/live.js';
|
||||
@ -28,15 +28,14 @@ import {materialDesign} from '../svg/material-design-logo.js';
|
||||
*/
|
||||
@state() private menuOpen = false;
|
||||
|
||||
@query('.end md-standard-icon-button')
|
||||
private paletteButton!: MdStandardIconButton;
|
||||
@query('.end md-icon-button') private paletteButton!: MdIconButton;
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<header>
|
||||
<div class="default-content">
|
||||
<section class="start">
|
||||
<md-standard-icon-button
|
||||
<md-icon-button
|
||||
toggle
|
||||
class="menu-button"
|
||||
.selected=${live(drawerOpenSignal.value)}
|
||||
@ -44,10 +43,10 @@ import {materialDesign} from '../svg/material-design-logo.js';
|
||||
>
|
||||
<span><md-icon>menu</md-icon></span>
|
||||
<span slot="selectedIcon"><md-icon>menu_open</md-icon></span>
|
||||
</md-standard-icon-button>
|
||||
<md-standard-icon-button href="/" class="home-button">
|
||||
</md-icon-button>
|
||||
<md-icon-button href="/" class="home-button">
|
||||
${materialDesign}
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
</section>
|
||||
|
||||
<a href="/" id="home-link">
|
||||
@ -71,9 +70,9 @@ import {materialDesign} from '../svg/material-design-logo.js';
|
||||
>
|
||||
<theme-changer></theme-changer>
|
||||
</md-menu>
|
||||
<md-standard-icon-button @click="${this.onPaletteClick}">
|
||||
<md-icon-button @click="${this.onPaletteClick}">
|
||||
<md-icon>palette</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
</lit-island>
|
||||
</section>
|
||||
</div>
|
||||
@ -106,7 +105,7 @@ import {materialDesign} from '../svg/material-design-logo.js';
|
||||
* Toggles the sidebar's open state.
|
||||
*/
|
||||
private onMenuIconToggle(e: InputEvent) {
|
||||
drawerOpenSignal.value = (e.target as MdStandardIconButton).selected;
|
||||
drawerOpenSignal.value = (e.target as MdIconButton).selected;
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
@ -135,14 +134,14 @@ import {materialDesign} from '../svg/material-design-logo.js';
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
md-standard-icon-button:not(:defined) {
|
||||
md-icon-button:not(:defined) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
md-standard-icon-button * {
|
||||
md-icon-button * {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
@ -4,7 +4,7 @@
|
||||
* 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-tonal-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/tabs/tabs.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-tonal-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 */
|
||||
|
||||
import '@material/web/iconbutton/standard-icon-button.js';
|
||||
import '@material/web/iconbutton/icon-button.js';
|
||||
import '@material/web/icon/icon.js';
|
||||
import '@material/web/elevation/elevation.js';
|
||||
|
||||
@ -72,9 +72,9 @@ export class StoryKnobPanel extends LitElement {
|
||||
|
||||
if (this.showCloseIcon) {
|
||||
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-standard-icon-button>
|
||||
</md-icon-button>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -96,13 +96,13 @@ export class StoryKnobPanel extends LitElement {
|
||||
const iconLabel = this.draggable ? 'dock' : 'pop out';
|
||||
|
||||
dragIcon = html`
|
||||
<md-standard-icon-button
|
||||
<md-icon-button
|
||||
class="dragIconButton"
|
||||
aria-label=${iconLabel}
|
||||
@click=${this.onDragIconClick}
|
||||
>
|
||||
<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 './dialog/dialog.js';
|
||||
import './icon/icon.js';
|
||||
import './iconbutton/standard-icon-button.js';
|
||||
import './iconbutton/icon-button.js';
|
||||
import './list/list.js';
|
||||
import './list/list-item.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 './dialog/dialog.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-item.js';
|
||||
export * from './list/list-item-link.js';
|
||||
|
@ -4,7 +4,7 @@
|
||||
* 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/radio/radio.js';
|
||||
import '@material/web/icon/icon.js';
|
||||
@ -208,7 +208,7 @@ const contacts: MaterialStoryInit<StoryKnobs> = {
|
||||
.stacked=${stacked}
|
||||
>
|
||||
<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>
|
||||
<div class="contact-content">
|
||||
@ -250,7 +250,7 @@ const floatingSheet: MaterialStoryInit<StoryKnobs> = {
|
||||
>
|
||||
<span slot="header">
|
||||
<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>
|
||||
<div>This is a floating sheet with title.
|
||||
Floating sheets offer no action buttons at the bottom,
|
||||
|
@ -37,13 +37,13 @@
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<div>
|
||||
<md-standard-icon-button>
|
||||
<md-icon-button>
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-standard-icon-button>
|
||||
<md-standard-icon-button toggle selected>
|
||||
</md-icon-button>
|
||||
<md-icon-button toggle selected>
|
||||
<md-icon slot="selectedIcon" class="filled">bookmark</md-icon>
|
||||
<md-icon class="filled">bookmark</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
</div>
|
||||
<span>1</span>
|
||||
</div>
|
||||
|
@ -15,8 +15,8 @@
|
||||
--md-sys-color-on-surface-variant: #dc362e;
|
||||
}
|
||||
</style>
|
||||
<md-standard-icon-button>
|
||||
<md-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
</figure>
|
||||
</div>
|
@ -3,8 +3,8 @@
|
||||
style="justify-content:center;gap: 8px;"
|
||||
title="Standard Icon Button with Check icon"
|
||||
aria-label="A check icon">
|
||||
<md-standard-icon-button>
|
||||
<md-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
</figure>
|
||||
</div>
|
@ -3,10 +3,10 @@
|
||||
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">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<md-standard-icon-button toggle>
|
||||
<md-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
<md-filled-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
@ -21,10 +21,10 @@
|
||||
</md-outlined-icon-button>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<md-standard-icon-button toggle selected>
|
||||
<md-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
<md-filled-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
|
@ -3,9 +3,9 @@
|
||||
style="justify-content:center;gap: 8px;"
|
||||
title="Icon buttons can be used within other components, such as a bottom app bar"
|
||||
aria-label="A row of icon buttons">
|
||||
<md-standard-icon-button>
|
||||
<md-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
<md-filled-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-filled-icon-button>
|
||||
|
@ -60,7 +60,7 @@ people take supplementary actions with a single tap.
|
||||
<!-- no-catalog-end -->
|
||||
<!-- 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)
|
||||
3. [Filled Tonal Icon Button](#filled-tonal-icon-button)
|
||||
4. [Outlined Icon Button](#outlined-icon-button)
|
||||
@ -85,9 +85,9 @@ the icon font.
|
||||
<!-- catalog-include "figures/iconbutton/usage.html" -->
|
||||
|
||||
```html
|
||||
<md-standard-icon-button>
|
||||
<md-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
<md-filled-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-filled-icon-button>
|
||||
@ -108,9 +108,9 @@ and optionally a
|
||||
attribute to turn the icon button into a link.
|
||||
|
||||
```html
|
||||
<md-standard-icon-button href="https://google.com">
|
||||
<md-icon-button href="https://google.com">
|
||||
<md-icon>check</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
```
|
||||
|
||||
### Toggle
|
||||
@ -129,10 +129,10 @@ adding or removing something from favorites.
|
||||
|
||||
```html
|
||||
<div>
|
||||
<md-standard-icon-button toggle>
|
||||
<md-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
<md-filled-icon-button toggle>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
@ -147,10 +147,10 @@ adding or removing something from favorites.
|
||||
</md-outlined-icon-button>
|
||||
</div>
|
||||
<div>
|
||||
<md-standard-icon-button toggle selected>
|
||||
<md-icon-button toggle selected>
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
<md-filled-icon-button toggle selected>
|
||||
<md-icon>close</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.
|
||||
|
||||
```html
|
||||
<md-standard-icon-button aria-label="Search for Contact">
|
||||
<md-icon-button aria-label="Search for Contact">
|
||||
<md-icon>search</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
```
|
||||
|
||||
### Toggle
|
||||
@ -184,17 +184,15 @@ Add a `selected-aria-label` attribute to toggle buttons whose labels need a more
|
||||
descriptive label when selected.
|
||||
|
||||
```html
|
||||
<md-standard-icon-button toggle
|
||||
<md-icon-button toggle
|
||||
aria-label="Unselected"
|
||||
selected-aria-label="Selected">
|
||||
<md-icon>close</md-icon>
|
||||
<md-icon slot="selectedIcon">check</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
```
|
||||
|
||||
## Standard Icon Button
|
||||
|
||||
<!-- go/md-standard-icon-button -->
|
||||
## Icon Button
|
||||
|
||||
Use
|
||||
[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" -->
|
||||
|
||||
```html
|
||||
<md-standard-icon-button>
|
||||
<md-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-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
|
||||
terms of color, and shape.
|
||||
|
||||
### Standard Icon Button tokens
|
||||
### Icon Button tokens
|
||||
|
||||
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)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Standard Icon Button example
|
||||
### Icon Button example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
@ -314,9 +312,9 @@ Token | Default value
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-standard-icon-button>
|
||||
<md-icon-button>
|
||||
<md-icon>check</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
```
|
||||
|
||||
### Filled Icon Button tokens
|
||||
|
@ -3,4 +3,4 @@
|
||||
// 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-tonal-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 {MaterialStoryInit} from './material-collection.js';
|
||||
@ -29,25 +29,25 @@ export interface StoryKnobs {
|
||||
}
|
||||
|
||||
const standard: MaterialStoryInit<StoryKnobs> = {
|
||||
name: '<md-standard-icon-button>',
|
||||
name: '<md-icon-button>',
|
||||
render(knobs) {
|
||||
const {icon, ariaLabel, disabled, flipIconInRtl} = knobs;
|
||||
return html`
|
||||
<md-standard-icon-button
|
||||
<md-icon-button
|
||||
.ariaLabel=${ariaLabel}
|
||||
.disabled=${disabled}
|
||||
.flipIconInRtl=${flipIconInRtl}
|
||||
${ref(rtlRefCallback(knobs))}>
|
||||
<md-icon>${icon}</md-icon>
|
||||
</md-standard-icon-button>`;
|
||||
</md-icon-button>`;
|
||||
}
|
||||
};
|
||||
const link: MaterialStoryInit<StoryKnobs> = {
|
||||
name: '<md-standard-icon-button> link',
|
||||
name: '<md-icon-button> link',
|
||||
render(knobs) {
|
||||
const {icon, ariaLabel, href, target, disabled, flipIconInRtl} = knobs;
|
||||
return html`
|
||||
<md-standard-icon-button
|
||||
<md-icon-button
|
||||
.ariaLabel=${ariaLabel}
|
||||
.disabled=${disabled}
|
||||
.flipIconInRtl=${flipIconInRtl}
|
||||
@ -55,11 +55,11 @@ const link: MaterialStoryInit<StoryKnobs> = {
|
||||
.target="${target}"
|
||||
${ref(rtlRefCallback(knobs))}>
|
||||
<md-icon>${icon}</md-icon>
|
||||
</md-standard-icon-button>`;
|
||||
</md-icon-button>`;
|
||||
}
|
||||
};
|
||||
const toggle: MaterialStoryInit<StoryKnobs> = {
|
||||
name: '<md-standard-icon-button> toggle',
|
||||
name: '<md-icon-button> toggle',
|
||||
render(knobs) {
|
||||
const {
|
||||
icon,
|
||||
@ -70,7 +70,7 @@ const toggle: MaterialStoryInit<StoryKnobs> = {
|
||||
disabled,
|
||||
} = knobs;
|
||||
return html`
|
||||
<md-standard-icon-button
|
||||
<md-icon-button
|
||||
toggle
|
||||
.disabled=${disabled}
|
||||
.selectedAriaLabel=${selectedAriaLabel}
|
||||
@ -81,7 +81,7 @@ const toggle: MaterialStoryInit<StoryKnobs> = {
|
||||
html`<md-icon slot="selectedIcon">${selectedIcon}</md-icon>` :
|
||||
nothing}
|
||||
<md-icon>${icon}</md-icon>
|
||||
</md-standard-icon-button>`;
|
||||
</md-icon-button>`;
|
||||
}
|
||||
};
|
||||
const outlined: MaterialStoryInit<StoryKnobs> = {
|
||||
|
@ -12,7 +12,7 @@ import {styles} from './internal/standard-styles.css.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'md-standard-icon-button': MdStandardIconButton;
|
||||
'md-icon-button': MdIconButton;
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,8 +31,8 @@ declare global {
|
||||
* - Add to Favorites
|
||||
* - Print
|
||||
*/
|
||||
@customElement('md-standard-icon-button')
|
||||
export class MdStandardIconButton extends IconButton {
|
||||
@customElement('md-icon-button')
|
||||
export class MdIconButton extends IconButton {
|
||||
static override styles = [sharedStyles, styles];
|
||||
|
||||
protected override getRenderClasses() {
|
@ -5,7 +5,7 @@
|
||||
*/
|
||||
|
||||
import '../icon/icon.js';
|
||||
import './standard-icon-button.js';
|
||||
import './icon-button.js';
|
||||
|
||||
import {html} from 'lit';
|
||||
|
||||
@ -14,20 +14,20 @@ import {Environment} from '../testing/environment.js';
|
||||
import {IconButtonHarness} from './harness.js';
|
||||
|
||||
const ICON_BUTTON_TEMPLATE = html`
|
||||
<md-standard-icon-button aria-label="Star">
|
||||
<md-icon-button aria-label="Star">
|
||||
<md-icon>star</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
`;
|
||||
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-standard-icon-button>
|
||||
</md-icon-button>
|
||||
`;
|
||||
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="offIcon">star_border</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
`;
|
||||
|
||||
interface IconButtonInternals {
|
||||
@ -37,7 +37,7 @@ interface IconButtonInternals {
|
||||
describe('icon button tests', () => {
|
||||
const env = new Environment();
|
||||
|
||||
describe('md-standard-icon-button', () => {
|
||||
describe('md-icon-button', () => {
|
||||
it('setting `disabled` updates the disabled attribute on the native ' +
|
||||
'button element',
|
||||
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' +
|
||||
'tag',
|
||||
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 ' +
|
||||
'button element',
|
||||
async () => {
|
||||
@ -165,12 +165,11 @@ describe('icon button tests', () => {
|
||||
it('if `flipsIconInRtl=true`, flips icon in an RTL context', async () => {
|
||||
const template = html`
|
||||
<div dir="rtl">
|
||||
<md-standard-icon-button aria-label="Star" .flipIconInRtl="${true}">
|
||||
<md-icon-button aria-label="Star" .flipIconInRtl="${true}">
|
||||
star
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
</div>`;
|
||||
const element =
|
||||
env.render(template).querySelector('md-standard-icon-button')!;
|
||||
const element = env.render(template).querySelector('md-icon-button')!;
|
||||
await env.waitForStability();
|
||||
|
||||
expect((element as unknown as IconButtonInternals).flipIcon).toBeTrue();
|
||||
@ -180,13 +179,11 @@ describe('icon button tests', () => {
|
||||
async () => {
|
||||
const template = html`
|
||||
<div dir="ltr">
|
||||
<md-standard-icon-button aria-label="Star" .flipIconInRtl="${
|
||||
true}">
|
||||
<md-icon-button aria-label="Star" .flipIconInRtl="${true}">
|
||||
star
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
</div>`;
|
||||
const element =
|
||||
env.render(template).querySelector('md-standard-icon-button')!;
|
||||
const element = env.render(template).querySelector('md-icon-button')!;
|
||||
await env.waitForStability();
|
||||
|
||||
expect((element as unknown as IconButtonInternals).flipIcon)
|
||||
@ -210,8 +207,7 @@ describe('icon button tests', () => {
|
||||
throw new Error('Invalid tag name: ' + type);
|
||||
}
|
||||
|
||||
const element =
|
||||
env.render(template).querySelector('md-standard-icon-button')!;
|
||||
const element = env.render(template).querySelector('md-icon-button')!;
|
||||
await env.waitForStability();
|
||||
return {
|
||||
element,
|
||||
|
@ -4,7 +4,7 @@
|
||||
//
|
||||
|
||||
// go/keep-sorted start
|
||||
@use './standard-icon-button';
|
||||
@use './icon-button';
|
||||
// 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/button/tonal-button.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 {MaterialStoryInit} from './material-collection.js';
|
||||
@ -102,7 +102,7 @@ const components: MaterialStoryInit<StoryKnobs> = {
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.around-icon md-standard-icon-button {
|
||||
.around-icon md-icon-button {
|
||||
inset: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
@ -146,13 +146,13 @@ const components: MaterialStoryInit<StoryKnobs> = {
|
||||
<div class="around-icon">
|
||||
<md-circular-progress value=${value} max=${max}
|
||||
aria-label="Playback progress"></md-circular-progress>
|
||||
<md-standard-icon-button toggle
|
||||
<md-icon-button toggle
|
||||
aria-label="Play or pause music"
|
||||
@change=${toggleIndeterminate}
|
||||
>
|
||||
<md-icon>play_arrow</md-icon>
|
||||
<md-icon slot="selectedIcon">pause</md-icon>
|
||||
</md-standard-icon-button>
|
||||
</md-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
@ -5,7 +5,7 @@
|
||||
*/
|
||||
|
||||
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 {MaterialStoryInit} from './material-collection.js';
|
||||
@ -385,14 +385,13 @@ const dynamic: MaterialStoryInit<StoryKnobs> = {
|
||||
|
||||
return html`
|
||||
<div class="controls">
|
||||
<md-standard-icon-button @click=${
|
||||
addTab}><md-icon>add</md-icon></md-standard-icon-button>
|
||||
<md-standard-icon-button @click=${
|
||||
removeTab}><md-icon>remove</md-icon></md-standard-icon-button>
|
||||
<md-standard-icon-button @click=${
|
||||
moveTabTowardsStart}><md-icon>chevron_left</md-icon></md-standard-icon-button>
|
||||
<md-standard-icon-button @click=${
|
||||
moveTabTowardsEnd}><md-icon>chevron_right</md-icon></md-standard-icon-button>
|
||||
<md-icon-button @click=${addTab}><md-icon>add</md-icon></md-icon-button>
|
||||
<md-icon-button @click=${
|
||||
removeTab}><md-icon>remove</md-icon></md-icon-button>
|
||||
<md-icon-button @click=${
|
||||
moveTabTowardsStart}><md-icon>chevron_left</md-icon></md-icon-button>
|
||||
<md-icon-button @click=${
|
||||
moveTabTowardsEnd}><md-icon>chevron_right</md-icon></md-icon-button>
|
||||
</div>
|
||||
<md-tabs
|
||||
class=${classMap(classes)}
|
||||
|
Loading…
Reference in New Issue
Block a user