ToolBar improvements, add Select and Bar components. (#9862)

* Add Bar component.
* Create modifier for a ToolBar with just Search.
* Add Select component.
* Fix focus state of ToolBarSearch.
* Add Select to ToolBar.
* Rename onReverseBackground mixin to onStandoutBackground.

ui_framework/components/bar/_bar.scss

@@ -0,0 +1,7 @@
+.kuiBar {
+  @include bar;
+}
+
+.kuiBarSection {
+  @include barSection;
+}

ui_framework/components/bar/_index.scss

@@ -0,0 +1 @@
+@import "bar";

ui_framework/components/button/_button.scss

@@ -123,15 +123,3 @@
     color: #dddddd;
   }
 }
-
-@mixin buttonOnReverseBackground {
-  .kuiButton--basic {
-    color: #5a5a5a;
-    background-color: #FFFFFF;
-
-    &:disabled {
-      color: #a7a7a7;
-      background-color: #F3F3F3;
-    }
-  }
-}

ui_framework/components/form/_index.scss

@@ -1,3 +1,4 @@
 @import "check_box";
+@import "select";
 @import "text_area";
 @import "text_input";

ui_framework/components/form/_select.scss

@@ -0,0 +1,12 @@
+/**
+ * 1. Embedded SVG of fa-caret-down (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg).
+ * 2. Make room on right side for the caret.
+ */
+.kuiSelect {
+  @include formControl;
+  padding-right: 30px; /* 2 */
+  background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/></svg>'); /* 1 */
+  background-size: 14px;
+  background-repeat: no-repeat;
+  background-position: calc(100% - 8px); /* 2 */
+}

ui_framework/components/index.scss

@@ -35,18 +35,22 @@ $fontColor: #191E23;
 $subduedFontColor: #9fa3a7;
 $linkColor: #3CAED2;
 $linkHoverColor: #006E8A;
-$panelColor: #E4E4E4;
+$standoutBackgroundColor: #E4E4E4;
 $selectedBorderColor: #6EADC1;
 $errorBorderColor: $errorColor;
 
 // Borders
-$tableBorder: 2px solid $panelColor;
+$tableBorder: 2px solid $standoutBackgroundColor;
-$tableRowBorder: 1px solid $panelColor;
+$tableRowBorder: 1px solid $standoutBackgroundColor;
 
 // Timing
 $formTransitionTiming: 0.1s linear;
 
-@mixin darkTheme() {
+// Bar
+$toolBarSectionSpacing: 50px;
+$toolBarItsemSpacing: 10px;
+
+@mixin darkTheme {
   .theme-dark & {
     @content;
   }
@@ -62,6 +66,11 @@ $formTransitionTiming: 0.1s linear;
   outline-offset: 2px !important; /* 2 */
 }
 
+@mixin formControlFocus {
+  outline: none;
+  border-color: $selectedBorderColor;
+}
+
 @mixin formControl {
   appearance: none;
   padding: 3px 12px 4px;
@@ -86,8 +95,7 @@ $formTransitionTiming: 0.1s linear;
   }
 
   &:focus {
-    outline: none;
+    @include formControlFocus;
-    border-color: $selectedBorderColor;
   }
 
   &:disabled {
@@ -116,6 +124,66 @@ $formTransitionTiming: 0.1s linear;
   }
 }
 
+@mixin bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/**
+ * 1. Put 10px of space between each child.
+ * 2. If there is only one child, align it to the right. If you wanted it aligned right, you
+ *    wouldn't use the Bar in the first place.
+ */
+@mixin barSection {
+  display: flex;
+  align-items: center;
+  margin-left: $toolBarSectionSpacing * 0.5;
+  margin-right: $toolBarSectionSpacing * 0.5;
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &:only-child {
+    margin-left: auto; /* 1 */
+  }
+
+  & > * {
+    flex: 1 0 auto;
+  }
+
+  & > * + * {
+    margin-left: $toolBarItsemSpacing; /* 1 */
+  }
+}
+
+@mixin buttonOnStandoutBackground {
+  .kuiButton--basic {
+    color: #5a5a5a;
+    background-color: #FFFFFF;
+
+    &:disabled {
+      color: #a7a7a7;
+      background-color: #F3F3F3;
+    }
+  }
+}
+
+@mixin selectOnStandoutBackground {
+  .kuiSelect {
+    border-color: #ffffff;
+
+    &:focus {
+      @include formControlFocus;
+    }
+  }
+}
+
 * {
   box-sizing: border-box;
 }
