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 <md-standard-icon-button> to <md-icon-button>

Browse Source 
PiperOrigin-RevId: 552545415
This commit is contained in:
Elizabeth Mitchell 2023-07-31 11:37:24 -07:00 committed by Copybara-Service
parent 2d1c58022e
commit a117b06b7b
22 changed files with 115 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
all.ts
View File

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

8
catalog/src/components/copy-code-button.ts
View File

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

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

@ -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
catalog/src/hydration-entrypoints/components/icon-button.ts
View File

@ -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';
import '@material/web/iconbutton/outlined-icon-button.js';

2
catalog/src/ssr.ts
View File

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

10
catalog/stories/components/story-knob-panel.ts
View File

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

4
common.ts
View File

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

6
dialog/demo/stories.ts
View File

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

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

@ -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>
@ -63,4 +63,4 @@
</div>
</div>
</figure>
</div>
</div>

6
docs/components/figures/iconbutton/theming-standard.html
View File

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

6
docs/components/figures/iconbutton/usage-standard.html
View File

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

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

@ -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>
@ -39,4 +39,4 @@
</md-outlined-icon-button>
</div>
</figure>
</div>
</div>

6
docs/components/figures/iconbutton/usage.html
View File

@ -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>
@ -16,4 +16,4 @@
<md-icon>check</md-icon>
</md-outlined-icon-button>
</figure>
</div>
</div>

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

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

2
iconbutton/_standard-icon-button.scss → iconbutton/_icon-button.scss
View File

@ -3,4 +3,4 @@
// SPDX-License-Identifier: Apache-2.0
//
@forward './internal/standard-icon-button' show theme;
@forward './internal/icon-button' show theme;

20
iconbutton/demo/stories.ts
View File

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

6
iconbutton/standard-icon-button.ts → iconbutton/icon-button.ts
View File

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

38
iconbutton/icon-button_test.ts
View File

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

0
iconbutton/internal/_standard-icon-button.scss → iconbutton/internal/_icon-button.scss
View File

4
iconbutton/internal/standard-styles.scss
View File

@ -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
progress/demo/stories.ts
View File

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

17
tabs/demo/stories.ts
View File

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