[Feature] Compressed editor controls

src-docs/src/components/guide_locale_selector/guide_locale_selector.js

@@ -12,7 +12,6 @@ export const GuideLocaleSelector = ({ selectedLocale, onToggleLocale }) => {
         onChange={() =>
           onToggleLocale(selectedLocale === 'en' ? 'en-xa' : 'en')
         }
-        compressed={true}
       />
     </EuiFormRow>
   );

src-docs/src/components/guide_page/guide_page_chrome.js

@@ -166,12 +166,10 @@ export class GuidePageChrome extends Component {
                 selectedTheme={this.props.selectedTheme}
               />
               {location.host === 'localhost:8030' ? ( // eslint-disable-line no-restricted-globals
-                <EuiFlexItem grow={false}>
-                  <GuideLocaleSelector
-                    onToggleLocale={this.props.onToggleLocale}
-                    selectedLocale={this.props.selectedLocale}
-                  />
-                </EuiFlexItem>
+                <GuideLocaleSelector
+                  onToggleLocale={this.props.onToggleLocale}
+                  selectedLocale={this.props.selectedLocale}
+                />
               ) : null}
             </div>
           </EuiPopover>

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';
@@ -336,8 +338,9 @@ const navigation = [
   {
     name: 'Forms',
     items: [
-      FormLayoutsExample,
       FormControlsExample,
+      FormLayoutsExample,
+      FormCompressedExample,
       FormValidationExample,
       SuperSelectExample,
       ComboBoxExample,

src-docs/src/views/color_picker/custom_button.js

@@ -5,6 +5,7 @@ import {
   EuiFormRow,
   EuiColorPickerSwatch,
   EuiBadge,
+  EuiSpacer,
 } from '../../../../src/components';
 
 import { isValidHex } from '../../../../src/services';
@@ -43,6 +44,7 @@ export class CustomButton extends Component {
             }
           />
         </EuiFormRow>
+        <EuiSpacer />
         <EuiColorPicker
           onChange={this.handleChange}
           color={this.state.color}

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>
     );
   }
 }

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} canReadOnly={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>
     );
   }
 }

src-docs/src/views/combo_box/containers.js

@@ -161,6 +161,8 @@ export default class extends Component {
           {comboBox}
         </EuiFormRow>
 
+        <EuiSpacer />
+
         <EuiPopover
           id="popover"
           ownFocus

src-docs/src/views/context/context.js

@@ -85,6 +85,8 @@ export default class extends Component {
                   </EuiI18n>
                 </EuiFormRow>
 
+                <EuiSpacer />
+
                 <EuiButton>{action}</EuiButton>
               </Fragment>
             )}

src-docs/src/views/context_menu/context_menu.js

@@ -7,6 +7,7 @@ import {
   EuiIcon,
   EuiPopover,
   EuiSwitch,
+  EuiSpacer,
 } from '../../../../src/components';
 
 function flattenPanelTree(tree, array = []) {
@@ -87,6 +88,7 @@ export default class extends Component {
                           label="Current time range"
                         />
                       </EuiFormRow>
+                      <EuiSpacer />
                       <EuiButton fill>Copy iFrame code</EuiButton>
                     </div>
                   ),

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

src-docs/src/views/expression/expression.js

@@ -101,6 +101,7 @@ export default class extends Component {
       <div style={POPOVER_STYLE}>
         <EuiPopoverTitle>When</EuiPopoverTitle>
         <EuiSelect
+          compressed
           value={this.state.example1.value}
           onChange={this.changeExample1}
           options={[
@@ -119,9 +120,10 @@ export default class extends Component {
   renderPopover2() {
     return (
       <div style={POPOVER_STYLE}>
-        <EuiFlexGroup>
+        <EuiFlexGroup gutterSize="s">
           <EuiFlexItem grow={false} style={{ width: 150 }}>
             <EuiSelect
+              compressed
               value={this.state.example2.description}
               onChange={this.changeExample2Description}
               options={[
@@ -134,6 +136,7 @@ export default class extends Component {
 
           <EuiFlexItem grow={false} style={{ width: 100 }}>
             <EuiFieldNumber
+              compressed
               value={this.state.example2.value}
               onChange={this.changeExample2Value}
             />
@@ -160,7 +163,7 @@ export default class extends Component {
             isOpen={this.state.example1.isOpen}
             closePopover={this.closeExample1}
             ownFocus
-            withTitle
+            panelPaddingSize="s"
             anchorPosition="downLeft">
             {this.renderPopover1()}
           </EuiPopover>
@@ -169,6 +172,7 @@ export default class extends Component {
         <EuiFlexItem grow={false}>
           <EuiPopover
             id="popover2"
+            panelPaddingSize="s"
             button={
               <EuiExpression
                 description={this.state.example2.description}

src-docs/src/views/flyout/flyout_complicated.js

@@ -195,6 +195,7 @@ export class FlyoutComplicated extends Component {
                 <SuperSelectComplexExample />
               </EuiFormRow>
             </EuiForm>
+            <EuiSpacer />
             {flyoutContent}
             <EuiCodeBlock language="html">{htmlCode}</EuiCodeBlock>
           </EuiFlyoutBody>

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) {