mirror of
https://github.com/material-components/material-web.git
synced 2024-08-16 17:10:22 +03:00
fix(button)!: rename <md-tonal-button>
to <md-filled-tonal-button>
BREAKING CHANGE: Rename "md-tonal-button" elements, imports, and tokens to "md-filled-tonal-button" PiperOrigin-RevId: 552600206
This commit is contained in:
parent
c38f1b4af4
commit
cc26ef6c02
4
all.ts
4
all.ts
@ -15,9 +15,9 @@
|
|||||||
// go/keep-sorted start
|
// go/keep-sorted start
|
||||||
import './button/elevated-button.js';
|
import './button/elevated-button.js';
|
||||||
import './button/filled-button.js';
|
import './button/filled-button.js';
|
||||||
|
import './button/filled-tonal-button.js';
|
||||||
import './button/outlined-button.js';
|
import './button/outlined-button.js';
|
||||||
import './button/text-button.js';
|
import './button/text-button.js';
|
||||||
import './button/tonal-button.js';
|
|
||||||
import './checkbox/checkbox.js';
|
import './checkbox/checkbox.js';
|
||||||
import './chips/assist-chip.js';
|
import './chips/assist-chip.js';
|
||||||
import './chips/filter-chip.js';
|
import './chips/filter-chip.js';
|
||||||
@ -63,9 +63,9 @@ import './textfield/outlined-text-field.js';
|
|||||||
// go/keep-sorted start
|
// go/keep-sorted start
|
||||||
export * from './button/elevated-button.js';
|
export * from './button/elevated-button.js';
|
||||||
export * from './button/filled-button.js';
|
export * from './button/filled-button.js';
|
||||||
|
export * from './button/filled-tonal-button.js';
|
||||||
export * from './button/outlined-button.js';
|
export * from './button/outlined-button.js';
|
||||||
export * from './button/text-button.js';
|
export * from './button/text-button.js';
|
||||||
export * from './button/tonal-button.js';
|
|
||||||
export * from './checkbox/checkbox.js';
|
export * from './checkbox/checkbox.js';
|
||||||
export * from './chips/assist-chip.js';
|
export * from './chips/assist-chip.js';
|
||||||
export * from './chips/filter-chip.js';
|
export * from './chips/filter-chip.js';
|
||||||
|
@ -3,4 +3,4 @@
|
|||||||
// SPDX-License-Identifier: Apache-2.0
|
// SPDX-License-Identifier: Apache-2.0
|
||||||
//
|
//
|
||||||
|
|
||||||
@forward './internal/tonal-button' show theme;
|
@forward './internal/filled-tonal-button' show theme;
|
@ -9,7 +9,7 @@ import '@material/web/button/elevated-button.js';
|
|||||||
import '@material/web/button/filled-button.js';
|
import '@material/web/button/filled-button.js';
|
||||||
import '@material/web/button/outlined-button.js';
|
import '@material/web/button/outlined-button.js';
|
||||||
import '@material/web/button/text-button.js';
|
import '@material/web/button/text-button.js';
|
||||||
import '@material/web/button/tonal-button.js';
|
import '@material/web/button/filled-tonal-button.js';
|
||||||
|
|
||||||
import {MaterialStoryInit} from './material-collection.js';
|
import {MaterialStoryInit} from './material-collection.js';
|
||||||
import {html} from 'lit';
|
import {html} from 'lit';
|
||||||
@ -78,14 +78,14 @@ const tonal: MaterialStoryInit<StoryKnobs> = {
|
|||||||
const standardLabel = label || 'Tonal';
|
const standardLabel = label || 'Tonal';
|
||||||
const linkLabel = label || 'Tonal link';
|
const linkLabel = label || 'Tonal link';
|
||||||
return html`
|
return html`
|
||||||
<md-tonal-button
|
<md-filled-tonal-button
|
||||||
aria-label=${ariaLabelMsg('tonal', label)}
|
aria-label=${ariaLabelMsg('tonal', label)}
|
||||||
?disabled=${disabled ?? false}
|
?disabled=${disabled ?? false}
|
||||||
>
|
>
|
||||||
${standardLabel}
|
${standardLabel}
|
||||||
</md-tonal-button>
|
</md-filled-tonal-button>
|
||||||
|
|
||||||
<md-tonal-button
|
<md-filled-tonal-button
|
||||||
aria-label=${ariaLabelMsg('tonal', linkLabel)}
|
aria-label=${ariaLabelMsg('tonal', linkLabel)}
|
||||||
href="https://google.com"
|
href="https://google.com"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
@ -93,7 +93,7 @@ const tonal: MaterialStoryInit<StoryKnobs> = {
|
|||||||
>
|
>
|
||||||
${linkLabel}
|
${linkLabel}
|
||||||
<md-icon slot="icon" aria-hidden="true">open_in_new</md-icon>
|
<md-icon slot="icon" aria-hidden="true">open_in_new</md-icon>
|
||||||
</md-tonal-button>
|
</md-filled-tonal-button>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -6,14 +6,14 @@
|
|||||||
|
|
||||||
import {customElement} from 'lit/decorators.js';
|
import {customElement} from 'lit/decorators.js';
|
||||||
|
|
||||||
|
import {FilledTonalButton} from './internal/filled-tonal-button.js';
|
||||||
|
import {styles as tonalStyles} from './internal/filled-tonal-styles.css.js';
|
||||||
import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.css.js';
|
import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.css.js';
|
||||||
import {styles as sharedStyles} from './internal/shared-styles.css.js';
|
import {styles as sharedStyles} from './internal/shared-styles.css.js';
|
||||||
import {TonalButton} from './internal/tonal-button.js';
|
|
||||||
import {styles as tonalStyles} from './internal/tonal-styles.css.js';
|
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface HTMLElementTagNameMap {
|
interface HTMLElementTagNameMap {
|
||||||
'md-tonal-button': MdTonalButton;
|
'md-filled-tonal-button': MdFilledTonalButton;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -38,7 +38,7 @@ declare global {
|
|||||||
* @final
|
* @final
|
||||||
* @suppress {visibility}
|
* @suppress {visibility}
|
||||||
*/
|
*/
|
||||||
@customElement('md-tonal-button')
|
@customElement('md-filled-tonal-button')
|
||||||
export class MdTonalButton extends TonalButton {
|
export class MdFilledTonalButton extends FilledTonalButton {
|
||||||
static override styles = [sharedStyles, sharedElevationStyles, tonalStyles];
|
static override styles = [sharedStyles, sharedElevationStyles, tonalStyles];
|
||||||
}
|
}
|
11
button/filled-tonal-button_test.ts
Normal file
11
button/filled-tonal-button_test.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
// import 'jasmine'; (google3-only)
|
||||||
|
|
||||||
|
import {createTokenTests} from '../testing/tokens.js';
|
||||||
|
|
||||||
|
import {MdFilledTonalButton} from './filled-tonal-button.js';
|
||||||
|
|
||||||
|
describe('<md-filled-tonal-button>', () => {
|
||||||
|
describe('.styles', () => {
|
||||||
|
createTokenTests(MdFilledTonalButton.styles);
|
||||||
|
});
|
||||||
|
});
|
@ -12,7 +12,7 @@
|
|||||||
|
|
||||||
@mixin theme($tokens) {
|
@mixin theme($tokens) {
|
||||||
$supported-tokens: list.join(
|
$supported-tokens: list.join(
|
||||||
tokens.$md-comp-filled-button-supported-tokens,
|
tokens.$md-comp-filled-tonal-button-supported-tokens,
|
||||||
(
|
(
|
||||||
'container-shape-start-start',
|
'container-shape-start-start',
|
||||||
'container-shape-start-end',
|
'container-shape-start-end',
|
||||||
@ -27,7 +27,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@if $value {
|
@if $value {
|
||||||
--md-tonal-button-#{$token}: #{$value};
|
--md-filled-tonal-button-#{$token}: #{$value};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -37,24 +37,24 @@
|
|||||||
|
|
||||||
:host {
|
:host {
|
||||||
@each $token, $value in $tokens {
|
@each $token, $value in $tokens {
|
||||||
--_#{$token}: var(--md-tonal-button-#{$token}, #{$value});
|
--_#{$token}: var(--md-filled-tonal-button-#{$token}, #{$value});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Support logical shape properties
|
// Support logical shape properties
|
||||||
--_container-shape-start-start: var(
|
--_container-shape-start-start: var(
|
||||||
--md-tonal-button-container-shape-start-start,
|
--md-filled-tonal-button-container-shape-start-start,
|
||||||
var(--_container-shape)
|
var(--_container-shape)
|
||||||
);
|
);
|
||||||
--_container-shape-start-end: var(
|
--_container-shape-start-end: var(
|
||||||
--md-tonal-button-container-shape-start-end,
|
--md-filled-tonal-button-container-shape-start-end,
|
||||||
var(--_container-shape)
|
var(--_container-shape)
|
||||||
);
|
);
|
||||||
--_container-shape-end-end: var(
|
--_container-shape-end-end: var(
|
||||||
--md-tonal-button-container-shape-end-end,
|
--md-filled-tonal-button-container-shape-end-end,
|
||||||
var(--_container-shape)
|
var(--_container-shape)
|
||||||
);
|
);
|
||||||
--_container-shape-end-start: var(
|
--_container-shape-end-start: var(
|
||||||
--md-tonal-button-container-shape-end-start,
|
--md-filled-tonal-button-container-shape-end-start,
|
||||||
var(--_container-shape)
|
var(--_container-shape)
|
||||||
);
|
);
|
||||||
}
|
}
|
@ -11,9 +11,9 @@ import {html} from 'lit';
|
|||||||
import {Button} from './button.js';
|
import {Button} from './button.js';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A tonal button component.
|
* A filled tonal button component.
|
||||||
*/
|
*/
|
||||||
export class TonalButton extends Button {
|
export class FilledTonalButton extends Button {
|
||||||
protected override renderElevation() {
|
protected override renderElevation() {
|
||||||
return html`<md-elevation></md-elevation>`;
|
return html`<md-elevation></md-elevation>`;
|
||||||
}
|
}
|
@ -4,7 +4,7 @@
|
|||||||
//
|
//
|
||||||
|
|
||||||
// go/keep-sorted start
|
// go/keep-sorted start
|
||||||
@use './tonal-button';
|
@use './filled-tonal-button';
|
||||||
// go/keep-sorted end
|
// go/keep-sorted end
|
||||||
|
|
||||||
@include tonal-button.styles;
|
@include filled-tonal-button.styles;
|
@ -1,11 +0,0 @@
|
|||||||
// import 'jasmine'; (google3-only)
|
|
||||||
|
|
||||||
import {createTokenTests} from '../testing/tokens.js';
|
|
||||||
|
|
||||||
import {MdTonalButton} from './tonal-button.js';
|
|
||||||
|
|
||||||
describe('<md-tonal-button>', () => {
|
|
||||||
describe('.styles', () => {
|
|
||||||
createTokenTests(MdTonalButton.styles);
|
|
||||||
});
|
|
||||||
});
|
|
@ -6,6 +6,6 @@
|
|||||||
|
|
||||||
import '@material/web/button/elevated-button.js';
|
import '@material/web/button/elevated-button.js';
|
||||||
import '@material/web/button/filled-button.js';
|
import '@material/web/button/filled-button.js';
|
||||||
import '@material/web/button/tonal-button.js';
|
import '@material/web/button/filled-tonal-button.js';
|
||||||
import '@material/web/button/outlined-button.js';
|
import '@material/web/button/outlined-button.js';
|
||||||
import '@material/web/button/text-button.js';
|
import '@material/web/button/text-button.js';
|
@ -24,7 +24,7 @@ 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/button/elevated-button.js';
|
import '@material/web/button/elevated-button.js';
|
||||||
import '@material/web/button/filled-button.js';
|
import '@material/web/button/filled-button.js';
|
||||||
import '@material/web/button/tonal-button.js';
|
import '@material/web/button/filled-tonal-button.js';
|
||||||
import '@material/web/button/outlined-button.js';
|
import '@material/web/button/outlined-button.js';
|
||||||
import '@material/web/button/text-button.js';
|
import '@material/web/button/text-button.js';
|
||||||
import '@material/web/progress/linear-progress.js';
|
import '@material/web/progress/linear-progress.js';
|
||||||
|
@ -8,7 +8,7 @@ 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';
|
||||||
import '@material/web/button/tonal-button.js';
|
import '@material/web/button/filled-tonal-button.js';
|
||||||
import '@material/web/button/filled-button.js';
|
import '@material/web/button/filled-button.js';
|
||||||
import '@material/web/button/text-button.js';
|
import '@material/web/button/text-button.js';
|
||||||
import '@material/web/dialog/dialog.js';
|
import '@material/web/dialog/dialog.js';
|
||||||
@ -112,7 +112,7 @@ const confirm: MaterialStoryInit<StoryKnobs> = {
|
|||||||
Deleting the selected photos will also remove them from all synced devices.
|
Deleting the selected photos will also remove them from all synced devices.
|
||||||
</div>
|
</div>
|
||||||
<md-text-button slot="footer" dialog-action="delete">Delete</md-text-button>
|
<md-text-button slot="footer" dialog-action="delete">Delete</md-text-button>
|
||||||
<md-tonal-button slot="footer" dialog-focus dialog-action="cancel">Cancel</md-tonal-button>
|
<md-filled-tonal-button slot="footer" dialog-focus dialog-action="cancel">Cancel</md-filled-tonal-button>
|
||||||
</md-dialog>`;
|
</md-dialog>`;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -118,7 +118,7 @@ payment'"
|
|||||||
<span>2</span>
|
<span>2</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<md-tonal-button>Tonal</md-tonal-button>
|
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||||
<span>3</span>
|
<span>3</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -198,10 +198,10 @@ box](images/button/usage-icon.png "Slot in icons to the appropriate slots")
|
|||||||
style="justify-content:center;gap: 8px;"
|
style="justify-content:center;gap: 8px;"
|
||||||
title="Outlined and filled buttons."
|
title="Outlined and filled buttons."
|
||||||
aria-label="An outlined button with the text 'Back' next to a filled button with the text 'Complete'">
|
aria-label="An outlined button with the text 'Back' next to a filled button with the text 'Complete'">
|
||||||
<md-tonal-button>
|
<md-filled-tonal-button>
|
||||||
Send
|
Send
|
||||||
<svg slot="icon" viewBox="0 0 48 48"><path d="M6 40V8l38 16Zm3-4.65L36.2 24 9 12.5v8.4L21.1 24 9 27Zm0 0V12.5 27Z"/></svg>
|
<svg slot="icon" viewBox="0 0 48 48"><path d="M6 40V8l38 16Zm3-4.65L36.2 24 9 12.5v8.4L21.1 24 9 27Zm0 0V12.5 27Z"/></svg>
|
||||||
</md-tonal-button>
|
</md-filled-tonal-button>
|
||||||
|
|
||||||
<md-text-button trailingicon>
|
<md-text-button trailingicon>
|
||||||
Open
|
Open
|
||||||
@ -215,10 +215,10 @@ box](images/button/usage-icon.png "Slot in icons to the appropriate slots")
|
|||||||
<!-- catalog-only-end -->
|
<!-- catalog-only-end -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<md-tonal-button>
|
<md-filled-tonal-button>
|
||||||
Send
|
Send
|
||||||
<svg slot="icon" viewBox="0 0 48 48"><path d="M6 40V8l38 16Zm3-4.65L36.2 24 9 12.5v8.4L21.1 24 9 27Zm0 0V12.5 27Z"/></svg>
|
<svg slot="icon" viewBox="0 0 48 48"><path d="M6 40V8l38 16Zm3-4.65L36.2 24 9 12.5v8.4L21.1 24 9 27Zm0 0V12.5 27Z"/></svg>
|
||||||
</md-tonal-button>
|
</md-filled-tonal-button>
|
||||||
|
|
||||||
<md-text-button trailingicon>
|
<md-text-button trailingicon>
|
||||||
Open
|
Open
|
||||||
@ -301,7 +301,7 @@ final actions that complete a flow, like Save, Join now, or Confirm.
|
|||||||
|
|
||||||
## Filled tonal button
|
## Filled tonal button
|
||||||
|
|
||||||
<!-- go/md-tonal-button -->
|
<!-- go/md-filled-tonal-button -->
|
||||||
|
|
||||||
A
|
A
|
||||||
[filled tonal button](https://m3.material.io/components/buttons/guidelines#07a1577b-aaf5-4824-a698-03526421058b)<!-- {.external} -->
|
[filled tonal button](https://m3.material.io/components/buttons/guidelines#07a1577b-aaf5-4824-a698-03526421058b)<!-- {.external} -->
|
||||||
@ -322,7 +322,7 @@ than an outline would give, such as "Next" in an onboarding flow.
|
|||||||
<figure
|
<figure
|
||||||
style="justify-content:center;align-items:center;"
|
style="justify-content:center;align-items:center;"
|
||||||
aria-label="A tonal button.">
|
aria-label="A tonal button.">
|
||||||
<md-tonal-button>Tonal</md-tonal-button>
|
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -331,7 +331,7 @@ than an outline would give, such as "Next" in an onboarding flow.
|
|||||||
<!-- catalog-only-end -->
|
<!-- catalog-only-end -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<md-tonal-button>Tonal</md-tonal-button>
|
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Outlined button
|
## Outlined button
|
||||||
@ -527,12 +527,12 @@ Token | Default value
|
|||||||
|
|
||||||
### Filled tonal button tokens
|
### Filled tonal button tokens
|
||||||
|
|
||||||
Token | Default value
|
Token | Default value
|
||||||
------------------------------------ | ---------------------------------------
|
------------------------------------------- | -------------
|
||||||
`--md-tonal-button-container-color` | `--md-sys-color-secondary-container`
|
`--md-filled-tonal-button-container-color` | `--md-sys-color-secondary-container`
|
||||||
`--md-tonal-button-container-shape` | `9999px`
|
`--md-filled-tonal-button-container-shape` | `9999px`
|
||||||
`--md-tonal-button-label-text-color` | `--md-sys-color-on-secondary-container`
|
`--md-filled-tonal-button-label-text-color` | `--md-sys-color-on-secondary-container`
|
||||||
`--md-tonal-button-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
|
`--md-filled-tonal-button-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
|
||||||
|
|
||||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-tonal-button.scss)
|
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-tonal-button.scss)
|
||||||
<!-- {.external} -->
|
<!-- {.external} -->
|
||||||
@ -557,14 +557,14 @@ Token | Default value
|
|||||||
<style>
|
<style>
|
||||||
.styled-example {
|
.styled-example {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
--md-tonal-button-container-shape: 0px;
|
--md-filled-tonal-button-container-shape: 0px;
|
||||||
--md-tonal-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
--md-filled-tonal-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||||
--md-sys-color-secondary-container: #CCE8E7;
|
--md-sys-color-secondary-container: #CCE8E7;
|
||||||
--md-sys-color-on-secondary-container: #051F1F;
|
--md-sys-color-on-secondary-container: #051F1F;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<md-tonal-button>Tonal</md-tonal-button>
|
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -575,14 +575,14 @@ Token | Default value
|
|||||||
```html
|
```html
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--md-tonal-button-container-shape: 0px;
|
--md-filled-tonal-button-container-shape: 0px;
|
||||||
--md-tonal-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
--md-filled-tonal-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||||
--md-sys-color-secondary-container: #CCE8E7;
|
--md-sys-color-secondary-container: #CCE8E7;
|
||||||
--md-sys-color-on-secondary-container: #051F1F;
|
--md-sys-color-on-secondary-container: #051F1F;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<md-tonal-button>Tonal</md-tonal-button>
|
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Outlined button tokens
|
### Outlined button tokens
|
||||||
|
@ -6,7 +6,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/filled-tonal-button.js';
|
||||||
import '@material/web/icon/icon.js';
|
import '@material/web/icon/icon.js';
|
||||||
import '@material/web/iconbutton/icon-button.js';
|
import '@material/web/iconbutton/icon-button.js';
|
||||||
import '@material/web/progress/circular-progress.js';
|
import '@material/web/progress/circular-progress.js';
|
||||||
@ -86,14 +86,14 @@ const components: MaterialStoryInit<StoryKnobs> = {
|
|||||||
gap: 32px;
|
gap: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
md-tonal-button {
|
md-filled-tonal-button {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
md-tonal-button md-circular-progress {
|
md-filled-tonal-button md-circular-progress {
|
||||||
--md-circular-progress-size: 36px;
|
--md-circular-progress-size: 36px;
|
||||||
--md-circular-progress-active-indicator-width: ${(4 / 36) * 100};
|
--md-circular-progress-active-indicator-width: ${(4 / 36) * 100};
|
||||||
--md-tonal-button-with-leading-icon-trailing-space: 8px;
|
--md-filled-tonal-button-with-leading-icon-trailing-space: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.around-icon {
|
.around-icon {
|
||||||
@ -137,11 +137,11 @@ const components: MaterialStoryInit<StoryKnobs> = {
|
|||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div class="components">
|
<div class="components">
|
||||||
<md-tonal-button @click=${toggleLoad}>
|
<md-filled-tonal-button @click=${toggleLoad}>
|
||||||
<md-circular-progress style="display: none" indeterminate
|
<md-circular-progress style="display: none" indeterminate
|
||||||
aria-label="Loading, please wait"></md-circular-progress>
|
aria-label="Loading, please wait"></md-circular-progress>
|
||||||
<span>Load</span>
|
<span>Load</span>
|
||||||
</md-tonal-button>
|
</md-filled-tonal-button>
|
||||||
|
|
||||||
<div class="around-icon">
|
<div class="around-icon">
|
||||||
<md-circular-progress value=${value} max=${max}
|
<md-circular-progress value=${value} max=${max}
|
||||||
|
Loading…
Reference in New Issue
Block a user