material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-07-14 17:00:28 +03:00
Code Issues Projects Releases Wiki Activity

fix(button)!: rename <md-tonal-button> to <md-filled-tonal-button>

Browse Source 
BREAKING CHANGE: Rename "md-tonal-button" elements, imports, and tokens to "md-filled-tonal-button"

PiperOrigin-RevId: 552600206
This commit is contained in:
Elizabeth Mitchell 2023-07-31 14:56:57 -07:00 committed by Copybara-Service
parent c38f1b4af4
commit cc26ef6c02
14 changed files with 65 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
all.ts
View File

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

2
button/_tonal-button.scss → button/_filled-tonal-button.scss
View File

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

10
button/demo/stories.ts
View File

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

10
button/tonal-button.ts → button/filled-tonal-button.ts
View File

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

14
button/internal/_tonal-button.scss → button/internal/_filled-tonal-button.scss
View File

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

4
button/internal/tonal-button.ts → button/internal/filled-tonal-button.ts
View File

@ -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
button/internal/tonal-styles.scss → button/internal/filled-tonal-styles.scss
View File

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

11
button/tonal-button_test.ts
View File

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

2
catalog/src/hydration-entrypoints/components/button.ts
View File

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

2
catalog/src/ssr.ts
View File

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

4
dialog/demo/stories.ts
View File

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

40
docs/components/button.md
View File

@ -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
@ -527,12 +527,12 @@ 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"`
Token | Default value
------------------------------------------- | -------------
`--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

12
progress/demo/stories.ts
View File

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