[EuiComboBox] Update to dogfood EuiTextTruncate

package.json

@@ -212,6 +212,7 @@
     "html-webpack-plugin": "^5.5.0",
     "inquirer": "^9.1.4",
     "jest": "^24.1.0",
+    "jest-canvas-mock": "^2.5.2",
     "jest-cli": "^24.1.0",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",

src-docs/src/views/combo_box/combo_box.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { EuiComboBox } from '../../../../src/components';
+import { EuiComboBox, EuiSwitch } from '../../../../src/components';
 import { DisplayToggles } from '../form_controls/display_toggles';
 
 const optionsStatic = [
@@ -40,6 +40,7 @@ const optionsStatic = [
 ];
 export default () => {
   const [options, setOptions] = useState(optionsStatic);
+  const [canTruncate, setCanTruncate] = useState(false);
   const [selectedOptions, setSelected] = useState([options[2], options[4]]);
 
   const onChange = (selectedOptions) => {
@@ -72,7 +73,19 @@ export default () => {
 
   return (
     /* DisplayToggles wrapper for Docs only */
-    <DisplayToggles canDisabled={false} canReadOnly={false} canIsDisabled>
+    <DisplayToggles
+      canDisabled={false}
+      canReadOnly={false}
+      canIsDisabled
+      extras={[
+        <EuiSwitch
+          compressed
+          label={'middle truncation'}
+          checked={canTruncate}
+          onChange={(e) => setCanTruncate(e.target.checked)}
+        />,
+      ]}
+    >
       <EuiComboBox
         aria-label="Accessible screen reader label"
         placeholder="Select or create options"
@@ -83,6 +96,7 @@ export default () => {
         isClearable={true}
         data-test-subj="demoComboBox"
         autoFocus
+        truncation={canTruncate ? 'middle' : undefined}
       />
     </DisplayToggles>
   );

src/components/combo_box/__snapshots__/combo_box.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`EuiComboBox is rendered 1`] = `
 <div
   class="euiComboBox testClass1 testClass2 emotion-euiTestCss"
   data-test-subj="test subject string"
+  truncation="end"
 >
   <div
     class="euiFormControlLayout"
@@ -64,6 +65,7 @@ exports[`props aria-label attribute is rendered 1`] = `
   className="euiComboBox"
   onBlur={[Function]}
   onKeyDown={[Function]}
+  truncation="end"
 >
   <EuiComboBoxInput
     aria-label="Test label"
@@ -99,6 +101,7 @@ exports[`props aria-labelledby attribute is rendered 1`] = `
   className="euiComboBox"
   onBlur={[Function]}
   onKeyDown={[Function]}
+  truncation="end"
 >
   <EuiComboBoxInput
     aria-labelledby="test-heading-id"
@@ -134,6 +137,7 @@ exports[`props autoFocus is rendered 1`] = `
   className="euiComboBox"
   onBlur={[Function]}
   onKeyDown={[Function]}
+  truncation="end"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -177,6 +181,7 @@ exports[`props custom ID is rendered 1`] = `
   className="euiComboBox"
   onBlur={[Function]}
   onKeyDown={[Function]}
+  truncation="end"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -220,6 +225,7 @@ exports[`props delimiter is rendered 1`] = `
   className="euiComboBox"
   onBlur={[Function]}
   onKeyDown={[Function]}
+  truncation="end"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -263,6 +269,7 @@ exports[`props full width is rendered 1`] = `
   className="euiComboBox euiComboBox--fullWidth"
   onBlur={[Function]}
   onKeyDown={[Function]}
+  truncation="end"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -303,6 +310,7 @@ exports[`props isClearable=false disallows user from clearing input when no opti
   className="euiComboBox"
   onBlur={[Function]}
   onKeyDown={[Function]}
+  truncation="end"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -336,6 +344,7 @@ exports[`props isClearable=false disallows user from clearing input when options
   className="euiComboBox"
   onBlur={[Function]}
   onKeyDown={[Function]}
+  truncation="end"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -378,6 +387,7 @@ exports[`props isDisabled is rendered 1`] = `
   className="euiComboBox euiComboBox-isDisabled"
   onBlur={[Function]}
   onKeyDown={[Function]}
+  truncation="end"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -611,6 +621,7 @@ exports[`props options list is rendered 1`] = `
 <div
   class="euiComboBox euiComboBox-isOpen"
   data-test-subj="alsoGetsAppliedToOptionsList"
+  truncation="end"
 >
   <div
     class="euiFormControlLayout"
@@ -668,6 +679,7 @@ exports[`props options list is rendered 1`] = `
     data-popover-panel="true"
     data-test-subj="comboBoxOptionsList alsoGetsAppliedToOptionsList-optionsList"
     style="z-index: 100;"
+    truncation="end"
   >
     <div
       class="euiComboBoxOptionsList__rowWrap"
@@ -702,7 +714,7 @@ exports[`props options list is rendered 1`] = `
                   class="euiComboBoxOption__contentWrapper"
                 >
                   <span
-                    class="euiComboBoxOption__content"
+                    class="euiComboBoxOption__content euiComboBoxOption-truncationEnd"
                   >
                     Titan
                   </span>
@@ -729,7 +741,7 @@ exports[`props options list is rendered 1`] = `
                   class="euiComboBoxOption__contentWrapper"
                 >
                   <span
-                    class="euiComboBoxOption__content"
+                    class="euiComboBoxOption__content euiComboBoxOption-truncationEnd"
                   >
                     Enceladus
                   </span>
@@ -756,7 +768,7 @@ exports[`props options list is rendered 1`] = `
                   class="euiComboBoxOption__contentWrapper"
                 >
                   <span
-                    class="euiComboBoxOption__content"
+                    class="euiComboBoxOption__content euiComboBoxOption-truncationEnd"
                   >
                     Mimas
                   </span>
@@ -783,7 +795,7 @@ exports[`props options list is rendered 1`] = `
                   class="euiComboBoxOption__contentWrapper"
                 >
                   <span
-                    class="euiComboBoxOption__content"
+                    class="euiComboBoxOption__content euiComboBoxOption-truncationEnd"
                   >
                     Dione
                   </span>
@@ -810,7 +822,7 @@ exports[`props options list is rendered 1`] = `
                   class="euiComboBoxOption__contentWrapper"
                 >
                   <span
-                    class="euiComboBoxOption__content"
+                    class="euiComboBoxOption__content euiComboBoxOption-truncationEnd"
                   >
                     Iapetus
                   </span>
@@ -837,7 +849,7 @@ exports[`props options list is rendered 1`] = `
                   class="euiComboBoxOption__contentWrapper"
                 >
                   <span
-                    class="euiComboBoxOption__content"
+                    class="euiComboBoxOption__content euiComboBoxOption-truncationEnd"
                   >
                     Phoebe
                   </span>
@@ -864,7 +876,7 @@ exports[`props options list is rendered 1`] = `
                   class="euiComboBoxOption__contentWrapper"
                 >
                   <span
-                    class="euiComboBoxOption__content"
+                    class="euiComboBoxOption__content euiComboBoxOption-truncationEnd"
                   >
                     Rhea
                   </span>
@@ -891,7 +903,7 @@ exports[`props options list is rendered 1`] = `
                   class="euiComboBoxOption__contentWrapper"
                 >
                   <span
-                    class="euiComboBoxOption__content"
+                    class="euiComboBoxOption__content euiComboBoxOption-truncationEnd"
                   >
                     Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
                   </span>
@@ -918,7 +930,7 @@ exports[`props options list is rendered 1`] = `
                   class="euiComboBoxOption__contentWrapper"
                 >
                   <span
-                    class="euiComboBoxOption__content"
+                    class="euiComboBoxOption__content euiComboBoxOption-truncationEnd"
                   >
                     Tethys
                   </span>
@@ -938,6 +950,7 @@ exports[`props selectedOptions are rendered 1`] = `
   className="euiComboBox"
   onBlur={[Function]}
   onKeyDown={[Function]}
+  truncation="end"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -981,6 +994,7 @@ exports[`props singleSelection is rendered 1`] = `
   className="euiComboBox"
   onBlur={[Function]}
   onKeyDown={[Function]}
+  truncation="end"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -1021,6 +1035,7 @@ exports[`props singleSelection prepend and append is rendered 1`] = `
   className="euiComboBox euiComboBox--prepended euiComboBox--appended euiComboBox-isOpen"
   onBlur={[Function]}
   onKeyDown={[Function]}
+  truncation="end"
 >
   <EuiComboBoxInput
     append="String"
@@ -1065,6 +1080,7 @@ exports[`props singleSelection selects existing option when opened 1`] = `
   className="euiComboBox euiComboBox-isOpen"
   onBlur={[Function]}
   onKeyDown={[Function]}
+  truncation="end"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}

src/components/combo_box/combo_box.tsx

@@ -43,6 +43,7 @@ import {
   EuiComboBoxOptionOption,
   EuiComboBoxOptionsListPosition,
   EuiComboBoxSingleSelectionShape,
+  EuiComboBoxTruncation,
 } from './types';
 import { EuiFilterSelectItemClass } from '../filter_group/filter_select_item';
 import AutosizeInput from 'react-input-autosize';
@@ -156,6 +157,10 @@ export interface _EuiComboBoxProps<T>
    * supplied by `aria-label` or from [EuiFormRow](/#/forms/form-layouts).
    */
   'aria-labelledby'?: string;
+  /**
+   * Controls the truncation of the label text.
+   */
+  truncation: EuiComboBoxTruncation;
 }
 
 /**
@@ -189,6 +194,7 @@ interface EuiComboBoxState<T> {
   matchingOptions: Array<EuiComboBoxOptionOption<T>>;
   searchValue: string;
   width: number;
+  font: string;
 }
 
 const initialSearchValue = '';
@@ -208,6 +214,7 @@ export class EuiComboBox<T> extends Component<
     prepend: undefined,
     append: undefined,
     sortMatchesBy: 'none' as const,
+    truncation: 'end',
   };
 
   state: EuiComboBoxState<T> = {
@@ -228,6 +235,7 @@ export class EuiComboBox<T> extends Component<
     }),
     searchValue: initialSearchValue,
     width: 0,
+    font: '',
   };
 
   _isMounted = false;
@@ -242,6 +250,7 @@ export class EuiComboBox<T> extends Component<
       const comboBoxBounds = this.comboBoxRefInstance.getBoundingClientRect();
       this.setState({
         width: comboBoxBounds.width,
+        font: this.getFont(),
       });
     }
   };
@@ -820,6 +829,22 @@ export class EuiComboBox<T> extends Component<
     return stateUpdate;
   }
 
+  getFont = () => {
+    if (this.comboBoxRefInstance) {
+      const css = window.getComputedStyle(this.comboBoxRefInstance);
+      return [
+        'font-style',
+        'font-variant',
+        'font-weight',
+        'font-size',
+        'font-family',
+      ]
+        .map((prop) => css.getPropertyValue(prop))
+        .join(' ');
+    }
+    return '';
+  };
+
   updateMatchingOptionsIfDifferent = (
     newMatchingOptions: Array<EuiComboBoxOptionOption<T>>
   ) => {
@@ -1007,6 +1032,8 @@ export class EuiComboBox<T> extends Component<
                   getSelectedOptionForSearchValue
                 }
                 listboxAriaLabel={listboxAriaLabel}
+                font={this.state.font}
+                truncation={this.props.truncation}
               />
             )}
           </EuiI18n>

src/components/combo_box/combo_box_options_list/_combo_box_option.scss

@@ -54,6 +54,12 @@
     margin-left: $euiSizeXS;
   }
 
+.euiComboBoxOption__content {
+  overflow: hidden;
+  white-space: nowrap;
+  flex: 1;
+  text-align: left;
+
   &__prepend {
     margin-right: $euiSizeS;
   }
@@ -69,4 +75,8 @@
       display: block;
     }
   }
-}
+
+  &.euiComboBoxOption-truncationEnd {
+    text-overflow: ellipsis;
+  }
+}