feat(utility): added image disabled utility class

eBay · Jul 1, 2024 · 5237220 · 5237220
1 parent 28f5ae1
commit 5237220
Show file tree

Hide file tree

Showing 16 changed files with 25 additions and 13 deletions.
diff --git a/dist/icon/icon.css b/dist/icon/icon.css
diff --git a/dist/icon/icon.css.map b/dist/icon/icon.css.map
diff --git a/dist/phone-input/phone-input.css b/dist/phone-input/phone-input.css
diff --git a/dist/phone-input/phone-input.css.map b/dist/phone-input/phone-input.css.map
diff --git a/dist/tokens/evo-light.css b/dist/tokens/evo-light.css
@@ -183,5 +183,5 @@
         var(--color-ai-solid-green-subtle) 66%,
         var(--color-ai-solid-green-subtle) 100%
     );
-    --color-icon-disabled-filter: grayscale(1) opacity(0.25);
+    --color-media-disabled-filter: grayscale(1) opacity(0.25);
 }
diff --git a/dist/utility/utility.css b/dist/utility/utility.css
diff --git a/dist/utility/utility.css.map b/dist/utility/utility.css.map
diff --git a/docs/_includes/utility.html b/docs/_includes/utility.html
@@ -39,6 +39,10 @@ <h2><span class="secondary-text">@ebay/skin/</span>utility</h2>
                 <td>.image-scale</td>
                 <td>Image will scale up and down</td>
             </tr>
+            <tr>
+                <td>.image-disabled</td>
+                <td>Image will appear disabled.</td>
+            </tr>
             <tr>
                 <td>.text-truncate</td>
                 <td>Truncate single-line text</td>

diff --git a/docs/static/skin-default.min.css.map b/docs/static/skin-default.min.css.map
diff --git a/docs/static/skin-full.min.css.map b/docs/static/skin-full.min.css.map
diff --git a/docs/static/skin-headless.min.css.map b/docs/static/skin-headless.min.css.map
diff --git a/docs/storybook/main.711a6b3d.iframe.bundle.js b/docs/storybook/main.711a6b3d.iframe.bundle.js
diff --git a/src/sass/icon/icon.scss b/src/sass/icon/icon.scss
@@ -78,7 +78,7 @@ svg {
     }
 
     &.icon--disabled {
-        filter: var(--color-icon-disabled-filter);
+        filter: var(--color-media-disabled-filter);
     }
     &.icon--attention-filled {
         @include color-token(color-foreground-attention);

diff --git a/src/sass/phone-input/phone-input.scss b/src/sass/phone-input/phone-input.scss
@@ -96,7 +96,7 @@
 
 .phone-input--disabled span.fflag,
 .phone-input--disabled svg.flag {
-    filter: var(--color-icon-disabled-filter);
+    filter: var(--color-media-disabled-filter);
 }
 
 .phone-input--disabled .textbox {

diff --git a/src/sass/utility/utility.scss b/src/sass/utility/utility.scss
@@ -71,6 +71,10 @@
     @include image-treatment(16px);
 }
 
+.image-disabled {
+    filter: var(--color-media-disabled-filter);
+}
+
 .text-truncate {
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/src/tokens/evo-light.css b/src/tokens/evo-light.css
@@ -183,5 +183,5 @@
         var(--color-ai-solid-green-subtle) 66%,
         var(--color-ai-solid-green-subtle) 100%
     );
-    --color-icon-disabled-filter: grayscale(1) opacity(0.25);
+    --color-media-disabled-filter: grayscale(1) opacity(0.25);
 }