From 3a3bdddb3043fd67fb949733eee1ec3975f172f6 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 4 May 2018 18:57:39 -0400
Subject: [PATCH 1/9] Added `compressed` props to

- `euiFormControlLayout`: for shifting the icons (and loading and clear) and reducing width
- `field_search`, `field_text`, `field_number`, `field_password`, `select`, `checkbox`, `checkbox_group`, `radio`, `radio_group`
- __NOT__ to `text_area`, `switch`
- `file_picker` needed some extra work to make just look like a normal input field that is compressed. May want to consider also allowing for a non-compressed but but normal input style as well.
---
 src-docs/src/views/form_controls/checkbox.js  | 10 ++++
 .../src/views/form_controls/checkbox_group.js | 18 +++++++
 .../src/views/form_controls/field_number.js   |  9 ++++
 .../src/views/form_controls/field_password.js |  9 ++++
 .../src/views/form_controls/field_search.js   |  9 ++++
 .../src/views/form_controls/field_text.js     |  9 ++++
 .../src/views/form_controls/file_picker.js    | 10 ++++
 src-docs/src/views/form_controls/radio.js     | 10 ++++
 .../src/views/form_controls/radio_group.js    | 18 +++++++
 src-docs/src/views/form_controls/select.js    |  9 ++++
 .../__snapshots__/basic_table.test.js.snap    | 28 ++++++++++
 .../__snapshots__/date_picker.test.js.snap    |  1 +
 src/components/form/_mixins.scss              |  6 +++
 src/components/form/checkbox/_checkbox.scss   |  8 ++-
 .../form/checkbox/_checkbox_group.scss        |  4 ++
 src/components/form/checkbox/checkbox.js      | 10 +++-
 .../form/checkbox/checkbox_group.js           |  9 +++-
 .../__snapshots__/field_number.test.js.snap   |  6 +++
 .../form/field_number/field_number.js         |  8 +++
 .../__snapshots__/field_password.test.js.snap |  4 ++
 .../form/field_password/field_password.js     |  8 +++
 .../__snapshots__/field_search.test.js.snap   |  4 ++
 .../form/field_search/field_search.js         | 12 ++++-
 .../__snapshots__/field_text.test.js.snap     |  4 ++
 src/components/form/field_text/field_text.js  |  8 +++
 .../form/file_picker/_file_picker.scss        | 53 +++++++++++++++++--
 .../form/file_picker/file_picker.js           | 44 +++++++++++----
 .../_form_control_layout.scss                 | 26 +++++----
 .../form/form_control_layout/_index.scss      |  1 +
 .../form/form_control_layout/_mixins.scss     | 16 ++++++
 .../form_control_layout.js                    | 15 +++++-
 src/components/form/radio/_radio.scss         |  8 ++-
 src/components/form/radio/_radio_group.scss   |  4 ++
 src/components/form/radio/radio.js            | 10 +++-
 src/components/form/radio/radio_group.js      |  8 +++
 .../__snapshots__/search_box.test.js.snap     |  2 +
 src/global_styling/variables/_typography.scss | 12 ++---
 37 files changed, 387 insertions(+), 43 deletions(-)
 create mode 100644 src/components/form/form_control_layout/_mixins.scss

diff --git a/src-docs/src/views/form_controls/checkbox.js b/src-docs/src/views/form_controls/checkbox.js
index 02b988bd683..73acf8e3320 100644
--- a/src-docs/src/views/form_controls/checkbox.js
+++ b/src-docs/src/views/form_controls/checkbox.js
@@ -44,6 +44,16 @@ export default class extends Component {
           onChange={this.onChange}
           disabled
         />
+
+        <EuiSpacer size="m" />
+
+        <EuiCheckbox
+          id={makeId()}
+          label="I am a compressed checkbox"
+          checked={this.state.checked}
+          onChange={this.onChange}
+          compressed
+        />
       </Fragment>
     );
   }
diff --git a/src-docs/src/views/form_controls/checkbox_group.js b/src-docs/src/views/form_controls/checkbox_group.js
index fbacff5c3f8..6f91c718240 100644
--- a/src-docs/src/views/form_controls/checkbox_group.js
+++ b/src-docs/src/views/form_controls/checkbox_group.js
@@ -6,6 +6,7 @@ import React, {
 import {
   EuiCheckboxGroup,
   EuiSpacer,
+  EuiTitle,
 } from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
@@ -55,12 +56,29 @@ export default class extends Component {
 
         <EuiSpacer size="m" />
 
+        <EuiTitle size="xxs"><h3>Disabled</h3></EuiTitle>
+
+        <EuiSpacer size="s" />
+
         <EuiCheckboxGroup
           options={this.checkboxes}
           idToSelectedMap={this.state.checkboxIdToSelectedMap}
           onChange={this.onChange}
           disabled
         />
+
+        <EuiSpacer size="m" />
+
+        <EuiTitle size="xxs"><h3>Compressed</h3></EuiTitle>
+
+        <EuiSpacer size="s" />
+
+        <EuiCheckboxGroup
+          options={this.checkboxes}
+          idToSelectedMap={this.state.checkboxIdToSelectedMap}
+          onChange={this.onChange}
+          compressed
+        />
       </Fragment>
     );
   }
diff --git a/src-docs/src/views/form_controls/field_number.js b/src-docs/src/views/form_controls/field_number.js
index f8a164810dc..c365e1301fd 100644
--- a/src-docs/src/views/form_controls/field_number.js
+++ b/src-docs/src/views/form_controls/field_number.js
@@ -69,6 +69,15 @@ export default class extends Component {
           onChange={this.onChange}
           readOnly
         />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldNumber
+          placeholder="Compressed"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+        />
       </Fragment>
     );
   }
diff --git a/src-docs/src/views/form_controls/field_password.js b/src-docs/src/views/form_controls/field_password.js
index 4c1c5e1ac5a..ced47a8897b 100644
--- a/src-docs/src/views/form_controls/field_password.js
+++ b/src-docs/src/views/form_controls/field_password.js
@@ -59,6 +59,15 @@ export default class extends Component {
           isLoading
           disabled
         />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldPassword
+          placeholder="Compressed"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+        />
       </Fragment>
     );
   }
diff --git a/src-docs/src/views/form_controls/field_search.js b/src-docs/src/views/form_controls/field_search.js
index 4781eeeed2f..fe6974416cc 100644
--- a/src-docs/src/views/form_controls/field_search.js
+++ b/src-docs/src/views/form_controls/field_search.js
@@ -68,6 +68,15 @@ export default class extends Component {
           onChange={this.onChange}
           readOnly
         />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldSearch
+          placeholder="Compressed"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+        />
       </Fragment>
     );
   }
diff --git a/src-docs/src/views/form_controls/field_text.js b/src-docs/src/views/form_controls/field_text.js
index b165642648a..e3f4e3e8236 100644
--- a/src-docs/src/views/form_controls/field_text.js
+++ b/src-docs/src/views/form_controls/field_text.js
@@ -68,6 +68,15 @@ export default class extends Component {
           onChange={this.onChange}
           readOnly
         />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldText
+          placeholder="Compressed"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+        />
       </Fragment>
     );
   }
diff --git a/src-docs/src/views/form_controls/file_picker.js b/src-docs/src/views/form_controls/file_picker.js
index 295bfc0ef30..bd68e23d134 100644
--- a/src-docs/src/views/form_controls/file_picker.js
+++ b/src-docs/src/views/form_controls/file_picker.js
@@ -65,6 +65,16 @@ export class FilePicker extends Component {
           disabled
           initialPromptText="Disabled"
         />
+
+        <EuiSpacer size="m" />
+
+        <EuiFilePicker
+          id="asdf2"
+          multiple
+          compressed
+          initialPromptText="Select some files"
+          onChange={files => { this.onChange(files); }}
+        />
       </Fragment>
     );
   }
diff --git a/src-docs/src/views/form_controls/radio.js b/src-docs/src/views/form_controls/radio.js
index d802d906506..645e2e2429d 100644
--- a/src-docs/src/views/form_controls/radio.js
+++ b/src-docs/src/views/form_controls/radio.js
@@ -44,6 +44,16 @@ export default class extends Component {
           onChange={this.onChange}
           disabled
         />
+
+        <EuiSpacer size="m" />
+
+        <EuiRadio
+          id={makeId()}
+          label="I am a compressed radio"
+          checked={this.state.checked}
+          onChange={this.onChange}
+          compressed
+        />
       </Fragment>
     );
   }
