From 2329d2b419d2963d8050dc4cda1607f165f3d2fd Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Sun, 30 Jul 2023 17:18:05 -0700
Subject: [PATCH] fix(button)!: rename spacing tokens

BREAKING CHANGE: Rename `--md-<button>-spacing-<token>` to `--md-<button>-<token>-space`. Rename `--md-<button>-with-icon-*` to `--md-<button>-with-leading-icon-*`.

PiperOrigin-RevId: 552323014
---
 button/internal/_shared.scss                  | 12 ++++-----
 .../stories/components/knob-ui-components.ts  |  4 +--
 progress/demo/stories.ts                      |  2 +-
 tokens/_md-comp-elevated-button.scss          | 26 ++++++++++---------
 tokens/_md-comp-filled-button.scss            | 26 ++++++++++---------
 tokens/_md-comp-filled-tonal-button.scss      | 26 ++++++++++---------
 tokens/_md-comp-outlined-button.scss          | 26 ++++++++++---------
 tokens/_md-comp-text-button.scss              | 26 ++++++++++---------
 8 files changed, 79 insertions(+), 69 deletions(-)

diff --git a/button/internal/_shared.scss b/button/internal/_shared.scss
index 4fbeba681..7dc98ac9f 100644
--- a/button/internal/_shared.scss
+++ b/button/internal/_shared.scss
@@ -67,8 +67,8 @@
     font: var(--_label-text-type);
     color: var(--_label-text-color);
     // TODO(b/181413732): Verify token below are named correctly
