feat(icon-button): add size modifiers (eBay#1930)

cordeliadillon · Nov 11, 2022 · 3ce71e3 · 3ce71e3
1 parent cb6395e
commit 3ce71e3
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 4 deletions.
diff --git a/dist/icon-button/icon-button.css b/dist/icon-button/icon-button.css
@@ -14,15 +14,14 @@ a.icon-link {
   font-family: inherit;
   height: 40px;
   margin: 0;
-  min-width: 40px;
   padding: 0;
   vertical-align: text-bottom;
   width: 40px;
 }
 button.icon-btn > svg,
 a.icon-link > svg {
   fill: var(--icon-button-icon-foreground-color, var(--color-foreground-primary));
-  max-width: 100%;
+  max-width: 75%;
   position: relative;
 }
 button.icon-btn:focus,
@@ -39,6 +38,16 @@ button.icon-btn:not(:focus-visible),
 a.icon-link:not(:focus-visible) {
   outline: none;
 }
+button.icon-btn.icon-btn--small,
+a.icon-link.icon-link--small {
+  height: 32px;
+  width: 32px;
+}
+button.icon-btn.icon-btn--large,
+a.icon-link.icon-link--large {
+  height: 48px;
+  width: 48px;
+}
 button.icon-btn--transparent,
 a.icon-link--transparent {
   background-color: transparent;

diff --git a/docs/_includes/icon-button.html b/docs/_includes/icon-button.html
@@ -31,6 +31,44 @@
 </a>
     {% endhighlight %}
 
+    <div class="demo">
+        <div class="demo__inner">
+            <button class="icon-btn icon-btn--large" type="button" aria-label="Save">
+                <svg class="icon icon--save" focusable="false" width="16" height="16" aria-hidden="true">
+                    {% include symbol.html name="save" %}
+                </svg>
+            </button>
+            <button class="icon-btn" type="button" aria-label="Save">
+                <svg class="icon icon--save" focusable="false" width="16" height="16" aria-hidden="true">
+                    {% include symbol.html name="save" %}
+                </svg>
+            </button>
+            <button class="icon-btn icon-btn--small" type="button" aria-label="Save">
+                <svg class="icon icon--save" focusable="false" width="16" height="16" aria-hidden="true">
+                    {% include symbol.html name="save" %}
+                </svg>
+            </button>
+        </div>
+    </div>
+
+    {% highlight html %}
+<button class="icon-btn icon-btn--large" type="button" aria-label="Save">
+    <svg class="icon icon--save" focusable="false" width="16" height="16" aria-hidden="true">
+        <use xlink:href="icons.svg#icon-save"></use>
+    </svg>
+</button>
+<button class="icon-btn" type="button" aria-label="Save">
+    <svg class="icon icon--save" focusable="false" width="16" height="16" aria-hidden="true">
+        <use xlink:href="icons.svg#icon-save"></use>
+    </svg>
+</button>
+<button class="icon-btn icon-btn--small" type="button" aria-label="Save">
+    <svg class="icon icon--save" focusable="false" width="16" height="16" aria-hidden="true">
+        <use xlink:href="icons.svg#icon-save"></use>
+    </svg>
+</button>
+    {% endhighlight %}
+
     <p>To remove the background colour and hover states, apply the <span class="highlight">icon-btn--transparent</span> modifier. This is typically needed if the icon button is placed on a non-default background colour or if the icon has a colour fill (as in the case below).</p>
 
     <div class="demo">

diff --git a/src/less/icon-button/icon-button.less b/src/less/icon-button/icon-button.less
@@ -19,15 +19,14 @@ a.icon-link {
     font-family: inherit;
     height: 40px;
     margin: 0;
-    min-width: 40px;
     padding: 0;
     vertical-align: text-bottom;
     width: 40px;
 
     > svg {
         .fill-token(icon-button-icon-foreground-color, color-foreground-primary);
 
-        max-width: 100%; // helps when width & height HTML attrs not set
+        max-width: 75%;
         position: relative; // Safari centering
     }
 
@@ -45,6 +44,18 @@ a.icon-link {
     }
 }
 
+button.icon-btn.icon-btn--small,
+a.icon-link.icon-link--small {
+    height: 32px;
+    width: 32px;
+}
+
+button.icon-btn.icon-btn--large,
+a.icon-link.icon-link--large {
+    height: 48px;
+    width: 48px;
+}
+
 button.icon-btn--transparent,
 a.icon-link--transparent {
     background-color: transparent;