diff --git a/src-docs/src/views/form_controls/radio_group.js b/src-docs/src/views/form_controls/radio_group.js
index 73c6e925033..b96f0e57516 100644
--- a/src-docs/src/views/form_controls/radio_group.js
+++ b/src-docs/src/views/form_controls/radio_group.js
@@ -6,6 +6,7 @@ import React, {
 import {
   EuiRadioGroup,
   EuiSpacer,
+  EuiTitle,
 } from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
@@ -49,12 +50,29 @@ export default class extends Component {
 
         <EuiSpacer size="m" />
 
+        <EuiTitle size="xxs"><h3>Disabled</h3></EuiTitle>
+
+        <EuiSpacer size="s" />
+
         <EuiRadioGroup
           options={this.radios}
           idSelected={this.state.radioIdSelected}
           onChange={this.onChange}
           disabled
         />
+
+        <EuiSpacer size="m" />
+
+        <EuiTitle size="xxs"><h3>Compressed</h3></EuiTitle>
+
+        <EuiSpacer size="s" />
+
+        <EuiRadioGroup
+          options={this.radios}
+          idSelected={this.state.radioIdSelected}
+          onChange={this.onChange}
+          compressed
+        />
       </Fragment>
     );
   }
diff --git a/src-docs/src/views/form_controls/select.js b/src-docs/src/views/form_controls/select.js
index 7771bf7266d..eca3118fa0a 100644
--- a/src-docs/src/views/form_controls/select.js
+++ b/src-docs/src/views/form_controls/select.js
@@ -65,6 +65,15 @@ export default class extends Component {
           isLoading
           disabled
         />
+
+        <EuiSpacer size="m" />
+
+        <EuiSelect
+          options={this.options}
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+        />
       </Fragment>
     );
   }
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
index 4f2bcb28d97..f8b9fb5ca9c 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -484,6 +484,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
         >
           <EuiCheckbox
             checked={false}
+            compressed={false}
             data-test-subj="checkboxSelectAll"
             disabled={false}
             id="_selection_column-checkbox"
@@ -511,6 +512,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-1"
                 disabled={false}
                 id="_selection_column_1-checkbox"
@@ -539,6 +541,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-2"
                 disabled={false}
                 id="_selection_column_2-checkbox"
@@ -567,6 +570,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-3"
                 disabled={false}
                 id="_selection_column_3-checkbox"
@@ -632,6 +636,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
         >
           <EuiCheckbox
             checked={false}
+            compressed={false}
             data-test-subj="checkboxSelectAll"
             disabled={false}
             id="_selection_column-checkbox"
@@ -662,6 +667,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-1"
                 disabled={false}
                 id="_selection_column_1-checkbox"
@@ -690,6 +696,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-2"
                 disabled={false}
                 id="_selection_column_2-checkbox"
@@ -718,6 +725,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-3"
                 disabled={false}
                 id="_selection_column_3-checkbox"
@@ -783,6 +791,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
         >
           <EuiCheckbox
             checked={false}
+            compressed={false}
             data-test-subj="checkboxSelectAll"
             disabled={false}
             id="_selection_column-checkbox"
@@ -820,6 +829,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-1"
                 disabled={false}
                 id="_selection_column_1-checkbox"
@@ -876,6 +886,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-2"
                 disabled={false}
                 id="_selection_column_2-checkbox"
@@ -932,6 +943,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-3"
                 disabled={false}
                 id="_selection_column_3-checkbox"
@@ -1025,6 +1037,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
         >
           <EuiCheckbox
             checked={false}
+            compressed={false}
             data-test-subj="checkboxSelectAll"
             disabled={false}
             id="_selection_column-checkbox"
@@ -1055,6 +1068,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-1"
                 disabled={false}
                 id="_selection_column_1-checkbox"
@@ -1083,6 +1097,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-2"
                 disabled={false}
                 id="_selection_column_2-checkbox"
@@ -1111,6 +1126,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-3"
                 disabled={false}
                 id="_selection_column_3-checkbox"
@@ -1176,6 +1192,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
         >
           <EuiCheckbox
             checked={false}
+            compressed={false}
             data-test-subj="checkboxSelectAll"
             disabled={false}
             id="_selection_column-checkbox"
@@ -1206,6 +1223,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-1"
                 disabled={false}
                 id="_selection_column_1-checkbox"
@@ -1234,6 +1252,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-2"
                 disabled={false}
                 id="_selection_column_2-checkbox"
@@ -1262,6 +1281,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-3"
                 disabled={false}
                 id="_selection_column_3-checkbox"
@@ -1327,6 +1347,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
         >
           <EuiCheckbox
             checked={false}
+            compressed={false}
             data-test-subj="checkboxSelectAll"
             disabled={false}
             id="_selection_column-checkbox"
@@ -1364,6 +1385,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-1"
                 disabled={false}
                 id="_selection_column_1-checkbox"
@@ -1418,6 +1440,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-2"
                 disabled={false}
                 id="_selection_column_2-checkbox"
@@ -1472,6 +1495,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-3"
                 disabled={false}
                 id="_selection_column_3-checkbox"
@@ -1563,6 +1587,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
         >
           <EuiCheckbox
             checked={false}
+            compressed={false}
             data-test-subj="checkboxSelectAll"
             disabled={false}
             id="_selection_column-checkbox"
@@ -1593,6 +1618,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-1"
                 disabled={false}
                 id="_selection_column_1-checkbox"
@@ -1621,6 +1647,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-2"
                 disabled={false}
                 id="_selection_column_2-checkbox"
@@ -1649,6 +1676,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
             >
               <EuiCheckbox
                 checked={false}
+                compressed={false}
                 data-test-subj="checkboxSelectRow-3"
                 disabled={false}
                 id="_selection_column_3-checkbox"
