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

* 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.
2025-04-23 09:19:04 -04:00 · 2017-01-17 16:16:42 -08:00 · 2017-01-17 16:16:42 -08:00 · e99670cac1
commit e99670cac1
parent 4979bc0914
22 changed files with 414 additions and 84 deletions
--- a/ui_framework/components/bar/_bar.scss
+++ b/ui_framework/components/bar/_bar.scss
@ -0,0 +1,7 @@
+.kuiBar {
+  @include bar;
+}
+
+.kuiBarSection {
+  @include barSection;
+}
--- a/ui_framework/components/bar/_index.scss
+++ b/ui_framework/components/bar/_index.scss
@ -0,0 +1 @@
+@import "bar";
--- a/ui_framework/components/button/_button.scss
+++ b/ui_framework/components/button/_button.scss
@ -108,15 +108,3 @@
    color: #FFFFFF !important; /* 1 */
  }
 }
-
-@mixin buttonOnReverseBackground {
-  .kuiButton--basic {
-    color: #5a5a5a;
-    background-color: #FFFFFF;
-
-    &:disabled {
-      color: #a7a7a7;
-      background-color: #F3F3F3;
-    }
-  }
-}
--- a/ui_framework/components/form/_index.scss
+++ b/ui_framework/components/form/_index.scss
@ -1,3 +1,4 @@
@import "check_box";
+@import "select";
@import "text_area";
@import "text_input";
--- a/ui_framework/components/form/_select.scss
+++ b/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 */
+}
--- a/ui_framework/components/index.scss
+++ b/ui_framework/components/index.scss
@ -34,18 +34,22 @@ $fontColor: #191E23;
 $subduedFontColor: #9fa3a7;
 $linkColor: #3CAED2;
 $linkHoverColor: #006E8A;
-$panelColor: #E4E4E4;
+$standoutBackgroundColor: #E4E4E4;
 $selectedBorderColor: #6EADC1;
 $errorBorderColor: $errorColor;

 // Borders
-$tableBorder: 2px solid $panelColor;
-$tableRowBorder: 1px solid $panelColor;
+$tableBorder: 2px solid $standoutBackgroundColor;
+$tableRowBorder: 1px solid $standoutBackgroundColor;

 // Timing
 $formTransitionTiming: 0.1s linear;

-@mixin darkTheme() {
+// Bar
+$toolBarSectionSpacing: 50px;
+$toolBarItsemSpacing: 10px;
+
+@mixin darkTheme {
  .theme-dark & {
    @content;
  }
@ -61,6 +65,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;
@ -85,8 +94,7 @@ $formTransitionTiming: 0.1s linear;
  }

  &:focus {
-    outline: none;
-    border-color: $selectedBorderColor;
+    @include formControlFocus;
  }

  &:disabled {
@ -95,6 +103,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;
 }
@ -103,6 +171,7 @@ body {
  font-family: $font;
 }

+@import "bar/index";
@import "button/index";
@import "form/index";
@import "icon/index";
--- a/ui_framework/components/tabs/_tabs.scss
+++ b/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 */

--- a/ui_framework/components/tool_bar/_index.scss
+++ b/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";
--- a/ui_framework/components/tool_bar/_tool_bar.scss
+++ b/ui_framework/components/tool_bar/_tool_bar.scss
@ -1,27 +1,22 @@
 .kuiToolBar {
-  display: flex;
-  justify-content: space-between;
+  @include bar;
+  @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 {
-  display: flex;
-  align-items: center;
-  margin-left: $toolBarSectionSpacing * 0.5;
-  margin-right: $toolBarSectionSpacing * 0.5;
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  & > * + * {
-    margin-left: $toolBarItsemSpacing; /* 1 */
+.kuiToolBar--searchOnly {
+  .kuiToolBarSearch {
+    margin-left: 0 !important; /* 1 */
  }
 }
--- a/ui_framework/components/tool_bar/_tool_bar_footer.scss
+++ b/ui_framework/components/tool_bar/_tool_bar_footer.scss
@ -1,34 +1,12 @@
 .kuiToolBarFooter {
-  display: flex;
-  justify-content: space-between;
+  @include bar;
+
  padding: 10px;
  height: 40px;
  background-color: #ffffff;
  border: $tableBorder;
 }

-/**
- * 1. Put 10px of space between each child.
- */
 .kuiToolBarFooterSection {
-  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;
-  }
-
-  & > * + * {
-    margin-left: $toolBarItsemSpacing; /* 1 */
-  }
+  @include barSection;
 }
--- a/ui_framework/components/tool_bar/_tool_bar_search.scss
+++ b/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;
    }
  }
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@ -2,12 +2,58 @@
 * 1. Make sure outline doesn't get hidden beneath adjacent elements.
 * 2. Override inherited styles (possibly from Bootstrap).
 */
+/**
+ * 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.
@ -185,6 +231,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;
@ -877,6 +964,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;
@ -890,10 +981,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;
@ -905,17 +998,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;
@ -925,9 +1039,6 @@ body {
  background-color: #ffffff;
  border: 2px solid #E4E4E4; }

-/**
- * 1. Put 10px of space between each child.
- */
 .kuiToolBarFooterSection {
  display: -webkit-box;
  display: -webkit-flex;
@ -944,23 +1055,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;
-  margin-right: 25px; }
+  line-height: 1.5; }
+  .kuiToolBarSearch:first-child {
+    margin-left: 0; }
+  .kuiToolBarSearch:last-child {
+    margin-right: 0; }
+  .kuiToolBarSearch > * + * {
+    margin-left: 10px;
+    /* 1 */ }

 .kuiToolBarSearchBox {
  -webkit-box-flex: 1;
@ -988,17 +1120,12 @@ body {
  border: 1px solid #FFFFFF;
  border-radius: 4px;
  font-size: 14px;
-  border: none;
-  /* 1 */
+  border: 1px solid #ffffff;
  line-height: normal;
  /* 1 */ }
  .kuiToolBarSearchBox__input:focus {
-    z-index: 1;
-    /* 1 */
-    outline: 1px solid #6EADC1 !important;
-    /* 2 */
-    outline-offset: 2px !important;
-    /* 2 */ }
+    outline: none;
+    border-color: #6EADC1; }

 /*
 * 1. We don't want the text to take up two lines and overflow the ToolBar.
--- a/ui_framework/doc_site/src/services/routes/Routes.js
+++ b/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';

@ -33,6 +36,9 @@ import ToolBarExample

 // Component route names should match the component name exactly.
 const components = [{
+  name: 'Bar',
+  component: BarExample,
+}, {
  name: 'Button',
  component: ButtonExample,
 }, {
--- a/ui_framework/doc_site/src/views/bar/bar.html
+++ b/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>
--- a/ui_framework/doc_site/src/views/bar/bar_example.jsx
+++ b/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,
+}]);
--- a/ui_framework/doc_site/src/views/bar/bar_one_section.html
+++ b/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>
--- a/ui_framework/doc_site/src/views/bar/bar_three_sections.html
+++ b/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>
--- a/ui_framework/doc_site/src/views/form/form_example.jsx
+++ b/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,
 }]);
--- a/ui_framework/doc_site/src/views/form/select.html
+++ b/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>
--- a/ui_framework/doc_site/src/views/tool_bar/tool_bar.html
+++ b/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>
--- a/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.jsx
+++ b/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: (
--- a/ui_framework/doc_site/src/views/tool_bar/tool_bar_search_only.html
+++ b/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>