Set Button component to display: inline-block, to ensure it has the s…

…ame height when applied to both button elements and anchor tags. (#9541)
elastic · Dec 16, 2016 · 0b0a77b · 0b0a77b
1 parent 4938c57
commit 0b0a77b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/src/ui_framework/components/button/_button.scss b/src/ui_framework/components/button/_button.scss
@@ -1,7 +1,10 @@
 /**
- * 1. Disable for Angular.
+ * 1. Setting to inline-block guarantees the same height when applied to both
+ *    button elements and anchor tags.
+ * 2. Disable for Angular.
  */
 .kuiButton {
+  display: inline-block; /* 1 */
   appearance: none;
   padding: 4px 12px 5px;
   font-size: $fontSize;
@@ -14,7 +17,7 @@
 
   &:disabled {
     cursor: default;
-    pointer-events: none; // 1
+    pointer-events: none; /* 2 */
   }
 
   &:active:enabled {

diff --git a/src/ui_framework/doc_site/src/views/button/button_elements.html b/src/ui_framework/doc_site/src/views/button/button_elements.html
@@ -2,16 +2,12 @@
   Button element
 </button>
 
-<hr class="guideBreak">
-
 <input
   type="submit"
   class="kuiButton kuiButton--basic"
   value="Submit input element"
 >
 
-<hr class="guideBreak">
-
 <a href="#" class="kuiButton kuiButton--basic">
   Anchor element
 </a>