[Feature branch] Compressed form rows (#2181)

* Removed padding from compressed form row
* Create mixin for `euiTextBreakWord`
* Added option for horizontal compressed style

Breaking: `compressed` is no longer passed to children

* [Docs] Final compressed doc example changes
* Fix combobox height
* Fixed usages where spacers were needed
* Deprecated `displayOnly` for `display: center`

Author: cchaos

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

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

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

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

src-docs/src/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,6 +10,7 @@ import {
   EuiFilePicker,
   EuiRange,
   EuiSelect,
+  EuiSpacer,
   EuiSwitch,
   EuiPanel,
 } from '../../../../src/components';
@@ -57,9 +58,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,45 +100,58 @@ export default class extends Component {
           <EuiFormRow
             label="Text field"
             helpText="I am some friendly help text."
-            compressed>
-            <EuiFieldText name="first" isLoading />
+            display="columnCompressed">
+            <EuiFieldText name="first" isLoading compressed />
           </EuiFormRow>
 
-          <EuiFormRow label="Select" compressed>
+          <EuiFormRow label="Select" display="columnCompressed">
             <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" display="columnCompressed">
+            <EuiFilePicker compressed display="default" />
           </EuiFormRow>
 
-          <EuiFormRow label="Combo box" compressed>
+          <EuiFormRow
+            label="Comboboxwithalonglabelname"
+            display="columnCompressed">
             <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" display="columnCompressed">
+            <EuiRange
+              min={0}
+              max={100}
+              name="range"
+              id="range"
+              showInput
+              compressed
+              value={this.state.value}
+              onChange={this.onRangeChange}
+            />
           </EuiFormRow>
 
           <EuiFormRow
             label="Use a switch instead of a single checkbox"
-            compressed>
+            display="rowCompressed">
             <EuiSwitch
               label="Should we do this?"
               name="switch"
@@ -139,14 +160,17 @@ export default class extends Component {
             />
           </EuiFormRow>
 
-          <EuiFormRow label="Checkboxes" compressed>
+          <EuiFormRow label="Checkboxes" display="rowCompressed">
             <EuiCheckboxGroup
               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,
@@ -122,21 +122,33 @@ export const FormLayoutsExample = {
       text: (
         <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.
+          estate, you can pass{' '}
+          <EuiCode>display=&quot;rowCompressed&quot;</EuiCode> to the{' '}
+          <EuiCode>EuiFormRow</EuiCode>s but you will also need to pass{' '}
+          <EuiCode>compressed=true</EuiCode> to the form controls themselves.
+          For editor style controls, pass{' '}
+          <EuiCode>display=&quot;columnCompressed&quot;</EuiCode> to align the
+          labels and inputs horizontally.
         </p>
       ),
       props: {
         EuiFormRow,
       },
       demo: <FormCompressed />,
-      snippet: `<EuiFormRow
+      snippet: [
+        `<EuiFormRow
   label="Text field"
-  compressed
+  display="rowCompressed"
 >
-  <EuiFieldText />
+  <EuiFieldText compressed />
 </EuiFormRow>`,
+        `<EuiFormRow
+  label="Text field"
+  display="columnCompressed"
+>
+  <EuiFieldText compressed />
+</EuiFormRow>`,
+      ],
     },
     {
       title: 'Described form groups',
@@ -224,12 +236,16 @@ export const FormLayoutsExample = {
           <p>
             When supplying children to an EuiFormRow that is{' '}
             <strong>not</strong> a form control, and you need to the content to
-            vertically center with the other form controls, add the prop{' '}
-            <EuiCode>displayOnly</EuiCode>.
+            vertically center with the other form controls, change the{' '}
+            <EuiCode>display</EuiCode> prop to <EuiCode>center</EuiCode> or{' '}
+            <EuiCode>centerCompressed</EuiCode>.
           </p>
         </Fragment>
       ),
       demo: <InlineSizing />,
+      snippet: `<EuiFormRow label="Avatar" display="centerCompressed">
+  <EuiAvatar name="John Doe" size="s" />
+</EuiFormRow>`,
     },
     {
       title: 'In a popover',

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

@@ -10,6 +10,7 @@ import {
   EuiLink,
   EuiRange,
   EuiSelect,
+  EuiSpacer,
   EuiSwitch,
   EuiText,
 } from '../../../../src/components';
@@ -135,6 +136,8 @@ export default class extends Component {
           />
         </EuiFormRow>
 
+        <EuiSpacer />
+
         <EuiButton type="submit" fill>
           Save form
         </EuiButton>