From e8b5b29d1eb18566126b77fcdc01c5f7f8899e25 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Tue, 19 Sep 2023 17:51:21 -0700
Subject: [PATCH] feat(iconbutton): update tokens to v0.192

BREAKING CHANGE: Replace `container-size` tokens with `container-width` and `container-height`.

PiperOrigin-RevId: 566801178
---
 catalog/src/components/theme-changer.ts       |  3 +-
 .../iconbutton/theming-filled-tonal.html      |  5 ++--
 .../figures/iconbutton/theming-filled.html    |  5 ++--
 .../figures/iconbutton/theming-outlined.html  |  5 ++--
 docs/components/icon-button.md                | 30 +++++++++++--------
 iconbutton/internal/_icon-button.scss         | 10 ++++---
 iconbutton/internal/_shared.scss              | 18 +++++------
 tokens/_md-comp-filled-icon-button.scss       |  5 ++--
 tokens/_md-comp-filled-tonal-icon-button.scss |  5 ++--
 tokens/_md-comp-icon-button.scss              |  5 ++--
 tokens/_md-comp-outlined-icon-button.scss     |  5 ++--
 11 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/catalog/src/components/theme-changer.ts b/catalog/src/components/theme-changer.ts
index 3d327b647a..a72dade027 100644
--- a/catalog/src/components/theme-changer.ts
+++ b/catalog/src/components/theme-changer.ts
@@ -259,7 +259,8 @@ export class ThemeChanger extends LitElement {
 
     copy-code-button {
       --md-icon-button-icon-size: var(--_copy-button-icon-size);
-      --md-icon-button-state-layer-size: var(--_copy-button-button-size);
+      --md-icon-button-state-layer-width: var(--_copy-button-button-size);
+      --md-icon-button-state-layer-height: var(--_copy-button-button-size);
       /*
        * Center the copy icon with the h2 text
        * -(icon button size - intrinsic icon size) / 2
diff --git a/docs/components/figures/iconbutton/theming-filled-tonal.html b/docs/components/figures/iconbutton/theming-filled-tonal.html
index c648cfd818..c96f3eaabd 100644
--- a/docs/components/figures/iconbutton/theming-filled-tonal.html
+++ b/docs/components/figures/iconbutton/theming-filled-tonal.html
@@ -5,7 +5,8 @@
       aria-label="Image of a filled tonal icon button with a different theme applied">
     <style>
       .styled-example.tonal {
-        --md-filled-tonal-icon-button-container-size: 80px;
+        --md-filled-tonal-icon-button-container-width: 80px;
+        --md-filled-tonal-icon-button-container-height: 80px;
         --md-filled-tonal-icon-button-container-shape: 0px;
         --md-filled-tonal-icon-button-icon-size: 40px;
         --md-sys-color-secondary-container: #006A6A;
@@ -16,4 +17,4 @@
         <md-icon>check</md-icon>
       </md-filled-tonal-icon-button>
   </figure>
-</div>
\ No newline at end of file
+</div>
diff --git a/docs/components/figures/iconbutton/theming-filled.html b/docs/components/figures/iconbutton/theming-filled.html
index 3f7cab958b..e44c3f2079 100644
--- a/docs/components/figures/iconbutton/theming-filled.html
+++ b/docs/components/figures/iconbutton/theming-filled.html
@@ -5,7 +5,8 @@
       aria-label="Image of a filled icon button with a different theme applied">
     <style>
       .styled-example.filled {
-        --md-filled-icon-button-container-size: 80px;
+        --md-filled-icon-button-container-width: 80px;
+        --md-filled-icon-button-container-height: 80px;
         --md-filled-icon-button-icon-size: 40px;
         --md-filled-icon-button-container-shape: 0px;
         --md-sys-color-primary: #dc362e;
@@ -16,4 +17,4 @@
         <md-icon>check</md-icon>
       </md-filled-icon-button>
   </figure>
-</div>
\ No newline at end of file
+</div>
diff --git a/docs/components/figures/iconbutton/theming-outlined.html b/docs/components/figures/iconbutton/theming-outlined.html
index ea265932ad..96d07577c4 100644
--- a/docs/components/figures/iconbutton/theming-outlined.html
+++ b/docs/components/figures/iconbutton/theming-outlined.html
@@ -5,7 +5,8 @@
       aria-label="Image of an outlined icon button with a different theme applied">
     <style>
       .styled-example.outlined > * {
-        --md-outlined-icon-button-container-size: 80px;
+        --md-outlined-icon-button-container-width: 80px;
+        --md-outlined-icon-button-container-height: 80px;
         --md-outlined-icon-button-container-shape: 0px;
         --md-outlined-icon-button-icon-size: 40px;
         --md-outlined-icon-button-unselected-outline-width: 4px;
@@ -17,4 +18,4 @@
         <md-icon>check</md-icon>
       </md-outlined-icon-button>
   </figure>
-</div>
\ No newline at end of file
+</div>
diff --git a/docs/components/icon-button.md b/docs/components/icon-button.md
index 9dcab8ebdf..019df2a01b 100644
--- a/docs/components/icon-button.md
+++ b/docs/components/icon-button.md
@@ -323,7 +323,8 @@ Token                                              | Default value
 -------------------------------------------------- | ------------------------
 `--md-filled-icon-button-selected-container-color` | `--md-sys-color-primary`
 `--md-filled-icon-button-container-shape`          | `9999px`
-`--md-filled-icon-button-container-size`           | `40px`
+`--md-filled-icon-button-container-width`          | `40px`
+`--md-filled-icon-button-container-height`         | `40px`
 `--md-filled-icon-button-icon-size`                | `24px`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-icon-button.scss)
@@ -341,7 +342,8 @@ Token                                              | Default value
 ```html
 <style>
 :root {
-  --md-filled-icon-button-container-size: 80px;
+  --md-filled-icon-button-container-width: 80px;
+  --md-filled-icon-button-container-height: 80px;
   --md-filled-icon-button-icon-size: 40px;
   --md-filled-icon-button-container-shape: 0px;
   --md-sys-color-primary: #dc362e;
@@ -359,7 +361,8 @@ Token                                                    | Default value
 -------------------------------------------------------- | -------------
 `--md-filled-tonal-icon-button-selected-container-color` | `--md-sys-color-secondary-container`
 `--md-filled-tonal-icon-button-container-shape`          | `9999px`
-`--md-filled-tonal-icon-button-container-size`           | `40px`
+`--md-filled-tonal-icon-button-container-width`          | `40px`
+`--md-filled-tonal-icon-button-container-height`         | `40px`
 `--md-filled-tonal-icon-button-icon-size`                | `24px`
 
 ### Filled Tonal Icon Button example
@@ -374,7 +377,8 @@ Token                                                    | Default value
 ```html
 <style>
 :root {
-  --md-filled-tonal-icon-button-container-size: 80px;
+  --md-filled-tonal-icon-button-container-width: 80px;
+  --md-filled-tonal-icon-button-container-height: 80px;
   --md-filled-tonal-icon-button-container-shape: 0px;
   --md-filled-tonal-icon-button-icon-size: 40px;
   --md-sys-color-secondary-container: #006A6A;
@@ -387,13 +391,14 @@ Token                                                    | Default value
 
 ### Outlined Icon Button tokens
 
-Token                                       | Default value
-------------------------------------------- | ------------------------
-`--md-outlined-icon-button-outline-color`   | `--md-sys-color-outline`
-`--md-outlined-icon-button-outline-width`   | `1px`
-`--md-outlined-icon-button-container-shape` | `9999px`
-`--md-outlined-icon-button-container-size`  | `40px`
-`--md-outlined-icon-button-icon-size`       | `24px`
+Token                                        | Default value
+-------------------------------------------- | ------------------------
+`--md-outlined-icon-button-outline-color`    | `--md-sys-color-outline`
+`--md-outlined-icon-button-outline-width`    | `1px`
+`--md-outlined-icon-button-container-shape`  | `9999px`
+`--md-outlined-icon-button-container-width`  | `40px`
+`--md-outlined-icon-button-container-height` | `40px`
+`--md-outlined-icon-button-icon-size`        | `24px`
 
 ### Outlined Icon Button example
 
@@ -407,7 +412,8 @@ Token                                       | Default value
 ```html
 <style>
 :root {
-  --md-outlined-icon-button-container-size: 80px;
+  --md-outlined-icon-button-container-width: 80px;
+  --md-outlined-icon-button-container-height: 80px;
   --md-outlined-icon-button-container-shape: 0px;
   --md-outlined-icon-button-icon-size: 40px;
   --md-outlined-icon-button-outline-width: 4px;
diff --git a/iconbutton/internal/_icon-button.scss b/iconbutton/internal/_icon-button.scss
index c5bd91e096..649bf177f8 100644
--- a/iconbutton/internal/_icon-button.scss
+++ b/iconbutton/internal/_icon-button.scss
@@ -41,14 +41,16 @@
     --_container-shape-start-end: 0;
     --_container-shape-end-end: 0;
     --_container-shape-end-start: 0;
-    --_container-size: 0;
+    --_container-height: 0;
+    --_container-width: 0;
 
-    height: var(--_state-layer-size);
-    width: var(--_state-layer-size);
+    height: var(--_state-layer-height);
+    width: var(--_state-layer-width);
   }
 
   :host([touch-target='wrapper']) {
-    margin: max(0px, (48px - var(--_state-layer-size)) / 2);
+    margin: max(0px, (48px - var(--_state-layer-height))/2)
+      max(0px, (48px - var(--_state-layer-width))/2);
   }
 
   md-focus-ring {
diff --git a/iconbutton/internal/_shared.scss b/iconbutton/internal/_shared.scss
index 01f9c7c335..eea1b05aae 100644
--- a/iconbutton/internal/_shared.scss
+++ b/iconbutton/internal/_shared.scss
@@ -20,13 +20,14 @@
     display: inline-flex;
     outline: none;
     -webkit-tap-highlight-color: transparent;
-    height: var(--_container-size);
-    width: var(--_container-size);
+    height: var(--_container-height);
+    width: var(--_container-width);
     justify-content: center;
   }
 
   :host([touch-target='wrapper']) {
-    margin: max(0px, (48px - var(--_container-size)) / 2);
+    margin: max(0px, (48px - var(--_container-height)) / 2)
+      max(0px, (48px - var(--_container-width)) / 2);
   }
 
   md-focus-ring {
@@ -45,13 +46,13 @@
   }
 
   .icon-button {
-    align-items: center;
+    place-items: center;
     background: none;
     border: none;
     box-sizing: border-box;
     cursor: pointer;
     display: flex;
-    justify-content: center;
+    place-content: center;
     outline: none;
     padding: 0;
     position: relative;
@@ -99,11 +100,8 @@
 
   .touch {
     position: absolute;
-    top: 50%;
-    height: 48px;
-    left: 50%;
-    width: 48px;
-    transform: translate(-50%, -50%);
+    height: max(48px, 100%);
+    width: max(48px, 100%);
   }
 
   :host([touch-target='none']) .touch {
diff --git a/tokens/_md-comp-filled-icon-button.scss b/tokens/_md-comp-filled-icon-button.scss
index 1252c02c55..eb8ead141c 100644
--- a/tokens/_md-comp-filled-icon-button.scss
+++ b/tokens/_md-comp-filled-icon-button.scss
@@ -7,15 +7,16 @@
 @use './md-sys-color';
 @use './md-sys-shape';
 @use './md-sys-state';
-@use './v0_172/md-comp-filled-icon-button';
+@use './v0_192/md-comp-filled-icon-button';
 @use './values';
 // go/keep-sorted end
 
 $supported-tokens: (
   // go/keep-sorted start
   'container-color',
+  'container-height',
   'container-shape',
-  'container-size',
+  'container-width',
   'disabled-container-color',
   'disabled-container-opacity',
   'disabled-icon-color',
diff --git a/tokens/_md-comp-filled-tonal-icon-button.scss b/tokens/_md-comp-filled-tonal-icon-button.scss
index 00a6875179..ce031ab30f 100644
--- a/tokens/_md-comp-filled-tonal-icon-button.scss
+++ b/tokens/_md-comp-filled-tonal-icon-button.scss
@@ -7,15 +7,16 @@
 @use './md-sys-color';
 @use './md-sys-shape';
 @use './md-sys-state';
-@use './v0_172/md-comp-filled-tonal-icon-button';
+@use './v0_192/md-comp-filled-tonal-icon-button';
 @use './values';
 // go/keep-sorted end
 
 $supported-tokens: (
   // go/keep-sorted start
   'container-color',
+  'container-height',
   'container-shape',
-  'container-size',
+  'container-width',
   'disabled-container-color',
   'disabled-container-opacity',
   'disabled-icon-color',
diff --git a/tokens/_md-comp-icon-button.scss b/tokens/_md-comp-icon-button.scss
index c7106be409..979ce8beed 100644
--- a/tokens/_md-comp-icon-button.scss
+++ b/tokens/_md-comp-icon-button.scss
@@ -7,7 +7,7 @@
 @use './md-sys-color';
 @use './md-sys-shape';
 @use './md-sys-state';
-@use './v0_172/md-comp-icon-button';
+@use './v0_192/md-comp-icon-button';
 @use './values';
 // go/keep-sorted end
 
@@ -32,8 +32,9 @@ $supported-tokens: (
   'selected-pressed-icon-color',
   'selected-pressed-state-layer-color',
   'selected-pressed-state-layer-opacity',
+  'state-layer-height',
   'state-layer-shape',
-  'state-layer-size',
+  'state-layer-width',
   // go/keep-sorted end
 );
 
diff --git a/tokens/_md-comp-outlined-icon-button.scss b/tokens/_md-comp-outlined-icon-button.scss
index f53dfae1f3..54aa6e7d32 100644
--- a/tokens/_md-comp-outlined-icon-button.scss
+++ b/tokens/_md-comp-outlined-icon-button.scss
@@ -7,14 +7,15 @@
 @use './md-sys-color';
 @use './md-sys-shape';
 @use './md-sys-state';
-@use './v0_172/md-comp-outlined-icon-button';
+@use './v0_192/md-comp-outlined-icon-button';
 @use './values';
 // go/keep-sorted end
 
 $supported-tokens: (
   // go/keep-sorted start
+  'container-height',
   'container-shape',
-  'container-size',
+  'container-width',
   'disabled-icon-color',
   'disabled-icon-opacity',
   'disabled-outline-color',