docs: added information about filled icon and fixed fit

eBay · Jul 2, 2024 · 3eb9f02 · 3eb9f02
1 parent 9ed42b1
commit 3eb9f02
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 33 deletions.
diff --git a/.changeset/quick-tools-arrive.md b/.changeset/quick-tools-arrive.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": patch
+---
+
+icons: added fit icon support
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/docs/_includes/icon.html b/docs/_includes/icon.html
@@ -21,9 +21,9 @@ <h3>General Markup Approach</h3>
     </div>
 
     {% highlight html %}
-    <svg class="icon icon--24" height="24" width="24">
-        <use href="#icon-information-24"></use>
-    </svg>
+<svg class="icon icon--24" height="24" width="24">
+    <use href="#icon-information-24"></use>
+</svg>
     {% endhighlight %}
 
     <p><strong>NOTE:</strong> Skin removes all pointer events on icons (via <span class="highlight">pointer-events:
@@ -38,13 +38,13 @@ <h3>Including an Icon</h3>
         You can include these on your page as raw SVGs as needed.</p>
 
     {% highlight html %}
-    <div hidden>
-        <svg>
-            <symbol id="icon-information-24" viewBox="0 0 24 24">
-                <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12C23.994 5.375 18.625.006 12 0Zm0 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c-.006 5.52-4.48 9.994-10 10Zm-1-11a1 1 0 1 1 2 0v6a1 1 0 1 1-2 0v-6Zm1-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
-            </symbol>
-        </svg>
-    </div>
+<div hidden>
+    <svg>
+        <symbol id="icon-information-24" viewBox="0 0 24 24">
+            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12C23.994 5.375 18.625.006 12 0Zm0 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c-.006 5.52-4.48 9.994-10 10Zm-1-11a1 1 0 1 1 2 0v6a1 1 0 1 1-2 0v-6Zm1-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+        </symbol>
+    </svg>
+</div>
     {% endhighlight %}
 
     <p><strong>NOTE:</strong> the SVG tag does not support the <span class="highlight">hidden</span> attribute, hence a
@@ -56,9 +56,9 @@ <h3>Presentational Icons</h3>
         assistive technology.</p>
 
     {% highlight html %}
-    <svg class="icon icon--24" height="24" width="24" aria-hidden="true">
-        <use href="#icon-information-24"></use>
-    </svg>
+<svg class="icon icon--24" height="24" width="24" aria-hidden="true">
+    <use href="#icon-information-24"></use>
+</svg>
     {% endhighlight %}
 
     <h3>Non-Presentational Icons</h3>
@@ -68,9 +68,9 @@ <h3>Non-Presentational Icons</h3>
             class="highlight">aria-label</span> for assistive technology.</p>
 
     {% highlight html %}
-    <svg class="icon icon--24" height="24" width="24" role="img" aria-label="Information">
-        <use href="#icon-information-24"></use>
-    </svg>
+<svg class="icon icon--24" height="24" width="24" role="img" aria-label="Information">
+    <use href="#icon-information-24"></use>
+</svg>
     {% endhighlight %}
 
     <h3>Icon Classes</h3>
@@ -105,6 +105,39 @@ <h4>Simple Icons</h4>
 </svg>
     {% endhighlight %}
 
+    <h4>Filled Icons</h4>
+    <p>There are certain filled icons that show up black by default. In order to color these icons, apply the <span class="highlight">icon--{name}-filled</span> modifier.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <svg aria-label="Filled Icons" class="icon icon--16 icon--confirmation-filled"
+                height="16" width="16" role="img">
+                {% include symbol.html name="confirmation-filled-16" %}
+            </svg>
+            <svg aria-label="Filled Icons" class="icon icon--16 icon--attention-filled"
+                height="16" width="16" role="img">
+                {% include symbol.html name="attention-filled-16" %}
+            </svg>
+            <svg aria-label="Filled Icons" class="icon icon--16 icon--information-filled"
+                height="16" width="16" role="img">
+                {% include symbol.html name="information-filled-16" %}
+            </svg>
+        </div>
+    </div>
+
+    {% highlight html %}
+<svg class="icon icon--16 icon--confirmation-filled" height="16" width="16">
+    <use href="#icon-confirmation-filled-16"></use>
+</svg>
+<svg class="icon icon--16 icon--attention-filled" height="16" width="16">
+    <use href="#icon-attention-filled-16"></use>
+</svg>
+<svg class="icon icon--16 icon--information-filled" height="16" width="16">
+    <use href="#icon-information-filled-16"></use>
+</svg>
+    {% endhighlight %}
+
+
     <h4>Complex Icons</h4>
     <p>Icons that are more complex and have multiple colors with a suffix of <span class="highlight">-colored</span> are grayscaled with an opacity.</p>
 

diff --git a/src/sass/icon/icon.scss b/src/sass/icon/icon.scss
@@ -5,42 +5,50 @@ svg {
     &.icon {
         @include icon-base-mixin();
     }
-    &.icon--12 {
+    &.icon--12,
+    &.icon--12-fit {
         height: 12px;
         width: 12px;
     }
 
-    &.icon--16 {
+    &.icon--16,
+    &.icon--16-fit {
         height: 16px;
         width: 16px;
     }
 
-    &.icon--18 {
+    &.icon--18,
+    &.icon--18-fit {
         height: 18px;
         width: 18px;
     }
 
-    &.icon--20 {
+    &.icon--20,
+    &.icon--20-fit {
         height: 20px;
         width: 20px;
     }
 
-    &.icon--24 {
+    &.icon--24,
+    &.icon--24-fit {
         height: 24px;
         width: 24px;
     }
 
-    &.icon--30 {
+    &.icon--30,
+    &.icon--30-fit {
         height: 30px;
         width: 30px;
     }
 
-    &.icon--32 {
+    &.icon--32,
+    &.icon--32-fit {
         height: 32px;
         width: 32px;
     }
 
-    &.icon--64 {
+    &.icon--64,
+    &.icon--64-fit {
         height: 32px;
         width: 64px;
     }