diff --git a/src/components/date_picker/__snapshots__/date_picker.test.js.snap b/src/components/date_picker/__snapshots__/date_picker.test.js.snap
index 46b57dae21c..3523f318baf 100644
--- a/src/components/date_picker/__snapshots__/date_picker.test.js.snap
+++ b/src/components/date_picker/__snapshots__/date_picker.test.js.snap
@@ -6,6 +6,7 @@ exports[`EuiDatePicker is rendered 1`] = `
     className="euiDatePicker euiDatePicker--shadow"
   >
     <EuiFormControlLayout
+      compressed={false}
       fullWidth={false}
       icon="calendar"
       iconSide="left"
diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss
index 8573cbe79e3..a831daae0b6 100644
--- a/src/components/form/_mixins.scss
+++ b/src/components/form/_mixins.scss
@@ -85,6 +85,12 @@
     max-width: 100%;
   }
 
+  &--compressed {
+    // keep the same side padding, just reduce the height
+    padding-top: $euiSizeM/2;
+    padding-bottom: $euiSizeM/2;
+  }
+
   &:invalid { /* 1 */
     @include euiFormControlInvalidStyle;
   }
diff --git a/src/components/form/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss
index 5410edfe77c..7679a024d57 100644
--- a/src/components/form/checkbox/_checkbox.scss
+++ b/src/components/form/checkbox/_checkbox.scss
@@ -12,13 +12,19 @@
       position: relative;
       z-index: 2;
       cursor: pointer;
+
+      @at-root {
+        .euiCheckbox--compressed#{&} {
+          font-size: $euiFontSizeXS;
+        }
+      }
     }
 
     + .euiCheckbox__square {
       display: inline-block;
       position: absolute;
       left: 0;
-      top: ($euiSizeL - $euiCheckBoxSize)/2;
+      top: ($euiSizeL - $euiCheckBoxSize)/2 - 1px;
       @include euiCustomControl($type: 'square', $size: $euiCheckBoxSize);
     }
 
diff --git a/src/components/form/checkbox/_checkbox_group.scss b/src/components/form/checkbox/_checkbox_group.scss
index 3b83280e69e..a3982048c32 100644
--- a/src/components/form/checkbox/_checkbox_group.scss
+++ b/src/components/form/checkbox/_checkbox_group.scss
@@ -1,3 +1,7 @@
 .euiCheckboxGroup__item + .euiCheckboxGroup__item {
   margin-top: $euiSizeS;
+
+  &.euiCheckbox--compressed {
+    margin-top: 0;
+  }
 }
diff --git a/src/components/form/checkbox/checkbox.js b/src/components/form/checkbox/checkbox.js
index 6049f6ca1dd..4d64efb494c 100644
--- a/src/components/form/checkbox/checkbox.js
+++ b/src/components/form/checkbox/checkbox.js
@@ -16,13 +16,15 @@ export const EuiCheckbox = ({
   onChange,
   type,
   disabled,
+  compressed,
   ...rest
 }) => {
   const classes = classNames(
     'euiCheckbox',
     typeToClassNameMap[type],
     {
-      'euiCheckbox--noLabel': !label
+      'euiCheckbox--noLabel': !label,
+      'euiCheckbox--compressed': compressed
     },
     className
   );
@@ -69,9 +71,15 @@ EuiCheckbox.propTypes = {
   onChange: PropTypes.func.isRequired,
   type: PropTypes.oneOf(TYPES),
   disabled: PropTypes.bool,
+  /**
+   * when `true` creates a shorter height checkbox row
+   * and decreases font size
+   */
+  compressed: PropTypes.bool,
 };
 
 EuiCheckbox.defaultProps = {
   checked: false,
   disabled: false,
+  compressed: false,
 };
diff --git a/src/components/form/checkbox/checkbox_group.js b/src/components/form/checkbox/checkbox_group.js
index d7c6d66de3b..7ce03282390 100644
--- a/src/components/form/checkbox/checkbox_group.js
+++ b/src/components/form/checkbox/checkbox_group.js
@@ -9,6 +9,7 @@ export const EuiCheckboxGroup = ({
   onChange,
   className,
   disabled,
+  compressed,
   ...rest
 }) => (
   <div className={className} {...rest}>
@@ -22,6 +23,7 @@ export const EuiCheckboxGroup = ({
           label={option.label}
           disabled={disabled}
           onChange={onChange.bind(null, option.id)}
+          compressed={compressed}
         />
       );
     })}
@@ -37,9 +39,14 @@ EuiCheckboxGroup.propTypes = {
   ).isRequired,
   idToSelectedMap: PropTypes.objectOf(PropTypes.bool).isRequired,
   onChange: PropTypes.func.isRequired,
+  /**
+   * Tightens up the spacing between checkbox rows and sends down the
+   * compressed prop to the checkbox itself
+   */
+  compressed: PropTypes.bool,
 };
 
 EuiCheckboxGroup.defaultProps = {
   options: [],
-  idToSelectedMap: {},
+  idToSelectedMap: {}
 };
diff --git a/src/components/form/field_number/__snapshots__/field_number.test.js.snap b/src/components/form/field_number/__snapshots__/field_number.test.js.snap
index ae14364da23..18847581463 100644
--- a/src/components/form/field_number/__snapshots__/field_number.test.js.snap
+++ b/src/components/form/field_number/__snapshots__/field_number.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`EuiFieldNumber is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   icon="alert"
   isloading="false"
@@ -25,6 +26,7 @@ exports[`EuiFieldNumber is rendered 1`] = `
 
 exports[`EuiFieldNumber props fullWidth is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="true"
   isloading="false"
 >
@@ -39,6 +41,7 @@ exports[`EuiFieldNumber props fullWidth is rendered 1`] = `
 
 exports[`EuiFieldNumber props isInvalid is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   isloading="false"
 >
@@ -55,6 +58,7 @@ exports[`EuiFieldNumber props isInvalid is rendered 1`] = `
 
 exports[`EuiFieldNumber props isLoading is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   isloading="true"
 >
@@ -69,6 +73,7 @@ exports[`EuiFieldNumber props isLoading is rendered 1`] = `
 
 exports[`EuiFieldNumber props value no initial value 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   isloading="false"
 >
@@ -84,6 +89,7 @@ exports[`EuiFieldNumber props value no initial value 1`] = `
 
 exports[`EuiFieldNumber props value value is number 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   isloading="false"
 >
