Forcing max-width on flex item in form

and fixing some other layout stuff
elastic · Aug 23, 2018 · 73aad03 · 73aad03
1 parent 7427a4f
commit 73aad03
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 104 deletions.
diff --git a/src-docs/src/views/header/_global_filter_group.scss b/src-docs/src/views/header/_global_filter_group.scss
@@ -2,7 +2,7 @@
 @import 'global_filter_form';
 
 .globalFilterGroup__filterBar {
-  margin-top: $euiSizeM - 1px;
+  margin-top: $euiSizeM;
 }
 
 .globalFilterGroup__branch {

diff --git a/src-docs/src/views/header/_global_filter_item.scss b/src-docs/src/views/header/_global_filter_item.scss
@@ -16,5 +16,5 @@
 }
 
 .globalFilterItem-isPinned {
-  border-left: $euiSizeXS solid $euiColorSuccess;
+  border-left: $euiSizeXS solid $euiColorVis0;
 }
diff --git a/src-docs/src/views/header/global_filter_form.js b/src-docs/src/views/header/global_filter_form.js
@@ -80,107 +80,17 @@ export default class GlobalFilterForm extends Component {
     super(props);
 
     this.state = {
+      fieldOptions: fieldOptions,
+      operandOptions: operatorOptions,
+      valueOptions: valueOptions,
       selectedField: this.props.selectedObject ? this.props.selectedObject.field : [],
       selectedOperand: this.props.selectedObject ? this.props.selectedObject.operand : [],
       selectedValues: this.props.selectedObject ? this.props.selectedObject.values : [],
       useCustomLabel: false,
-      customLabel: null,
+      customLabel: '',
     };
   }
 