@@ -124,6 +192,7 @@ body {
   font-family: $font;
 }
 
+@import "bar/index";
 @import "button/index";
 @import "form/index";
 @import "icon/index";

ui_framework/components/tabs/_tabs.scss

@@ -13,7 +13,7 @@
     font-size: 14px;
     color: $subduedFontColor;
     background-color: #ffffff; /* 1 */
-    border: 1px solid $panelColor;
+    border: 1px solid $standoutBackgroundColor;
     border-bottom: none;
     border-radius: 0; /* 1 */
 

ui_framework/components/tool_bar/_index.scss

@@ -1,6 +1,3 @@
-$toolBarSectionSpacing: 50px;
-$toolBarItsemSpacing: 10px;
-
 @import "tool_bar";
 @import "tool_bar_footer";
 @import "tool_bar_search";

ui_framework/components/tool_bar/_tool_bar.scss

@@ -1,27 +1,22 @@
 .kuiToolBar {
-  display: flex;
+  @include bar;
-  justify-content: space-between;
+  @include buttonOnStandoutBackground;
+  @include selectOnStandoutBackground;
+
   padding: 10px;
   height: 50px;
-  background-color: $panelColor;
+  background-color: $standoutBackgroundColor;
+}
 
-  @include buttonOnReverseBackground;
+.kuiToolBarSection {
+  @include barSection;
 }
 
 /**
- * 1. Put 10px of space between each child.
+ * 1. Override Bar styles and put Search on the left side.
  */
