Added support for fullWidth on EuiComboBox

elastic · Aug 7, 2018 · fab57a1 · fab57a1
1 parent ac4c0b7
commit fab57a1
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 5 deletions.
diff --git a/src/components/combo_box/__snapshots__/combo_box.test.js.snap b/src/components/combo_box/__snapshots__/combo_box.test.js.snap
@@ -67,6 +67,41 @@ exports[`EuiComboBox is rendered 1`] = `
 </div>
 `;
 
+exports[`props full width is rendered 1`] = `
+<div
+  className="euiComboBox euiComboBox--fullWidth"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+>
+  <EuiComboBoxInput
+    autoSizeInputRef={[Function]}
+    fullWidth={true}
+    hasSelectedOptions={true}
+    inputRef={[Function]}
+    isListOpen={false}
+    onChange={[Function]}
+    onClear={[Function]}
+    onClick={[Function]}
+    onCloseListClick={[Function]}
+    onFocus={[Function]}
+    onOpenListClick={[Function]}
+    onRemoveOption={[Function]}
+    searchValue=""
+    selectedOptions={
+      Array [
+        Object {
+          "label": "Mimas",
+        },
+      ]
+    }
+    singleSelection={false}
+    toggleButtonRef={[Function]}
+    updatePosition={[Function]}
+    value="Mimas"
+  />
+</div>
+`;
+
 exports[`props isClearable=false disallows user from clearing input when no options are selected 1`] = `
 <div
   className="euiComboBox"
@@ -75,6 +110,7 @@ exports[`props isClearable=false disallows user from clearing input when no opti
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    fullWidth={false}
     hasSelectedOptions={false}
     inputRef={[Function]}
     isListOpen={false}
