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
material-components · Jul 31, 2023 · cc26ef6 · cc26ef6
1 parent c38f1b4
commit cc26ef6
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 65 deletions.
diff --git a/all.ts b/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';

diff --git a/button/_tonal-button.scss → button/_filled-tonal-button.scss b/button/_tonal-button.scss → button/_filled-tonal-button.scss
@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './internal/tonal-button' show theme;
+@forward './internal/filled-tonal-button' show theme;
diff --git a/button/demo/stories.ts b/button/demo/stories.ts
@@ -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,22 +78,22 @@ 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"
         trailing-icon
       >
         ${linkLabel}
         <md-icon slot="icon" aria-hidden="true">open_in_new</md-icon>
-      </md-tonal-button>
+      </md-filled-tonal-button>
     `;
   }
 };

diff --git a/button/tonal-button.ts → button/filled-tonal-button.ts b/button/tonal-button.ts → button/filled-tonal-button.ts
@@ -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];
 }
diff --git a/button/filled-tonal-button_test.ts b/button/filled-tonal-button_test.ts
@@ -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);
+  });
+});
diff --git a/button/internal/_tonal-button.scss → button/internal/_filled-tonal-button.scss b/button/internal/_tonal-button.scss → button/internal/_filled-tonal-button.scss
@@ -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)
     );
   }

diff --git a/button/internal/tonal-button.ts → button/internal/filled-tonal-button.ts b/button/internal/tonal-button.ts → button/internal/filled-tonal-button.ts
@@ -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>`;
   }

diff --git a/button/internal/tonal-styles.scss → button/internal/filled-tonal-styles.scss b/button/internal/tonal-styles.scss → button/internal/filled-tonal-styles.scss
@@ -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;
diff --git a/button/tonal-button_test.ts b/button/tonal-button_test.ts
diff --git a/catalog/src/hydration-entrypoints/components/button.ts b/catalog/src/hydration-entrypoints/components/button.ts
@@ -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';
diff --git a/catalog/src/ssr.ts b/catalog/src/ssr.ts
@@ -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';

diff --git a/dialog/demo/stories.ts b/dialog/demo/stories.ts
@@ -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>`;
   }
 };

diff --git a/docs/components/button.md b/docs/components/button.md
@@ -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

diff --git a/progress/demo/stories.ts b/progress/demo/stories.ts
@@ -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}