mirror of
https://github.com/material-components/material-web.git
synced 2024-08-16 09:00:32 +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
|
||||
import './button/elevated-button.js';
|
||||
import './button/filled-button.js';
|
||||
import './button/filled-tonal-button.js';
|
||||
import './button/outlined-button.js';
|
||||
import './button/text-button.js';
|
||||
import './button/tonal-button.js';
|
||||
import './checkbox/checkbox.js';
|
||||
import './chips/assist-chip.js';
|
||||
import './chips/filter-chip.js';
|
||||
@ -63,9 +63,9 @@ import './textfield/outlined-text-field.js';
|
||||
// go/keep-sorted start
|
||||
export * from './button/elevated-button.js';
|
||||
export * from './button/filled-button.js';
|
||||
export * from './button/filled-tonal-button.js';
|
||||
export * from './button/outlined-button.js';
|
||||
export * from './button/text-button.js';
|
||||
export * from './button/tonal-button.js';
|
||||
export * from './checkbox/checkbox.js';
|
||||
export * from './chips/assist-chip.js';
|
||||
export * from './chips/filter-chip.js';
|
||||
|
@ -3,4 +3,4 @@
|
||||
// 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/outlined-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 {html} from 'lit';
|
||||
@ -78,14 +78,14 @@ const tonal: MaterialStoryInit<StoryKnobs> = {
|
||||
const standardLabel = label || 'Tonal';
|
||||
const linkLabel = label || 'Tonal link';
|
||||
return html`
|
||||
<md-tonal-button
|
||||
<md-filled-tonal-button
|
||||
aria-label=${ariaLabelMsg('tonal', label)}
|
||||
?disabled=${disabled ?? false}
|
||||
>
|
||||
${standardLabel}
|
||||
</md-tonal-button>
|
||||
</md-filled-tonal-button>
|
||||
|
||||
<md-tonal-button
|
||||
<md-filled-tonal-button
|
||||
aria-label=${ariaLabelMsg('tonal', linkLabel)}
|
||||
href="https://google.com"
|
||||
target="_blank"
|
||||
@ -93,7 +93,7 @@ const tonal: MaterialStoryInit<StoryKnobs> = {
|
||||
>
|
||||
${linkLabel}
|
||||
<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 {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 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 {
|
||||
interface HTMLElementTagNameMap {
|
||||
'md-tonal-button': MdTonalButton;
|
||||
'md-filled-tonal-button': MdFilledTonalButton;
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,7 +38,7 @@ declare global {
|
||||
* @final
|
||||
* @suppress {visibility}
|
||||
*/
|
||||
@customElement('md-tonal-button')
|
||||
export class MdTonalButton extends TonalButton {
|
||||
@customElement('md-filled-tonal-button')
|
||||
export class MdFilledTonalButton extends FilledTonalButton {
|
||||
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) {
|
||||
$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-end',
|
||||
@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
@if $value {
|
||||
--md-tonal-button-#{$token}: #{$value};
|
||||
--md-filled-tonal-button-#{$token}: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -37,24 +37,24 @@
|
||||
|
||||
:host {
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: var(--md-tonal-button-#{$token}, #{$value});
|
||||
--_#{$token}: var(--md-filled-tonal-button-#{$token}, #{$value});
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-tonal-button-container-shape-start-start,
|
||||
--md-filled-tonal-button-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-tonal-button-container-shape-start-end,
|
||||
--md-filled-tonal-button-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-tonal-button-container-shape-end-end,
|
||||
--md-filled-tonal-button-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-tonal-button-container-shape-end-start,
|
||||
--md-filled-tonal-button-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
@ -11,9 +11,9 @@ import {html} from 'lit';
|
||||
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() {
|
||||
return html`<md-elevation></md-elevation>`;
|
||||
}
|
@ -4,7 +4,7 @@
|
||||
//
|
||||
|
||||
// go/keep-sorted start
|
||||
@use './tonal-button';
|
||||
@use './filled-tonal-button';
|
||||
// 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/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/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/button/elevated-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/text-button.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/radio/radio.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/text-button.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.
|
||||
</div>
|
||||
<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>`;
|
||||
}
|
||||
};
|
||||
|
@ -118,7 +118,7 @@ payment'"
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div>
|
||||
<md-tonal-button>Tonal</md-tonal-button>
|
||||
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||
<span>3</span>
|
||||
</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;"
|
||||
title="Outlined and filled buttons."
|
||||
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
|
||||
<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>
|
||||
Open
|
||||
@ -215,10 +215,10 @@ box](images/button/usage-icon.png "Slot in icons to the appropriate slots")
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-tonal-button>
|
||||
<md-filled-tonal-button>
|
||||
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>
|
||||
</md-tonal-button>
|
||||
</md-filled-tonal-button>
|
||||
|
||||
<md-text-button trailingicon>
|
||||
Open
|
||||
@ -301,7 +301,7 @@ final actions that complete a flow, like Save, Join now, or Confirm.
|
||||
|
||||
## Filled tonal button
|
||||
|
||||
<!-- go/md-tonal-button -->
|
||||
<!-- go/md-filled-tonal-button -->
|
||||
|
||||
A
|
||||
[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
|
||||
style="justify-content:center;align-items:center;"
|
||||
aria-label="A tonal button.">
|
||||
<md-tonal-button>Tonal</md-tonal-button>
|
||||
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@ -331,7 +331,7 @@ than an outline would give, such as "Next" in an onboarding flow.
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-tonal-button>Tonal</md-tonal-button>
|
||||
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||
```
|
||||
|
||||
## Outlined button
|
||||
@ -528,11 +528,11 @@ Token | Default value
|
||||
### Filled tonal button tokens
|
||||
|
||||
Token | Default value
|
||||
------------------------------------ | ---------------------------------------
|
||||
`--md-tonal-button-container-color` | `--md-sys-color-secondary-container`
|
||||
`--md-tonal-button-container-shape` | `9999px`
|
||||
`--md-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-container-color` | `--md-sys-color-secondary-container`
|
||||
`--md-filled-tonal-button-container-shape` | `9999px`
|
||||
`--md-filled-tonal-button-label-text-color` | `--md-sys-color-on-secondary-container`
|
||||
`--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)
|
||||
<!-- {.external} -->
|
||||
@ -557,14 +557,14 @@ Token | Default value
|
||||
<style>
|
||||
.styled-example {
|
||||
background-color: white;
|
||||
--md-tonal-button-container-shape: 0px;
|
||||
--md-tonal-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-filled-tonal-button-container-shape: 0px;
|
||||
--md-filled-tonal-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-sys-color-secondary-container: #CCE8E7;
|
||||
--md-sys-color-on-secondary-container: #051F1F;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-tonal-button>Tonal</md-tonal-button>
|
||||
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@ -575,14 +575,14 @@ Token | Default value
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-tonal-button-container-shape: 0px;
|
||||
--md-tonal-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-filled-tonal-button-container-shape: 0px;
|
||||
--md-filled-tonal-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
||||
--md-sys-color-secondary-container: #CCE8E7;
|
||||
--md-sys-color-on-secondary-container: #051F1F;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-tonal-button>Tonal</md-tonal-button>
|
||||
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||
```
|
||||
|
||||
### Outlined button tokens
|
||||
|
@ -6,7 +6,7 @@
|
||||
|
||||
|
||||
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/iconbutton/icon-button.js';
|
||||
import '@material/web/progress/circular-progress.js';
|
||||
@ -86,14 +86,14 @@ const components: MaterialStoryInit<StoryKnobs> = {
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
md-tonal-button {
|
||||
md-filled-tonal-button {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
md-tonal-button md-circular-progress {
|
||||
md-filled-tonal-button md-circular-progress {
|
||||
--md-circular-progress-size: 36px;
|
||||
--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 {
|
||||
@ -137,11 +137,11 @@ const components: MaterialStoryInit<StoryKnobs> = {
|
||||
|
||||
return html`
|
||||
<div class="components">
|
||||
<md-tonal-button @click=${toggleLoad}>
|
||||
<md-filled-tonal-button @click=${toggleLoad}>
|
||||
<md-circular-progress style="display: none" indeterminate
|
||||
aria-label="Loading, please wait"></md-circular-progress>
|
||||
<span>Load</span>
|
||||
</md-tonal-button>
|
||||
</md-filled-tonal-button>
|
||||
|
||||
<div class="around-icon">
|
||||
<md-circular-progress value=${value} max=${max}
|
||||
|
Loading…
Reference in New Issue
Block a user