@@ -102,6 +138,7 @@ exports[`props isClearable=false disallows user from clearing input when options
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    fullWidth={false}
     hasSelectedOptions={true}
     inputRef={[Function]}
     isListOpen={false}
@@ -138,6 +175,7 @@ exports[`props isDisabled is rendered 1`] = `
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    fullWidth={false}
     hasSelectedOptions={true}
     inputRef={[Function]}
     isDisabled={true}
@@ -255,6 +293,7 @@ exports[`props selectedOptions are rendered 1`] = `
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    fullWidth={false}
     hasSelectedOptions={true}
     inputRef={[Function]}
     isListOpen={false}
@@ -292,6 +331,7 @@ exports[`props singleSelection is rendered 1`] = `
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    fullWidth={false}
     hasSelectedOptions={true}
     inputRef={[Function]}
     isListOpen={false}

diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss
@@ -1,5 +1,5 @@
 .euiComboBox {
-  @include euiFormControlSize(auto);
+  @include euiFormControlSize(auto, $includeAlternates: true);
   position: relative;
 
   /**
@@ -8,7 +8,7 @@
    * 3. The height on combo can be larger than normal text inputs.
    */
   .euiComboBox__inputWrap {
-    @include euiFormControlStyle($includeStates: false, $includeSizes:false);
+    @include euiFormControlStyle($includeStates: false, $includeSizes: true);
     @include euiFormControlWithIcon($isIconOptional: true);
     @include euiFormControlSize(auto); /* 3 */
 

diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
@@ -42,13 +42,15 @@ export class EuiComboBox extends Component {
     isInvalid: PropTypes.bool,
     rowHeight: PropTypes.number,
     isClearable: PropTypes.bool,
+    fullWidth: PropTypes.bool,
   }
 
   static defaultProps = {
     options: [],
     selectedOptions: [],
     isClearable: true,
     singleSelection: false,
+    fullWidth: false,
   }
 
   constructor(props) {
@@ -569,6 +571,7 @@ export class EuiComboBox extends Component {
       isInvalid,
       rowHeight,
       isClearable,
+      fullWidth,
       'data-test-subj': dataTestSubj,
       ...rest
     } = this.props;
@@ -579,6 +582,7 @@ export class EuiComboBox extends Component {
       'euiComboBox-isOpen': isListOpen,
       'euiComboBox-isInvalid': isInvalid,
       'euiComboBox-isDisabled': isDisabled,
+      'euiComboBox--fullWidth': fullWidth,
     });
 
     const value = selectedOptions.map(selectedOption => selectedOption.label).join(', ');
@@ -610,6 +614,7 @@ export class EuiComboBox extends Component {
             onScroll={this.focusActiveOption}
             rowHeight={rowHeight}
             data-test-subj={optionsListDataTestSubj}
+            fullWidth={fullWidth}
           />
         </EuiPortal>
       );
@@ -645,6 +650,7 @@ export class EuiComboBox extends Component {
           singleSelection={singleSelection}
           isDisabled={isDisabled}
           toggleButtonRef={this.toggleButtonRef}
+          fullWidth={fullWidth}
         />
 
         {optionsList}

diff --git a/src/components/combo_box/combo_box.test.js b/src/components/combo_box/combo_box.test.js
@@ -140,6 +140,18 @@ describe('props', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('full width is rendered', () => {
+    const component = shallow(
+      <EuiComboBox
+        options={options}
+        selectedOptions={[options[2]]}
+        fullWidth={true}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });
 
 describe('behavior', () => {

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
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import AutosizeInput from 'react-input-autosize';
 
@@ -31,6 +32,7 @@ export class EuiComboBoxInput extends Component {
     singleSelection: PropTypes.bool,
     isDisabled: PropTypes.bool,
     toggleButtonRef: PropTypes.func,
+    fullWidth: PropTypes.bool,
   }
 
   constructor(props) {
@@ -91,6 +93,7 @@ export class EuiComboBoxInput extends Component {
       singleSelection,
       isDisabled,
       toggleButtonRef,
+      fullWidth,
     } = this.props;
 
     const pills = selectedOptions.map((option) => {
@@ -166,13 +169,18 @@ export class EuiComboBoxInput extends Component {
       'data-test-subj': 'comboBoxToggleListButton',
     };
 
+    const wrapClasses = classNames('euiComboBox__inputWrap', {
+      'euiComboBox__inputWrap--fullWidth': fullWidth,
+    });
+
     return (
       <EuiFormControlLayout
         icon={icon}
         {...clickProps}
+        fullWidth={fullWidth}
       >
         <div
-          className="euiComboBox__inputWrap"
+          className={wrapClasses}
           onClick={onClick}
           data-test-subj="comboBoxInput"
         >

diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
@@ -6,7 +6,7 @@
  * 3. The height can expand, hence auto
  */
 .euiComboBoxOptionsList {
-  @include euiFormControlSize(auto); /* 3 */
+  @include euiFormControlSize(auto, $includeAlternates: true); /* 3 */
   z-index: $euiZComboBox;
   position: absolute; /* 2 */
   top: 0; /* 2 */

diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.js b/src/components/combo_box/combo_box_options_list/combo_box_options_list.js
@@ -42,6 +42,7 @@ export class EuiComboBoxOptionsList extends Component {
     scrollToIndex: PropTypes.number,
     onScroll: PropTypes.func,
     rowHeight: PropTypes.number,
+    fullWidth: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -110,6 +111,7 @@ export class EuiComboBoxOptionsList extends Component {
       scrollToIndex,
       onScroll,
       rowHeight,
+      fullWidth,
       'data-test-subj': dataTestSubj,
       ...rest
     } = this.props;
@@ -208,7 +210,9 @@ export class EuiComboBoxOptionsList extends Component {
       />
     );
 
-    const classes = classNames('euiComboBoxOptionsList', positionToClassNameMap[position]);
+    const classes = classNames('euiComboBoxOptionsList', positionToClassNameMap[position], {
+      'euiComboBoxOptionsList--fullWidth': fullWidth,
+    });
 
     return (
       <EuiPanel