-    padding-inline-start: var(--_spacing-leading);
-    padding-inline-end: var(--_spacing-trailing);
+    padding-inline-start: var(--_leading-space);
+    padding-inline-end: var(--_trailing-space);
     gap: 8px;
 
     &::before {
@@ -139,13 +139,13 @@
 
   // TODO(b/181413732): Verify token below are named correctly
   .button--icon-leading {
-    padding-inline-start: var(--_with-icon-spacing-leading);
-    padding-inline-end: var(--_with-icon-spacing-trailing);
+    padding-inline-start: var(--_with-leading-icon-leading-space);
+    padding-inline-end: var(--_with-leading-icon-trailing-space);
   }
 
   .button--icon-trailing {
-    padding-inline-start: var(--_with-trailing-icon-spacing-leading);
-    padding-inline-end: var(--_with-trailing-icon-spacing-trailing);
+    padding-inline-start: var(--_with-trailing-icon-leading-space);
+    padding-inline-end: var(--_with-trailing-icon-trailing-space);
   }
 
   .link-button-wrapper {
diff --git a/catalog/stories/components/knob-ui-components.ts b/catalog/stories/components/knob-ui-components.ts
index 7a6a55a1a..399047165 100644
--- a/catalog/stories/components/knob-ui-components.ts
+++ b/catalog/stories/components/knob-ui-components.ts
@@ -56,8 +56,8 @@ export class KnobColorSelector extends LitElement {
       display: inline-block;
       position: relative;
       margin-inline-end: 16px;
-      --md-outlined-button-spacing-leading: 8px;
-      --md-outlined-button-spacing-trailing: 8px;
+      --md-outlined-button-leading-space: 8px;
+      --md-outlined-button-trailing-space: 8px;
       --md-outlined-button-container-height: 32px;
       /* md-checkbox sizes */
       --_component-size: 40px;
diff --git a/progress/demo/stories.ts b/progress/demo/stories.ts
index a25a6e8f4..9258cbd63 100644
--- a/progress/demo/stories.ts
+++ b/progress/demo/stories.ts
@@ -93,7 +93,7 @@ const components: MaterialStoryInit<StoryKnobs> = {
     md-tonal-button md-circular-progress {
       --md-circular-progress-size: 36px;
       --md-circular-progress-active-indicator-width: ${(4 / 36) * 100};
-      --md-tonal-button-with-icon-spacing-trailing: 8px;
+      --md-tonal-button-with-leading-icon-trailing-space: 8px;
     }
 
     .around-icon {
diff --git a/tokens/_md-comp-elevated-button.scss b/tokens/_md-comp-elevated-button.scss
index 857d826b1..d6bab8ce2 100644
--- a/tokens/_md-comp-elevated-button.scss
+++ b/tokens/_md-comp-elevated-button.scss
@@ -42,17 +42,17 @@ $supported-tokens: (
   'icon-size',
   'label-text-color',
   'label-text-type',
+  'leading-space',
   'pressed-container-elevation',
   'pressed-icon-color',
   'pressed-label-text-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
-  'spacing-leading',
-  'spacing-trailing',
-  'with-icon-spacing-leading',
-  'with-icon-spacing-trailing',
-  'with-trailing-icon-spacing-leading',
-  'with-trailing-icon-spacing-trailing',
+  'trailing-space',
+  'with-leading-icon-leading-space',
+  'with-leading-icon-trailing-space',
+  'with-trailing-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -84,13 +84,15 @@ $_default: (
     $new-tokens: (
       // TODO(b/198759625): Remove once spacing tokens are formally added
       // go/keep-sorted start
-      'spacing-leading': if($exclude-hardcoded-values, null, 24px),
-      'spacing-trailing': if($exclude-hardcoded-values, null, 24px),
-      'with-icon-spacing-leading': if($exclude-hardcoded-values, null, 16px),
-      'with-icon-spacing-trailing': if($exclude-hardcoded-values, null, 24px),
-      'with-trailing-icon-spacing-leading':
+      'leading-space': if($exclude-hardcoded-values, null, 24px),
+      'trailing-space': if($exclude-hardcoded-values, null, 24px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 16px),
+      'with-leading-icon-trailing-space':
         if($exclude-hardcoded-values, null, 24px),
-      'with-trailing-icon-spacing-trailing':
+      'with-trailing-icon-leading-space':
+        if($exclude-hardcoded-values, null, 24px),
+      'with-trailing-icon-trailing-space':
         if($exclude-hardcoded-values, null, 16px),
       // go/keep-sorted end
     ),
diff --git a/tokens/_md-comp-filled-button.scss b/tokens/_md-comp-filled-button.scss
index a6caf6c2b..20b13e9f9 100644
--- a/tokens/_md-comp-filled-button.scss
+++ b/tokens/_md-comp-filled-button.scss
@@ -42,17 +42,17 @@ $supported-tokens: (
   'icon-size',
   'label-text-color',
   'label-text-type',
+  'leading-space',
   'pressed-container-elevation',
   'pressed-icon-color',
   'pressed-label-text-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
-  'spacing-leading',
-  'spacing-trailing',
-  'with-icon-spacing-leading',
-  'with-icon-spacing-trailing',
-  'with-trailing-icon-spacing-leading',
-  'with-trailing-icon-spacing-trailing',
+  'trailing-space',
+  'with-leading-icon-leading-space',
+  'with-leading-icon-trailing-space',
+  'with-trailing-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -84,13 +84,15 @@ $_default: (
     $new-tokens: (
       // TODO(b/198759625): Remove once spacing tokens are formally added
       // go/keep-sorted start
-      'spacing-leading': if($exclude-hardcoded-values, null, 24px),
-      'spacing-trailing': if($exclude-hardcoded-values, null, 24px),
-      'with-icon-spacing-leading': if($exclude-hardcoded-values, null, 16px),
-      'with-icon-spacing-trailing': if($exclude-hardcoded-values, null, 24px),
-      'with-trailing-icon-spacing-leading':
+      'leading-space': if($exclude-hardcoded-values, null, 24px),
+      'trailing-space': if($exclude-hardcoded-values, null, 24px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 16px),
+      'with-leading-icon-trailing-space':
         if($exclude-hardcoded-values, null, 24px),
-      'with-trailing-icon-spacing-trailing':
+      'with-trailing-icon-leading-space':
+        if($exclude-hardcoded-values, null, 24px),
+      'with-trailing-icon-trailing-space':
         if($exclude-hardcoded-values, null, 16px),
       // go/keep-sorted end
     ),
diff --git a/tokens/_md-comp-filled-tonal-button.scss b/tokens/_md-comp-filled-tonal-button.scss
index fd1fd4599..4879670b0 100644
--- a/tokens/_md-comp-filled-tonal-button.scss
+++ b/tokens/_md-comp-filled-tonal-button.scss
@@ -42,17 +42,17 @@ $supported-tokens: (
   'icon-size',
   'label-text-color',
   'label-text-type',
+  'leading-space',
   'pressed-container-elevation',
   'pressed-icon-color',
   'pressed-label-text-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
-  'spacing-leading',
-  'spacing-trailing',
-  'with-icon-spacing-leading',
-  'with-icon-spacing-trailing',
-  'with-trailing-icon-spacing-leading',
-  'with-trailing-icon-spacing-trailing',
+  'trailing-space',
+  'with-leading-icon-leading-space',
+  'with-leading-icon-trailing-space',
+  'with-trailing-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -84,13 +84,15 @@ $_default: (
     $new-tokens: (
       // TODO(b/198759625): Remove once spacing tokens are formally added
       // go/keep-sorted start
-      'spacing-leading': if($exclude-hardcoded-values, null, 24px),
-      'spacing-trailing': if($exclude-hardcoded-values, null, 24px),
-      'with-icon-spacing-leading': if($exclude-hardcoded-values, null, 16px),
-      'with-icon-spacing-trailing': if($exclude-hardcoded-values, null, 24px),
-      'with-trailing-icon-spacing-leading':
+      'leading-space': if($exclude-hardcoded-values, null, 24px),
+      'trailing-space': if($exclude-hardcoded-values, null, 24px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 16px),
+      'with-leading-icon-trailing-space':
         if($exclude-hardcoded-values, null, 24px),
-      'with-trailing-icon-spacing-trailing':
+      'with-trailing-icon-leading-space':
+        if($exclude-hardcoded-values, null, 24px),
+      'with-trailing-icon-trailing-space':
         if($exclude-hardcoded-values, null, 16px),
       // go/keep-sorted end
     ),
diff --git a/tokens/_md-comp-outlined-button.scss b/tokens/_md-comp-outlined-button.scss
index 5d776b9df..222c8c4e3 100644
--- a/tokens/_md-comp-outlined-button.scss
+++ b/tokens/_md-comp-outlined-button.scss
@@ -35,6 +35,7 @@ $supported-tokens: (
   'icon-size',
   'label-text-color',
   'label-text-type',
+  'leading-space',
   'outline-color',
   'outline-width',
   'pressed-icon-color',
@@ -42,12 +43,11 @@ $supported-tokens: (
   'pressed-outline-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
-  'spacing-leading',
-  'spacing-trailing',
-  'with-icon-spacing-leading',
-  'with-icon-spacing-trailing',
-  'with-trailing-icon-spacing-leading',
-  'with-trailing-icon-spacing-trailing',
+  'trailing-space',
+  'with-leading-icon-leading-space',
+  'with-leading-icon-trailing-space',
+  'with-trailing-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -80,13 +80,15 @@ $_default: (
     $new-tokens: (
       // TODO(b/198759625): Remove once spacing tokens are formally added
       // go/keep-sorted start
-      'spacing-leading': if($exclude-hardcoded-values, null, 24px),
-      'spacing-trailing': if($exclude-hardcoded-values, null, 24px),
-      'with-icon-spacing-leading': if($exclude-hardcoded-values, null, 16px),
-      'with-icon-spacing-trailing': if($exclude-hardcoded-values, null, 24px),
-      'with-trailing-icon-spacing-leading':
+      'leading-space': if($exclude-hardcoded-values, null, 24px),
+      'trailing-space': if($exclude-hardcoded-values, null, 24px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 16px),
+      'with-leading-icon-trailing-space':
         if($exclude-hardcoded-values, null, 24px),
-      'with-trailing-icon-spacing-trailing':
+      'with-trailing-icon-leading-space':
+        if($exclude-hardcoded-values, null, 24px),
+      'with-trailing-icon-trailing-space':
         if($exclude-hardcoded-values, null, 16px),
       // go/keep-sorted end
     ),
diff --git a/tokens/_md-comp-text-button.scss b/tokens/_md-comp-text-button.scss
index f537e31ec..35316edc2 100644
--- a/tokens/_md-comp-text-button.scss
+++ b/tokens/_md-comp-text-button.scss
@@ -33,16 +33,16 @@ $supported-tokens: (
   'icon-size',
   'label-text-color',
   'label-text-type',
+  'leading-space',
   'pressed-icon-color',
   'pressed-label-text-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
-  'spacing-leading',
-  'spacing-trailing',
-  'with-icon-spacing-leading',
-  'with-icon-spacing-trailing',
-  'with-trailing-icon-spacing-leading',
-  'with-trailing-icon-spacing-trailing',
+  'trailing-space',
+  'with-leading-icon-leading-space',
+  'with-leading-icon-trailing-space',
+  'with-trailing-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -73,13 +73,15 @@ $_default: (
     $new-tokens: (
       // TODO(b/198759625): Remove once spacing tokens are formally added
       // go/keep-sorted start
-      'spacing-leading': if($exclude-hardcoded-values, null, 12px),
-      'spacing-trailing': if($exclude-hardcoded-values, null, 12px),
-      'with-icon-spacing-leading': if($exclude-hardcoded-values, null, 12px),
-      'with-icon-spacing-trailing': if($exclude-hardcoded-values, null, 16px),
-      'with-trailing-icon-spacing-leading':
+      'leading-space': if($exclude-hardcoded-values, null, 12px),
+      'trailing-space': if($exclude-hardcoded-values, null, 12px),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 12px),
+      'with-leading-icon-trailing-space':
         if($exclude-hardcoded-values, null, 16px),
-      'with-trailing-icon-spacing-trailing':
+      'with-trailing-icon-leading-space':
+        if($exclude-hardcoded-values, null, 16px),
+      'with-trailing-icon-trailing-space':
         if($exclude-hardcoded-values, null, 12px),
       // go/keep-sorted end
     ),