[EuiSuggest] Fix labelDisplay and add labelWidth and descriptionDisplay props

CHANGELOG.md

@@ -3,10 +3,12 @@
 - Improved `EuiButtonGroup` focus, hover, selected and disabled states ([#4142](https://github.com/elastic/eui/pull/4142))
 - Added `display` prop to `EuiToolTip` for common display block needs ([#4148](https://github.com/elastic/eui/pull/4148))
 - Added support for more colors in `EuiProgress` such as `vis0` through `vis9`, `warning`, `success`  and custom colors ([#4130](https://github.com/elastic/eui/pull/4130))
+- Added `labelWidth` and `descriptionDisplay` props to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180))
 
 **Bug fixes**
 
 - Fixed issue with duplicate checkmarks in `EuiComboBox` ([#4162](https://github.com/elastic/eui/pull/4162))
+- Fixed issue with `labelDisplay` not being passed to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180))
 
 ## [`30.0.0`](https://github.com/elastic/eui/tree/v30.0.0)
 

src-docs/src/views/suggest/suggest_example.js

@@ -106,7 +106,11 @@ export const SuggestExample = {
             <strong>EuiSuggestItem</strong> is a list item component to display
             suggestions when typing queries in <strong>EuiSuggest</strong>. Use{' '}
             <EuiCode>labelDisplay</EuiCode> to set whether the{' '}
-            <EuiCode>label</EuiCode> has a fixed width or not.
+            <EuiCode>label</EuiCode> has a fixed width or not. By default, fixed
+            labels will have a width of 50%, you can adjust this by setting{' '}
+            <EuiCode>labelWidth</EuiCode>. Use{' '}
+            <EuiCode>descriptionDisplay</EuiCode> to set whether the{' '}
+            <EuiCode>description</EuiCode> truncates or wraps.
           </p>
         </div>
       ),

src-docs/src/views/suggest/suggest_item.js

@@ -4,6 +4,9 @@ import { EuiSuggestItem, EuiSpacer } from '../../../../src/components';
 
 const shortDescription = 'This is the description';
 
+const longDescription =
+  'This is a long description. Fusce euismod dui eu metus sagittis molestie.';
+
 const sampleItems = [
   {
     type: { iconType: 'kqlField', color: 'tint5' },
@@ -35,13 +38,34 @@ const sampleItems = [
   },
 ];
 
+const sampleItems2 = [
+  {
+    type: { iconType: 'kqlField', color: 'tint5' },
+    label: 'Field sample with label at 30%',
+    labelWidth: 30,
+    description: shortDescription,
+  },
+  {
+    type: { iconType: 'kqlField', color: 'tint5' },
+    label: 'Field sample with label at 50%',
+    labelWidth: 50,
+    description: shortDescription,
+  },
+  {
+    type: { iconType: 'kqlField', color: 'tint5' },
+    label: 'Field sample with label at 80%',
+    labelWidth: 80,
+    description: shortDescription,
+  },
+];
+
 const typeObj = { iconType: 'kqlValue', color: 'tint0' };
 
 const longLabel =
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar.';
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam.';
 
 export default () => (
-  <div>
+  <div style={{ maxWidth: '800px' }}>
     {sampleItems.map((item, index) => (
       <EuiSuggestItem
         type={item.type}
@@ -67,5 +91,27 @@ export default () => (
       type={{ iconType: 'search', color: 'tint10' }}
       label="Items with no description will expand their label"
     />
+    <EuiSpacer size="m" />
+    {sampleItems2.map((item, index) => (
+      <EuiSuggestItem
+        type={item.type}
+        key={index}
+        labelWidth={item.labelWidth}
+        label={item.label}
+        description={item.description}
+      />
+    ))}
+    <EuiSpacer size="m" />
+    <EuiSuggestItem
+      type={typeObj}
+      label="Item with a description that truncates"
+      description={longDescription}
+    />
+    <EuiSuggestItem
+      type={typeObj}
+      label="Item with a description that wraps"
+      description={longDescription}
+      descriptionDisplay="wrap"
+    />
   </div>
 );

src/components/suggest/__snapshots__/suggest_item.test.tsx.snap

@@ -14,16 +14,40 @@ exports[`EuiSuggestItem is rendered 1`] = `
     />
   </span>
   <span
-    class="euiSuggestItem__label euiSuggestItem__labelDisplay--fixed euiSuggestItem__labelDisplay--expand"
+    class="euiSuggestItem__label euiSuggestItem__labelDisplay--fixed euiSuggestItem__labelDisplay--expand euiSuggestItem__labelWidth50"
   >
     Test label
   </span>
   <span
-    class="euiSuggestItem__description"
+    class="euiSuggestItem__description euiSuggestItem__description--truncate"
   />
 </div>
 `;
 
+exports[`props descriptionDisplay as wrap is rendered 1`] = `
+<div
+  class="euiSuggestItem"
+>
+  <span
+    class="euiSuggestItem__type euiSuggestItem__type--tint2"
+  >
+    <span
+      data-euiicon-type="kqlValue"
+    />
+  </span>
+  <span
+    class="euiSuggestItem__label euiSuggestItem__labelDisplay--fixed euiSuggestItem__labelWidth50"
+  >
+    This is the description
+  </span>
+  <span
+    class="euiSuggestItem__description euiSuggestItem__description--wrap"
+  >
+    This is the description
+  </span>
+</div>
+`;
+
 exports[`props item with no description has expanded label is rendered 1`] = `
 <div
   class="euiSuggestItem"
@@ -36,12 +60,12 @@ exports[`props item with no description has expanded label is rendered 1`] = `
     />
   </span>
   <span
-    class="euiSuggestItem__label euiSuggestItem__labelDisplay--fixed euiSuggestItem__labelDisplay--expand"
+    class="euiSuggestItem__label euiSuggestItem__labelDisplay--fixed euiSuggestItem__labelDisplay--expand euiSuggestItem__labelWidth50"
   >
     This is the description
   </span>
   <span
-    class="euiSuggestItem__description"
+    class="euiSuggestItem__description euiSuggestItem__description--truncate"
   />
 </div>
 `;
@@ -63,7 +87,31 @@ exports[`props labelDisplay as expand is rendered 1`] = `
     This is the description
   </span>
   <span
-    class="euiSuggestItem__description"
+    class="euiSuggestItem__description euiSuggestItem__description--truncate"
+  >
+    This is the description
+  </span>
+</div>
+`;
+
+exports[`props labelWidth is 30% is rendered 1`] = `
+<div
+  class="euiSuggestItem"
+>
+  <span
+    class="euiSuggestItem__type euiSuggestItem__type--tint2"
+  >
+    <span
+      data-euiicon-type="kqlValue"
+    />
+  </span>
+  <span
+    class="euiSuggestItem__label euiSuggestItem__labelDisplay--fixed euiSuggestItem__labelWidth30"
+  >
+    This is the description
+  </span>
+  <span
+    class="euiSuggestItem__description euiSuggestItem__description--truncate"
   >
     This is the description
   </span>

src/components/suggest/_suggest_item.scss

@@ -50,30 +50,44 @@
   }
 
   .euiSuggestItem__label {
-    flex-basis: 50%;
-    min-width: 50%;
+    @include euiTextTruncate;
     font-family: $euiCodeFontFamily;
     overflow: hidden;
     text-overflow: ellipsis;
     padding: $euiSizeXS $euiSizeS;
     color: $euiTextColor;
+    display: block;
+
+    // Sets labelWidth from 20% to 90% in increments of 10%
+    @for $i from 20 through 90 {
+      &.euiSuggestItem__labelWidth#{$i} {
+        flex-basis: $i * 1%;
+        min-width: $i * 1%;
+        $i: $i + 10;
+      }
+    }
 
     &.euiSuggestItem__labelDisplay--expand {
       flex-basis: auto;
       flex-shrink: 1;
     }
   }
 
-  .euiSuggestItem__description,
-  .euiSuggestItem__label {
-    @include euiTextTruncate;
-    display: block;
-  }
-
   .euiSuggestItem__description {
     color: $euiColorDarkShade;
     flex-basis: auto;
     padding-top: $euiSizeXS * .5;
+    display: block;
+
+    &.euiSuggestItem__description--wrap {
+      @include euiTextBreakWord;
+      white-space: normal;
+    }
+
+    &.euiSuggestItem__description--truncate {
+      @include euiTextTruncate;
+      line-height: $euiLineHeight;
+    }
 
     &:empty {
       flex-grow: 0;

src/components/suggest/suggest.tsx

@@ -59,6 +59,9 @@ export const EuiSuggest: FunctionComponent<EuiSuggestProps> = (
       type={item.type}
       key={index}
       label={item.label}
+      labelDisplay={item.labelDisplay}
+      descriptionDisplay={item.descriptionDisplay}
+      labelWidth={item.labelWidth}
       onClick={onItemClick ? () => onItemClick(item) : undefined}
       description={item.description}
     />

src/components/suggest/suggest_item.test.tsx

@@ -59,6 +59,34 @@ describe('props', () => {
     });
   });
 
+  describe('descriptionDisplay as wrap', () => {
+    test('is rendered', () => {
+      const component = render(
+        <EuiSuggestItem
+          type={sampleItem.type}
+          description={sampleItem.description}
+          label={sampleItem.description}
+          descriptionDisplay="wrap"
+        />
+      );
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  describe('labelWidth is 30%', () => {
+    test('is rendered', () => {
+      const component = render(
+        <EuiSuggestItem
+          type={sampleItem.type}
+          description={sampleItem.description}
+          label={sampleItem.description}
+          labelWidth="30"
+        />
+      );
+      expect(component).toMatchSnapshot();
+    });
+  });
+
   describe('item with no description has expanded label', () => {
     test('is rendered', () => {
       const component = render(

src/components/suggest/suggest_item.tsx

@@ -52,6 +52,16 @@ interface EuiSuggestItemPropsBase {
    * Label display is 'fixed' by default. Label will increase its width beyond 50% if needed with 'expand'.
    */
   labelDisplay?: keyof typeof labelDisplayToClassMap;
+
+  /**
+   * With of 'label' when 'labelDisplay' is set to 'fixed'. Defaults to 50. Any value from 20 to 90 with increases of 10.
+   */
+  labelWidth?: LabelWidthSize;
+
+  /**
+   * Set the way in which 'description' is displayed, defaults to 'truncate'.
+   */
+  descriptionDisplay?: keyof typeof descriptionDisplayToClassMap;
 }
 
 type PropsForDiv = Omit<HTMLAttributes<HTMLDivElement>, 'onClick'>;
@@ -81,6 +91,16 @@ interface ColorToClassMap {
   [key: string]: string;
 }
 
+export type LabelWidthSize =
+  | '20'
+  | '30'
+  | '40'
+  | '50'
+  | '60'
+  | '70'
+  | '80'
+  | '90';
+
 const colorToClassNameMap: ColorToClassMap = {
   tint0: 'euiSuggestItem__type--tint0',
   tint1: 'euiSuggestItem__type--tint1',
@@ -102,14 +122,21 @@ const labelDisplayToClassMap = {
   expand: 'euiSuggestItem__labelDisplay--expand',
 };
 
+const descriptionDisplayToClassMap = {
+  truncate: 'euiSuggestItem__description--truncate',
+  wrap: 'euiSuggestItem__description--wrap',
+};
+
 export const DISPLAYS = keysOf(labelDisplayToClassMap);
 
 export const EuiSuggestItem: FunctionComponent<EuiSuggestItemProps> = ({
   className,
   label,
   type,
   labelDisplay = 'fixed',
+  labelWidth = '50',
   description,
+  descriptionDisplay = 'truncate',
   onClick,
   ...rest
 }) => {
@@ -123,14 +150,20 @@ export const EuiSuggestItem: FunctionComponent<EuiSuggestItemProps> = ({
 
   let colorClass = '';
 
-  const labelDisplayClass = classNames(
+  const labelClassNames = classNames(
     'euiSuggestItem__label',
     labelDisplayToClassMap[labelDisplay],
     {
       'euiSuggestItem__labelDisplay--expand': !description,
+      [`euiSuggestItem__labelWidth${labelWidth}`]: labelDisplay === 'fixed',
     }
   );
 
+  const descriptionClassNames = classNames(
+    'euiSuggestItem__description',
+    descriptionDisplayToClassMap[descriptionDisplay]
+  );
+
   if (type && type.color) {
     if (COLORS.indexOf(type.color as string) > -1) {
       colorClass = colorToClassNameMap[type.color];
@@ -142,8 +175,8 @@ export const EuiSuggestItem: FunctionComponent<EuiSuggestItemProps> = ({
       <span className={`euiSuggestItem__type ${colorClass}`}>
         <EuiIcon type={type.iconType} />
       </span>
-      <span className={labelDisplayClass}>{label}</span>
-      <span className="euiSuggestItem__description">{description}</span>
+      <span className={labelClassNames}>{label}</span>
+      <span className={descriptionClassNames}>{description}</span>
     </React.Fragment>
   );