[UI Framework][K7]: Form components (#13435)

Adds form components and example documentation to KUI.
elastic · Sep 19, 2017 · 1da1846 · 1da1846
1 parent faad2ec
commit 1da1846
Show file tree

Hide file tree

Showing 75 changed files with 2,019 additions and 22 deletions.
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
diff --git a/ui_framework/doc_site/src/components/guide_components.scss b/ui_framework/doc_site/src/components/guide_components.scss
@@ -10,7 +10,7 @@ $guideChromeTransition: 0.3s ease;
 
 // Colors
 $guideBaseBackgroundColor: #f7f7f7;
-$guidePanelBackgroundColor: #ffffff;
+$guidePanelBackgroundColor: $kuiColorEmptyShade;
 $guideTextColor: #444;
 $guideLinkColor: #00a9e5;
 $guideLinkHoverColor: #00a9e5;

diff --git a/ui_framework/doc_site/src/components/guide_page/_guide_page.scss b/ui_framework/doc_site/src/components/guide_page/_guide_page.scss
@@ -11,7 +11,7 @@
   $scrollBarWidth: 20px;
 
   background-color: $guidePanelBackgroundColor;
-  border: 1px solid #CCCCCC;
+  border: 1px solid $kuiColorLightShade;
   border-radius: 4px;
   flex: 1 1 auto;
   padding: 40px 60px;

diff --git a/ui_framework/doc_site/src/main.scss b/ui_framework/doc_site/src/main.scss
@@ -1,2 +1,3 @@
 @import "../../dist/ui_framework.css";
+@import "../../src/global_styling/variables/_index.scss";
 @import "./components/guide_components";
diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js
@@ -9,6 +9,9 @@ import ButtonExample
 import CallOutExample
   from '../../views/call_out/call_out_example';
 
+import FormExample
+  from '../../views/form/form_example';
+
 import IconExample
   from '../../views/icon/icon_example';
 
@@ -64,6 +67,10 @@ const components = [{
   name: 'CallOut',
   component: CallOutExample,
   hasReact: true,
+}, {
+  name: 'Form',
+  component: FormExample,
+  hasReact: true,
 }, {
   name: 'Header',
   component: HeaderExample,

diff --git a/ui_framework/doc_site/src/views/form/field_text.js b/ui_framework/doc_site/src/views/form/field_text.js
@@ -0,0 +1,65 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  KuiFormRow,
+  KuiFieldText,
+} from '../../../../components';
+
+// Don't use this, make proper ids instead. This is just for the example.
+function makeId() {
+  return Math.random().toString(36).substr(2, 5);
+}
+
+export default class extends Component {
+
+  render() {
+    return (
+      <div>
+        <KuiFieldText name="naked_text" placeholder="Naked component with placeholder" />
+
+        <br/><br/>
+
+        <KuiFormRow
+          id={makeId()}
+          label="Text field in a form row"
+        >
+          <KuiFieldText name="text_name_in_row" />
+        </KuiFormRow>
+
+        <KuiFormRow
+          id={makeId()}
+          label="Icons should only be used on field level components"
+          icon="user"
+        >
+          <KuiFieldText name="text_name_in_row_with_icon" />
+        </KuiFormRow>
+
+        <KuiFormRow
+          id={makeId()}
+          label="Text field with helptext"
+          helpText="I'm some help text!"
+        >
+          <KuiFieldText name="text_name_in_row_with_help" />
+        </KuiFormRow>
+        <KuiFormRow
+          id={makeId()}
+          label="Text field is invalid"
+          invalid
+        >
+          <KuiFieldText name="text_name_in_row_is_invalid" />
+        </KuiFormRow>
+        <KuiFormRow
+          id={makeId()}
+          label="Text field is invalid with errors"
+          invalid
+          errors={['Hello, I\'m some local error text passed as an array']}
+        >
+          <KuiFieldText name="text_name_in_row_has_errors" />
+        </KuiFormRow>
+      </div>
+    );
+  }
+}
+
diff --git a/ui_framework/doc_site/src/views/form/form_everything.js b/ui_framework/doc_site/src/views/form/form_everything.js
@@ -0,0 +1,154 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  KuiForm,
+  KuiCheckbox,
+  KuiFieldNumber,
+  KuiFieldPassword,
+  KuiRange,
+  KuiFormRow,
+  KuiFieldSearch,
+  KuiSelect,
+  KuiSwitch,
+  KuiFieldText,
+  KuiTextArea,
+} from '../../../../components';
+
+
+// Don't use this, make proper ids instead. This is just for the example.
+function makeId() {
+  return Math.random().toString(36).substr(2, 5);
+}
+
+export default class extends Component {
+
+  render() {
+
+    // Checkboxes are passed as an array of objects. They can be optionally checked to start.
+    const checkboxOptions = [
+      { id: makeId(), label: 'Option one' },
+      { id: makeId(), label: 'Option two is checked by default', checked: true },
+      { id: makeId(), label: 'Option three' },
+    ];
+
+    // Select options are passed as an array of objects.
+    const selectOptions = [
+      { value: 'option_one', text: 'Option one' },
+      { value: 'option_two', text: 'Option two' },
+      { value: 'option_three', text: 'Option three' },
+    ];
+
+
+    const formSample = (
+      <KuiForm>
+
+        <KuiFormRow
+          id={makeId()}
+          label="Number"
+          helpText="Any number between 1 and 5"
+        >
+          <KuiFieldNumber
+            name="number"
+            min={1}
+            max={5}
+          />
+        </KuiFormRow>
+
+        <KuiFormRow
+          id={makeId()}
+          label="First name"
+          helpText="I am some friendly help text."
+        >
+          <KuiFieldText name="first" />
+        </KuiFormRow>
+
+        <KuiFormRow
+          id={makeId()}
+          label="Last name with icon"
+          icon="user"
+        >
+          <KuiFieldText
+            name="first"
+            placeholder="Some placeholder text"
+          />
+        </KuiFormRow>
+
+        <KuiFormRow
+          id={makeId()}
+          label="Password"
+          icon="lock"
+        >
+          <KuiFieldPassword name="pass" />
+        </KuiFormRow>
+
+        <KuiFormRow
+          id={makeId()}
+          label="Range"
+        >
+          <KuiRange
+            min={0}
+            max={100}
+            name="range"
+            id="range"
+          />
+        </KuiFormRow>
+
+        <KuiFormRow
+          id={makeId()}
+          label="Search"
+          icon="search"
+        >
+          <KuiFieldSearch
+            label="Search"
+            name="search1"
+            placeholder="Search..."
+          />
+        </KuiFormRow>
+
+        <KuiFormRow
+          id={makeId()}
+          label="Select dropdown"
+          icon="arrowDown"
+          containsSelect
+        >
+          <KuiSelect
+            options={selectOptions}
+            name="dropdown"
+          />
+        </KuiFormRow>
+        <KuiFormRow
+          label="Textarea"
+          id={makeId()}
+        >
+          <KuiTextArea name="textarea"/>
+        </KuiFormRow>
+
+        <KuiFormRow
+          label="Use a swich if you only need one checkbox"
+        >
+          <KuiSwitch
+            name="switch"
+            id={makeId()}
+            label="Should we do this?"
+          />
+        </KuiFormRow>
+
+        <KuiFormRow
+          id={makeId()}
+          label="You should always use more than one checkbox"
+        >
+          <KuiCheckbox options={checkboxOptions} />
+        </KuiFormRow>
+
+      </KuiForm>
+    );
+
+    return (
+      <div>
+        {formSample}
+      </div>
+    );
+  }
+}
diff --git a/ui_framework/doc_site/src/views/form/form_example.js b/ui_framework/doc_site/src/views/form/form_example.js
@@ -0,0 +1,112 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideDemo,
+  GuideCode,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+import FieldText from './field_text';
+const fieldTextSource = require('!!raw!./field_text');
+const fieldTextHtml = renderToHtml(FieldText);
+
+import FormEverything from './form_everything';
+const formEverythingSource = require('!!raw!./form_everything');
+const formEverythingHtml = renderToHtml(FormEverything);
+
+import FormValidation from './form_validation';
+const formValidationSource = require('!!raw!./form_validation');
+const formValidationHtml = renderToHtml(FormValidation);
+
+import FormPopover from './form_popover';
+const formPopoverSource = require('!!raw!./form_popover');
+const formPopoverHtml = renderToHtml(FormPopover);
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Component structure"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: fieldTextSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: fieldTextHtml,
+      }]}
+    >
+      <GuideText>
+        Each form input has a base component to cover generic use cases. These are raw HTML elements with only basic styling.
+        Additionally, you can wrap any of these elements with a <GuideCode>FormRow</GuideCode> which gives you optional
+        prebuilt labels, help text and validation.  Below is an example showing the <GuideCode>FieldText</GuideCode> component
+        in a bunch of configurations, but they all act roughly the same. Farther down in the docs you can see an example
+        showing every form element and their individual prop settings (which mirror their HTML counterparts).
+      </GuideText>
+
+      <GuideDemo>
+        <FieldText />
+      </GuideDemo>
+    </GuideSection>
+    <GuideSection
+      title="Form component examples"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: formEverythingSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: formEverythingHtml,
+      }]}
+    >
+      <GuideText>
+        This example shows every form element in use and showcases a variety of styles. Note that each one of these elements is wrapped
+        by <GuideCode>FormRow</GuideCode>.
+      </GuideText>
+
+      <GuideDemo>
+        <FormEverything />
+      </GuideDemo>
+    </GuideSection>
+    <GuideSection
+      title="Form in popover"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: formPopoverSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: formPopoverHtml,
+      }]}
+    >
+      <GuideText>
+        Forms can be placed within popovers and should scale accordingly.
+      </GuideText>
+
+      <GuideDemo>
+        <FormPopover />
+      </GuideDemo>
+    </GuideSection>
+    <GuideSection
+      title="Form validation"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: formValidationSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: formValidationHtml,
+      }]}
+    >
+      <GuideText>
+        Validation is achieved by applying <GuideCode>invalid</GuideCode> and optionally <GuideCode>error</GuideCode> props
+        onto the <GuideCode>KuiForm</GuideCode> or <GuideCode>KuiFormRow</GuideCode> components. Errors are optional
+        and are passed as an array in case you need to list many errors.
+      </GuideText>
+
+      <GuideDemo>
+        <FormValidation />
+      </GuideDemo>
+    </GuideSection>
+  </GuidePage>
+);