[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`
elastic · Aug 13, 2019 · 689d79b · 689d79b
1 parent 23d4f42
commit 689d79b
Show file tree

Hide file tree

Showing 32 changed files with 602 additions and 257 deletions.
diff --git a/src-docs/src/components/guide_locale_selector/guide_locale_selector.js b/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>
   );

diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/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>

diff --git a/src-docs/src/views/color_picker/custom_button.js b/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}

diff --git a/src-docs/src/views/combo_box/containers.js b/src-docs/src/views/combo_box/containers.js
@@ -161,6 +161,8 @@ export default class extends Component {
           {comboBox}
         </EuiFormRow>
 
+        <EuiSpacer />
+
         <EuiPopover
           id="popover"
           ownFocus

diff --git a/src-docs/src/views/context/context.js b/src-docs/src/views/context/context.js
@@ -85,6 +85,8 @@ export default class extends Component {
                   </EuiI18n>
                 </EuiFormRow>
 
+                <EuiSpacer />
+
                 <EuiButton>{action}</EuiButton>
               </Fragment>
             )}

diff --git a/src-docs/src/views/context_menu/context_menu.js b/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>
                   ),

diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/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>

diff --git a/src-docs/src/views/form_layouts/form_compressed.js b/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>

diff --git a/src-docs/src/views/form_layouts/form_layouts_example.js b/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',

diff --git a/src-docs/src/views/form_layouts/form_rows.js b/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>

diff --git a/src-docs/src/views/form_layouts/inline_popover.js b/src-docs/src/views/form_layouts/inline_popover.js
@@ -10,6 +10,7 @@ import {
   EuiFlexItem,
   EuiFieldNumber,
   EuiRange,
+  EuiSpacer,
   EuiSwitch,
 } from '../../../../src/components';
 
@@ -125,6 +126,8 @@ export default class extends Component {
         <EuiFormRow label="Range" helpText="Some help text for the range">
           <EuiRange min={0} max={100} name="poprange" />
         </EuiFormRow>
+
+        <EuiSpacer />
         <EuiButton fullWidth>Save</EuiButton>
       </EuiForm>
     );

diff --git a/src-docs/src/views/form_layouts/inline_sizing.js b/src-docs/src/views/form_layouts/inline_sizing.js
@@ -23,13 +23,13 @@ export default () => (
       </EuiFormRow>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
-      <EuiFormRow label="Avatar" displayOnly>
+      <EuiFormRow label="Avatar" display="center">
         <EuiAvatar name="John Doe" size="s" />
       </EuiFormRow>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
-      <EuiFormRow hasEmptyLabelSpace>
-        <EuiButton>Save</EuiButton>
+      <EuiFormRow hasEmptyLabelSpace display="center">
+        <EuiButton size="s">Save</EuiButton>
       </EuiFormRow>
     </EuiFlexItem>
   </EuiFlexGroup>

diff --git a/src-docs/src/views/form_validation/validation.js b/src-docs/src/views/form_validation/validation.js
@@ -7,6 +7,7 @@ import {
   EuiFormRow,
   EuiTextArea,
   EuiFieldText,
+  EuiSpacer,
 } from '../../../../src/components';
 
 export default class extends Component {
@@ -70,6 +71,8 @@ export default class extends Component {
             />
           </EuiFormRow>
 
+          <EuiSpacer />
+
           {button}
         </EuiForm>
       </Fragment>

diff --git a/src-docs/src/views/popover/trap_focus.js b/src-docs/src/views/popover/trap_focus.js
@@ -4,6 +4,7 @@ import {
   EuiButton,
   EuiFormRow,
   EuiPopover,
+  EuiSpacer,
   EuiSwitch,
 } from '../../../../src/components';
 
@@ -54,6 +55,8 @@ export default class extends Component {
           <EuiSwitch name="switch" label="Current time range" />
         </EuiFormRow>
 
+        <EuiSpacer />
+
         <EuiButton fill>Copy IFRAME code</EuiButton>
       </EuiPopover>
     );

diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss
@@ -11,7 +11,7 @@
    */
 
   &--compressed,
-  .euiFormControlLayout--compressed {
+  .euiFormControlLayout {
     height: auto;
   }
 
@@ -98,6 +98,10 @@
       line-height: $euiFormControlCompressedHeight; /* 2 */
       padding-top: 0;
       padding-bottom: 0;
+
+      &.euiComboBox__inputWrap-isClearable {
+        @include euiFormControlLayoutPadding(2, $compressed: true); /* 2 */
+      }
     }
   }
 }
diff --git a/src/components/date_picker/super_date_picker/date_popover/relative_tab.js b/src/components/date_picker/super_date_picker/date_popover/relative_tab.js
@@ -104,7 +104,7 @@ export class EuiRelativeTab extends Component {
             </EuiFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
-        <EuiSpacer size="s" />
+        <EuiSpacer size="m" />
         <EuiSwitch
           data-test-subj={'superDatePickerRelativeDateRoundSwitch'}
           label={`Round to the ${timeUnits[this.state.unit.substring(0, 1)]}`}