diff --git a/src/components/form/field_number/field_number.js b/src/components/form/field_number/field_number.js
index 0eb246fb9de..a75471e455a 100644
--- a/src/components/form/field_number/field_number.js
+++ b/src/components/form/field_number/field_number.js
@@ -22,11 +22,13 @@ export const EuiFieldNumber = ({
   isInvalid,
   fullWidth,
   isLoading,
+  compressed,
   ...rest
 }) => {
   const classes = classNames('euiFieldNumber', className, {
     'euiFieldNumber--withIcon': icon,
     'euiFieldNumber--fullWidth': fullWidth,
+    'euiFieldNumber--compressed': compressed,
     'euiFieldNumber-isLoading': isLoading,
   });
 
@@ -35,6 +37,7 @@ export const EuiFieldNumber = ({
       icon={icon}
       fullWidth={fullWidth}
       isLoading={isLoading}
+      compressed={compressed}
     >
       <EuiValidatableControl isInvalid={isInvalid}>
         <input
@@ -82,10 +85,15 @@ EuiFieldNumber.propTypes = {
   isInvalid: PropTypes.bool,
   fullWidth: PropTypes.bool,
   isLoading: PropTypes.bool,
+  /**
+   * when `true` creates a shorter height input
+   */
+  compressed: PropTypes.bool,
 };
 
 EuiFieldNumber.defaultProps = {
   value: undefined,
   fullWidth: false,
   isLoading: false,
+  compressed: false,
 };
diff --git a/src/components/form/field_password/__snapshots__/field_password.test.js.snap b/src/components/form/field_password/__snapshots__/field_password.test.js.snap
index c5b96967abe..76d2b0a5125 100644
--- a/src/components/form/field_password/__snapshots__/field_password.test.js.snap
+++ b/src/components/form/field_password/__snapshots__/field_password.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`EuiFieldPassword is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   icon="lock"
   isloading="false"
@@ -23,6 +24,7 @@ exports[`EuiFieldPassword is rendered 1`] = `
 
 exports[`EuiFieldPassword props fullWidth is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="true"
   icon="lock"
   isloading="false"
@@ -38,6 +40,7 @@ exports[`EuiFieldPassword props fullWidth is rendered 1`] = `
 
 exports[`EuiFieldPassword props isInvalid is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   icon="lock"
   isloading="false"
@@ -55,6 +58,7 @@ exports[`EuiFieldPassword props isInvalid is rendered 1`] = `
 
 exports[`EuiFieldPassword props isLoading is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   icon="lock"
   isloading="true"
diff --git a/src/components/form/field_password/field_password.js b/src/components/form/field_password/field_password.js
index 537a741dd48..66f46a634a5 100644
--- a/src/components/form/field_password/field_password.js
+++ b/src/components/form/field_password/field_password.js
@@ -19,12 +19,14 @@ export const EuiFieldPassword = ({
   isInvalid,
   fullWidth,
   isLoading,
+  compressed,
   ...rest
 }) => {
   const classes = classNames(
     'euiFieldPassword',
     {
       'euiFieldPassword--fullWidth': fullWidth,
+      'euiFieldPassword--compressed': compressed,
       'euiFieldPassword-isLoading': isLoading,
     },
     className
@@ -35,6 +37,7 @@ export const EuiFieldPassword = ({
       icon="lock"
       fullWidth={fullWidth}
       isLoading={isLoading}
+      compressed={compressed}
     >
       <EuiValidatableControl isInvalid={isInvalid}>
         <input
@@ -59,10 +62,15 @@ EuiFieldPassword.propTypes = {
   isInvalid: PropTypes.bool,
   fullWidth: PropTypes.bool,
   isLoading: PropTypes.bool,
+  /**
+   * when `true` creates a shorter height input
+   */
+  compressed: PropTypes.bool,
 };
 
 EuiFieldPassword.defaultProps = {
   value: undefined,
   fullWidth: false,
   isLoading: false,
+  compressed: false,
 };
diff --git a/src/components/form/field_search/__snapshots__/field_search.test.js.snap b/src/components/form/field_search/__snapshots__/field_search.test.js.snap
index 33abb3ed725..f674fd59e13 100644
--- a/src/components/form/field_search/__snapshots__/field_search.test.js.snap
+++ b/src/components/form/field_search/__snapshots__/field_search.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`EuiFieldSearch is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   icon="search"
   isloading="false"
@@ -23,6 +24,7 @@ exports[`EuiFieldSearch is rendered 1`] = `
 
 exports[`EuiFieldSearch props fullWidth is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="true"
   icon="search"
   isloading="false"
@@ -38,6 +40,7 @@ exports[`EuiFieldSearch props fullWidth is rendered 1`] = `
 
 exports[`EuiFieldSearch props isInvalid is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   icon="search"
   isloading="false"
@@ -55,6 +58,7 @@ exports[`EuiFieldSearch props isInvalid is rendered 1`] = `
 
 exports[`EuiFieldSearch props isLoading is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   icon="search"
   isloading="true"
diff --git a/src/components/form/field_search/field_search.js b/src/components/form/field_search/field_search.js
index 59c8bd3f15f..d3748eb1293 100644
--- a/src/components/form/field_search/field_search.js
+++ b/src/components/form/field_search/field_search.js
@@ -27,13 +27,18 @@ const propTypes = {
    * when `true` the search will be executed (that is, the `onSearch` will be called) as the
    * user types.
    */
-  incremental: PropTypes.bool
+  incremental: PropTypes.bool,
+  /**
+   * when `true` creates a shorter height input
+   */
+  compressed: PropTypes.bool,
 };
 
 const defaultProps = {
   fullWidth: false,
   isLoading: false,
-  incremental: false
+  incremental: false,
+  compressed: false,
 };
 
 export class EuiFieldSearch extends Component {
@@ -86,6 +91,7 @@ export class EuiFieldSearch extends Component {
       isLoading,
       inputRef,
       incremental,
+      compressed,
       onSearch,
       ...rest } = this.props;
 
@@ -93,6 +99,7 @@ export class EuiFieldSearch extends Component {
       'euiFieldSearch',
       {
         'euiFieldSearch--fullWidth': fullWidth,
+        'euiFieldSearch--compressed': compressed,
         'euiFieldSearch-isLoading': isLoading,
       },
       className
@@ -111,6 +118,7 @@ export class EuiFieldSearch extends Component {
         icon="search"
         fullWidth={fullWidth}
         isLoading={isLoading}
+        compressed={compressed}
       >
         <EuiValidatableControl isInvalid={isInvalid}>
           <input
diff --git a/src/components/form/field_text/__snapshots__/field_text.test.js.snap b/src/components/form/field_text/__snapshots__/field_text.test.js.snap
index ae3364c5838..db915096025 100644
--- a/src/components/form/field_text/__snapshots__/field_text.test.js.snap
+++ b/src/components/form/field_text/__snapshots__/field_text.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`EuiFieldText is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   icon="foo"
   isloading="false"
@@ -23,6 +24,7 @@ exports[`EuiFieldText is rendered 1`] = `
 
 exports[`EuiFieldText props fullWidth is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="true"
   isloading="false"
 >
@@ -37,6 +39,7 @@ exports[`EuiFieldText props fullWidth is rendered 1`] = `
 
 exports[`EuiFieldText props isInvalid is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   isloading="false"
 >
@@ -53,6 +56,7 @@ exports[`EuiFieldText props isInvalid is rendered 1`] = `
 
 exports[`EuiFieldText props isLoading is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   isloading="true"
 >
diff --git a/src/components/form/field_text/field_text.js b/src/components/form/field_text/field_text.js
index e4436716290..7fb91cd72f9 100644
--- a/src/components/form/field_text/field_text.js
+++ b/src/components/form/field_text/field_text.js
@@ -21,11 +21,13 @@ export const EuiFieldText = ({
   inputRef,
   fullWidth,
   isLoading,
+  compressed,
   ...rest
 }) => {
   const classes = classNames('euiFieldText', className, {
     'euiFieldText--withIcon': icon,
     'euiFieldText--fullWidth': fullWidth,
+    'euiFieldText--compressed': compressed,
     'euiFieldText-isLoading': isLoading,
   });
 
@@ -34,6 +36,7 @@ export const EuiFieldText = ({
       icon={icon}
       fullWidth={fullWidth}
       isLoading={isLoading}
+      compressed={compressed}
     >
       <EuiValidatableControl
         isInvalid={isInvalid}
@@ -63,10 +66,15 @@ EuiFieldText.propTypes = {
   inputRef: PropTypes.func,
   fullWidth: PropTypes.bool,
   isLoading: PropTypes.bool,
+  /**
+   * when `true` creates a shorter height input
+   */
+  compressed: PropTypes.bool,
 };
 
 EuiFieldText.defaultProps = {
   value: undefined,
   fullWidth: false,
   isLoading: false,
+  compressed: false,
 };
diff --git a/src/components/form/file_picker/_file_picker.scss b/src/components/form/file_picker/_file_picker.scss
index c569743f609..2369c1098c4 100644
--- a/src/components/form/file_picker/_file_picker.scss
+++ b/src/components/form/file_picker/_file_picker.scss
@@ -1,9 +1,18 @@
+@import '../form_control_layout/mixins';
+
 .euiFilePicker {
   .euiFilePicker__wrap {
     @include euiFormControlSize;
 
     position: relative;
     display: inline-block;
+
+    @at-root {
+      .euiFilePicker--compressed#{&} {
+        width: auto;
+
+      }
+    }
   }
 
   // The input is an invisiable dropzone / button
@@ -31,6 +40,15 @@
   .euiFilePicker__icon {
     margin-bottom: $euiSize;
     transition: transform $euiAnimSpeedFast $euiAnimSlightResistance;
+
+    @at-root {
+      .euiFilePicker--compressed#{&} {
+        position: absolute;
+        top: $euiSizeM/2;
+        left: $euiSizeM;
+        transform: scale(1) !important; // don't scale icon on hover
+      }
+    }
   }
 
   /**
@@ -46,7 +64,7 @@
     display: block;
     background: $euiColorLightestShade;
     padding: $euiSizeL;
-    border-radius: $euiBorderRadius / 2;
+    //border-radius: $euiBorderRadius / 2;
     background: $euiFormBackgroundColor;
     text-align: center;
     transition:
@@ -54,6 +72,13 @@
       background-color $euiAnimSpeedSlow ease-in,
       border-color $euiAnimSpeedSlow ease-in,
       color $euiAnimSpeedSlow ease-in;
+
+    @at-root {
+      .euiFilePicker--compressed#{&} {
+        padding: $euiSizeXS $euiSizeXXL; // ensure space for import icon and clear button
+        text-align: left;
+      }
+    }
   }
 
   .euiFilePicker__promptText {
@@ -62,6 +87,13 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    @at-root {
+      // make compressed prompt look like placeholder
+      .euiFilePicker--compressed#{&} {
+        color: $euiColorMediumShade;
+      }
+    }
   }
 
   /**
@@ -69,6 +101,15 @@
    */
   .euiFilePicker__clearButton {
     pointer-events: auto; /* 1 */
+
+    @at-root {
+      .euiFilePicker--compressed#{&} {
+        position: absolute;
+        top: $euiSizeM/2;
+        right: $euiSizeM;
+        @include euiFormControlLayout__clear('.euiFilePicker__clearIcon');
+      }
+    }
   }
 
   // Hover and focus
@@ -91,12 +132,16 @@
     @include euiFormControlDisabledStyle;
   }
 
-
-  // When the filepicker has files in it
-  &.euiFilePicker-hasFiles .euiFilePicker__promptText {
+  // When the filepicker has files in it, but not in compressed mode
+  &:not(.euiFilePicker--compressed).euiFilePicker-hasFiles .euiFilePicker__promptText {
     font-weight: $euiFontWeightBold;
   }
 
+  // When the filepicker has files in it, AND in compressed mode
+  &.euiFilePicker--compressed.euiFilePicker-hasFiles .euiFilePicker__promptText {
+    color: $euiTextColor;
+  }
+
   // When you are dragging files over the dropzone
   &.euiFilePicker__showDrop .euiFilePicker__prompt {
     @include euiFormControlFocusStyle;
diff --git a/src/components/form/file_picker/file_picker.js b/src/components/form/file_picker/file_picker.js
index dca5187c486..da4d4f73212 100644
--- a/src/components/form/file_picker/file_picker.js
+++ b/src/components/form/file_picker/file_picker.js
@@ -20,10 +20,15 @@ export class EuiFilePicker extends Component {
      * Use as a callback to access the HTML FileList API
      */
     onChange: PropTypes.func,
+    /**
+     * Reduces the size to a typical (compressed) input
+     */
+    compressed: PropTypes.bool,
   };
 
   static defaultProps = {
     initialPromptText: 'Select or drag and drop a file',
+    compressed: false,
   };
 
   constructor(props) {
@@ -74,6 +79,7 @@ export class EuiFilePicker extends Component {
       initialPromptText,
       className,
       disabled,
+      compressed,
       onChange, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
@@ -82,6 +88,7 @@ export class EuiFilePicker extends Component {
       'euiFilePicker',
       {
         'euiFilePicker__showDrop': this.state.isHoveringDrop,
+        'euiFilePicker--compressed': compressed,
         'euiFilePicker-hasFiles': this.state.promptText !== initialPromptText,
       },
       className
@@ -89,16 +96,31 @@ export class EuiFilePicker extends Component {
 
     let clearButton;
     if (this.state.promptText !== initialPromptText) {
-      clearButton = (
-        <EuiButtonEmpty
-          aria-label="Clear selected files"
-          className="euiFilePicker__clearButton"
-          size="xs"
-          onClick={this.removeFiles}
-        >
-          Remove
-        </EuiButtonEmpty>
-      );
+      if (compressed) {
+        clearButton = (
+          <button
+            aria-label="Clear selected files"
+            className="euiFilePicker__clearButton"
+            onClick={this.removeFiles}
+          >
+            <EuiIcon
+              className="euiFilePicker__clearIcon"
+              type="cross"
+            />
+          </button>
+        )
+      } else {
+        clearButton = (
+          <EuiButtonEmpty
+            aria-label="Clear selected files"
+            className="euiFilePicker__clearButton"
+            size="xs"
+            onClick={this.removeFiles}
+          >
+            Remove
+          </EuiButtonEmpty>
+        );
+      }
     } else {
       clearButton = null;
     }
@@ -125,7 +147,7 @@ export class EuiFilePicker extends Component {
             <EuiIcon
               className="euiFilePicker__icon"
               type="importAction"
-              size="l"
+              size={compressed ? 'm' : 'l'}
               aria-hidden="true"
             />
             <div
diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss
index c40c702fd4c..4ba1d245673 100644
--- a/src/components/form/form_control_layout/_form_control_layout.scss
+++ b/src/components/form/form_control_layout/_form_control_layout.scss
@@ -22,24 +22,11 @@
   }
 
   .euiFormControlLayout__clear {
-    $clearSize: $euiSize;
-
     position: absolute;
     top: $euiSizeM;
     right: $euiSizeM;
 
-    @include size($clearSize);
-    background-color: transparentize($euiColorMediumShade, .5);
-    border-radius: $clearSize;
-    line-height: $clearSize;
-
-    .euiFormControlLayout__clearIcon {
-      @include size($euiSizeS);
-      fill: $euiColorEmptyShade;
-      stroke: $euiColorEmptyShade;
-      stroke-width: 3px; // increase thickness of icon at such a small size
-      margin-top: -3px;
-    }
+    @include euiFormControlLayout__clear('.euiFormControlLayout__clearIcon');
 
     // Loading spinner needs adjustment if clear also exists
     ~ .euiFormControlLayout__loading {
@@ -72,3 +59,14 @@
     right: $euiSizeM;
   }
 }
+
+.euiFormControlLayout--compressed {
+  width: auto;
+
+  .euiFormControlLayout__icon,
+  .euiFormControlLayout__loading {
+    // match to compressed top padding
+    top: $euiSizeM/2;
+    //@include size(12px);
+  }
+}
diff --git a/src/components/form/form_control_layout/_index.scss b/src/components/form/form_control_layout/_index.scss
index 563ea1b4af1..35ed9059c7b 100644
--- a/src/components/form/form_control_layout/_index.scss
+++ b/src/components/form/form_control_layout/_index.scss
@@ -1 +1,2 @@
+@import 'mixins';
 @import 'form_control_layout';
diff --git a/src/components/form/form_control_layout/_mixins.scss b/src/components/form/form_control_layout/_mixins.scss
new file mode 100644
index 00000000000..05865c366fd
--- /dev/null
+++ b/src/components/form/form_control_layout/_mixins.scss
@@ -0,0 +1,16 @@
+@mixin euiFormControlLayout__clear($iconClass) {
+  $clearSize: $euiSize;
+
+  @include size($clearSize);
+  background-color: transparentize($euiColorMediumShade, .5);
+  border-radius: $clearSize;
+  line-height: $clearSize;
+
+  #{$iconClass} {
+    @include size($euiSizeS);
+    fill: $euiColorEmptyShade;
+    stroke: $euiColorEmptyShade;
+    stroke-width: 3px; // increase thickness of icon at such a small size
+    margin-top: -3px;
+  }
+}
diff --git a/src/components/form/form_control_layout/form_control_layout.js b/src/components/form/form_control_layout/form_control_layout.js
index 4e49109ba5d..88fef6766df 100644
--- a/src/components/form/form_control_layout/form_control_layout.js
+++ b/src/components/form/form_control_layout/form_control_layout.js
@@ -12,12 +12,23 @@ const iconSideToClassNameMap = {
 
 export const ICON_SIDES = Object.keys(iconSideToClassNameMap);
 
-export const EuiFormControlLayout = ({ children, icon, fullWidth, onClear, iconSide, isLoading, onIconClick, className }) => {
+export const EuiFormControlLayout = ({
+  children,
+  icon,
+  fullWidth,
+  onClear,
+  iconSide,
+  isLoading,
+  onIconClick,
+  compressed,
+  className
+}) => {
 
   const classes = classNames(
     'euiFormControlLayout',
     {
       'euiFormControlLayout--fullWidth': fullWidth,
+      'euiFormControlLayout--compressed': compressed,
     },
     className
   );
@@ -95,9 +106,11 @@ EuiFormControlLayout.propTypes = {
   onClear: PropTypes.func,
   onIconClick: PropTypes.func,
   className: PropTypes.string,
+  compressed: PropTypes.bool,
 };
 
 EuiFormControlLayout.defaultProps = {
   iconSide: 'left',
   isLoading: false,
+  compressed: false,
 };
diff --git a/src/components/form/radio/_radio.scss b/src/components/form/radio/_radio.scss
index a6f32fbc413..5531a5ff827 100644
--- a/src/components/form/radio/_radio.scss
+++ b/src/components/form/radio/_radio.scss
@@ -12,13 +12,19 @@
       position: relative;
       z-index: 2;
       cursor: pointer;
+
+      @at-root {
+        .euiRadio--compressed#{&} {
+          font-size: $euiFontSizeXS;
+        }
+      }
     }
 
     + .euiRadio__circle {
       display: inline-block;
       position: absolute;
       left: 0;
-      top: ($euiSizeL - $euiRadioSize)/2;
+      top: ($euiSizeL - $euiRadioSize)/2 - 1px;
       @include euiCustomControl($type: 'round', $size: $euiRadioSize);
     }
 
diff --git a/src/components/form/radio/_radio_group.scss b/src/components/form/radio/_radio_group.scss
index 304608012b2..8630999fea0 100644
--- a/src/components/form/radio/_radio_group.scss
+++ b/src/components/form/radio/_radio_group.scss
@@ -1,3 +1,7 @@
 .euiRadioGroup__item + .euiRadioGroup__item {
   margin-top: $euiSizeS;
+
+  &.euiRadio--compressed {
+    margin-top: 0;
+  }
 }
diff --git a/src/components/form/radio/radio.js b/src/components/form/radio/radio.js
index a6ec70fa3fd..f76f603a990 100644
--- a/src/components/form/radio/radio.js
+++ b/src/components/form/radio/radio.js
@@ -11,12 +11,14 @@ export const EuiRadio = ({
   value,
   onChange,
   disabled,
+  compressed,
   ...rest
 }) => {
   const classes = classNames(
     'euiRadio',
     {
-      'euiRadio--noLabel': !label
+      'euiRadio--noLabel': !label,
+      'euiRadio--compressed': compressed,
     },
     className
   );
@@ -65,9 +67,15 @@ EuiRadio.propTypes = {
   value: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
+  /**
+   * when `true` creates a shorter height radio row
+   * and decreases font size
+   */
+  compressed: PropTypes.bool,
 };
 
 EuiRadio.defaultProps = {
   checked: false,
   disabled: false,
+  compressed: false,
 };
diff --git a/src/components/form/radio/radio_group.js b/src/components/form/radio/radio_group.js
index f4be843b6b0..060bfeefc02 100644
--- a/src/components/form/radio/radio_group.js
+++ b/src/components/form/radio/radio_group.js
@@ -10,6 +10,7 @@ export const EuiRadioGroup = ({
   name,
   className,
   disabled,
+  compressed,
   ...rest
 }) => (
   <div className={className} {...rest}>
@@ -25,6 +26,7 @@ export const EuiRadioGroup = ({
           value={option.value}
           disabled={disabled}
           onChange={onChange.bind(null, option.id, option.value)}
+          compressed={compressed}
         />
       );
     })}
@@ -41,8 +43,14 @@ EuiRadioGroup.propTypes = {
   ).isRequired,
   idSelected: PropTypes.string,
   onChange: PropTypes.func.isRequired,
+  /**
+   * Tightens up the spacing between radio rows and sends down the
+   * compressed prop to the radio itself
+   */
+  compressed: PropTypes.bool,
 };
 
 EuiRadioGroup.defaultProps = {
   options: [],
+  compressed: false,
 };
diff --git a/src/components/search_bar/__snapshots__/search_box.test.js.snap b/src/components/search_bar/__snapshots__/search_box.test.js.snap
index 14b495e799c..150ff9a6f54 100644
--- a/src/components/search_bar/__snapshots__/search_box.test.js.snap
+++ b/src/components/search_bar/__snapshots__/search_box.test.js.snap
@@ -4,6 +4,7 @@ exports[`EuiSearchBox render - custom placeholder and incremental 1`] = `
 <EuiFieldSearch
   aria-label="aria-label"
   className="testClass1 testClass2"
+  compressed={false}
   data-test-subj="test subject string"
   defaultValue=""
   fullWidth={true}
@@ -19,6 +20,7 @@ exports[`EuiSearchBox render - no config 1`] = `
 <EuiFieldSearch
   aria-label="aria-label"
   className="testClass1 testClass2"
+  compressed={false}
   data-test-subj="test subject string"
   defaultValue=""
   fullWidth={true}
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
index c33ebfc3c2b..fc5590a9cc7 100644
--- a/src/global_styling/variables/_typography.scss
+++ b/src/global_styling/variables/_typography.scss
@@ -35,12 +35,12 @@ $euiTextScale:      2.25, 1.75, 1.25, 1.125, 1, .875, .75;
 
 $euiFontSize:       $euiSize !default; // 5th position in scale
 
-$euiFontSizeXS:     $euiFontSize * nth($euiTextScale, 7) !default;
-$euiFontSizeS:      $euiFontSize * nth($euiTextScale, 6) !default;
-$euiFontSizeM:      $euiFontSize * nth($euiTextScale, 4) !default;
-$euiFontSizeL:      $euiFontSize * nth($euiTextScale, 3) !default;
-$euiFontSizeXL:     $euiFontSize * nth($euiTextScale, 2) !default;
-$euiFontSizeXXL:    $euiFontSize * nth($euiTextScale, 1) !default;
+$euiFontSizeXS:     $euiFontSize * nth($euiTextScale, 7) !default; // 12px
+$euiFontSizeS:      $euiFontSize * nth($euiTextScale, 6) !default; // 14px
+$euiFontSizeM:      $euiFontSize * nth($euiTextScale, 4) !default; // 18px
+$euiFontSizeL:      $euiFontSize * nth($euiTextScale, 3) !default; // 20px
+$euiFontSizeXL:     $euiFontSize * nth($euiTextScale, 2) !default; // 28px
+$euiFontSizeXXL:    $euiFontSize * nth($euiTextScale, 1) !default; // 36px
 
 // Line height
 

From b0d4672707b9296de7504babdaf946b4efbea46f Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 4 May 2018 19:04:22 -0400
Subject: [PATCH 2/9] Fixing `select`

---
 src/components/form/radio/radio_group.js                  | 1 -
 .../form/select/__snapshots__/select.test.js.snap         | 7 +++++++
 src/components/form/select/select.js                      | 8 ++++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/form/radio/radio_group.js b/src/components/form/radio/radio_group.js
index 060bfeefc02..e3bbecba490 100644
--- a/src/components/form/radio/radio_group.js
+++ b/src/components/form/radio/radio_group.js
@@ -52,5 +52,4 @@ EuiRadioGroup.propTypes = {
 
 EuiRadioGroup.defaultProps = {
   options: [],
-  compressed: false,
 };
diff --git a/src/components/form/select/__snapshots__/select.test.js.snap b/src/components/form/select/__snapshots__/select.test.js.snap
index ffb5884338f..3f6489edeee 100644
--- a/src/components/form/select/__snapshots__/select.test.js.snap
+++ b/src/components/form/select/__snapshots__/select.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`EuiSelect is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   icon="arrowDown"
   iconside="right"
@@ -21,6 +22,7 @@ exports[`EuiSelect is rendered 1`] = `
 
 exports[`EuiSelect props disabled options are rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   icon="arrowDown"
   iconside="right"
@@ -48,6 +50,7 @@ exports[`EuiSelect props disabled options are rendered 1`] = `
 
 exports[`EuiSelect props fullWidth is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="true"
   icon="arrowDown"
   iconside="right"
@@ -63,6 +66,7 @@ exports[`EuiSelect props fullWidth is rendered 1`] = `
 
 exports[`EuiSelect props isInvalid is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   icon="arrowDown"
   iconside="right"
@@ -80,6 +84,7 @@ exports[`EuiSelect props isInvalid is rendered 1`] = `
 
 exports[`EuiSelect props isLoading is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   icon="arrowDown"
   iconside="right"
@@ -95,6 +100,7 @@ exports[`EuiSelect props isLoading is rendered 1`] = `
 
 exports[`EuiSelect props options are rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   icon="arrowDown"
   iconside="right"
@@ -121,6 +127,7 @@ exports[`EuiSelect props options are rendered 1`] = `
 
 exports[`EuiSelect props value option is rendered 1`] = `
 <eui-form-control-layout
+  compressed="false"
   fullwidth="false"
   icon="arrowDown"
   iconside="right"
diff --git a/src/components/form/select/select.js b/src/components/form/select/select.js
index 1a2bc1b097d..e0c9393c45e 100644
--- a/src/components/form/select/select.js
+++ b/src/components/form/select/select.js
@@ -21,6 +21,7 @@ export const EuiSelect = ({
   isLoading,
   hasNoInitialSelection,
   defaultValue,
+  compressed,
   value,
   ...rest
 }) => {
@@ -28,6 +29,7 @@ export const EuiSelect = ({
     'euiSelect',
     {
       'euiSelect--fullWidth': fullWidth,
+      'euiSelect--compressed': compressed,
       'euiSelect-isLoading': isLoading,
     },
     className
@@ -53,6 +55,7 @@ export const EuiSelect = ({
       iconSide="right"
       fullWidth={fullWidth}
       isLoading={isLoading}
+      compressed={compressed}
     >
       <EuiValidatableControl isInvalid={isInvalid}>
         <select
@@ -93,6 +96,10 @@ EuiSelect.propTypes = {
    */
   hasNoInitialSelection: PropTypes.bool,
   inputRef: PropTypes.func,
+  /**
+   * when `true` creates a shorter height input
+   */
+  compressed: PropTypes.bool,
 };
 
 EuiSelect.defaultProps = {
@@ -100,4 +107,5 @@ EuiSelect.defaultProps = {
   fullWidth: false,
   isLoading: false,
   hasNoInitialSelection: false,
+  compressed: false,
 };

From 1acc601a8cc9ebbfd66eeebe577b9940931e9fae Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 7 May 2018 15:12:58 -0400
Subject: [PATCH 3/9] Shifting some SASS variables around

---
 src/components/form/_mixins.scss              |  7 +--
 src/components/form/_variables.scss           | 13 +++-
 src/components/form/checkbox/_index.scss      |  3 +-
 .../_form_control_layout.scss                 | 59 ++++++++++++-------
 src/components/form/radio/_index.scss         |  3 +-
 src/components/form/switch/_index.scss        |  6 +-
 6 files changed, 55 insertions(+), 36 deletions(-)

diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss
index a831daae0b6..da36d3251be 100644
--- a/src/components/form/_mixins.scss
+++ b/src/components/form/_mixins.scss
@@ -75,7 +75,7 @@
   border: none;
   font-size: $euiFontSizeS;
   font-family: $euiFontFamily;
-  padding: $euiSizeM;
+  padding: $euiFormControlPadding;
   color: $euiTextColor;
   background: $euiFormBackgroundColor;
   transition: box-shadow $euiAnimSpeedNormal ease-in, background $euiAnimSpeedNormal ease-in;
@@ -86,9 +86,8 @@
   }
 
   &--compressed {
-    // keep the same side padding, just reduce the height
-    padding-top: $euiSizeM/2;
-    padding-bottom: $euiSizeM/2;
+    padding-top: $euiFormControlPadding--compressed;
+    padding-bottom: $euiFormControlPadding--compressed;
   }
 
   &:invalid { /* 1 */
diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss
index 5cba5927425..982f9f9c0d6 100644
--- a/src/components/form/_variables.scss
+++ b/src/components/form/_variables.scss
@@ -1,3 +1,14 @@
 $euiFormMaxWidth: 400px;
 $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%);
-$euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%); // exact 508c foreground for $euiColorLightShade
\ No newline at end of file
+$euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%); // exact 508c foreground for $euiColorLightShade
+
+$euiRadioSize: $euiSize;
+$euiCheckBoxSize: $euiSize;
+
+$euiSwitchHeight: $euiSize * 1.25;
+$euiSwitchWidth: ($euiSize * 2.5) + $euiSizeXS;
+$euiSwitchThumbSize: $euiSwitchHeight;
+$euiSwitchIconHeight: $euiSize;
+
+$euiFormControlPadding: $euiSizeM;
+$euiFormControlPadding--compressed: $euiFormControlPadding/2 + 1px;
diff --git a/src/components/form/checkbox/_index.scss b/src/components/form/checkbox/_index.scss
index feca7566143..fabdbeba957 100644
--- a/src/components/form/checkbox/_index.scss
+++ b/src/components/form/checkbox/_index.scss
@@ -1,4 +1,3 @@
-$euiCheckBoxSize: $euiSize;
-
+@import '../variables';
 @import 'checkbox';
 @import 'checkbox_group';
diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss
index 4ba1d245673..b8a3004d94c 100644
--- a/src/components/form/form_control_layout/_form_control_layout.scss
+++ b/src/components/form/form_control_layout/_form_control_layout.scss
@@ -1,3 +1,5 @@
+@import '../variables';
+
 .euiFormControlLayout {
   @include euiFormControlSize;
 
@@ -11,62 +13,75 @@
 
   .euiFormControlLayout__icon {
     position: absolute;
-    top: $euiSizeM;
-    left: $euiSizeM;
+    top: $euiFormControlPadding;
+    left: $euiFormControlPadding;
     pointer-events: none;
+
+    @at-root {
+      .euiFormControlLayout--compressed#{&} {
+        top: $euiFormControlPadding--compressed;
+      }
+    }
   }
 
   .euiFormControlLayout__iconButton {
     pointer-events: all;
-    top: $euiSizeM - 1px;
+    top: $euiFormControlPadding - 1px;
+
+    @at-root {
+      .euiFormControlLayout--compressed#{&} {
+        top: $euiFormControlPadding--compressed - 1px;
+      }
+    }
   }
 
   .euiFormControlLayout__clear {
     position: absolute;
-    top: $euiSizeM;
-    right: $euiSizeM;
+    top: $euiFormControlPadding;
+    right: $euiFormControlPadding;
 
     @include euiFormControlLayout__clear('.euiFormControlLayout__clearIcon');
 
+    @at-root {
+      .euiFormControlLayout--compressed#{&} {
+        top: $euiFormControlPadding--compressed + 2px;
+      }
+    }
+
     // Loading spinner needs adjustment if clear also exists
     ~ .euiFormControlLayout__loading {
-      right: $euiSizeM*3;
+      right: $euiFormControlPadding*3;
     }
   }
 
   .euiFormControlLayout__icon--right {
     left: auto;
-    right: $euiSizeM;
+    right: $euiFormControlPadding;
 
     // Loading spinner needs adjustment if icon also exists like selects.
     ~ .euiFormControlLayout__loading {
-      right: $euiSizeM*3;
+      right: $euiFormControlPadding*3;
     }
 
     // Same with clear buttons
     ~ .euiFormControlLayout__clear {
-      right: $euiSizeM*3;
+      right: $euiFormControlPadding*3;
 
       ~ .euiFormControlLayout__loading {
-        right: $euiSizeM*5;
+        right: $euiFormControlPadding*5;
       }
     }
   }
 
   .euiFormControlLayout__loading {
     position: absolute;
-    top: $euiSizeM;
-    right: $euiSizeM;
-  }
-}
+    top: $euiFormControlPadding;
+    right: $euiFormControlPadding;
 
-.euiFormControlLayout--compressed {
-  width: auto;
-
-  .euiFormControlLayout__icon,
-  .euiFormControlLayout__loading {
-    // match to compressed top padding
-    top: $euiSizeM/2;
-    //@include size(12px);
+    @at-root {
+      .euiFormControlLayout--compressed#{&} {
+        top: $euiFormControlPadding--compressed + 2px;
+      }
+    }
   }
 }
diff --git a/src/components/form/radio/_index.scss b/src/components/form/radio/_index.scss
index 2c1d4f8a232..451c24d2413 100644
--- a/src/components/form/radio/_index.scss
+++ b/src/components/form/radio/_index.scss
@@ -1,4 +1,3 @@
-$euiRadioSize: $euiSize;
-
+@import '../variables';
 @import 'radio';
 @import 'radio_group';
diff --git a/src/components/form/switch/_index.scss b/src/components/form/switch/_index.scss
index 60984f97a25..1eeda2c8b2a 100644
--- a/src/components/form/switch/_index.scss
+++ b/src/components/form/switch/_index.scss
@@ -1,6 +1,2 @@
-$euiSwitchHeight: $euiSize * 1.25;
-$euiSwitchWidth: ($euiSize * 2.5) + $euiSizeXS;
-$euiSwitchThumbSize: $euiSwitchHeight;
-$euiSwitchIconHeight: $euiSize;
-
+@import '../variables';
 @import 'switch';

From 87fcdb23f701a6341a748aa4ab10238f83b11a26 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 7 May 2018 15:14:12 -0400
Subject: [PATCH 4/9] =?UTF-8?q?Don=E2=80=99t=20resize=20font=20for=20radio?=
 =?UTF-8?q?s=20and=20checkboxes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/form/checkbox/_checkbox.scss | 6 ------
 src/components/form/checkbox/checkbox.js    | 1 -
 src/components/form/radio/_radio.scss       | 6 ------
 src/components/form/radio/radio.js          | 1 -
 4 files changed, 14 deletions(-)

diff --git a/src/components/form/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss
index 7679a024d57..d687b323eb6 100644
--- a/src/components/form/checkbox/_checkbox.scss
+++ b/src/components/form/checkbox/_checkbox.scss
@@ -12,12 +12,6 @@
       position: relative;
       z-index: 2;
       cursor: pointer;
-
-      @at-root {
-        .euiCheckbox--compressed#{&} {
-          font-size: $euiFontSizeXS;
-        }
-      }
     }
 
     + .euiCheckbox__square {
diff --git a/src/components/form/checkbox/checkbox.js b/src/components/form/checkbox/checkbox.js
index 4d64efb494c..c838b04838a 100644
--- a/src/components/form/checkbox/checkbox.js
+++ b/src/components/form/checkbox/checkbox.js
@@ -73,7 +73,6 @@ EuiCheckbox.propTypes = {
   disabled: PropTypes.bool,
   /**
    * when `true` creates a shorter height checkbox row
-   * and decreases font size
    */
   compressed: PropTypes.bool,
 };
diff --git a/src/components/form/radio/_radio.scss b/src/components/form/radio/_radio.scss
index 5531a5ff827..cc802e482d1 100644
--- a/src/components/form/radio/_radio.scss
+++ b/src/components/form/radio/_radio.scss
@@ -12,12 +12,6 @@
       position: relative;
       z-index: 2;
       cursor: pointer;
-
-      @at-root {
-        .euiRadio--compressed#{&} {
-          font-size: $euiFontSizeXS;
-        }
-      }
     }
 
     + .euiRadio__circle {
diff --git a/src/components/form/radio/radio.js b/src/components/form/radio/radio.js
index f76f603a990..a4a7118dd2d 100644
--- a/src/components/form/radio/radio.js
+++ b/src/components/form/radio/radio.js
@@ -69,7 +69,6 @@ EuiRadio.propTypes = {
   disabled: PropTypes.bool,
   /**
    * when `true` creates a shorter height radio row
-   * and decreases font size
    */
   compressed: PropTypes.bool,
 };

From 279f1a5a3d24a672267680d3461b6640ef4cd216 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 7 May 2018 15:20:13 -0400
Subject: [PATCH 5/9] Add compressed to form row

- Also fixes #792: Moved bottom padding from help text to form row
---
 .../src/views/form_layouts/form_compressed.js | 151 ++++++++++++++++++
 .../form_layouts/form_layouts_example.js      |  78 ++++-----
 .../form_error_text/_form_error_text.scss     |   2 +-
 .../form/form_help_text/_form_help_text.scss  |   2 +-
 src/components/form/form_row/_form_row.scss   |  13 +-
 src/components/form/form_row/form_row.js      |   8 +
 6 files changed, 211 insertions(+), 43 deletions(-)
 create mode 100644 src-docs/src/views/form_layouts/form_compressed.js

diff --git a/src-docs/src/views/form_layouts/form_compressed.js b/src-docs/src/views/form_layouts/form_compressed.js
new file mode 100644
index 00000000000..bf5f0828f15
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/src-docs/src/views/form_layouts/form_layouts_example.js b/src-docs/src/views/form_layouts/form_layouts_example.js
index a9cc42f4351..c5f598dc8b9 100644
--- a/src-docs/src/views/form_layouts/form_layouts_example.js
+++ b/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: (
diff --git a/src/components/form/form_error_text/_form_error_text.scss b/src/components/form/form_error_text/_form_error_text.scss
index b796c63f8b8..a2722d6c59e 100644
--- a/src/components/form/form_error_text/_form_error_text.scss
+++ b/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;
 }
diff --git a/src/components/form/form_help_text/_form_help_text.scss b/src/components/form/form_help_text/_form_help_text.scss
index 7804a48716a..2bce1e4caad 100644
--- a/src/components/form/form_help_text/_form_help_text.scss
+++ b/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;
 }
diff --git a/src/components/form/form_row/_form_row.scss b/src/components/form/form_row/_form_row.scss
index 9eec13c659b..9d6d9e3c02b 100644
--- a/src/components/form/form_row/_form_row.scss
+++ b/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;
+    }
   }
 }
diff --git a/src/components/form/form_row/form_row.js b/src/components/form/form_row/form_row.js
index 74628988c19..17cfc271f6d 100644
--- a/src/components/form/form_row/form_row.js
+++ b/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 = {

From be969b76441ca3db9ed3644e71a29ef549cde6fd Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 7 May 2018 15:21:06 -0400
Subject: [PATCH 6/9] Only add switch lable to dom if it exists

---
 .../switch/__snapshots__/switch.test.js.snap  |  3 ---
 src/components/form/switch/switch.js          | 27 +++++++++++++------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/form/switch/__snapshots__/switch.test.js.snap b/src/components/form/switch/__snapshots__/switch.test.js.snap
index 9dfd55d5a9a..3056b8e47ec 100644
--- a/src/components/form/switch/__snapshots__/switch.test.js.snap
+++ b/src/components/form/switch/__snapshots__/switch.test.js.snap
@@ -58,8 +58,5 @@ exports[`EuiSwitch is rendered 1`] = `
       </svg>
     </span>
   </span>
-  <label
-    class="euiSwitch__label"
-  />
 </div>
 `;
diff --git a/src/components/form/switch/switch.js b/src/components/form/switch/switch.js
index b621cb234f0..fb67d9260e0 100644
--- a/src/components/form/switch/switch.js
+++ b/src/components/form/switch/switch.js
@@ -10,11 +10,18 @@ export const EuiSwitch = ({
   name,
   checked,
   disabled,
+  compressed,
   onChange,
   className,
   ...rest
 }) => {
-  const classes = classNames('euiSwitch', className);
+  const classes = classNames(
+    'euiSwitch',
+    {
+      'euiSwitch--compressed': compressed,
+    },
+    className
+  );
 
   return (
     <div className={classes}>
@@ -46,12 +53,15 @@ export const EuiSwitch = ({
         </span>
       </span>
 
-      <label
-        className="euiSwitch__label"
-        htmlFor={id}
-      >
-        {label}
-      </label>
+      { label &&
+        <label
+          className="euiSwitch__label"
+          htmlFor={id}
+        >
+          {label}
+        </label>
+      }
+
     </div>
   );
 };
@@ -62,5 +72,6 @@ EuiSwitch.propTypes = {
   label: PropTypes.node,
   checked: PropTypes.bool,
   onChange: PropTypes.func,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  compressed: PropTypes.bool
 };

From a9806df9ea65ee7f0c3aa8975ddfb7f34beb4f49 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 7 May 2018 15:21:26 -0400
Subject: [PATCH 7/9] Removing auto-width of file_picker

---
 src/components/form/file_picker/_file_picker.scss | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/form/file_picker/_file_picker.scss b/src/components/form/file_picker/_file_picker.scss
index 2369c1098c4..a4b2dac6508 100644
--- a/src/components/form/file_picker/_file_picker.scss
+++ b/src/components/form/file_picker/_file_picker.scss
@@ -6,13 +6,6 @@
 
     position: relative;
     display: inline-block;
-
-    @at-root {
-      .euiFilePicker--compressed#{&} {
-        width: auto;
-
-      }
-    }
   }
 
   // The input is an invisiable dropzone / button
@@ -54,6 +47,7 @@
   /**
    * 1. Don't block the user from dropping files onto the filepicker.
    * 2. Put prompt on top of input, so the clear button can intercept the click.
+   * 3. Ensure space for import icon and clear button (only if it has files)
    */
   .euiFilePicker__prompt {
     @include euiFormControlDefaultShadow;
@@ -75,7 +69,7 @@
 
     @at-root {
       .euiFilePicker--compressed#{&} {
-        padding: $euiSizeXS $euiSizeXXL; // ensure space for import icon and clear button
+        padding: $euiSizeXS $euiSize $euiSizeXS $euiSizeXXL; /* 3 */
         text-align: left;
       }
     }
@@ -132,6 +126,10 @@
     @include euiFormControlDisabledStyle;
   }
 
+  &.euiFilePicker-hasFiles.euiFilePicker--compressed .euiFilePicker__prompt {
+    padding-right: $euiSizeXXL; /* 3 */
+  }
+
   // When the filepicker has files in it, but not in compressed mode
   &:not(.euiFilePicker--compressed).euiFilePicker-hasFiles .euiFilePicker__promptText {
     font-weight: $euiFontWeightBold;

From cd7dc5b9e882e0b444f034b6043dd966d76b4c0c Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 7 May 2018 15:28:35 -0400
Subject: [PATCH 8/9] Added compressed to textarea

---
 src-docs/src/views/form_controls/text_area.js | 9 +++++++++
 src/components/form/text_area/text_area.js    | 3 +++
 2 files changed, 12 insertions(+)

diff --git a/src-docs/src/views/form_controls/text_area.js b/src-docs/src/views/form_controls/text_area.js
index 766fe64d100..5613b11e6c9 100644
--- a/src-docs/src/views/form_controls/text_area.js
+++ b/src-docs/src/views/form_controls/text_area.js
@@ -49,6 +49,15 @@ export default class extends Component {
           onChange={this.onChange}
           readOnly
         />
+
+        <EuiSpacer size="m" />
+
+        <EuiTextArea
+          placeholder="compressed"
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+        />
       </Fragment>
     );
   }
diff --git a/src/components/form/text_area/text_area.js b/src/components/form/text_area/text_area.js
index dd29899a91f..4a3946a6a09 100644
--- a/src/components/form/text_area/text_area.js
+++ b/src/components/form/text_area/text_area.js
@@ -16,12 +16,14 @@ export const EuiTextArea = ({
   className,
   isInvalid,
   fullWidth,
+  compressed,
   ...rest
 }) => {
   const classes = classNames(
     'euiTextArea',
     {
       'euiTextArea--fullWidth': fullWidth,
+      'euiTextArea--compressed': compressed,
     },
     className
   );
@@ -50,6 +52,7 @@ EuiTextArea.propTypes = {
   rows: PropTypes.number,
   isInvalid: PropTypes.bool,
   fullWidth: PropTypes.bool,
+  compressed: PropTypes.bool,
 };
 
 EuiTextArea.defaultProps = {

From cb841e59ecc6f66bfad5dab6abb340e1769dedfe Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 7 May 2018 15:34:15 -0400
Subject: [PATCH 9/9] changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dd7882019b7..e7b8f34e30a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added utility CSS classes for text and alignment concerns.  ([#774](https://github.com/elastic/eui/pull/774))
+- Added `compressed` versions of `EuiFormRow` and all form controls.  ([#800](https://github.com/elastic/eui/pull/800))
 
 **Bug fixes**