[Feature branch] Compressed form rows

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

@@ -161,12 +161,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/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/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/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/form_layouts/form_compressed.js

@@ -10,8 +10,11 @@ import {
   EuiFilePicker,
   EuiRange,
   EuiSelect,
+  EuiSpacer,
   EuiSwitch,
   EuiPanel,
+  EuiText,
+  EuiLink,
 } from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
@@ -57,9 +60,16 @@ export default class extends Component {
       ],
       radioIdSelected: `${idPrefix}5`,
       comboBoxSelectionOptions: [],
+      value: '20',
     };
   }
 
+  onRangeChange = e => {
+    this.setState({
+      value: e.target.value,
+    });
+  };
+
   onSwitchChange = () => {
     this.setState({
       isSwitchChecked: !this.state.isSwitchChecked,
@@ -92,40 +102,58 @@ export default class extends Component {
           <EuiFormRow
             label="Text field"
             helpText="I am some friendly help text."
-            compressed>
-            <EuiFieldText name="first" isLoading />
+            compressed="horizontal"
+            labelAppend={
+              <EuiText size="xs">
+                <EuiLink>Link to some help</EuiLink>
+              </EuiText>
+            }>
+            <EuiFieldText name="first" isLoading compressed />
           </EuiFormRow>
 
-          <EuiFormRow label="Select" compressed>
+          <EuiFormRow label="Select" compressed="horizontal">
             <EuiSelect
               options={[
                 { value: 'option_one', text: 'Option one' },
                 { value: 'option_two', text: 'Option two' },
                 { value: 'option_three', text: 'Option three' },
               ]}
+              compressed
             />
           </EuiFormRow>
 
-          <EuiFormRow label="File picker" compressed>
-            <EuiFilePicker />
+          <EuiFormRow label="File picker" compressed="horizontal">
+            <EuiFilePicker compressed display="default" />
           </EuiFormRow>
 
-          <EuiFormRow label="Combo box" compressed>
+          <EuiFormRow
+            label="Comboboxwithalonglabelname"
+            compressed="horizontal">
             <EuiComboBox
               options={[
                 { label: 'Option one' },
                 { label: 'Option two' },
                 { label: 'Option three' },
               ]}
+              compressed
               selectedOptions={this.state.comboBoxSelectionOptions}
               onChange={comboBoxSelectionOptions =>
                 this.setState({ comboBoxSelectionOptions })
               }
             />
           </EuiFormRow>
 
-          <EuiFormRow label="Range" compressed>
-            <EuiRange min={0} max={100} name="range" id="range" />
+          <EuiFormRow label="Range" compressed="horizontal">
+            <EuiRange
+              min={0}
+              max={100}
+              name="range"
+              id="range"
+              showInput
+              compressed
+              value={this.state.value}
+              onChange={this.onRangeChange}
+            />
           </EuiFormRow>
 
           <EuiFormRow
@@ -144,9 +172,12 @@ export default class extends Component {
               options={this.state.checkboxes}
               idToSelectedMap={this.state.checkboxIdToSelectedMap}
               onChange={this.onCheckboxChange}
+              compressed
             />
           </EuiFormRow>
 
+          <EuiSpacer size="s" />
+
           <EuiButton type="submit" size="s" fill>
             Save form
           </EuiButton>

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

@@ -108,7 +108,7 @@ export const FormLayoutsExample = {
 </EuiFormRow>`,
     },
     {
-      title: 'Compressed',
+      title: 'Compressed and horizontal',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -123,20 +123,30 @@ export const FormLayoutsExample = {
         <p>
           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.
+          <EuiCode>EuiFormRow</EuiCode>s but you will also need to pass it to
+          the form controls. For editor style controls, pass{' '}
+          <EuiCode>compressed=&quot;horizontal&quot;</EuiCode> to align the
+          labels and inputs horizontally.
         </p>
       ),
       props: {
         EuiFormRow,
       },
       demo: <FormCompressed />,
-      snippet: `<EuiFormRow
+      snippet: [
+        `<EuiFormRow
   label="Text field"
   compressed
 >
-  <EuiFieldText />
+  <EuiFieldText compressed />
+</EuiFormRow>`,
+        `<EuiFormRow
+  label="Text field"
+  compressed="horizontal"
+>
+  <EuiFieldText compressed />
 </EuiFormRow>`,
+      ],
     },
     {
       title: 'Described form groups',

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

@@ -10,6 +10,7 @@ import {
   EuiLink,
   EuiRange,
   EuiSelect,
+  EuiSpacer,
   EuiSwitch,
   EuiText,
 } from '../../../../src/components';
@@ -87,19 +88,24 @@ export default class extends Component {
   render() {
     return (
       <EuiForm>
-        <EuiFormRow label="Text field" helpText="I am some friendly help text.">
-          <EuiFieldText name="first" />
+        <EuiFormRow
+          compressed
+          label="Text field"
+          helpText="I am some friendly help text.">
+          <EuiFieldText name="first" compressed />
         </EuiFormRow>
 
         <EuiFormRow
           label="Select (with no initial selection)"
+          compressed
           labelAppend={
             <EuiText size="xs">
               <EuiLink>Link to some help</EuiLink>
             </EuiText>
           }>
           <EuiSelect
             hasNoInitialSelection
+            compressed
             options={[
               { value: 'option_one', text: 'Option one' },
               { value: 'option_two', text: 'Option two' },
@@ -108,33 +114,40 @@ export default class extends Component {
           />
         </EuiFormRow>
 
-        <EuiFormRow label="File picker">
-          <EuiFilePicker />
+        <EuiFormRow label="File picker" compressed>
+          <EuiFilePicker compressed />
         </EuiFormRow>
 
-        <EuiFormRow label="Range">
-          <EuiRange min={0} max={100} name="range" id="range" />
+        <EuiFormRow label="Range" compressed>
+          <EuiRange min={0} max={100} name="range" id="range" compressed />
         </EuiFormRow>
 
-        <EuiFormRow label="Use a switch instead of a single checkbox">
+        <EuiFormRow
+          label="Use a switch instead of a single checkbox"
+          compressed>
           <EuiSwitch
             name="switch"
             label="Should we do this?"
             checked={this.state.isSwitchChecked}
             onChange={this.onSwitchChange}
+            compressed
           />
         </EuiFormRow>
 
         <EuiFormRow
           label="Checkbox group labels should use a `legend` label type"
-          labelType="legend">
+          labelType="legend"
+          compressed>
           <EuiCheckboxGroup
             options={this.state.checkboxes}
             idToSelectedMap={this.state.checkboxIdToSelectedMap}
             onChange={this.onCheckboxChange}
+            compressed
           />
         </EuiFormRow>
 
+        <EuiSpacer />
+
         <EuiButton type="submit" fill>
           Save form
         </EuiButton>

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

@@ -15,10 +15,10 @@ export default () => (
   <Fragment>
     <EuiFlexGroup>
       <EuiFlexItem>
-        <EuiFieldSearch placeholder="Search..." fullWidth />
+        <EuiFieldSearch placeholder="Search..." fullWidth compressed />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiButton>Search</EuiButton>
+        <EuiButton size="s">Search</EuiButton>
       </EuiFlexItem>
     </EuiFlexGroup>
 
@@ -27,13 +27,15 @@ export default () => (
     <EuiFormRow
       label="Works on form rows too"
       fullWidth
-      helpText="Note that the fullWidth prop is not passed to the form row's child">
-      <EuiRange fullWidth min={0} max={100} name="range" />
+      helpText="Note that the fullWidth prop is not passed to the form row's child"
+      compressed>
+      <EuiRange fullWidth min={0} max={100} name="range" compressed />
     </EuiFormRow>
 
-    <EuiFormRow label="Often useful for text areas" fullWidth>
+    <EuiFormRow label="Often useful for text areas" fullWidth compressed>
       <EuiTextArea
         fullWidth
+        compressed
         placeholder="There is a reason we do not make forms ALWAYS 100% width.
           See how this text area becomes extremely hard to read when the individual
           lines get this long? It is much more readable when contained to a scannable max-width."

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

@@ -11,18 +11,21 @@ import {
 export default () => (
   <EuiFlexGroup style={{ maxWidth: 600 }}>
     <EuiFlexItem>
-      <EuiFormRow label="First name" helpText="I am helpful help text!">
-        <EuiFieldText />
+      <EuiFormRow
+        label="First name"
+        helpText="I am helpful help text!"
+        compressed>
+        <EuiFieldText compressed />
       </EuiFormRow>
     </EuiFlexItem>
     <EuiFlexItem>
-      <EuiFormRow label="Last name">
-        <EuiFieldText />
+      <EuiFormRow label="Last name" compressed>
+        <EuiFieldText compressed />
       </EuiFormRow>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
-      <EuiFormRow hasEmptyLabelSpace>
-        <EuiButton>Save</EuiButton>
+      <EuiFormRow hasEmptyLabelSpace compressed>
+        <EuiButton size="s">Save</EuiButton>
       </EuiFormRow>
     </EuiFlexItem>
   </EuiFlexGroup>