Refine kuiStaticInput, Bar, and Button components. (#9917) (#9950)

* Override Bootstrap link styles in Button component. Give kuiStaticInput a transparent background.

* Fix incorrect markup in MicroButton examples.

* Give Bar component a min height of 30px so it has a consistent height even when it has shorter children.

* Remove kuiSubHeader class. Migrate Saved Objects to use Bar component instead.

src/core_plugins/kibana/public/management/sections/objects/_objects.html

@@ -1,12 +1,14 @@
 <kbn-management-app section="kibana" class="kuiView">
   <kbn-management-objects class="kuiViewContent kuiViewContent--constrainedWidth">
     <!-- Header -->
-    <div class="kuiViewContentItem kuiSubHeader">
-      <h1 class="kuiTitle">
-        Edit Saved Objects
-      </h1>
+    <div class="kuiViewContentItem kuiBar kuiVerticalRhythm">
+      <div class="kuiBarSection">
+        <h1 class="kuiTitle">
+          Edit Saved Objects
+        </h1>
+      </div>
 
-      <div>
+      <div class="kuiBarSection">
         <button
           class="kuiButton kuiButton--basic kuiButton--iconText"
           ng-click="exportAll()"

src/core_plugins/kibana/public/management/sections/objects/_view.html

@@ -1,12 +1,14 @@
 <kbn-management-app section="kibana" class="kuiView">
   <kbn-management-objects-view class="kuiViewContent kuiViewContent--constrainedWidth">
     <!-- Header -->
-    <div class="kuiViewContentItem kuiSubHeader">
-      <h1 class="kuiTitle">
-        Edit {{ title }}
-      </h1>
+    <div class="kuiViewContentItem kuiBar kuiVerticalRhythm">
+      <div class="kuiBarSection">
+        <h1 class="kuiTitle">
+          Edit {{ title }}
+        </h1>
+      </div>
 
-      <div class="kuiButtonGroup">
+      <div class="kuiBarSection">
         <a
           class="kuiButton kuiButton--basic kuiButton--iconText"
           href="{{ link }}"

src/ui/public/styles/base.less

@@ -631,13 +631,6 @@ fieldset {
   padding-right: 20px;
 }
 
-.kuiSubHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 18px;
-}
-
 .kuiNotice {
   padding: 40px 60px 48px;
   margin: 20px;
@@ -783,6 +776,7 @@ fieldset {
 .kuiStaticInput {
   padding: 5px 0;
   border-color: transparent;
+  background-color: transparent;;
 }
 
 .kuiTextArea {

ui_framework/components/button/_button.scss

@@ -73,7 +73,7 @@
 
   &:hover:enabled,
   &:active:enabled {
-    color: #FFFFFF;
+    color: #FFFFFF !important; /* 1 */
     background-color: #006E8A;
   }
 
@@ -86,13 +86,16 @@
   }
 }
 
+/**
+ * 1. Override Bootstrap.
+ */
 .kuiButton--danger {
   color: #FFFFFF;
   background-color: #D76051;
 
   &:hover:enabled,
   &:active:enabled {
-    color: #FFFFFF;
+    color: #FFFFFF !important; /* 1 */
     background-color: #A52E1F;
   }
 
@@ -100,11 +103,9 @@
     background-color: #efc0ba;
   }
 
-  /**
-   * 1. Override Bootstrap.
-   */
   &:focus {
     @include focus(#ff523c);
     color: #FFFFFF !important; /* 1 */
   }
 }
+

ui_framework/components/index.scss

@@ -107,6 +107,7 @@ $toolBarItsemSpacing: 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: 30px; /* 1 */
 }
 
 /**

ui_framework/dist/ui_framework.css

@@ -28,7 +28,9 @@ body {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
-          justify-content: space-between; }
+          justify-content: space-between;
+  min-height: 30px;
+  /* 1 */ }
 
 .kuiBarSection {
   display: -webkit-box;
@@ -135,7 +137,8 @@ body {
   color: #FFFFFF;
   background-color: #6EADC1; }
   .kuiButton--primary:hover:enabled, .kuiButton--primary:active:enabled {
-    color: #FFFFFF;
+    color: #FFFFFF !important;
+    /* 1 */
     background-color: #006E8A; }
   .kuiButton--primary:disabled {
     background-color: #B6D6E0; }
@@ -143,14 +146,15 @@ body {
     color: #FFFFFF !important;
     /* 1 */ }
 
+/**
+ * 1. Override Bootstrap.
+ */
 .kuiButton--danger {
   color: #FFFFFF;
-  background-color: #D76051;
-  /**
-   * 1. Override Bootstrap.
-   */ }
+  background-color: #D76051; }
   .kuiButton--danger:hover:enabled, .kuiButton--danger:active:enabled {
-    color: #FFFFFF;
+    color: #FFFFFF !important;
+    /* 1 */
     background-color: #A52E1F; }
   .kuiButton--danger:disabled {
     background-color: #efc0ba; }
@@ -989,6 +993,8 @@ body {
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
+  min-height: 30px;
+  /* 1 */
   padding: 10px;
   height: 50px;
   background-color: #E4E4E4; }
@@ -1066,6 +1072,8 @@ body {
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
+  min-height: 30px;
+  /* 1 */
   padding: 10px;
   height: 40px;
   background-color: #ffffff;

ui_framework/doc_site/src/views/micro_button/micro_button.html

@@ -1,3 +1,3 @@
 <button class="kuiMicroButton" title="Edit">
-  <soan class="kuiIcon fa-gear"></soan>
+  <span class="kuiIcon fa-gear"></span>
 </button>

ui_framework/doc_site/src/views/micro_button/micro_button_elements.html

@@ -1,9 +1,9 @@
 <button class="kuiMicroButton" title="Edit">
-  <soan class="kuiIcon fa-gear"></soan>
+  <span class="kuiIcon fa-gear"></span>
 </button>
 
 &nbsp;
 
 <a href="#" class="kuiMicroButton" title="View">
-  <soan class="kuiIcon fa-eye"></soan>
+  <span class="kuiIcon fa-eye"></span>
 </a>

ui_framework/doc_site/src/views/micro_button/micro_button_group.html

@@ -1,13 +1,13 @@
 <div class="kuiMicroButtonGroup">
   <button class="kuiMicroButton" title="Edit">
-    <soan class="kuiIcon fa-gear"></soan>
+    <span class="kuiIcon fa-gear"></span>
   </button>
 
   <button class="kuiMicroButton" title="View">
-    <soan class="kuiIcon fa-eye"></soan>
+    <span class="kuiIcon fa-eye"></span>
   </button>
 
   <button class="kuiMicroButton" title="Delete">
-    <soan class="kuiIcon fa-trash"></soan>
+    <span class="kuiIcon fa-trash"></span>
   </button>
 </div>