From 8f7c221163abcf5a7af6245a915fbb14de28aee8 Mon Sep 17 00:00:00 2001
From: Alyssa <alyssa.butler.extern@z-lab.com>
Date: Tue, 7 May 2019 14:13:18 +0200
Subject: [PATCH] fix(button): height fixed changed to min-height

---
 src/elements/button/ButtonPage.jsx | 30 ++++++++++++++++++++++++------
 src/elements/button/_button.scss   |  9 ++++++---
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/elements/button/ButtonPage.jsx b/src/elements/button/ButtonPage.jsx
index de2b0a9..6b152fa 100644
--- a/src/elements/button/ButtonPage.jsx
+++ b/src/elements/button/ButtonPage.jsx
@@ -81,32 +81,50 @@ function ButtonPage() {
         </div>
         <p>Icon</p>
         <div className="theme-cat" style={{ marginBottom: 15 }}>
-          <button type="button" className="zep-button zep-button-primary">
+          <button
+            type="button"
+            className="zep-button zep-button-primary zep-button-icon"
+          >
             <CopyIcon className="zep-button__icon" />
           </button>
         </div>
         <div className="theme-zeppelin" style={{ marginBottom: 15 }}>
-          <button type="button" className="zep-button zep-button-primary">
+          <button
+            type="button"
+            className="zep-button zep-button-primary zep-button-icon"
+          >
             <CopyIcon className="zep-button__icon" />
           </button>
         </div>
         <div className="theme-rental" style={{ marginBottom: 15 }}>
-          <button type="button" className="zep-button zep-button-primary">
+          <button
+            type="button"
+            className="zep-button zep-button-primary zep-button-icon"
+          >
             <CopyIcon className="zep-button__icon" />
           </button>
         </div>
         <div className="theme-cat" style={{ marginBottom: 15 }}>
-          <button type="button" className="zep-button zep-button-secondary">
+          <button
+            type="button"
+            className="zep-button zep-button-secondary zep-button-icon"
+          >
             <CopyIcon className="zep-button__icon" />
           </button>
         </div>
         <div className="theme-zeppelin" style={{ marginBottom: 15 }}>
-          <button type="button" className="zep-button zep-button-secondary">
+          <button
+            type="button"
+            className="zep-button zep-button-secondary zep-button-icon"
+          >
             <CopyIcon className="zep-button__icon" />
           </button>
         </div>
         <div className="theme-rental" style={{ marginBottom: 15 }}>
-          <button type="button" className="zep-button zep-button-secondary">
+          <button
+            type="button"
+            className="zep-button zep-button-secondary zep-button-icon"
+          >
             <CopyIcon className="zep-button__icon" />
           </button>
         </div>
diff --git a/src/elements/button/_button.scss b/src/elements/button/_button.scss
index 7459654..8aedcd0 100644
--- a/src/elements/button/_button.scss
+++ b/src/elements/button/_button.scss
@@ -10,7 +10,7 @@
     text-align: center;
     vertical-align: top;
     cursor: pointer;
-    height: 3rem;
+    min-height: 3rem;
     padding: 0;
   }
   .#{$prefix}button-primary {
@@ -107,6 +107,10 @@
     }
   }
 
+  .#{$prefix}button-icon {
+    min-width: 3rem;
+  }
+
   .#{$prefix}button__text {
     @extend %typo-special-4;
     display: inline-block;
@@ -116,7 +120,6 @@
   .#{$prefix}button__icon {
     height: 1.375rem;
     width: 1.375rem;
-    margin: 0.8125rem;
   }
 
   .#{$prefix}button__text--tertiary {
@@ -137,7 +140,7 @@
   }
 
   .#{$prefix}button--small {
-    height: 2.5rem;
+    min-height: 2.5rem;
     .#{$prefix}button__text {
       @extend %typo-special-3;
       display: inline-block;