EuiSuggestItems tests pass

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

@@ -77,7 +77,7 @@ export const SuggestItemExample = {
       ],
       text: (
         <p>
-          By default <EuiCode>EuiSuggestItem</EuiCode>'s{' '}
+          By default <EuiCode>EuiSuggestItem</EuiCode>&apos;s{' '}
           <EuiCode>label</EuiCode> will have a fixed width and use ellipsis
           whenever its content is too long. It is possible to show the full text
           by setting <EuiCode>layout</EuiCode> to <EuiCode>inline</EuiCode>.

src/components/suggest_item/__snapshots__/suggest_item.test.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiSuggestItem is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiSuggestItem testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <span
+    class="euiSuggestItem__type euiSuggestItem__type--primary"
+  >
+    <svg
+      class="euiIcon euiIcon--medium euiIcon--primary euiIcon-isLoading"
+      focusable="false"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    />
+  </span>
+  <span
+    class="euiSuggestItem__label euiSuggestItem__layout--set"
+  />
+  <span
+    class="euiSuggestItem__description"
+  />
+</div>
+`;

src/components/suggest_item/_suggest_item.scss

@@ -24,7 +24,7 @@ $buttonTypes: (
   font-size: $euiFontSizeXS;
   // sass-lint:disable-block no-trailing-whitespace
   white-space: nowrap;
-  
+
   @each $name, $color in $buttonTypes {
     .euiSuggestItem__type--#{$name} {
       background-color: tintOrShade($color, 90%, 50%);
@@ -69,7 +69,8 @@ $buttonTypes: (
     }
   }
 
-  .euiSuggestItem__description, .euiSuggestItem__label {
+  .euiSuggestItem__description,
+  .euiSuggestItem__label {
     overflow: hidden;
     text-overflow: ellipsis;
     display: block;

src/components/suggest_item/suggest_item.js

@@ -1,9 +1,7 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { EuiIcon, IconPropType, IconColor, IconType } from '../icon';
-import { TypePredicateKind } from 'typescript';
+import { EuiIcon, IconPropType } from '../icon';
 
 const colorToClassNameMap = {
   primary: 'euiSuggestItem__type--primary',
@@ -65,7 +63,10 @@ EuiSuggestItem.propTypes = {
   /**
    * Takes 'icon' for EuiIcon and 'color'. 'color' can be either our palette colors (primary, secondary, etc) or a hex value.
    */
-  type: PropTypes.object,
+  type: PropTypes.shape({
+    icon: IconPropType,
+    color: PropTypes.oneOfType([PropTypes.oneOf(COLORS), PropTypes.string]),
+  }).isRequired,
   /**
    * Label for suggestion
    */

src/components/suggest_item/suggest_item.test.js

@@ -4,9 +4,14 @@ import { requiredProps } from '../../test/required_props';
 
 import { EuiSuggestItem } from './suggest_item';
 
+const TYPE = {
+  icon: 'search',
+  color: 'primary',
+};
+
 describe('EuiSuggestItem', () => {
   test('is rendered', () => {
-    const component = render(<EuiSuggestItem {...requiredProps} />);
+    const component = render(<EuiSuggestItem {...requiredProps} type={TYPE} />);
 
     expect(component).toMatchSnapshot();
   });