[Feature branch] Compressed EuiSuperSelect dropdown (#2155)

- Added truncation example - Added max-height
elastic · Aug 29, 2019 · 89c9966 · 89c9966
1 parent eb5297a
commit 89c9966
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 8 deletions.
diff --git a/src-docs/src/views/super_select/super_select.js b/src-docs/src/views/super_select/super_select.js
@@ -19,8 +19,11 @@ export default class extends Component {
       },
       {
         value: 'option_three',
-        inputDisplay:
-          'Option three has a super long text to see if it will truncate or what',
+        inputDisplay: (
+          <span className="eui-textTruncate eui-displayBlock">
+            Option three has a super long text and added truncation
+          </span>
+        ),
       },
     ];
 

diff --git a/src-docs/src/views/super_select/super_select_complex.js b/src-docs/src/views/super_select/super_select_complex.js
@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 
-import { EuiSuperSelect, EuiSpacer, EuiText } from '../../../../src/components';
+import { EuiSuperSelect, EuiText } from '../../../../src/components';
 
 export default class extends Component {
   constructor(props) {
@@ -13,7 +13,6 @@ export default class extends Component {
         dropdownDisplay: (
           <Fragment>
             <strong>Option one</strong>
-            <EuiSpacer size="xs" />
             <EuiText size="s" color="subdued">
               <p className="euiTextColor--subdued">
                 Has a short description giving more detail to the option.
@@ -28,7 +27,6 @@ export default class extends Component {
         dropdownDisplay: (
           <Fragment>
             <strong>Option two</strong>
-            <EuiSpacer size="xs" />
             <EuiText size="s" color="subdued">
               <p className="euiTextColor--subdued">
                 Has a short description giving more detail to the option.
@@ -43,7 +41,6 @@ export default class extends Component {
         dropdownDisplay: (
           <Fragment>
             <strong>Option three</strong>
-            <EuiSpacer size="xs" />
             <EuiText size="s" color="subdued">
               <p className="euiTextColor--subdued">
                 Has a short description giving more detail to the option.

diff --git a/src/components/context_menu/_context_menu_item.scss b/src/components/context_menu/_context_menu_item.scss
@@ -31,6 +31,7 @@
 
 .euiContextMenuItem__text {
   flex-grow: 1;
+  overflow: hidden; // allows for text truncation
 }
 
 .euiContextMenuItem__arrow {

diff --git a/src/components/form/super_select/_super_select.scss b/src/components/form/super_select/_super_select.scss
@@ -11,6 +11,13 @@
   }
 }
 
+.euiSuperSelect__listbox {
+  @include euiScrollBar;
+  max-height: 300px;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
 .euiSuperSelect__popoverPanel[class*='bottom'] { /* 3 */
   border-top-color: transparentize($euiBorderColor, .2);
   border-top-right-radius: 0; /* 2 */
@@ -26,11 +33,18 @@
 }
 
 .euiSuperSelect__item {
-  &:hover,
+  @include euiFontSizeS;
+  padding: $euiSizeS;
+
+  &:hover:not(:disabled),
   &:focus {
     text-decoration: none;
     background-color: $euiFocusBackgroundColor;
   }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 }
 
 .euiSuperSelect__item--hasDividers:not(:last-of-type) {

diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js
@@ -165,6 +165,7 @@ export class EuiSuperSelect extends Component {
       itemLayoutAlign,
       fullWidth,
       popoverClassName,
+      compressed,
       ...rest
     } = this.props;
 
@@ -206,6 +207,7 @@ export class EuiSuperSelect extends Component {
         className={buttonClasses}
         fullWidth={fullWidth}
         isInvalid={isInvalid}
+        compressed={compressed}
         {...rest}
       />
     );
@@ -222,7 +224,6 @@ export class EuiSuperSelect extends Component {
           onKeyDown={this.onItemKeyDown}
           layoutAlign={itemLayoutAlign}
           buttonRef={node => this.setItemNode(node, index)}
-          style={{ width: this.state.menuWidth }}
           role="option"
           id={value}
           aria-selected={valueOfSelected === value}
@@ -256,8 +257,10 @@ export class EuiSuperSelect extends Component {
           </p>
         </EuiScreenReaderOnly>
         <div
+          className="euiSuperSelect__listbox"
           role="listbox"
           aria-activedescendant={valueOfSelected}
+          style={{ width: this.state.menuWidth }}
           tabIndex="0">
           {items}
         </div>

diff --git a/src/components/form/super_select/super_select.test.js b/src/components/form/super_select/super_select.test.js
@@ -42,6 +42,19 @@ describe('EuiSuperSelect', () => {
       expect(component).toMatchSnapshot();
     });
 
+    test('compressed is rendered', () => {
+      const component = render(
+        <EuiSuperSelect
+          {...requiredProps}
+          options={options}
+          onChange={() => {}}
+          compressed
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
     test('select component is rendered', () => {
       const component = render(
         <EuiSuperSelect