Removed descriptionDisplay and labelDisplay props from `EuiSugges…

…tItem`
elastic · May 4, 2022 · b6c7e2a · b6c7e2a
1 parent f36693b
commit b6c7e2a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 87 deletions.
diff --git a/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap b/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap
@@ -15,41 +15,14 @@ exports[`EuiSuggestItem is rendered 1`] = `
     />
   </span>
   <span
-    class="euiSuggestItem__label"
+    class="euiSuggestItem__label euiSuggestItem__label--width50"
     title="Test label"
   >
     Test label
   </span>
 </span>
 `;
 
-exports[`props descriptionDisplay as wrap is rendered 1`] = `
-<span
-  class="euiSuggestItem euiSuggestItem--truncate"
->
-  <span
-    class="euiSuggestItem__type euiSuggestItem__type--tint2"
-  >
-    <span
-      color="inherit"
-      data-euiicon-type="kqlValue"
-    />
-  </span>
-  <span
-    class="euiSuggestItem__label euiSuggestItem__label--width50"
-    title="This is the description"
-  >
-    This is the description
-  </span>
-  <span
-    class="euiSuggestItem__description euiSuggestItem__description--wrap"
-    title="This is the description"
-  >
-    This is the description
-  </span>
-</span>
-`;
-
 exports[`props item with no description has expanded label is rendered 1`] = `
 <span
   class="euiSuggestItem euiSuggestItem--truncate"
@@ -63,15 +36,15 @@ exports[`props item with no description has expanded label is rendered 1`] = `
     />
   </span>
   <span
-    class="euiSuggestItem__label"
+    class="euiSuggestItem__label euiSuggestItem__label--width50"
     title="Charles de Gaulle International Airport"
   >
     Charles de Gaulle International Airport
   </span>
 </span>
 `;
 
-exports[`props labelDisplay as expand is rendered 1`] = `
+exports[`props labelWidth is 30% is rendered 1`] = `
 <span
   class="euiSuggestItem euiSuggestItem--truncate"
 >
@@ -84,7 +57,7 @@ exports[`props labelDisplay as expand is rendered 1`] = `
     />
   </span>
   <span
-    class="euiSuggestItem__label"
+    class="euiSuggestItem__label euiSuggestItem__label--width30"
     title="This is the description"
   >
     This is the description
@@ -98,7 +71,7 @@ exports[`props labelDisplay as expand is rendered 1`] = `
 </span>
 `;
 
-exports[`props labelWidth is 30% is rendered 1`] = `
+exports[`props truncate is rendered 1`] = `
 <span
   class="euiSuggestItem euiSuggestItem--truncate"
 >
@@ -111,7 +84,7 @@ exports[`props labelWidth is 30% is rendered 1`] = `
     />
   </span>
   <span
-    class="euiSuggestItem__label euiSuggestItem__label--width30"
+    class="euiSuggestItem__label euiSuggestItem__label--width50"
     title="This is the description"
   >
     This is the description
@@ -125,9 +98,9 @@ exports[`props labelWidth is 30% is rendered 1`] = `
 </span>
 `;
 
-exports[`props truncate is rendered 1`] = `
+exports[`props truncate renders false 1`] = `
 <span
-  class="euiSuggestItem euiSuggestItem--truncate"
+  class="euiSuggestItem"
 >
   <span
     class="euiSuggestItem__type euiSuggestItem__type--tint2"
@@ -144,7 +117,7 @@ exports[`props truncate is rendered 1`] = `
     This is the description
   </span>
   <span
-    class="euiSuggestItem__description"
+    class="euiSuggestItem__description euiSuggestItem__description--wrap"
     title="This is the description"
   >
     This is the description