-  // onComboBoxChange = selectedComboBoxOptions => {
-  //   const selectedOptions = selectedComboBoxOptions || [];
-  //   const numOfSelections = selectedOptions.length;
-  //   const lastUpdate = selectedOptions[selectedOptions.length - 1];
-  //   const current = {};
-
-  //   // If length is less than 3, then move on to the next
-  //   if (numOfSelections < 3) {
-  //     switch (numOfSelections) {
-  //       case 0:
-  //         current.selectedComboBoxOptions = [];
-  //         current.editingOption = 'field';
-  //         current.comboBoxOptions = fieldOptions;
-  //         break;
-  //       case 1:
-  //         current.selectedComboBoxOptions = selectedOptions;
-  //         current.editingOption = 'operator';
-  //         current.comboBoxOptions = operatorOptions;
-  //         break;
-  //       default:
-  //         // 2 or more
-  //         current.selectedComboBoxOptions = selectedOptions;
-  //         current.editingOption = 'value';
-  //         current.comboBoxOptions = valueOptions;
-  //         break;
-  //     }
-  //   } else {
-  //     // else stay on and just update the value
-  //     switch (this.state.editingOption) {
-  //       case 'field':
-  //         pull(selectedOptions, lastUpdate);
-  //         selectedOptions[0] = lastUpdate;
-  //         break;
-  //       case 'operator':
-  //         pull(selectedOptions, lastUpdate);
-  //         selectedOptions[1] = lastUpdate;
-  //         break;
-  //       default:
-  //         // 'value'
-  //         break;
-  //     }
-
-  //     current.selectedComboBoxOptions = selectedOptions;
-  //   }
-
-  //   // Add the appropriate click handlers to the first two selected options
-  //   // (if they exist)
-  //   if (numOfSelections > 0) {
-  //     current.selectedComboBoxOptions[0].onClick = this.fieldClicked;
-  //   }
-  //   if (numOfSelections > 1) {
-  //     current.selectedComboBoxOptions[1].onClick = this.opClicked;
-  //   }
-
-  //   this.setState({ ...current });
-  // };
-
-  // fieldClicked = () => {
-  //   this.setState({
-  //     comboBoxOptions: fieldOptions,
-  //     editingOption: 'field',
-  //   });
-  // };
-
-  // opClicked = () => {
-  //   this.setState({
-  //     comboBoxOptions: operatorOptions,
-  //     editingOption: 'operator',
-  //   });
-  // };
-
-  // eslint-disable-next-line no-unused-vars
-  onSearchChange = searchValue => {
-    //const options = this.state.comboBoxOptions;
-    // this.setState({
-    //   isComboBoxLoading: true,
-    //   comboBoxOptions: [],
-    // });
-    // clearTimeout(this.searchTimeout);
-    // if (this.state.selectedComboBoxOptions.length === 1) {
-    //   options = operatorOptions;
-    // } else if (this.state.selectedComboBoxOptions.length > 1) {
-    //   options = valueOptions;
-    // }
-    // this.searchTimeout = setTimeout(() => {
-    //   // Simulate a remotely-executed search.
-    //this.setState({
-    // isComboBoxLoading: false,
-    //comboBoxOptions: options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase())),
-    //});
-    // }, 200);
-  };
-
   onFieldChange = selectedOptions => {
     // We should only get back either 0 or 1 options.
     this.setState({
@@ -207,6 +117,24 @@ export default class GlobalFilterForm extends Component {
     });
   };
 
+  onFieldSearchChange = searchValue => {
+    this.setState({
+      fieldOptions: fieldOptions.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase())),
+    });
+  };
+
+  onOperandSearchChange = searchValue => {
+    this.setState({
+      operandOptions: operatorOptions.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase())),
+    });
+  };
+
+  onValuesSearchChange = searchValue => {
+    this.setState({
+      valueOptions: valueOptions.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase())),
+    });
+  };
+
   resetForm = () => {
     this.setState({
       selectedField: [],
@@ -234,30 +162,32 @@ export default class GlobalFilterForm extends Component {
     return (
       <div {...rest}>
         <EuiFlexGroup>
-          <EuiFlexItem>
+          <EuiFlexItem style={{ maxWidth: '188px' }}>
             <EuiFormRow label="Field">
               <EuiComboBox
                 placeholder={this.state.selectedOperand.length < 1 ? 'Start here' : 'Select a field'}
-                options={fieldOptions}
+                options={this.state.fieldOptions}
                 selectedOptions={this.state.selectedField}
                 onChange={this.onFieldChange}
                 onSearchChange={this.onFieldSearchChange}
                 singleSelection={{ asPlainText: true }}
+                isClearable={false}
               />
             </EuiFormRow>
           </EuiFlexItem>
-          <EuiFlexItem>
+          <EuiFlexItem style={{ maxWidth: '188px' }}>
             <EuiFormRow label="Operand">
               <EuiComboBox
                 placeholder={
                   this.state.selectedField.length < 1 ? 'Select a field first' : 'Select an operand'
                 }
                 isDisabled={this.state.selectedField.length < 1}
-                options={operatorOptions}
+                options={this.state.operandOptions}
                 selectedOptions={this.state.selectedOperand}
                 onChange={this.onOperandChange}
                 onSearchChange={this.onOperandSearchChange}
                 singleSelection={{ asPlainText: true }}
+                isClearable={false}
               />
             </EuiFormRow>
           </EuiFlexItem>
@@ -274,7 +204,7 @@ export default class GlobalFilterForm extends Component {
                   : 'Select one or more values'
               }
               isDisabled={this.state.selectedField.length < 1 || this.state.selectedOperand.length < 1}
-              options={valueOptions}
+              options={this.state.valueOptions}
               selectedOptions={this.state.selectedValues}
               onChange={this.onValuesChange}
               onSearchChange={this.onValuesSearchChange}

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.js.snap b/src/components/combo_box/__snapshots__/combo_box.test.js.snap
@@ -13,7 +13,7 @@ exports[`EuiComboBox is rendered 1`] = `
       class="euiFormControlLayout__childrenWrapper"
     >
       <div
-        class="euiComboBox__inputWrap"
+        class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
         data-test-subj="comboBoxInput"
       >
         <div
@@ -214,7 +214,7 @@ exports[`props options list is rendered 1`] = `
       class="euiFormControlLayout__childrenWrapper"
     >
       <div
-        class="euiComboBox__inputWrap"
+        class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
         data-test-subj="comboBoxInput"
       >
         <div

diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss
@@ -13,7 +13,11 @@
     @include euiFormControlWithIcon($isIconOptional: true);
     @include euiFormControlSize();
     padding: $euiSizeXS;
-    @include euiFormControlLayout__padding(2); /* 2 */
+    @include euiFormControlLayout__padding(1); /* 2 */
+
+    &.euiComboBox__inputWrap-isClearable {
+      @include euiFormControlLayout__padding(2); /* 2 */
+    }
 
     &:not(.euiComboBox__inputWrap--noWrap) {
       height: auto;  /* 3 */

diff --git a/src/components/combo_box/combo_box_input/_combo_box_input.scss b/src/components/combo_box/combo_box_input/_combo_box_input.scss
@@ -1,4 +1,5 @@
 .euiComboBox__input {
+  max-width: 100%;
 
   // Ensure that no input states are visible on the hidden input
   input[aria-hidden="true"] {

diff --git a/src/components/combo_box/combo_box_input/combo_box_input.js b/src/components/combo_box/combo_box_input/combo_box_input.js
@@ -181,6 +181,7 @@ export class EuiComboBoxInput extends Component {
     const wrapClasses = classNames('euiComboBox__inputWrap', {
       'euiComboBox__inputWrap--fullWidth': fullWidth,
       'euiComboBox__inputWrap--noWrap': singleSelection,
+      'euiComboBox__inputWrap-isClearable': onClear,
     });
 
     return (