feat(button): added small height (#2071)

eBay · Jun 22, 2023 · 6bfce8f · 6bfce8f
1 parent 437fa20
commit 6bfce8f
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 5 deletions.
diff --git a/dist/button/button.css b/dist/button/button.css
@@ -202,6 +202,10 @@ button.btn--large svg.icon,
 a.fake-btn--large svg.icon {
   max-height: 22px;
 }
+button.btn--small svg.icon,
+a.fake-btn--small svg.icon {
+  max-height: 20px;
+}
 button.btn--primary[disabled],
 button.btn--primary[aria-disabled="true"] {
   background-color: var(--btn-primary-disabled-background-color, var(--color-foreground-disabled));
@@ -330,6 +334,13 @@ a.fake-btn--large {
   min-height: 48px;
   padding: 13px 20px;
 }
+button.btn--small,
+a.fake-btn--small {
+  border-radius: var(--btn-border-radius, calc(32px / 2));
+  font-size: 0.875rem;
+  min-height: 32px;
+  padding: 6px 16px;
+}
 button.btn--form,
 a.fake-btn--form {
   border-color: inherit;
@@ -349,6 +360,9 @@ a.fake-btn--form:active {
 button.btn--form.btn--large {
   padding: 13px 20px;
 }
+button.btn--form.btn--small {
+  padding: 6px 16px;
+}
 button.btn--transparent,
 a.fake-btn--transparent {
   background-color: transparent;

diff --git a/docs/_includes/button.html b/docs/_includes/button.html
@@ -33,6 +33,20 @@ <h3 id="button-default">Default Button</h3>
 <a class="fake-btn fake-btn--large" href="https://www.ebay.com">Large Link</a>
     {% endhighlight %}
 
+    <p>Use the <span class="highlight">small</span> modifier to decrease the size of the button.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <button class="btn btn--small">Small Button</button>
+            <a class="fake-btn fake-btn--small" href="https://www.ebay.com">Small Link</a>
+        </div>
+    </div>
+
+    {% highlight html %}
+<button class="btn btn--small">Button</button>
+<a class="fake-btn fake-btn--small" href="https://www.ebay.com">Small Link</a>
+    {% endhighlight %}
+
     <h3 id="button-primary">Primary Button</h3>
     <p>Use the <span class="highlight">primary</span> modifier to create a primary button style.</p>
     <div class="demo">

diff --git a/src/less/button/button.less b/src/less/button/button.less
@@ -7,11 +7,11 @@ a.fake-btn {
     .btn-base();
 
     background-color: transparent;
-    border-radius: var(--btn-border-radius, calc(@button-height-small / 2));
+    border-radius: var(--btn-border-radius, calc(@button-height-regular / 2));
     color: inherit;
     display: inline-block;
     font-size: @font-size-regular;
-    min-height: @button-height-small;
+    min-height: @button-height-regular;
     min-width: 88px;
     padding: @button-padding-vertical @button-padding-horizontal;
 }
@@ -46,7 +46,7 @@ a.fake-btn--borderless[aria-disabled="true"] {
 
 button.btn--slim,
 a.fake-btn--slim {
-    height: @button-height-small;
+    height: @button-height-regular;
     min-width: auto;
     padding-left: @spacing-100;
     padding-right: @spacing-100;
@@ -178,6 +178,11 @@ a.fake-btn--large svg.icon {
     max-height: @button-height-large - (@button-padding-vertical-large * 2);
 }
 
+button.btn--small svg.icon,
+a.fake-btn--small svg.icon {
+    max-height: @button-height-xsmall - (@button-padding-vertical-small * 2);
+}
+
 button.btn--primary[disabled],
 button.btn--primary[aria-disabled="true"] {
     .background-color-token(btn-primary-disabled-background-color, color-foreground-disabled);
@@ -335,6 +340,14 @@ a.fake-btn--large {
     padding: @button-padding-vertical-large @button-padding-horizontal;
 }
 
+button.btn--small,
+a.fake-btn--small {
+    border-radius: var(--btn-border-radius, calc(@button-height-xsmall / 2));
+    font-size: @font-size-regular;
+    min-height: @button-height-xsmall;
+    padding: @button-padding-vertical-small @button-padding-horizontal-small;
+}
+
 button.btn--form,
 a.fake-btn--form {
     border-color: inherit;
@@ -355,6 +368,10 @@ button.btn--form.btn--large {
     padding: @button-padding-vertical-large @button-padding-horizontal-large;
 }
 
+button.btn--form.btn--small {
+    padding: @button-padding-vertical-small @button-padding-horizontal-small;
+}
+
 button.btn--transparent,
 a.fake-btn--transparent {
     background-color: transparent;

diff --git a/src/less/button/stories/button/dimensions.stories.js b/src/less/button/stories/button/dimensions.stories.js
@@ -9,6 +9,21 @@ export const large = () => `
 </button>
 `;
 
+export const small = () => `
+<button type="button" class="btn btn--small">
+    <span class="btn__cell">
+        <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
+        <span>Button</span>
+    </span>
+</button>
+`;
+
+export const formLarge = () =>
+    '<button class="btn btn--form btn--large">Button</button>';
+
+export const formSmall = () =>
+    '<button class="btn btn--form btn--small">Button</button>';
+
 export const fluid = () => '<button class="btn btn--fluid">Button</button>';
 
 export const fixedWidth = () => `

diff --git a/src/less/cta-button/cta-button.less b/src/less/cta-button/cta-button.less
@@ -7,7 +7,10 @@ a.cta-btn {
 
     .background-color-token(cta-btn-background-color, color-background-primary);
     border-color: currentColor;
-    border-radius: var(--cta-btn-border-radius, calc(@button-height-small / 2));
+    border-radius: var(
+        --cta-btn-border-radius,
+        calc(@button-height-regular / 2)
+    );
     .color-token(cta-btn-foreground-color, color-foreground-primary);
     display: inline-block;
     font-size: @font-size-regular;

diff --git a/src/less/mixins/private/button-mixins.less b/src/less/mixins/private/button-mixins.less
@@ -1,5 +1,9 @@
-@button-height-small: 40px;
+@button-height-xsmall: 32px; // Rename to small after next major version
+@button-height-small: 40px; // Deprecated, use regular instead
+@button-height-regular: 40px;
 @button-height-large: 48px;
+@button-padding-vertical-small: 6px;
+@button-padding-horizontal-small: 16px;
 @button-padding-vertical: 9.5px;
 @button-padding-horizontal: 20px;
 @button-padding-vertical-large: 13px;