[EuiSuggest] Fix labelDisplay and add labelWidth and descriptionDispl…

…ay props (elastic#4180)
andreadelrio · Nov 4, 2020 · 4d37dde · 4d37dde
1 parent 90f0d8b
commit 4d37dde
Show file tree

Hide file tree

Showing 8 changed files with 214 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `30.1.1`.
+- Added `labelWidth` and `descriptionDisplay` props to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180))
+
+**Bug fixes**
+
+- Fixed issue with `labelDisplay` not being passed to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180))
 
 ## [`30.1.1`](https://github.com/elastic/eui/tree/v30.1.1)
 

diff --git a/src-docs/src/views/suggest/suggest_example.js b/src-docs/src/views/suggest/suggest_example.js
@@ -35,6 +35,18 @@ const suggestItemSnippet = [
   label={sampleItem.label}
   description={sampleItem.description}
   labelDisplay="expand"
+/>`,
+  `<EuiSuggestItem
+  type={sampleItem.type}
+  label={sampleItem.label}
+  description={sampleItem.description}
+  labelWidth="30"
+/>`,
+  `<EuiSuggestItem
+  type={sampleItem.type}
+  label={sampleItem.label}
+  description={sampleItem.description}
+  descriptionDisplay="wrap"
 />`,
 ];
 
@@ -106,7 +118,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>
       ),

diff --git a/src-docs/src/views/suggest/suggest_item.js b/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>
 );
diff --git a/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap b/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap
@@ -14,17 +14,14 @@ exports[`EuiSuggestItem is rendered 1`] = `
     />
   </span>
   <span
-    class="euiSuggestItem__label euiSuggestItem__labelDisplay--fixed euiSuggestItem__labelDisplay--expand"
+    class="euiSuggestItem__label euiSuggestItem__labelDisplay--expand euiSuggestItem__label--width50"
   >
     Test label
   </span>
-  <span
-    class="euiSuggestItem__description"
-  />
 </div>
 `;
 
-exports[`props item with no description has expanded label is rendered 1`] = `
+exports[`props descriptionDisplay as wrap is rendered 1`] = `
 <div
   class="euiSuggestItem"
 >
@@ -36,13 +33,34 @@ 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__label--width50"
+  >
+    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"
+>
+  <span
+    class="euiSuggestItem__type euiSuggestItem__type--tint2"
+  >
+    <span
+      data-euiicon-type="kqlValue"
+    />
+  </span>
   <span
-    class="euiSuggestItem__description"
-  />
+    class="euiSuggestItem__label euiSuggestItem__labelDisplay--expand euiSuggestItem__label--width50"
+  >
+    Charles de Gaulle International Airport
+  </span>
 </div>
 `;
 
@@ -63,7 +81,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__label--width30"
+  >
+    This is the description
+  </span>
+  <span
+    class="euiSuggestItem__description euiSuggestItem__description--truncate"
   >
     This is the description
   </span>

diff --git a/src/components/suggest/_suggest_item.scss b/src/components/suggest/_suggest_item.scss
@@ -50,30 +50,45 @@
   }
 
   .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__label--width#{$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;
+      line-height: $euiSizeM + 2px;
+    }
+
+    &.euiSuggestItem__description--truncate {
+      @include euiTextTruncate;
+      line-height: $euiLineHeight;
+    }
 
     &:empty {
       flex-grow: 0;

diff --git a/src/components/suggest/suggest.tsx b/src/components/suggest/suggest.tsx
@@ -54,15 +54,13 @@ export const EuiSuggest: FunctionComponent<EuiSuggestProps> = (
     onInputChange ? onInputChange(e.target) : null;
   };
 
-  const suggestionList = suggestions.map((item: EuiSuggestItemProps, index) => (
-    <EuiSuggestItem
-      type={item.type}
-      key={index}
-      label={item.label}
-      onClick={onItemClick ? () => onItemClick(item) : undefined}
-      description={item.description}
-    />
-  ));
+  const suggestionList = suggestions.map((item: EuiSuggestItemProps, index) => {
+    const props = { ...item };
+    if (onItemClick) {
+      props.onClick = () => onItemClick(item);
+    }
+    return <EuiSuggestItem key={index} {...props} />;
+  });
 
   const suggestInput = (
     <EuiSuggestInput

diff --git a/src/components/suggest/suggest_item.test.tsx b/src/components/suggest/suggest_item.test.tsx
@@ -59,10 +59,38 @@ 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(
-        <EuiSuggestItem label={sampleItem.description} type={sampleItem.type} />
+        <EuiSuggestItem label={sampleItem.label} type={sampleItem.type} />
       );
       expect(component).toMatchSnapshot();
     });