From 4e413c8b99deeb5d2813047cd6f3b3175fea9bc7 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 16 Apr 2018 05:41:52 -0700
Subject: [PATCH] Massage group title padding. Truncate text instead of
 wrapping it. Add title attribute to options for usability. (#1)

---
 .../src/views/combo_box/combo_box_example.js   | 18 +++++++++++++-----
 src-docs/src/views/combo_box/render_option.js  |  4 ++--
 .../_combo_box_option.scss                     |  8 +++++++-
 .../_combo_box_options_list.scss               |  8 ++++----
 .../_combo_box_title.scss                      |  2 +-
 .../combo_box_options_list/combo_box_option.js |  7 ++++++-
 .../combo_box_options_list.js                  |  8 ++++----
 7 files changed, 37 insertions(+), 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
index 2a2b51fe7af..2fcce4ad73c 100644
--- 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
index 2d39f806f25..611a96eddf8 100644
--- 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
index f38453417b4..dcfc0ae77a8 100644
--- 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
index 78f41468ead..99876d79ab0 100644
--- 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
index 25934ca25ed..253c5e0ed62 100644
--- 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
index 184712686a9..f8ca3ed15c9 100644
--- 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
index 50282591282..1163e1538f0 100644
--- 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>