Into feature/compressed editor docs (#2295)

* Adding a shared component for the different states of each form control * New docs section for compressed * Added `columnCompressedSwitch` to display type of EuiFormRow for better alignment of switch style controls * Account for tooltips as pre/appends * Allow passing a string as the pre/appends and it automatically wraps it in a form label * Made all EuiSuperDatePicker form controls compressed (in popover) * Connection prepend/appends with input via `htmlFor` * Allowing passing of `style` to EuiColorPickerSwatch * Allow an array of strings a pre/append
elastic · Sep 6, 2019 · 1dfd030 · 1dfd030
1 parent eb61262
commit 1dfd030
Show file tree

Hide file tree

Showing 46 changed files with 1,622 additions and 1,125 deletions.
diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
@@ -96,6 +96,8 @@ import { FormControlsExample } from './views/form_controls/form_controls_example
 
 import { FormLayoutsExample } from './views/form_layouts/form_layouts_example';
 
+import { FormCompressedExample } from './views/form_compressed/form_compressed_example';
+
 import { FormValidationExample } from './views/form_validation/form_validation_example';
 
 import { HeaderExample } from './views/header/header_example';
@@ -326,8 +328,9 @@ const navigation = [
   {
     name: 'Forms',
     items: [
-      FormLayoutsExample,
       FormControlsExample,
+      FormLayoutsExample,
+      FormCompressedExample,
       FormValidationExample,
       SuperSelectExample,
       ComboBoxExample,

diff --git a/src-docs/src/views/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
-import { EuiColorPicker, EuiFormRow } from '../../../../src/components';
-import { isValidHex } from '../../../../src/services';
+import { EuiColorPicker } from '../../../../src/components';
+import { DisplayToggles } from '../form_controls/display_toggles';
 
 export class KitchenSink extends Component {
   constructor(props) {
@@ -16,55 +16,11 @@ export class KitchenSink extends Component {
   };
 
   render() {
-    const hasErrors = !isValidHex(this.state.color) && this.state.color !== '';
-    const isCompressed = true;
-
-    let errors;
-    if (hasErrors) {
-      errors = ['Provide a valid hex value'];
-    }
-
     return (
-      <React.Fragment>
-        <EuiFormRow
-          compressed={isCompressed}
-          label="Pick a color"
-          isInvalid={hasErrors}
-          error={errors}
-          fullWidth={true}>
-          <EuiColorPicker
-            onChange={this.handleChange}
-            color={this.state.color}
-            isInvalid={hasErrors}
-            onBlur={() => console.log('onBlur')}
-            onFocus={() => console.log('onFocus')}
-            compressed={isCompressed}
-            fullWidth={true}
-            popoverZIndex={10}
-            mode="default"
-            swatches={['#333', '#666', '#999', '#CCC', '#FFF']}
-          />
-        </EuiFormRow>
-        <EuiFormRow compressed={isCompressed} label="Compressed">
-          <EuiColorPicker
-            onChange={this.handleChange}
-            compressed={isCompressed}
-          />
-        </EuiFormRow>
-        <EuiFormRow label="Disabled">
-          <EuiColorPicker onChange={this.handleChange} disabled={true} />
-        </EuiFormRow>
-        <EuiFormRow label="Read only">
-          <EuiColorPicker
-            color="#FFF"
-            onChange={this.handleChange}
-            readOnly={true}
-          />
-        </EuiFormRow>
-        <EuiFormRow fullWidth={true} label="Full width">
-          <EuiColorPicker onChange={this.handleChange} fullWidth={true} />
-        </EuiFormRow>
-      </React.Fragment>
+      /* DisplayToggles wrapper for Docs only */
+      <DisplayToggles canLoading={false}>
+        <EuiColorPicker color={this.state.color} onChange={this.handleChange} />
+      </DisplayToggles>
     );
   }
 }
diff --git a/src-docs/src/views/combo_box/combo_box.js b/src-docs/src/views/combo_box/combo_box.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 
 import { EuiComboBox } from '../../../../src/components';
+import { DisplayToggles } from '../form_controls/display_toggles';
 
 export default class extends Component {
   constructor(props) {
@@ -82,15 +83,18 @@ export default class extends Component {
   render() {
     const { selectedOptions } = this.state;
     return (
-      <EuiComboBox
-        placeholder="Select or create options"
-        options={this.options}
-        selectedOptions={selectedOptions}
-        onChange={this.onChange}
-        onCreateOption={this.onCreateOption}
-        isClearable={true}
-        data-test-subj="demoComboBox"
-      />
+      /* DisplayToggles wrapper for Docs only */
+      <DisplayToggles canDisabled={false}>
+        <EuiComboBox
+          placeholder="Select or create options"
+          options={this.options}
+          selectedOptions={selectedOptions}
+          onChange={this.onChange}
+          onCreateOption={this.onCreateOption}
+          isClearable={true}
+          data-test-subj="demoComboBox"
+        />
+      </DisplayToggles>
     );
   }
 }
diff --git a/src-docs/src/views/date_picker/states.js b/src-docs/src/views/date_picker/states.js
@@ -5,6 +5,7 @@ import {
   EuiSpacer,
   EuiFormRow,
 } from '../../../../src/components';
+import { DisplayToggles } from '../form_controls/display_toggles';
 
 export default class extends Component {
   constructor(props) {
@@ -30,15 +31,18 @@ export default class extends Component {
     ];
 
     return (
+      /* DisplayToggles wrapper for Docs only */
       <div>
-        <EuiDatePicker
-          showTimeSelect
-          selected={this.state.startDate}
-          onChange={this.handleChange}
-          placeholder="Placeholder text"
-        />
+        <DisplayToggles canCompressed={false}>
+          <EuiDatePicker
+            showTimeSelect
+            selected={this.state.startDate}
+            onChange={this.handleChange}
+            placeholder="Placeholder text"
+          />
+        </DisplayToggles>
 
-        <EuiSpacer size="m" />
+        <EuiSpacer size="l" />
 
         <EuiDatePicker
           showTimeSelect
@@ -50,37 +54,6 @@ export default class extends Component {
 
         <EuiSpacer size="m" />
 
-        <EuiDatePicker
-          showTimeSelect
-          selected={this.state.startDate}
-          onChange={this.handleChange}
-          disabled
-          placeholder="Disabled"
-        />
-
-        <EuiSpacer size="m" />
-
-        <EuiDatePicker
-          showTimeSelect
-          selected={this.state.startDate}
-          onChange={this.handleChange}
-          isLoading
-          placeholder="Loading"
-        />
-
-        <EuiSpacer size="m" />
-
-        <EuiDatePicker
-          showTimeSelect
-          selected={this.state.startDate}
-          onChange={this.handleChange}
-          isLoading
-          disabled
-          placeholder="Loading and disabled"
-        />
-
-        <EuiSpacer size="m" />
-
         <EuiFormRow label="Form row validation" isInvalid error={errors}>
           <EuiDatePicker
             showTimeSelect

diff --git a/src-docs/src/views/focus_trap/focus_trap.js b/src-docs/src/views/focus_trap/focus_trap.js
@@ -9,7 +9,7 @@ import {
   EuiText,
 } from '../../../../src/components';
 
-import FormExample from '../form_layouts/form_compressed';
+import FormExample from '../form_compressed/form_compressed';
 
 export default class extends Component {
   constructor(props) {