Add compressed to form row

- Also fixes elastic#792: Moved bottom padding from help text to form row

src-docs/src/views/form_layouts/form_compressed.js

@@ -0,0 +1,151 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiButton,
+  EuiCheckboxGroup,
+  EuiFieldText,
+  EuiForm,
+  EuiFormRow,
+  EuiFilePicker,
+  EuiRange,
+  EuiSelect,
+  EuiSwitch,
+  EuiPanel,
+} from '../../../../src/components';
+
+import makeId from '../../../../src/components/form/form_row/make_id';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    const idPrefix = makeId();
+
+    this.state = {
+      isSwitchChecked: false,
+      checkboxes: [{
+        id: `${idPrefix}0`,
+        label: 'Option one',
+      }, {
+        id: `${idPrefix}1`,
+        label: 'Option two is checked by default',
+      }, {
+        id: `${idPrefix}2`,
+        label: 'Option three',
+      }],
+      checkboxIdToSelectedMap: {
+        [`${idPrefix}1`]: true,
+      },
+      radios: [{
+        id: `${idPrefix}4`,
+        label: 'Option one',
+      }, {
+        id: `${idPrefix}5`,
+        label: 'Option two is selected by default',
+      }, {
+        id: `${idPrefix}6`,
+        label: 'Option three',
+      }],
+      radioIdSelected: `${idPrefix}5`,
+    };
+  }
+
+  onSwitchChange = () => {
+    this.setState({
+      isSwitchChecked: !this.state.isSwitchChecked,
+    });
+  }
+
+  onCheckboxChange = optionId => {
+    const newCheckboxIdToSelectedMap = ({ ...this.state.checkboxIdToSelectedMap, ...{
+      [optionId]: !this.state.checkboxIdToSelectedMap[optionId],
+    } });
+
+    this.setState({
+      checkboxIdToSelectedMap: newCheckboxIdToSelectedMap,
+    });
+  }
+
+  onRadioChange = optionId => {
+    this.setState({
+      radioIdSelected: optionId,
+    });
+  }
+
+  render() {
+    return (
+      <EuiPanel style={{ maxWidth: 300 }}>
+        <EuiForm compressed>
+          <EuiFormRow
+            label="Text field"
+            helpText="I am some friendly help text."
+            compressed
+          >
+            <EuiFieldText name="first" />
+          </EuiFormRow>
+
+          <EuiFormRow
+            label="Select"
+            compressed
+          >
+            <EuiSelect
+              options={[
+                { value: 'option_one', text: 'Option one' },
+                { value: 'option_two', text: 'Option two' },
+                { value: 'option_three', text: 'Option three' },
+              ]}
+            />
+          </EuiFormRow>
+
+          <EuiFormRow
+            label="File picker"
+            compressed
+          >
+            <EuiFilePicker />
+          </EuiFormRow>
+
+          <EuiFormRow
+            label="Range"
+            compressed
+          >
+            <EuiRange
+              min={0}
+              max={100}
+              name="range"
+              id="range"
+            />
+          </EuiFormRow>
+
+          <EuiFormRow
+            label="Use a switch instead of a single checkbox"
+            compressed
+          >
+            <EuiSwitch
+              label="Should we do this?"
+              name="switch"
+              checked={this.state.isSwitchChecked}
+              onChange={this.onSwitchChange}
+            />
+          </EuiFormRow>
+
+          <EuiFormRow
+            label="Checkboxes"
+            compressed
+          >
+            <EuiCheckboxGroup
+              options={this.state.checkboxes}
+              idToSelectedMap={this.state.checkboxIdToSelectedMap}
+              onChange={this.onCheckboxChange}
+            />
+          </EuiFormRow>
+
+          <EuiButton type="submit" size="s" fill>
+            Save form
+          </EuiButton>
+        </EuiForm>
+      </EuiPanel>
+    );
+  }
+}

src-docs/src/views/form_layouts/form_layouts_example.js

@@ -11,18 +11,10 @@ import {
   EuiForm,
   EuiFormRow,
   EuiDescribedFormGroup,
-  EuiCheckboxGroup,
-  EuiFieldNumber,
-  EuiFieldPassword,
-  EuiFieldSearch,
   EuiFieldText,
   EuiPopover,
   EuiRange,
-  EuiRadioGroup,
-  EuiSelect,
   EuiSwitch,
-  EuiTextArea,
-  EuiFilePicker,
 } from '../../../../src/components';
 
 import FormRows from './form_rows';
@@ -53,6 +45,10 @@ import InlinePopover from './inline_popover';
 const inlinePopoverSource = require('!!raw-loader!./inline_popover');
 const inlinePopoverHtml = renderToHtml(InlinePopover);
 
