[Feature] Compressed editor controls (#2167)

* [Feature branch] Updated form control border color (#2114) * Updated form control border color * Slighly more transparent * change sass var name to $euiFormBorderOpaqueColor * [Feature branch] Added EuiFormControlLayoutDelimited component (#2117) As a layout helper component to create date and number ranges * Added Sass var for `$euiFormControlLayoutGroupInputHeight` and compressed version * [Feature branch] Compressed EuiSuperSelect dropdown (#2155) - Added truncation example - Added max-height * [Feature Branch] Update compressed form control styles (#2174) * Updated compressed visual style in mixin * Compressed updates to from control groups * Fix compressed state overrides * Reduce horizontal padding for compressed * Icons and button icons in input groups * Added a compressed option for from` euiFormControlLayoutPadding` * Added compressed padding for inputs with icons * Fix readonly & compressed input groups * Fix group heights * Update file picker with new compressed styles * Fix delimited compressed and fullwidth styles * Fixed EuiComboBox * Added reduced padding for EuiColorPicker * Fixed date pickers * Variables for border-radius * [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` * Fix snap * Into feature/compressed editor docs (#2295) * Adding a shared component for the different states of each form control * New docs section for compressed * Added `columnCompressedSwitch` to display type of EuiFormRow for better alignment of switch style controls * Account for tooltips as pre/appends * Allow passing a string as the pre/appends and it automatically wraps it in a form label * Made all EuiSuperDatePicker form controls compressed (in popover) * Connection prepend/appends with input via `htmlFor` * Allowing passing of `style` to EuiColorPickerSwatch * Allow an array of strings a pre/append * [Feature Branch] Add support for EuiRange in a dropdown with input (#2179) * Compressed EuiRange step 1: Decrease overall height of the range when compressed * Compressed EuiRange step 2: - Attempt at single range compressed input with popover - Fixes z-indexes being too high - Fix up widths * Compressed EuiRange step 3: Dual range now supports dropdown style * Fix for delimited * Fix full-width delimited * Added `controlOnly` prop to EuiFieldNumber * Finalize styles of input only ranges - Needed some fixes to EuiFormControlLayoutDelimited * Open popover on focus * dual range respond to resize events when in showInputOnly mode * use callback instead of resizeObserver * ie11 focus fix * use focusout instead of blur * Added some display toggles for ranges and ranges with dropdowns to the complex example Has issues * Fix console errors * Some fixes - Ranges use div spacers between slider and input instead of margin - Pre/Appends are restrictred to 50% width and truncated * [feature/compressed-editor-controls] EuiRange + EuiFormRow (#2321) * focus management * add euiformrow to some examples * use prevention flag * Add `controlOnly` prop to EuiFieldText * Update TS defs * Some docs fixes * Fix inherit screen reader ability of EuiRange By moving the id to the input if it exists * Add dual range to complex example
elastic · Sep 11, 2019 · ab29a11 · ab29a11
1 parent 4edf38c
commit ab29a11
Show file tree

Hide file tree

Showing 143 changed files with 4,073 additions and 1,832 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,37 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `13.8.2`.
+### Feature: Compressed Form Controls ([#2167](https://github.com/elastic/eui/pull/2167))
+
+- Altered the look of `compressed` form controls to look more subtle
+- Created `EuiFormControlLayoutDelimited` for dual inputs indicating a range
+- Added compressed and column style layouts to `EuiFormRow` via `display` prop
+- Reduced overall height of `compressed` `EuiRange` and `EuiDualRange`
+- Added `showInput = 'inputWithPopover'` option for `compressed` `EuiRange` and `EuiDualRange` to display the slider in a popover
+
+- Made all inputs in the `EuiSuperDatePicker` popover `compressed`
+- Added `controlOnly` prop to `EuiFieldText` and `EuiFieldNumber`
+- Allow `style` prop to be passed down in `EuiColorPickerSwatch`
+- `EuiFilePicker` now has `default` and `large` display sizes that both have `compressed` alternatives
+- Allow strings to be passed as `append`/`prepend` props and added a11y support
+- Added a max height with overflow to `EuiSuperSelect`
+
+**Bug fixes**
+
+- Fixed `EuiColorPicker` padding on right to accomodate down caret
+- Fixed sizings of `EuiComboBox` and pills
+- Fixed truncation on `EuiContextMenuItem`
+- Fixed style of more `append`/`prepend` options of `EuiFormControlLayout`
+
+**Deprecations**
+
+- `EuiFormRow`'s `compressed` prop deprecated in favor of `display: rowCompressed`
+- `EuiFormRow`'s `displayOnly` prop deprecated in favor of `display: center`
+
+**Breaking changes**
+
+- SASS mixin `euiTextOverflowWrap()` has been removed in favor of `euiTextBreakWord()`
+- `EuiFormLabel` no longer has a bottom margin
+- `EuiFormRow` no longer has bottom padding, nor does it add margin to any `+ *` siblings only sibling `EuiFormRow`s
 
 ## [`13.8.2`](https://github.com/elastic/eui/tree/v13.8.2)
 

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/routes.js b/src-docs/src/routes.js
@@ -96,6 +96,8 @@ import { FormControlsExample } from './views/form_controls/form_controls_example
 
 import { FormLayoutsExample } from './views/form_layouts/form_layouts_example';
 
+import { FormCompressedExample } from './views/form_compressed/form_compressed_example';
+
 import { FormValidationExample } from './views/form_validation/form_validation_example';
 
 import { HeaderExample } from './views/header/header_example';
@@ -336,8 +338,9 @@ const navigation = [
   {
     name: 'Forms',
     items: [
-      FormLayoutsExample,
       FormControlsExample,
+      FormLayoutsExample,
+      FormCompressedExample,
       FormValidationExample,
       SuperSelectExample,
       ComboBoxExample,

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/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
-import { EuiColorPicker, EuiFormRow } from '../../../../src/components';
-import { isValidHex } from '../../../../src/services';
+import { EuiColorPicker } from '../../../../src/components';
+import { DisplayToggles } from '../form_controls/display_toggles';
 
 export class KitchenSink extends Component {
   constructor(props) {
@@ -16,55 +16,11 @@ export class KitchenSink extends Component {
   };
 
   render() {
-    const hasErrors = !isValidHex(this.state.color) && this.state.color !== '';
-    const isCompressed = true;
-
-    let errors;
-    if (hasErrors) {
-      errors = ['Provide a valid hex value'];
-    }
-
     return (
-      <React.Fragment>
-        <EuiFormRow
-          compressed={isCompressed}
-          label="Pick a color"
-          isInvalid={hasErrors}
-          error={errors}
-          fullWidth={true}>
-          <EuiColorPicker
-            onChange={this.handleChange}
-            color={this.state.color}
-            isInvalid={hasErrors}
-            onBlur={() => console.log('onBlur')}
-            onFocus={() => console.log('onFocus')}
-            compressed={isCompressed}
-            fullWidth={true}
-            popoverZIndex={10}
-            mode="default"
-            swatches={['#333', '#666', '#999', '#CCC', '#FFF']}
-          />
-        </EuiFormRow>
-        <EuiFormRow compressed={isCompressed} label="Compressed">
-          <EuiColorPicker
-            onChange={this.handleChange}
-            compressed={isCompressed}
-          />
-        </EuiFormRow>
-        <EuiFormRow label="Disabled">
-          <EuiColorPicker onChange={this.handleChange} disabled={true} />
-        </EuiFormRow>
-        <EuiFormRow label="Read only">
-          <EuiColorPicker
-            color="#FFF"
-            onChange={this.handleChange}
-            readOnly={true}
-          />
-        </EuiFormRow>
-        <EuiFormRow fullWidth={true} label="Full width">
-          <EuiColorPicker onChange={this.handleChange} fullWidth={true} />
-        </EuiFormRow>
-      </React.Fragment>
+      /* DisplayToggles wrapper for Docs only */
+      <DisplayToggles canLoading={false}>
+        <EuiColorPicker color={this.state.color} onChange={this.handleChange} />
+      </DisplayToggles>
     );
   }
 }
diff --git a/src-docs/src/views/combo_box/combo_box.js b/src-docs/src/views/combo_box/combo_box.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 
 import { EuiComboBox } from '../../../../src/components';
+import { DisplayToggles } from '../form_controls/display_toggles';
 
 export default class extends Component {
   constructor(props) {
@@ -82,15 +83,18 @@ export default class extends Component {
   render() {
     const { selectedOptions } = this.state;
     return (
-      <EuiComboBox
-        placeholder="Select or create options"
-        options={this.options}
-        selectedOptions={selectedOptions}
-        onChange={this.onChange}
-        onCreateOption={this.onCreateOption}
-        isClearable={true}
-        data-test-subj="demoComboBox"
-      />
+      /* DisplayToggles wrapper for Docs only */
+      <DisplayToggles canDisabled={false} canReadOnly={false}>
+        <EuiComboBox
+          placeholder="Select or create options"
+          options={this.options}
+          selectedOptions={selectedOptions}
+          onChange={this.onChange}
+          onCreateOption={this.onCreateOption}
+          isClearable={true}
+          data-test-subj="demoComboBox"
+        />
+      </DisplayToggles>
     );
   }
 }
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/date_picker/states.js b/src-docs/src/views/date_picker/states.js
@@ -5,6 +5,7 @@ import {
   EuiSpacer,
   EuiFormRow,
 } from '../../../../src/components';
+import { DisplayToggles } from '../form_controls/display_toggles';
 
 export default class extends Component {
   constructor(props) {
@@ -30,15 +31,18 @@ export default class extends Component {
     ];
 
     return (
+      /* DisplayToggles wrapper for Docs only */
       <div>
-        <EuiDatePicker
-          showTimeSelect
-          selected={this.state.startDate}
-          onChange={this.handleChange}
-          placeholder="Placeholder text"
-        />
+        <DisplayToggles canCompressed={false}>
+          <EuiDatePicker
+            showTimeSelect
+            selected={this.state.startDate}
+            onChange={this.handleChange}
+            placeholder="Placeholder text"
+          />
+        </DisplayToggles>
 
-        <EuiSpacer size="m" />
+        <EuiSpacer size="l" />
 
         <EuiDatePicker
           showTimeSelect
@@ -50,37 +54,6 @@ export default class extends Component {
 
         <EuiSpacer size="m" />
 
-        <EuiDatePicker
-          showTimeSelect
-          selected={this.state.startDate}
-          onChange={this.handleChange}
-          disabled
-          placeholder="Disabled"
-        />
-
-        <EuiSpacer size="m" />
-
-        <EuiDatePicker
-          showTimeSelect
-          selected={this.state.startDate}
-          onChange={this.handleChange}
-          isLoading
-          placeholder="Loading"
-        />
-
-        <EuiSpacer size="m" />
-
-        <EuiDatePicker
-          showTimeSelect
-          selected={this.state.startDate}
-          onChange={this.handleChange}
-          isLoading
-          disabled
-          placeholder="Loading and disabled"
-        />
-
-        <EuiSpacer size="m" />
-
         <EuiFormRow label="Form row validation" isInvalid error={errors}>
           <EuiDatePicker
             showTimeSelect

diff --git a/src-docs/src/views/expression/expression.js b/src-docs/src/views/expression/expression.js
@@ -101,6 +101,7 @@ export default class extends Component {
       <div style={POPOVER_STYLE}>
         <EuiPopoverTitle>When</EuiPopoverTitle>
         <EuiSelect
+          compressed
           value={this.state.example1.value}
           onChange={this.changeExample1}
           options={[
@@ -119,9 +120,10 @@ export default class extends Component {
   renderPopover2() {
     return (
       <div style={POPOVER_STYLE}>
-        <EuiFlexGroup>
+        <EuiFlexGroup gutterSize="s">
           <EuiFlexItem grow={false} style={{ width: 150 }}>
             <EuiSelect
+              compressed
               value={this.state.example2.description}
               onChange={this.changeExample2Description}
               options={[
@@ -134,6 +136,7 @@ export default class extends Component {
 
           <EuiFlexItem grow={false} style={{ width: 100 }}>
             <EuiFieldNumber
+              compressed
               value={this.state.example2.value}
               onChange={this.changeExample2Value}
             />
@@ -160,7 +163,7 @@ export default class extends Component {
             isOpen={this.state.example1.isOpen}
             closePopover={this.closeExample1}
             ownFocus
-            withTitle
+            panelPaddingSize="s"
             anchorPosition="downLeft">
             {this.renderPopover1()}
           </EuiPopover>
@@ -169,6 +172,7 @@ export default class extends Component {
         <EuiFlexItem grow={false}>
           <EuiPopover
             id="popover2"
+            panelPaddingSize="s"
             button={
               <EuiExpression
                 description={this.state.example2.description}

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/focus_trap/focus_trap.js b/src-docs/src/views/focus_trap/focus_trap.js
@@ -9,7 +9,7 @@ import {
   EuiText,
 } from '../../../../src/components';
 
-import FormExample from '../form_layouts/form_compressed';
+import FormExample from '../form_compressed/form_compressed';
 
 export default class extends Component {
   constructor(props) {