diff --git a/src/components/suggest/suggest_item.test.tsx b/src/components/suggest/suggest_item.test.tsx
@@ -34,56 +34,40 @@ describe('props', () => {
     description: 'This is the description',
   };
 
-  describe('labelDisplay as expand', () => {
-    test('is rendered', () => {
-      const component = render(
-        <EuiSuggestItem
-          type={sampleItem.type}
-          description={sampleItem.description}
-          label={sampleItem.description}
-          labelDisplay="expand"
-        />
-      );
-      expect(component).toMatchSnapshot();
-    });
-  });
-
-  describe('descriptionDisplay as wrap', () => {
+  describe('labelWidth is 30%', () => {
     test('is rendered', () => {
       const component = render(
         <EuiSuggestItem
           type={sampleItem.type}
           description={sampleItem.description}
           label={sampleItem.description}
-          descriptionDisplay="wrap"
+          labelWidth="30"
         />
       );
       expect(component).toMatchSnapshot();
     });
   });
 
-  describe('labelWidth is 30%', () => {
+  describe('truncate', () => {
     test('is rendered', () => {
       const component = render(
         <EuiSuggestItem
           type={sampleItem.type}
           description={sampleItem.description}
           label={sampleItem.description}
-          labelWidth="30"
+          truncate
         />
       );
       expect(component).toMatchSnapshot();
     });
-  });
 
-  describe('truncate', () => {
-    test('is rendered', () => {
+    test('renders false', () => {
       const component = render(
         <EuiSuggestItem
           type={sampleItem.type}
           description={sampleItem.description}
           label={sampleItem.description}
-          truncate
+          truncate={false}
         />
       );
       expect(component).toMatchSnapshot();

diff --git a/src/components/suggest/suggest_item.tsx b/src/components/suggest/suggest_item.tsx
@@ -48,20 +48,6 @@ export interface _EuiSuggestItemPropsBase {
    * Truncates both label and description.
    */
   truncate?: boolean;
-
-  /**
-   * **DEPRECATED** Use `truncate` instead to specify truncation for both label and description.
-   *
-   * _Set the way in which 'description' is displayed, defaults to 'truncate'._
-   */
-  descriptionDisplay?: 'truncate' | 'wrap';
-
-  /**
-   * **DEPRECATED** Use `labelWidth` instead to specify a specific width.
-   *
-   * _Label display is 'fixed' by default. Label will increase its width beyond 50% if needed with 'expand'._
-   */
-  labelDisplay?: keyof typeof labelDisplayToClassMap;
 }
 
 type PropsForSpan = Omit<HTMLAttributes<HTMLSpanElement>, 'onClick'>;
@@ -125,22 +111,13 @@ const colorToClassNameMap: ColorToClassMap = {
 
 export const COLORS = keysOf(colorToClassNameMap);
 
-const labelDisplayToClassMap = {
-  fixed: 'euiSuggestItem__labelDisplay--fixed',
-  expand: 'euiSuggestItem__labelDisplay--expand',
-};
-
-export const DISPLAYS = keysOf(labelDisplayToClassMap);
-
 export const EuiSuggestItem: FunctionComponent<EuiSuggestItemProps> = ({
   className,
   label,
   type,
-  labelDisplay: _labelDisplay = 'fixed',
   labelWidth = '50',
   description,
   truncate = true,
-  descriptionDisplay = 'truncate',
   onClick,
   ...rest
 }) => {
@@ -152,14 +129,13 @@ export const EuiSuggestItem: FunctionComponent<EuiSuggestItemProps> = ({
     className
   );
 
-  const labelDisplay = !description ? 'expand' : _labelDisplay;
-
-  const labelClassNames = classNames('euiSuggestItem__label', {
-    [`euiSuggestItem__label--width${labelWidth}`]: labelDisplay === 'fixed',
-  });
+  const labelClassNames = classNames(
+    'euiSuggestItem__label',
+    `euiSuggestItem__label--width${labelWidth}`
+  );
 
   const descriptionClassNames = classNames('euiSuggestItem__description', {
-    'euiSuggestItem__description--wrap': descriptionDisplay === 'wrap',
+    'euiSuggestItem__description--wrap': !truncate,
   });
 
   let typeColorClass = '';

diff --git a/upcoming_changelogs/5868.md b/upcoming_changelogs/5868.md
@@ -7,3 +7,4 @@
 - Removed `isSelected` and `isComplete` props from `EuiHorizontalStep` - use `status` prop instead
 - Removed `isHollow` prop from `EuiStep` - this visual appearance is no longer used in Amsterdam
 - Removed condensed `display` prop from `EuiTabs` & `EuiTabbedContent` - this visual appearance is no longer used in Amsterdam
+- Removed `descriptionDisplay` and `labelDisplay` props from `EuiSuggestItem` - use `truncate` and `labelWidth` instead, respectively