From cc26ef6c02dabf9e853b4aee08f5cb3af5e29f8f Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Mon, 31 Jul 2023 14:56:57 -0700
Subject: [PATCH] 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
---
 all.ts                                        |  4 +-
 ...-button.scss => _filled-tonal-button.scss} |  2 +-
 button/demo/stories.ts                        | 10 ++---
 ...tonal-button.ts => filled-tonal-button.ts} | 10 ++---
 button/filled-tonal-button_test.ts            | 11 +++++
 ...-button.scss => _filled-tonal-button.scss} | 14 +++----
 ...tonal-button.ts => filled-tonal-button.ts} |  4 +-
 ...l-styles.scss => filled-tonal-styles.scss} |  4 +-
 button/tonal-button_test.ts                   | 11 -----
 .../components/button.ts                      |  2 +-
 catalog/src/ssr.ts                            |  2 +-
 dialog/demo/stories.ts                        |  4 +-
 docs/components/button.md                     | 40 +++++++++----------
 progress/demo/stories.ts                      | 12 +++---
 14 files changed, 65 insertions(+), 65 deletions(-)
 rename button/{_tonal-button.scss => _filled-tonal-button.scss} (58%)
 rename button/{tonal-button.ts => filled-tonal-button.ts} (78%)
 create mode 100644 button/filled-tonal-button_test.ts
 rename button/internal/{_tonal-button.scss => _filled-tonal-button.scss} (72%)
 rename button/internal/{tonal-button.ts => filled-tonal-button.ts} (77%)
 rename button/internal/{tonal-styles.scss => filled-tonal-styles.scss} (64%)
 delete mode 100644 button/tonal-button_test.ts

diff --git a/all.ts b/all.ts
index 0b6ec0471..edde6080c 100644
--- 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 b/button/_filled-tonal-button.scss
similarity index 58%
rename from button/_tonal-button.scss
rename to button/_filled-tonal-button.scss
index bfa861c6d..e3a710098 100644
--- a/button/_tonal-button.scss
+++ b/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
index dc006ab3f..29987ada8 100644
--- 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,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>
     `;
   }
 };
diff --git a/button/tonal-button.ts b/button/filled-tonal-button.ts
similarity index 78%
rename from button/tonal-button.ts
rename to button/filled-tonal-button.ts
index 524973cc4..0e7338272 100644
--- a/button/tonal-button.ts
+++ b/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
new file mode 100644
index 000000000..1ea0d50c8
--- /dev/null
+++ 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 b/button/internal/_filled-tonal-button.scss
similarity index 72%
rename from button/internal/_tonal-button.scss
rename to button/internal/_filled-tonal-button.scss
index 9cf02d3a3..5fa81c31e 100644
--- a/button/internal/_tonal-button.scss
+++ b/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 b/button/internal/filled-tonal-button.ts
similarity index 77%
rename from button/internal/tonal-button.ts
rename to button/internal/filled-tonal-button.ts
index 77151652e..7a96ffea4 100644
--- a/button/internal/tonal-button.ts
+++ b/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 b/button/internal/filled-tonal-styles.scss
similarity index 64%
rename from button/internal/tonal-styles.scss
rename to button/internal/filled-tonal-styles.scss
index 0a55cf76f..3cd964f08 100644
--- a/button/internal/tonal-styles.scss
+++ b/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
deleted file mode 100644
index 2f52984f7..000000000
--- a/button/tonal-button_test.ts
+++ /dev/null
@@ -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);
-  });
-});
diff --git a/catalog/src/hydration-entrypoints/components/button.ts b/catalog/src/hydration-entrypoints/components/button.ts
index 672baad3f..49744f2df 100644
--- 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';
\ No newline at end of file
diff --git a/catalog/src/ssr.ts b/catalog/src/ssr.ts
index 835f4bb11..61f7b9580 100644
--- 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
index cd95c8214..b6f83eb4e 100644
--- 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
index 4602ffc37..d3b3ae162 100644
--- 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
index 44339ea89..85f112bd7 100644
--- 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}