+import FormCompressed from './form_compressed';
+const formCompressedSource = require('!!raw-loader!./form_compressed');
+const formCompressedHtml = renderToHtml(FormCompressed);
+
 export const FormLayoutsExample = {
   title: 'Form layouts',
   sections: [{
@@ -71,65 +67,71 @@ export const FormLayoutsExample = {
       </p>
     ),
     props: {
-      EuiCheckboxGroup,
-      EuiFieldNumber,
-      EuiFieldPassword,
-      EuiFieldSearch,
-      EuiFieldText,
       EuiForm,
       EuiFormRow,
-      EuiFilePicker,
-      EuiRange,
-      EuiRadioGroup,
-      EuiSelect,
-      EuiSwitch,
-      EuiTextArea,
     },
     demo: <FormRows />,
   }, {
-    title: 'Described form groups',
+    title: 'Full-width',
     source: [{
       type: GuideSectionTypes.JS,
-      code: describedFormGroupSource,
+      code: fullWidthSource,
     }, {
       type: GuideSectionTypes.HTML,
-      code: describedFormGroupHtml,
+      code: fullWidthHtml,
     }],
     text: (
       <p>
-        Use <EuiCode>EuiDescribedFormGroup</EuiCode> component to associate multiple <EuiCode>EuiFormRow</EuiCode>s.
-        It can also simply be used with one <EuiCode>EuiFormRow</EuiCode> as a way to display help text (or additional
-        text) next to the field instead of below (on mobile, will revert to being stacked).
+        Form elements will automatically flex to a max-width of <EuiCode>400px</EuiCode>.
+        You can optionally pass the <EuiCode>fullWidth</EuiCode> prop to both individual field
+        and row components to expand to their container. This should be done rarely and usually
+        you will only need it for isolated controls like search bars and sliders.
       </p>
     ),
     props: {
-      EuiDescribedFormGroup,
+      EuiFormRow,
     },
-    demo: <DescribedFormGroup />,
+    demo: <FullWidth />,
   }, {
-    title: 'Full-width',
+    title: 'Compressed',
     source: [{
       type: GuideSectionTypes.JS,
-      code: fullWidthSource,
+      code: formCompressedSource,
     }, {
       type: GuideSectionTypes.HTML,
-      code: fullWidthHtml,
+      code: formCompressedHtml,
     }],
     text: (
       <p>
-        Form elements will automatically flex to a max-width of <EuiCode>400px</EuiCode>.
-        You can optionally pass the <EuiCode>fullWidth</EuiCode> prop to both individual field
-        and row components to expand to their container. This should be done rarely and usually
-        you will only need it for isolated controls like search bars and sliders.
+        If the particular form is in an area with a small amount of real estate,
+        you can add the prop <EuiCode>compressed</EuiCode> to the <EuiCode>EuiFormRow</EuiCode>s and it
+        will pass down to the form controls.
       </p>
     ),
     props: {
-      EuiFieldSearch,
-      EuiRange,
-      EuiTextArea,
       EuiFormRow,
     },
-    demo: <FullWidth />,
+    demo: <FormCompressed />,
+  }, {
+    title: 'Described form groups',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: describedFormGroupSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: describedFormGroupHtml,
+    }],
+    text: (
+      <p>
+        Use <EuiCode>EuiDescribedFormGroup</EuiCode> component to associate multiple <EuiCode>EuiFormRow</EuiCode>s.
+        It can also simply be used with one <EuiCode>EuiFormRow</EuiCode> as a way to display help text (or additional
+        text) next to the field instead of below (on mobile, will revert to being stacked).
+      </p>
+    ),
+    props: {
+      EuiDescribedFormGroup,
+    },
+    demo: <DescribedFormGroup />,
   }, {
     title: 'In popover',
     text: (

src/components/form/form_error_text/_form_error_text.scss

@@ -1,5 +1,5 @@
 .euiFormErrorText {
   @include euiFontSizeXS;
-  padding: $euiSizeS 0;
+  padding-top: $euiSizeS;
   color: $euiColorDanger;
 }

src/components/form/form_help_text/_form_help_text.scss

@@ -1,5 +1,5 @@
 .euiFormHelpText {
   @include euiFontSizeXS;
-  padding: $euiSizeS 0;
+  padding-top: $euiSizeS;
   color: $euiColorDarkShade;
 }

src/components/form/form_row/_form_row.scss

@@ -6,9 +6,10 @@
   display: flex; /* 1 */
   flex-direction: column; /* 1 */
   max-width: $euiFormMaxWidth;
+  padding-bottom: $euiSizeS;
 
   + * {
-    margin-top: $euiSizeL;
+    margin-top: $euiSize;
   }
 
   &.euiFormRow--fullWidth {
@@ -19,7 +20,13 @@
     padding-top: $euiFontSizeXS + $euiSizeS; /* 2 */
   }
 
-  .euiFormRow__text + .euiFormRow__text {
-    padding-top: 0;
+  &.euiFormRow--compressed {
+    + * {
+      margin-top: $euiSizeS;
+    }
+
+    .euiFormRow__text {
+      padding-top: $euiSizeM/2;
+    }
   }
 }

src/components/form/form_row/form_row.js

@@ -60,6 +60,7 @@ export class EuiFormRow extends Component {
       fullWidth,
       className,
       describedByIds,
+      compressed,
       ...rest
     } = this.props;
 
@@ -70,6 +71,7 @@ export class EuiFormRow extends Component {
       {
         'euiFormRow--hasEmptyLabelSpace': hasEmptyLabelSpace,
         'euiFormRow--fullWidth': fullWidth,
+        'euiFormRow--compressed': compressed,
       },
       className
     );
@@ -126,6 +128,7 @@ export class EuiFormRow extends Component {
       id,
       onFocus: this.onFocus,
       onBlur: this.onBlur,
+      compressed: compressed,
       ...optionalProps
     });
 
@@ -158,6 +161,11 @@ EuiFormRow.propTypes = {
    * IDs of additional elements that should be part of children's `aria-describedby`
    */
   describedByIds: PropTypes.array,
+  /**
+   * Tightens up the spacing and sends down the
+   * compressed prop to the input
+   */
+  compressed: PropTypes.bool,
 };
 
 EuiFormRow.defaultProps = {