Massage group title padding. Truncate text instead of wrapping it. Ad…

…d title attribute to options for usability. (#1)
cjcenizal · Apr 16, 2018 · 4e413c8 · 4e413c8
1 parent d8c52d2
commit 4e413c8
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 18 deletions.
diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js
@@ -161,11 +161,19 @@ export const ComboBoxExample = {
       code: renderOptionHtml,
     }],
     text: (
-      <p>
-        You can provide a <EuiCode>renderOption</EuiCode> prop which will accept <EuiCode>option</EuiCode>
-        and <EuiCode>searchValue</EuiCode> arguments. Use the <EuiCode>value</EuiCode> prop of the
-        <EuiCode>option</EuiCode> object to store metadata about the option for use in this callback.
-      </p>
+      <Fragment>
+        <p>
+          You can provide a <EuiCode>renderOption</EuiCode> prop which will accept <EuiCode>option</EuiCode>
+          and <EuiCode>searchValue</EuiCode> arguments. Use the <EuiCode>value</EuiCode> prop of the
+          <EuiCode>option</EuiCode> object to store metadata about the option for use in this callback.
+        </p>
+
+        <p>
+          <strong>Note:</strong> virtualization (above) requires that each option have the same height.
+          Ensure that you render the options so that wrapping text is truncated instead of causing
+          the height of the option to change.
+        </p>
+      </Fragment>
     ),
     props: { EuiComboBox },
     demo: <RenderOption />,

diff --git a/src-docs/src/views/combo_box/render_option.js b/src-docs/src/views/combo_box/render_option.js
@@ -110,11 +110,11 @@ export default class extends Component {
     }));
   };
 
-  renderOption = (option, searchValue) => {
+  renderOption = (option, searchValue, contentClassName) => {
     const { color, label, value } = option;
     return (
       <EuiHealth color={color}>
-        <span>
+        <span className={contentClassName}>
           <EuiHighlight search={searchValue}>
             {label}
           </EuiHighlight>

diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_option.scss b/src/components/combo_box/combo_box_options_list/_combo_box_option.scss
@@ -1,6 +1,6 @@
 .euiComboBoxOption {
   font-size: $euiFontSizeS;
-  padding: $euiSizeXS $euiSizeS;
+  padding: $euiSizeXS $euiSizeS $euiSizeXS #{$euiSizeM + $euiSizeXS};
   width: 100%;
   text-align: left;
   border: $euiBorderThin;
@@ -24,3 +24,9 @@
     }
   }
 }
+
+  .euiComboBoxOption__content {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
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
@@ -11,6 +11,10 @@
   z-index: $euiZComboBox;
   position: absolute; /* 2 */
   top: 0; /* 2 */
+
+  .ReactVirtualized__List {
+    @include euiScrollBar;
+  }
 }
 
 .euiComboBoxOptionsList--bottom {
@@ -34,7 +38,3 @@
     max-height: 200px;
     overflow: hidden;
   }
-
-  .ReactVirtualized__List {
-    @include euiScrollBar;
-  }
diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_title.scss b/src/components/combo_box/combo_box_options_list/_combo_box_title.scss
@@ -4,7 +4,7 @@
  */
 .euiComboBoxTitle {
   font-size: $euiFontSizeXS;
-  padding: ($euiSizeXS + $euiSizeS - 1px) $euiSizeS $euiSizeXS 0; /* 1 */
+  padding: ($euiSizeXS + $euiSizeS - 1px) $euiSizeS $euiSizeXS; /* 1 */
   width: 100%;
   font-weight: $euiFontWeightBold;
   color: $euiColorFullShade;

diff --git a/src/components/combo_box/combo_box_options_list/combo_box_option.js b/src/components/combo_box/combo_box_options_list/combo_box_option.js
@@ -36,7 +36,7 @@ export class EuiComboBoxOption extends Component {
       children,
       className,
       optionRef,
-      option, // eslint-disable-line no-unused-vars
+      option,
       onClick, // eslint-disable-line no-unused-vars
       onEnterKey, // eslint-disable-line no-unused-vars
       disabled,
@@ -48,6 +48,10 @@ export class EuiComboBoxOption extends Component {
       className
     );
 
+    const {
+      label,
+    } = option;
+
     return (
       <button
         role="option"
@@ -57,6 +61,7 @@ export class EuiComboBoxOption extends Component {
         ref={optionRef}
         tabIndex="-1"
         disabled={disabled}
+        title={label}
         {...rest}
       >
         {children}

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
@@ -19,6 +19,8 @@ const positionToClassNameMap = {
 
 const POSITIONS = Object.keys(positionToClassNameMap);
 
+const OPTION_CONTENT_CLASSNAME = 'euiComboBoxOption__content';
+
 export class EuiComboBoxOptionsList extends Component {
   static propTypes = {
     options: PropTypes.array,
@@ -143,8 +145,6 @@ export class EuiComboBoxOptionsList extends Component {
       </EuiText>
     ) : undefined;
 
-    const groupLabelToGroupMap = {};
-
     const optionHeight = 27; // TODO dynamically figure this out
     const numVisiableOptions = matchingOptions.length < 7 ? matchingOptions.length : 7;
     const height = numVisiableOptions * optionHeight;
@@ -184,8 +184,8 @@ export class EuiComboBoxOptionsList extends Component {
                 optionRef={optionRef.bind(this, index)}
                 {...rest}
               >
-                {renderOption ? renderOption(option, searchValue) : (
-                  <EuiHighlight search={searchValue}>{label}</EuiHighlight>
+                {renderOption ? renderOption(option, searchValue, OPTION_CONTENT_CLASSNAME) : (
+                  <EuiHighlight search={searchValue} className={OPTION_CONTENT_CLASSNAME}>{label}</EuiHighlight>
                 )}
               </EuiComboBoxOption>
             </div>