Add Tabs component. (#9537)

Backports PR #9536 **Commit 1:** Add Tabs component. - Fix bugs with Button and CheckBox focused states. - Fix appearance of cell content in Table. * Original sha: 9125884 * Authored by CJ Cenizal <[email protected]> on 2016-12-16T22:00:34Z
elastic · Dec 16, 2016 · 3c2147d · 3c2147d
1 parent 15eb80b
commit 3c2147d
Show file tree

Hide file tree

Showing 17 changed files with 238 additions and 32 deletions.
diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
@@ -603,6 +603,33 @@ fieldset {
   font-size: 14px;
 }
 
+.kuiVerticalRhythm {
+  & + & {
+    margin-top: 10px;
+  }
+}
+
+.kuiView {
+  background-color: #FFFFFF;
+  flex: 1 1 auto;
+}
+
+.kuiViewContent {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.kuiViewContent--constrainedWidth {
+  max-width: 1100px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.kuiViewContentItem {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
 .kuiPage {
   padding: 20px 30px 28px;
   margin: 20px;
@@ -825,13 +852,6 @@ fieldset {
   cursor: pointer;
 }
 
-/**
- * 1. Override checkbox styles.
- */
-.kuiCheckbox {
-  cursor: default;
-}
-
 .kuiFormPanel {
   border: 1px solid #D4D4D4;
   padding: 12px;

diff --git a/src/ui_framework/components/button/_button.scss b/src/ui_framework/components/button/_button.scss
@@ -32,13 +32,21 @@
   }
 }
 
+/**
+ * 1. Override Bootstrap.
+ */
 .kuiButton--basic {
   color: #5a5a5a;
   background-color: #F2F2F2;
 
+  // Goes before hover, so that hover can override it.
+  &:focus {
+    color: #5a5a5a !important; /* 1 */
+  }
+
   &:hover:enabled,
   &:active:enabled {
-    color: #ffffff;
+    color: #ffffff !important; /* 1 */
     background-color: #9B9B9B;
   }
 
@@ -47,6 +55,9 @@
   }
 }
 
+/**
+ * 1. Override Bootstrap.
+ */
 .kuiButton--primary {
   color: #FFFFFF;
   background-color: #6EADC1;
@@ -60,6 +71,10 @@
   &:disabled {
     background-color: #B6D6E0;
   }
+
+  &:focus {
+    color: #FFFFFF !important; /* 1 */
+  }
 }
 
 .kuiButton--danger {
@@ -76,8 +91,12 @@
     background-color: #efc0ba;
   }
 
+  /**
+   * 1. Override Bootstrap.
+   */
   &:focus {
     @include focus(#ff523c);
+    color: #FFFFFF !important; /* 1 */
   }
 }
 

diff --git a/src/ui_framework/components/form/_check_box.scss b/src/ui_framework/components/form/_check_box.scss
@@ -2,6 +2,7 @@
  * 1. Deliberately disable only webkit appearance. If we disable it in Firefox, we get a really
  *    ugly default appearance which we can't customize, so our best option is to give Firefox
  *    control over the checkbox's appearance.
+ * 2. Override default styles (possibly from Bootstrap).
  */
 .kuiCheckBox {
   -webkit-appearance: none; /* 1 */
@@ -10,7 +11,11 @@
   border-radius: $buttonBorderRadius;
   width: 16px;
   height: 16px;
-  line-height: $lineHeight;
+  line-height: $lineHeight !important; /* 2 */
+  margin: 0 !important; /* 2 */
+  font: $font !important; /* 2 */
+  font-family: $font !important; /* 2 */
+  font-size: 10px !important; /* 2 */
   transition: background-color $formTransitionTiming;
 
   &:before {

diff --git a/src/ui_framework/components/index.scss b/src/ui_framework/components/index.scss
@@ -19,6 +19,7 @@ $inputBackgroundColor--darkTheme: #444444;
 $inputBorderColor--darkTheme: $inputBackgroundColor--darkTheme;
 
 // Font
+$font: "Open Sans", Helvetica, Arial, sans-serif;
 $fontSize: 14px;
 $lineHeight: 1.5;
 
@@ -31,6 +32,8 @@ $warningColor: #ffac15;
 $errorColor: #D86051;
 $fontColor: #191E23;
 $subduedFontColor: #9fa3a7;
+$linkColor: #3CAED2;
+$linkHoverColor: #006E8A;
 $panelColor: #E4E4E4;
 $selectedBorderColor: #6EADC1;
 $errorBorderColor: $errorColor;
@@ -49,19 +52,20 @@ $formTransitionTiming: 0.1s linear;
 
 /**
  * 1. Make sure outline doesn't get hidden beneath adjacent elements.
+ * 2. Override inherited styles (possibly from Bootstrap).
  */
 @mixin focus($color: #6EADC1) {
   z-index: 1; /* 1 */
-  outline: 1px solid $color;
-  outline-offset: 2px;
+  outline: 1px solid $color !important; /* 2 */
+  outline-offset: 2px !important; /* 2 */
 }
 
 * {
   box-sizing: border-box;
 }
 
 body {
-  font-family: "Open Sans", Helvetica, Arial, sans-serif;
+  font-family: $font;
 }
 
 @import "button/index";
@@ -72,4 +76,5 @@ body {
 @import "no_results/index";
 @import "panel/index";
 @import "table/index";
+@import "tabs/index";
 @import "tool_bar/index";
diff --git a/src/ui_framework/components/link/_link.scss b/src/ui_framework/components/link/_link.scss
@@ -1,5 +1,5 @@
 .kuiLink {
-  color: #3CAED2;
+  color: $linkColor;
   text-decoration: none;
 
   &:visited,
@@ -8,7 +8,7 @@
   }
 
   &:hover {
-    color: #006E8A;
+    color: $linkHoverColor;
     text-decoration: underline;
   }
 }
diff --git a/src/ui_framework/components/table/_table.scss b/src/ui_framework/components/table/_table.scss
@@ -15,6 +15,7 @@
   width: 100%;
   border: $tableBorder;
   border-collapse: collapse;
+  background-color: #FFFFFF;
 }
 
 .kuiTableHeaderCell {
@@ -40,6 +41,7 @@
   pointer-events: none;
 }
 
+
 .kuiTableRowCell {
   @include tableCell;
   color: $fontColor;
@@ -52,11 +54,33 @@
     text-overflow: ellipsis;
   }
 
+.kuiTableRowCell--alignRight {
+  text-align: right;
+
+  .kuiTableRowCell__liner {
+    text-align: right;
+  }
+}
+
+.kuiTableRowCell--actions {
+  padding-top: 0;
+  padding-bottom: 0;
+
+  /**
+   * 1. We don't want to clip the focused state of buttons.
+   */
+  .kuiTableRowCell__liner {
+    overflow: visible; /* 1 */
+  }
+}
+
 /**
  * 1. Rendered width of cell with checkbox inside of it.
+ * 2. Align checkbox with text in other cells.
  */
 .kuiTableHeaderCell--checkBox,
 .kuiTableRowCell--checkBox {
   width: 28px; /* 1 */
   padding-right: 0;
+  line-height: 1;
 }
diff --git a/src/ui_framework/components/tabs/_index.scss b/src/ui_framework/components/tabs/_index.scss
@@ -0,0 +1 @@
+@import "tabs";
diff --git a/src/ui_framework/components/tabs/_tabs.scss b/src/ui_framework/components/tabs/_tabs.scss
@@ -0,0 +1,41 @@
+.kuiTabs {
+  display: flex;
+}
+
+  /**
+   * 1. Override button styles (some of which are from Bootstrap).
+   */
+  .kuiTab {
+    appearance: none; /* 1 */
+    cursor: pointer;
+    padding: 10px 30px;
+    font-size: 14px;
+    color: $subduedFontColor;
+    background-color: #ffffff; /* 1 */
+    border: 1px solid #ffffff;
+    border-radius: 0; /* 1 */
+
+    &:focus {
+      color: $linkColor;
+      border-color: $selectedBorderColor;
+      outline: none !important; /* 1 */
+    }
+
+    &:hover:not(.kuiTab-isSelected) {
+      color: $linkHoverColor;
+    }
+
+    &:active {
+      outline: none;
+      border-color: #ffffff;
+      box-shadow: none; /* 1 */
+      color: $linkColor !important;
+    }
+
+    &.kuiTab-isSelected {
+      color: $fontColor;
+      background-color: #F2F2F2;
+      border-color: #F2F2F2;
+      cursor: default;
+    }
+  }
diff --git a/src/ui_framework/components/tool_bar/_tool_bar_search.scss b/src/ui_framework/components/tool_bar/_tool_bar_search.scss
@@ -19,6 +19,9 @@
     color: #ACACAC;
   }
 
+  /**
+   * 1. Fix inherited styles (possibly from Bootstrap).
+   */
   .kuiToolBarSearchBox__input {
     width: 100%;
     min-width: 200px;
@@ -28,6 +31,8 @@
     border: 1px solid #FFFFFF;
     border-radius: $buttonBorderRadius;
     font-size: $fontSize;
+    border: none; /* 1 */
+    line-height: normal; /* 1 */
 
     &:focus {
       @include focus;

diff --git a/src/ui_framework/doc_site/src/services/routes/Routes.js b/src/ui_framework/doc_site/src/services/routes/Routes.js
@@ -19,6 +19,9 @@ import LocalNavExample
 import TableExample
   from '../../views/table/table_example.jsx';
 
+import TabsExample
+  from '../../views/tabs/tabs_example.jsx';
+
 import ToolBarExample
   from '../../views/tool_bar/tool_bar_example.jsx';
 
@@ -41,6 +44,9 @@ const components = [{
 }, {
   name: 'Table',
   component: TableExample,
+}, {
+  name: 'Tabs',
+  component: TabsExample,
 }, {
   name: 'ToolBar',
   component: ToolBarExample,

diff --git a/src/ui_framework/doc_site/src/views/form/check_box.html b/src/ui_framework/doc_site/src/views/form/check_box.html
@@ -1 +1,3 @@
 <input type="checkbox" class="kuiCheckBox">
+
+<input type="checkbox" class="kuiCheckBox" checked>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@
		<input type="checkbox" class="kuiCheckBox">

		<input type="checkbox" class="kuiCheckBox" checked>