[EuiComboBox] Update to dogfood EuiTextTruncate (#7028)

Co-authored-by: Cee Chen <[email protected]>

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

@@ -9,6 +9,7 @@ import {
   EuiCode,
   EuiComboBox,
   EuiText,
+  EuiTextTruncate,
   EuiCallOut,
 } from '../../../../src/components';
 
@@ -82,6 +83,21 @@ const renderOptionSnippet = `<EuiComboBox
   renderOption={renderOption}
 />`;
 
+import Truncation from './truncation';
+const truncationSource = require('!!raw-loader!./truncation');
+const truncationSnippet = `<EuiComboBox
+  aria-label="Accessible screen reader label"
+  placeholder="Select or create options"
+  options={options}
+  selectedOptions={selectedOptions}
+  onChange={onChange}
+  onCreateOption={onCreateOption}
+  truncationProps={{
+    truncation: 'start',
+    truncationOffset: 5,
+  }}
+/>`;
+
 import Groups from './groups';
 const groupsSource = require('!!raw-loader!./groups');
 const groupsSnippet = `<EuiComboBox
@@ -445,6 +461,31 @@ export const ComboBoxExample = {
         },
       ],
     },
+    {
+      title: 'Truncation',
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: truncationSource,
+        },
+      ],
+      text: (
+        <p>
+          By default, <strong>EuiComboBox</strong> truncates long option text at
+          the end of the string. You can use <EuiCode>truncationProps</EuiCode>{' '}
+          and almost any prop that{' '}
+          <Link to="/utilities/text-truncate">
+            <strong>EuiTextTruncate</strong>
+          </Link>{' '}
+          accepts to configure this behavior. This can be configured at the{' '}
+          <strong>EuiComboBox</strong> level, as well as by each individual
+          option.
+        </p>
+      ),
+      props: { EuiComboBox, EuiComboBoxOptionOption, EuiTextTruncate },
+      snippet: truncationSnippet,
+      demo: <Truncation />,
+    },
     {
       title: 'Groups',
       source: [

src-docs/src/views/combo_box/truncation.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+
+import {
+  useGeneratedHtmlId,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonGroup,
+  EuiFieldNumber,
+  EuiTextTruncationTypes,
+  EuiTitle,
+  EuiSpacer,
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+} from '../../../../src';
+
+const options: EuiComboBoxOptionOption[] = [
+  {
+    label:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, lorem ispum',
+  },
+  {
+    label:
+      'Phasellus enim turpis, molestie ut nisi ut, suscipit tristique libero',
+  },
+  {
+    label: 'Ut sagittis interdum nisi, pellentesque laoreet arcu blandit a',
+  },
+  {
+    label: 'Fusce sed viverra nisl',
+  },
+  {
+    label: 'Donec maximus est justo, eget semper lorem lacinia nec',
+  },
+  {
+    label: 'Vestibulum lobortis ipsum sit amet tellus scelerisque vestibulum',
+  },
+  {
+    label: 'This combobox option has an individual `truncationProps` override',
+    // Option `truncationProps` will override EuiComboBox `truncationProps`
+    truncationProps: {
+      truncation: 'start',
+      truncationOffset: 5,
+    },
+  },
+];
+
+export default () => {
+  const [selectedOptions, setSelected] = useState<EuiComboBoxOptionOption[]>(
+    []
+  );
+  const onChange = (selectedOptions: EuiComboBoxOptionOption[]) => {
+    setSelected(selectedOptions);
+  };
+
+  const [truncation, setTruncation] = useState<EuiTextTruncationTypes>('end');
+  const [truncationOffset, setTruncationOffset] = useState(0);
+  const offsetId = useGeneratedHtmlId();
+
+  return (
+    <>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="xxs">
+            <h3>Truncation type</h3>
+          </EuiTitle>
+          <EuiSpacer size="xs" />
+          <EuiButtonGroup
+            legend="Truncation type"
+            idSelected={truncation}
+            onChange={(id) => setTruncation(id as EuiTextTruncationTypes)}
+            options={[
+              { id: 'start', label: 'start ' },
+              { id: 'end', label: 'end' },
+              { id: 'startEnd', label: 'startEnd' },
+              { id: 'middle', label: 'middle' },
+            ]}
+            color="primary"
+          />
+        </EuiFlexItem>
+        {(truncation === 'start' || truncation === 'end') && (
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="xxs">
+              <h3 id={offsetId}>Truncation offset</h3>
+            </EuiTitle>
+            <EuiSpacer size="xs" />
+            <EuiFieldNumber
+              aria-labelledby={offsetId}
+              value={truncationOffset}
+              onChange={(e) => setTruncationOffset(Number(e.target.value))}
+              compressed
+            />
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <EuiComboBox
+        placeholder="Select options"
+        options={options}
+        selectedOptions={selectedOptions}
+        onChange={onChange}
+        isClearable={true}
+        truncationProps={{
+          truncation,
+          truncationOffset,
+        }}
+      />
+    </>
+  );
+};