feat(utility): added image disabled utility class (#2363)

eBay · Jul 29, 2024 · 2cbfe64 · 2cbfe64
1 parent a96f2ac
commit 2cbfe64
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 6 deletions.
diff --git a/.changeset/healthy-kangaroos-wait.md b/.changeset/healthy-kangaroos-wait.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(utility): added image disabled utility class
diff --git a/dist/icon/icon.css b/dist/icon/icon.css
@@ -74,7 +74,7 @@ svg.icon--64-colored {
     height: 64px;
 }
 svg.icon--disabled {
-    filter: var(--color-icon-disabled-filter);
+    filter: var(--color-media-disabled-filter);
 }
 svg.icon--attention-filled {
     color: var(--color-foreground-attention);

diff --git a/dist/phone-input/phone-input.css b/dist/phone-input/phone-input.css
@@ -95,7 +95,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/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
@@ -92,6 +92,10 @@
     object-fit: contain;
 }
 
+.image-disabled {
+    filter: var(--color-media-disabled-filter);
+}
+
 .text-truncate {
     overflow: hidden;
     text-overflow: ellipsis;

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/src/sass/icon/icon.scss b/src/sass/icon/icon.scss
@@ -90,7 +90,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);
 }