feat(iconbutton): add disabled-icon-opacity token

PiperOrigin-RevId: 530782342
material-components · May 10, 2023 · 7403ce1 · 7403ce1
1 parent d029b63
commit 7403ce1
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 2 deletions.
diff --git a/iconbutton/lib/_filled-icon-button.scss b/iconbutton/lib/_filled-icon-button.scss
@@ -98,6 +98,10 @@
     );
   }
 
+  .icon-button:disabled .icon {
+    opacity: var(--_disabled-icon-opacity);
+  }
+
   .toggle-filled {
     &:not(:disabled) {
       background-color: var(--_unselected-container-color);

diff --git a/iconbutton/lib/_filled-tonal-icon-button.scss b/iconbutton/lib/_filled-tonal-icon-button.scss
@@ -100,6 +100,10 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
     );
   }
 
+  .icon-button:disabled .icon {
+    opacity: var(--_disabled-icon-opacity);
+  }
+
   .toggle-filled-tonal {
     &:not(:disabled) {
       background-color: var(--_unselected-container-color);

diff --git a/iconbutton/lib/_outlined-icon-button.scss b/iconbutton/lib/_outlined-icon-button.scss
@@ -108,6 +108,10 @@
     }
   }
 
+  .outlined:disabled .icon {
+    opacity: var(--_disabled-icon-opacity);
+  }
+
   .outlined::before {
     block-size: 100%;
     border-style: solid;

diff --git a/iconbutton/lib/_shared.scss b/iconbutton/lib/_shared.scss
@@ -110,7 +110,7 @@
   // changes, so the opacity value is null), use the default opacity value.
   // Otherwise, the color is not flattened, meaning that the color would
   // be applied without any opacity, which is incorrect.
-  $opacity-keys: [ 'disabled-container-opacity', 'disabled-icon-opacity',
+  $opacity-keys: [ 'disabled-container-opacity',
     'disabled-selected-container-opacity' ];
 
   @each $opacity-key in $opacity-keys {
@@ -153,7 +153,6 @@
         color-key: 'disabled-container-color',
         opacity-key: 'disabled-container-opacity'
       ),
-      (color-key: 'disabled-icon-color', opacity-key: 'disabled-icon-opacity'),
       (
         color-key: 'disabled-selected-container-color',
         opacity-key: 'disabled-selected-container-opacity'

diff --git a/iconbutton/lib/_standard-icon-button.scss b/iconbutton/lib/_standard-icon-button.scss
@@ -81,6 +81,10 @@
     }
   }
 
+  .standard:disabled .icon {
+    opacity: var(--_disabled-icon-opacity);
+  }
+
   .selected {
     &:not(:disabled) {
       color: var(--_selected-icon-color);