[UI Framework] Add Label, SearchInput, and FieldGroup components. (#10713)

* Add SearchInput and FieldGroup components.

ui_framework/components/form/_index.scss

@@ -1,4 +1,5 @@
 @import "check_box";
+@import "search_input";
 @import "select";
 @import "static_input";
 @import "text_area";

ui_framework/components/form/_search_input.scss

@@ -0,0 +1,24 @@
+.kuiSearchInput {
+  display: inline-block;
+  position: relative;
+  font-size: $fontSize;
+  line-height: $lineHeight;
+}
+
+  .kuiSearchInput__icon {
+    position: absolute;
+    top: 0.5em;
+    left: 0.7em;
+    font-size: 1em;
+    color: #ACACAC;
+  }
+
+  /**
+   * 1. Make space for search icon.
+   * 2. Expand to fill container.
+   */
+  .kuiSearchInput__input {
+    @include formControl;
+    padding-left: 28px; /* 1 */
+    width: 100%; /* 2 */
+  }

ui_framework/components/form_layout/_field_group.scss

@@ -0,0 +1,17 @@
+.kuiFieldGroup {
+  display: flex;
+}
+
+.kuiFieldGroupSection {
+  & + & {
+    margin-left: 10px;
+  }
+}
+
+.kuiFieldGroupSection--wide {
+  flex: 1 1 auto;
+
+  & > * {
+    width: 100%;
+  }
+}

ui_framework/components/form_layout/_index.scss

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

ui_framework/components/index.scss

@@ -248,6 +248,7 @@ body {
 @import "column/index";
 @import "event/index";
 @import "form/index";
+@import "form_layout/index";
 @import "header_bar/index";
 @import "icon/index";
 @import "info_panel/index";

ui_framework/dist/ui_framework.css

@@ -523,6 +523,56 @@ body {
     opacity: 0.3;
     cursor: not-allowed; }
 
+.kuiSearchInput {
+  display: inline-block;
+  position: relative;
+  font-size: 14px;
+  line-height: 1.5; }
+
+.kuiSearchInput__icon {
+  position: absolute;
+  top: 0.5em;
+  left: 0.7em;
+  font-size: 1em;
+  color: #ACACAC; }
+
+/**
+   * 1. Make space for search icon.
+   * 2. Expand to fill container.
+   */
+.kuiSearchInput__input {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: 3px 12px 4px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #191E23;
+  background-color: #ffffff;
+  border: 1px solid #DEDEDE;
+  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-left: 28px;
+  /* 1 */
+  width: 100%;
+  /* 2 */ }
+  .kuiSearchInput__input:invalid:not(.ng-untouched) {
+    /* 1 */
+    border-color: #D86051; }
+  .kuiSearchInput__input:focus {
+    outline: none;
+    border-color: #6EADC1; }
+  .kuiSearchInput__input:disabled {
+    opacity: 0.4;
+    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.
@@ -640,6 +690,23 @@ body {
     opacity: 0.4;
     cursor: not-allowed; }
 
+.kuiFieldGroup {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex; }
+
+.kuiFieldGroupSection + .kuiFieldGroupSection {
+  margin-left: 10px; }
+
+.kuiFieldGroupSection--wide {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 1 auto;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto; }
+  .kuiFieldGroupSection--wide > * {
+    width: 100%; }
+
 .kuiHeaderBar {
   display: -webkit-box;
   display: -webkit-flex;

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

@@ -27,6 +27,9 @@ import EventsSandbox
 import FormExample
   from '../../views/form/form_example.jsx';
 
+import FormLayoutExample
+  from '../../views/form_layout/form_layout_example.jsx';
+
 import HeaderBarExample
   from '../../views/header_bar/header_bar_example.jsx';
 
@@ -112,6 +115,9 @@ const components = [{
 }, {
   name: 'Form',
   component: FormExample,
+}, {
+  name: 'FormLayout',
+  component: FormLayoutExample,
 }, {
   name: 'HeaderBar',
   component: HeaderBarExample,

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

@@ -13,6 +13,7 @@ import {
 } from '../../components';
 
 const textInputHtml = require('./text_input.html');
+const searchInputHtml = require('./search_input.html');
 const staticInputHtml = require('./static_input.html');
 const textAreaHtml = require('./text_area.html');
 const textAreaNonResizableHtml = require('./text_area_non_resizable.html');
@@ -33,6 +34,18 @@ export default props => (
       />
     </GuideSection>
 
+    <GuideSection
+      title="SearchInput"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: searchInputHtml,
+      }]}
+    >
+      <GuideDemo
+        html={searchInputHtml}
+      />
+    </GuideSection>
+
     <GuideSection
       title="StaticInput"
       source={[{

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

@@ -0,0 +1,8 @@
+<div class="kuiSearchInput">
+  <div class="kuiSearchInput__icon kuiIcon fa-search"></div>
+  <input
+    class="kuiSearchInput__input"
+    type="text"
+    placeholder="Search..."
+  >
+</div>

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

@@ -4,7 +4,7 @@
 <hr class="guideBreak">
 
 <textarea type="text" class="kuiTextArea">
-  Entered text
+Entered text
 </textarea>
 
 <hr class="guideBreak">
@@ -15,5 +15,5 @@
 <hr class="guideBreak">
 
 <textarea type="text" class="kuiTextArea" disabled>
-  Disabled
+Disabled
 </textarea>

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

@@ -1,3 +1,3 @@
 <textarea type="text" class="kuiTextArea kuiTextArea--nonResizable">
-  Non-resizable
+Non-resizable
 </textarea>

ui_framework/doc_site/src/views/form_layout/field_group.html

@@ -0,0 +1,19 @@
+<div class="kuiFieldGroup">
+  <div class="kuiFieldGroupSection kuiFieldGroupSection--wide">
+    <div class="kuiSearchInput">
+      <div class="kuiSearchInput__icon kuiIcon fa-search"></div>
+      <input
+        class="kuiSearchInput__input"
+        type="text"
+      >
+    </div>
+  </div>
+
+  <div class="kuiFieldGroupSection">
+    <select class="kuiSelect">
+      <option>Animal</option>
+      <option>Mineral</option>
+      <option>Vegetable</option>
+    </select>
+  </div>
+</div>

ui_framework/doc_site/src/views/form_layout/form_layout_example.jsx

@@ -0,0 +1,31 @@
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
+
+import {
+  GuideCode,
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+} from '../../components';
+
+const fieldGroupHtml = require('./field_group.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="FieldGroup"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: fieldGroupHtml,
+      }]}
+    >
+      <GuideDemo
+        html={fieldGroupHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);