-.kuiToolBarSection {
+.kuiToolBar--searchOnly {
-  display: flex;
+  .kuiToolBarSearch {
-  align-items: center;
+    margin-left: 0 !important; /* 1 */
-  margin-left: $toolBarSectionSpacing * 0.5;
-  margin-right: $toolBarSectionSpacing * 0.5;
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  & > * + * {
-    margin-left: $toolBarItsemSpacing; /* 1 */
   }
 }

ui_framework/components/tool_bar/_tool_bar_footer.scss

@@ -1,34 +1,12 @@
 .kuiToolBarFooter {
-  display: flex;
+  @include bar;
-  justify-content: space-between;
+
   padding: 10px;
   height: 40px;
   background-color: #ffffff;
   border: $tableBorder;
 }
 
-/**
- * 1. Put 10px of space between each child.
- */
 .kuiToolBarFooterSection {
-  display: flex;
+  @include barSection;
-  align-items: center;
-  margin-left: $toolBarSectionSpacing * 0.5;
-  margin-right: $toolBarSectionSpacing * 0.5;
-
-  &:first-child {
-    margin-left: 0;
-  }
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  &:only-child {
-    margin-left: auto;
-  }
-
-  & > * + * {
-    margin-left: $toolBarItsemSpacing; /* 1 */
-  }
 }

ui_framework/components/tool_bar/_tool_bar_search.scss

@@ -1,9 +1,27 @@
+/**
+ * 1. Put 10px of space between each child.
+ */
 .kuiToolBarSearch {
   display: flex;
+  align-items: center;
+  margin-left: $toolBarSectionSpacing * 0.5;
+  margin-right: $toolBarSectionSpacing * 0.5;
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  & > * + * {
+    margin-left: $toolBarItsemSpacing; /* 1 */
+  }
+
   flex: 1 1 auto;
   max-width: 800px;
   line-height: $lineHeight;
-  margin-right: $toolBarSectionSpacing * 0.5;
 }
 
 .kuiToolBarSearchBox {
@@ -31,10 +49,10 @@
     border: 1px solid #FFFFFF;
     border-radius: $buttonBorderRadius;
     font-size: $fontSize;
-    border: none; /* 1 */
+    border: 1px solid #ffffff;
     line-height: normal; /* 1 */
 
     &:focus {
-      @include focus;
+      @include formControlFocus;
     }
   }

ui_framework/dist/ui_framework.css

@@ -7,12 +7,58 @@
  *    button elements and anchor tags.
  * 2. Fit MicroButton inside of Table rows without pushing them taller.
  */
+/**
+ * 1. Put 10px of space between each child.
+ * 2. If there is only one child, align it to the right. If you wanted it aligned right, you
+ *    wouldn't use the Bar in the first place.
+ */
 * {
   box-sizing: border-box; }
 
 body {
   font-family: "Open Sans", Helvetica, Arial, sans-serif; }
 
+.kuiBar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between; }
+
+.kuiBarSection {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-left: 25px;
+  margin-right: 25px; }
+  .kuiBarSection:first-child {
+    margin-left: 0; }
+  .kuiBarSection:last-child {
+    margin-right: 0; }
+  .kuiBarSection:only-child {
+    margin-left: auto;
+    /* 1 */ }
+  .kuiBarSection > * {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 0 auto;
+        -ms-flex: 1 0 auto;
+            flex: 1 0 auto; }
+  .kuiBarSection > * + * {
+    margin-left: 10px;
+    /* 1 */ }
+
 /**
  * 1. Setting to inline-block guarantees the same height when applied to both
  *    button elements and anchor tags.
@@ -199,6 +245,47 @@ body {
     opacity: 0.3;
     cursor: not-allowed; }
 
+/**
+ * 1. Embedded SVG of fa-caret-down (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg).
+ * 2. Make room on right side for the caret.
+ */
+.kuiSelect {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: 3px 12px 4px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  background-color: #ffffff;
+  border: 1px solid #DEDEDE;
+  color: #191E23;
+  border-radius: 4px;
+  -webkit-transition: border-color 0.1s linear;
+  transition: border-color 0.1s linear;
+  /**
+   * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
+   *    We only want invalid inputs to appear invalid after the user has had a chance to interact
+   *    with it.
+   */
+  padding-right: 30px;
+  /* 2 */
+  background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/></svg>');
+  /* 1 */
+  background-size: 14px;
+  background-repeat: no-repeat;
+  background-position: calc(100% - 8px);
+  /* 2 */ }
+  .kuiSelect:invalid:not(.ng-untouched) {
+    /* 1 */
+    border-color: #D86051; }
+  .kuiSelect:focus {
+    outline: none;
+    border-color: #6EADC1; }
+  .kuiSelect:disabled {
+    opacity: 0.4;
+    cursor: not-allowed; }
+
 .kuiTextArea {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -970,6 +1057,10 @@ body {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
@@ -983,10 +1074,12 @@ body {
     .kuiToolBar .kuiButton--basic:disabled {
       color: #a7a7a7;
       background-color: #F3F3F3; }
+  .kuiToolBar .kuiSelect {
+    border-color: #ffffff; }
+    .kuiToolBar .kuiSelect:focus {
+      outline: none;
+      border-color: #6EADC1; }
 
-/**
- * 1. Put 10px of space between each child.
- */
 .kuiToolBarSection {
   display: -webkit-box;
   display: -webkit-flex;
@@ -998,17 +1091,38 @@ body {
           align-items: center;
   margin-left: 25px;
   margin-right: 25px; }
+  .kuiToolBarSection:first-child {
+    margin-left: 0; }
   .kuiToolBarSection:last-child {
     margin-right: 0; }
+  .kuiToolBarSection:only-child {
+    margin-left: auto;
+    /* 1 */ }
+  .kuiToolBarSection > * {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 0 auto;
+        -ms-flex: 1 0 auto;
+            flex: 1 0 auto; }
   .kuiToolBarSection > * + * {
     margin-left: 10px;
     /* 1 */ }
 
+/**
+ * 1. Override Bar styles and put Search on the left side.
+ */
+.kuiToolBar--searchOnly .kuiToolBarSearch {
+  margin-left: 0 !important;
+  /* 1 */ }
+
 .kuiToolBarFooter {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
@@ -1018,9 +1132,6 @@ body {
   background-color: #ffffff;
   border: 2px solid #E4E4E4; }
 
-/**
- * 1. Put 10px of space between each child.
- */
 .kuiToolBarFooterSection {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1037,23 +1148,44 @@ body {
   .kuiToolBarFooterSection:last-child {
     margin-right: 0; }
   .kuiToolBarFooterSection:only-child {
-    margin-left: auto; }
+    margin-left: auto;
+    /* 1 */ }
+  .kuiToolBarFooterSection > * {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 0 auto;
+        -ms-flex: 1 0 auto;
+            flex: 1 0 auto; }
   .kuiToolBarFooterSection > * + * {
     margin-left: 10px;
     /* 1 */ }
 
+/**
+ * 1. Put 10px of space between each child.
+ */
 .kuiToolBarSearch {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-left: 25px;
+  margin-right: 25px;
   -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
   max-width: 800px;
-  line-height: 1.5;
+  line-height: 1.5; }
-  margin-right: 25px; }
+  .kuiToolBarSearch:first-child {
+    margin-left: 0; }
+  .kuiToolBarSearch:last-child {
+    margin-right: 0; }
+  .kuiToolBarSearch > * + * {
+    margin-left: 10px;
+    /* 1 */ }
 
 .kuiToolBarSearchBox {
   -webkit-box-flex: 1;
@@ -1081,17 +1213,12 @@ body {
   border: 1px solid #FFFFFF;
   border-radius: 4px;
   font-size: 14px;
-  border: none;
+  border: 1px solid #ffffff;
-  /* 1 */
   line-height: normal;
   /* 1 */ }
   .kuiToolBarSearchBox__input:focus {
-    z-index: 1;
+    outline: none;
-    /* 1 */
+    border-color: #6EADC1; }
-    outline: 1px solid #6EADC1 !important;
-    /* 2 */
-    outline-offset: 2px !important;
-    /* 2 */ }
 
 /*
  * 1. We don't want the text to take up two lines and overflow the ToolBar.

ui_framework/doc_site/src/services/routes/routes.js

@@ -1,6 +1,9 @@
 
 import Slugify from '../string/slugify';
 
+import BarExample
+  from '../../views/bar/bar_example.jsx';
+
 import ButtonExample
   from '../../views/button/button_example.jsx';
 
@@ -36,6 +39,9 @@ import ToolBarExample
 
 // Component route names should match the component name exactly.
 const components = [{
+  name: 'Bar',
+  component: BarExample,
+}, {
   name: 'Button',
   component: ButtonExample,
 }, {

ui_framework/doc_site/src/views/bar/bar.html

@@ -0,0 +1,18 @@
+ <div class="kuiBar">
+  <div class="kuiBarSection">
+    <div class="kuiButtonGroup">
+      <button class="kuiButton kuiButton--basic">
+        See previous 10 pages
+      </button>
+      <button class="kuiButton kuiButton--basic">
+        See next 10 pages
+      </button>
+    </div>
+  </div>
+
+  <div class="kuiBarSection">
+    <div>Limit to</div>
+    <input class="kuiTextInput" size="2" value="10">
+    <div>pages</div>
+  </div>
+</div>

ui_framework/doc_site/src/views/bar/bar_example.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Bar',
+  description: (
+    <div>
+      <p>Use the Bar to organize controls in a horizontal layout. This is especially useful for surfacing controls in the corners of a view.</p>
+      <p><strong>Note:</strong> Instead of using this component with a Table, try using the ControlledTable, ToolBar, and ToolBarFooter components.</p>
+    </div>
+  ),
+  html: require('./bar.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'One section',
+  description: (
+    <p>A Bar with one section will align it to the right, by default. To align it to the left, just add another section and leave it empty, or don't use a Bar at all.</p>
+  ),
+  html: require('./bar_one_section.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Three sections',
+  description: (
+    <p>Technically the Bar can contain three or more sections, but there's no established use-case for this.</p>
+  ),
+  html: require('./bar_three_sections.html'),
+  hasDarkTheme: false,
+}]);

ui_framework/doc_site/src/views/bar/bar_one_section.html

@@ -0,0 +1,12 @@
+ <div class="kuiBar">
+  <div class="kuiBarSection">
+    <div class="kuiButtonGroup">
+      <button class="kuiButton kuiButton--basic">
+        See previous 10 pages
+      </button>
+      <button class="kuiButton kuiButton--basic">
+        See next 10 pages
+      </button>
+    </div>
+  </div>
+</div>

ui_framework/doc_site/src/views/bar/bar_three_sections.html

@@ -0,0 +1,38 @@
+ <div class="kuiBar">
+  <div class="kuiBarSection">
+    <div class="kuiButtonGroup">
+      <button class="kuiButton kuiButton--basic">
+        See previous 10 pages
+      </button>
+      <button class="kuiButton kuiButton--basic">
+        See next 10 pages
+      </button>
+    </div>
+  </div>
+
+  <div class="kuiBarSection">
+    <div class="kuiButtonGroup">
+      <button class="kuiButton kuiButton--basic">
+        Create new page
+      </button>
+      <button class="kuiButton kuiButton--danger">
+        Clear all pages
+      </button>
+    </div>
+  </div>
+
+  <div class="kuiBarSection">
+    <div>Limit to</div>
+    <input class="kuiTextInput" size="2" value="10">
+    <div>pages</div>
+
+    <div class="kuiButtonGroup">
+      <button class="kuiButton kuiButton--basic">
+        Undo
+      </button>
+      <button class="kuiButton kuiButton--basic">
+        Redo
+      </button>
+    </div>
+  </div>
+</div>

ui_framework/doc_site/src/views/form/form_example.jsx

@@ -16,4 +16,8 @@ export default createExample([{
   title: 'CheckBox',
   html: require('./check_box.html'),
   hasDarkTheme: false,
+}, {
+  title: 'Select',
+  html: require('./select.html'),
+  hasDarkTheme: false,
 }]);

ui_framework/doc_site/src/views/form/select.html

@@ -0,0 +1,5 @@
+<select class="kuiSelect">
+  <option>Apple</option>
+  <option>Bread</option>
+  <option>Cheese</option>
+</select>

ui_framework/doc_site/src/views/tool_bar/tool_bar.html

@@ -8,6 +8,12 @@
         placeholder="Search..."
       >
     </div>
+
+    <select class="kuiSelect">
+      <option>Past hour</option>
+      <option>Past day</option>
+      <option>Past week</option>
+    </select>
   </div>
 
   <div class="kuiToolBarSection">
@@ -25,6 +31,7 @@
   </div>
 
   <div class="kuiToolBarSection">
+
     <div class="kuiToolBarText">
       1 &ndash; 20 of 33
     </div>

ui_framework/doc_site/src/views/tool_bar/tool_bar_example.jsx

@@ -11,6 +11,10 @@ export default createExample([{
   ),
   html: require('./tool_bar.html'),
   hasDarkTheme: false,
+}, {
+  title: 'ToolBar with Search only',
+  html: require('./tool_bar_search_only.html'),
+  hasDarkTheme: false,
 }, {
   title: 'ToolBarFooter',
   description: (

ui_framework/doc_site/src/views/tool_bar/tool_bar_search_only.html

@@ -0,0 +1,12 @@
+<div class="kuiToolBar kuiToolBar--searchOnly">
+  <div class="kuiToolBarSearch">
+    <div class="kuiToolBarSearchBox">
+      <div class="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
+      <input
+        class="kuiToolBarSearchBox__input"
+        type="text"
+        placeholder="Search..."
+      >
+    </div>
+  </div>
+</div>