feat(iconbutton): update tokens to v0.192

BREAKING CHANGE: Replace `container-size` tokens with `container-width` and `container-height`. PiperOrigin-RevId: 566801178
material-components · Sep 20, 2023 · e8b5b29 · e8b5b29
1 parent 0595799
commit e8b5b29
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 41 deletions.
diff --git 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
@@ -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>
+</div>
diff --git 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>
+</div>
diff --git 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>
+</div>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',