From 64b2e95fa9970b92ffb9735007c90c05b52454b6 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Fri, 21 Jun 2019 10:18:25 -0700
Subject: [PATCH 01/25] basic version works

---
 src-docs/src/routes.js                        |  3 +
 .../src/views/suggest_item/suggest_item.js    | 50 ++++++++++++
 .../suggest_item/suggest_item_example.js      | 38 +++++++++
 src/components/index.js                       |  2 +
 src/components/index.scss                     |  1 +
 src/components/suggest_item/_index.scss       |  1 +
 .../suggest_item/_suggest_item.scss           | 78 +++++++++++++++++++
 src/components/suggest_item/index.js          |  1 +
 src/components/suggest_item/suggest_item.js   | 67 ++++++++++++++++
 .../suggest_item/suggest_item.test.js         | 13 ++++
 10 files changed, 254 insertions(+)
 create mode 100644 src-docs/src/views/suggest_item/suggest_item.js
 create mode 100644 src-docs/src/views/suggest_item/suggest_item_example.js
 create mode 100644 src/components/suggest_item/_index.scss
 create mode 100644 src/components/suggest_item/_suggest_item.scss
 create mode 100644 src/components/suggest_item/index.js
 create mode 100644 src/components/suggest_item/suggest_item.js
 create mode 100644 src/components/suggest_item/suggest_item.test.js

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 81080050344..1fc6248671e 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -116,6 +116,8 @@ import { LinkExample } from './views/link/link_example';
 
 import { ListGroupExample } from './views/list_group/list_group_example';
 
+import { SuggestItemExample } from './views/suggest_item/suggest_item_example';
+
 import { LoadingExample } from './views/loading/loading_example';
 
 import { ModalExample } from './views/modal/modal_example';
@@ -319,6 +321,7 @@ const navigation = [
       IconExample,
       ImageExample,
       ListGroupExample,
+      SuggestItemExample,
       LoadingExample,
       ProgressExample,
       StatExample,
diff --git a/src-docs/src/views/suggest_item/suggest_item.js b/src-docs/src/views/suggest_item/suggest_item.js
new file mode 100644
index 00000000000..ef02bcc56fd
--- /dev/null
+++ b/src-docs/src/views/suggest_item/suggest_item.js
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { EuiSuggestItem } from '../../../../src/components/suggest_item';
+
+const shortDescription = 'This is the description';
+
+const sampleItems = [
+  {
+    type: { icon: 'kqlField', color: 'warning' },
+    label: 'Field sample',
+    description: shortDescription,
+  },
+  {
+    type: { icon: 'kqlValue', color: 'secondary' },
+    label: 'Value sample',
+    description: shortDescription,
+  },
+  {
+    type: { icon: 'kqlSelector', color: '#7800A6' },
+    label: 'Conjunction sample',
+    description: shortDescription,
+  },
+  {
+    type: { icon: 'kqlOperand', color: 'primary' },
+    label: 'Operator sample',
+    description: shortDescription,
+  },
+  {
+    type: { icon: 'search', color: 'dark' },
+    label: 'Recent search sample',
+    description: shortDescription,
+  },
+  {
+    type: { icon: 'save', color: '#DD0A73' },
+    label: 'Saved search sample',
+    description: shortDescription,
+  },
+];
+
+export default () => (
+  <div>
+    {sampleItems.map(item => (
+      <EuiSuggestItem
+        type={item.type}
+        label={item.label}
+        description={item.description}
+      />
+    ))}
+  </div>
+);
diff --git a/src-docs/src/views/suggest_item/suggest_item_example.js b/src-docs/src/views/suggest_item/suggest_item_example.js
new file mode 100644
index 00000000000..f87f8487b7b
--- /dev/null
+++ b/src-docs/src/views/suggest_item/suggest_item_example.js
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import { EuiCode, EuiSuggestItem } from '../../../../src/components';
+
+import SuggestItem from './suggest_item';
+const suggestItemSource = require('!!raw-loader!./suggest_item');
+const suggestItemHtml = renderToHtml(SuggestItem);
+
+export const SuggestItemExample = {
+  title: 'SuggestItem',
+  sections: [
+    {
+      title: 'SuggestItem',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: suggestItemSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: suggestItemHtml,
+        },
+      ],
+      text: (
+        <p>
+          Description needed: how to use the <EuiCode>EuiSuggestItem</EuiCode>{' '}
+          component.
+        </p>
+      ),
+      props: { EuiSuggestItem },
+      demo: <SuggestItem />,
+    },
+  ],
+};
diff --git a/src/components/index.js b/src/components/index.js
index f6008bc1596..c77188338bf 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -160,6 +160,8 @@ export { EuiLink } from './link';
 
 export { EuiListGroup, EuiListGroupItem } from './list_group';
 
+export { EuiSuggestItem } from './suggest_item';
+
 export {
   EUI_MODAL_CANCEL_BUTTON,
   EUI_MODAL_CONFIRM_BUTTON,
diff --git a/src/components/index.scss b/src/components/index.scss
index 9ea1003a31a..14df51c795c 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -35,6 +35,7 @@
 @import 'key_pad_menu/index';
 @import 'link/index';
 @import 'list_group/index';
+@import 'suggest_item/index';
 @import 'loading/index';
 @import 'modal/index';
 @import 'nav_drawer/index';
diff --git a/src/components/suggest_item/_index.scss b/src/components/suggest_item/_index.scss
new file mode 100644
index 00000000000..ce53d8187f7
--- /dev/null
+++ b/src/components/suggest_item/_index.scss
@@ -0,0 +1 @@
+@import 'suggest_item';
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
new file mode 100644
index 00000000000..6e766098e1c
--- /dev/null
+++ b/src/components/suggest_item/_suggest_item.scss
@@ -0,0 +1,78 @@
+@import '../loading/mixins';
+
+$buttonTypes: (
+  primary: $euiColorPrimary,
+  secondary: $euiColorSecondary,
+  warning: $euiColorWarning,
+  danger: $euiColorDanger,
+  ghost: $euiColorGhost, // Ghost is special, and does not care about theming.
+  dark: $euiColorMediumShade, // Reserved for special use cases
+);
+
+.customBackground {
+  width: 32px;
+  height: 32px;
+  position: absolute;
+  opacity: .2;
+}
+
+
+.euiSuggestItem {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  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%);
+      // color: makeHighContrastColor($color, tintOrShade($color, 90%, 50%));
+		}
+	}
+
+  .euiSuggestItem__label,
+  .euiSuggestItem__type,
+  .euiSuggestItem__description {
+    flex-grow: 1;
+    flex-basis: 0%;
+    display: flex;
+    flex-direction: column;
+	}
+
+
+  .euiSuggestItem__type {
+    flex-grow: 0;
+    flex-basis: auto;
+    width: $euiSizeXL;
+    height: $euiSizeXL;
+    text-align: center;
+    overflow: hidden;
+    padding: $euiSizeXS;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .euiSuggestItem__label {
+    flex-grow: 0; /* 2 */
+    flex-basis: auto; /* 2 */
+    font-family: $euiCodeFontFamily;
+    width: 250px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: $euiSizeXS $euiSizeS;
+    color: $euiTextColor;
+    // sass-lint:disable-line empty-line-between-blocks
+    &.longLabel {
+      width: auto;
+    }
+  }
+
+  .euiSuggestItem__description {
+    color: $euiColorDarkShade;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-left: $euiSizeXL;
+	}
+}
diff --git a/src/components/suggest_item/index.js b/src/components/suggest_item/index.js
new file mode 100644
index 00000000000..fde82176579
--- /dev/null
+++ b/src/components/suggest_item/index.js
@@ -0,0 +1 @@
+export { EuiSuggestItem } from './suggest_item';
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
new file mode 100644
index 00000000000..8610277a4f0
--- /dev/null
+++ b/src/components/suggest_item/suggest_item.js
@@ -0,0 +1,67 @@
+/* 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';
+
+const colorToClassNameMap = {
+  primary: 'euiSuggestItem__type--primary',
+  secondary: 'euiSuggestItem__type--secondary',
+  warning: 'euiSuggestItem__type--warning',
+  danger: 'euiSuggestItem__type--danger',
+  dark: 'euiSuggestItem__type--dark',
+};
+
+export const COLORS = Object.keys(colorToClassNameMap);
+
+export const EuiSuggestItem = ({
+  className,
+  label,
+  type,
+  description,
+  ...rest
+}) => {
+  const classes = classNames('euiSuggestItem', className);
+
+  let optionalColorClass = null;
+  let optionalLabelClass = null;
+  let optionalCustomStyles = undefined;
+
+  if (COLORS.indexOf(type.color) > -1) {
+    optionalColorClass = colorToClassNameMap[type.color];
+  } else {
+    optionalCustomStyles = { backgroundColor: type.color };
+  }
+
+  if (label && label.length > 100) {
+    optionalLabelClass = 'longLabel';
+  }
+
+  return (
+    <div className={classes} {...rest}>
+      <span className={`euiSuggestItem__type ${optionalColorClass}`}>
+        {optionalCustomStyles ? (
+          <div style={optionalCustomStyles} className="customBackground" />
+        ) : (
+          undefined
+        )}
+        <EuiIcon color={type.color} type={type.icon} />
+      </span>
+      <span className={`euiSuggestItem__label ${optionalLabelClass}`}>
+        {label}
+      </span>
+      <span className="euiSuggestItem__description">{description}</span>
+    </div>
+  );
+};
+
+EuiSuggestItem.propTypes = {
+  type: IconPropType,
+
+  className: PropTypes.string,
+  type: PropTypes.object,
+  label: PropTypes.string,
+  description: PropTypes.string,
+};
+
+EuiSuggestItem.defaultProps = {};
diff --git a/src/components/suggest_item/suggest_item.test.js b/src/components/suggest_item/suggest_item.test.js
new file mode 100644
index 00000000000..06bf12e108b
--- /dev/null
+++ b/src/components/suggest_item/suggest_item.test.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiSuggestItem } from './suggest_item';
+
+describe('EuiSuggestItem', () => {
+  test('is rendered', () => {
+    const component = render(<EuiSuggestItem {...requiredProps} />);
+
+    expect(component).toMatchSnapshot();
+  });
+});

From 1e5d2c90cd334df15d185fca113d546fa53fd50c Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Mon, 24 Jun 2019 11:24:42 -0700
Subject: [PATCH 02/25] props descriptions

---
 src/components/suggest_item/suggest_item.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
index 8610277a4f0..31a9e9fb236 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/src/components/suggest_item/suggest_item.js
@@ -56,11 +56,18 @@ export const EuiSuggestItem = ({
 };
 
 EuiSuggestItem.propTypes = {
-  type: IconPropType,
-
   className: PropTypes.string,
+  /**
+   * Takes 'icon' for EuiIcon and 'color'. 'color' can be either our palette colors (primary, secondary, etc) or a hex value.
+   */
   type: PropTypes.object,
+  /**
+   * Label for suggestion
+   */
   label: PropTypes.string,
+  /**
+   * Description for suggestion
+   */
   description: PropTypes.string,
 };
 

From 6f9bad3047d0ccdfe66b918bea3a9e8805752a8e Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 27 Jun 2019 14:12:00 -0700
Subject: [PATCH 03/25] added expandLongLabel

---
 .../src/views/suggest_item/suggest_item.js    |  4 +-
 .../suggest_item/suggest_item_example.js      | 54 +++++++++++++++++--
 .../suggest_item/suggest_item_long_label.js   | 27 ++++++++++
 .../suggest_item/_suggest_item.scss           |  9 ++--
 src/components/suggest_item/suggest_item.js   | 17 ++++--
 5 files changed, 96 insertions(+), 15 deletions(-)
 create mode 100644 src-docs/src/views/suggest_item/suggest_item_long_label.js

diff --git a/src-docs/src/views/suggest_item/suggest_item.js b/src-docs/src/views/suggest_item/suggest_item.js
index ef02bcc56fd..4cc1d194ea1 100644
--- a/src-docs/src/views/suggest_item/suggest_item.js
+++ b/src-docs/src/views/suggest_item/suggest_item.js
@@ -28,12 +28,10 @@ const sampleItems = [
   {
     type: { icon: 'search', color: 'dark' },
     label: 'Recent search sample',
-    description: shortDescription,
   },
   {
     type: { icon: 'save', color: '#DD0A73' },
-    label: 'Saved search sample',
-    description: shortDescription,
+    label: 'Saved search',
   },
 ];
 
diff --git a/src-docs/src/views/suggest_item/suggest_item_example.js b/src-docs/src/views/suggest_item/suggest_item_example.js
index f87f8487b7b..4ac211fd697 100644
--- a/src-docs/src/views/suggest_item/suggest_item_example.js
+++ b/src-docs/src/views/suggest_item/suggest_item_example.js
@@ -10,8 +10,12 @@ import SuggestItem from './suggest_item';
 const suggestItemSource = require('!!raw-loader!./suggest_item');
 const suggestItemHtml = renderToHtml(SuggestItem);
 
+import SuggestItemLongLabel from './suggest_item_long_label';
+const suggestItemLongLabelSource = require('!!raw-loader!./suggest_item_long_label');
+const suggestItemLongLabelHtml = renderToHtml(SuggestItemLongLabel);
+
 export const SuggestItemExample = {
-  title: 'SuggestItem',
+  title: 'Suggest Item',
   sections: [
     {
       title: 'SuggestItem',
@@ -25,14 +29,56 @@ export const SuggestItemExample = {
           code: suggestItemHtml,
         },
       ],
+      text: (
+        <div>
+          <p>
+            <EuiCode>EuiSuggestItem</EuiCode> is a list item component useful to
+            suggestions when typing queries in input fields.
+          </p>
+          <ul>
+            <li>
+              <EuiCode>type</EuiCode> is an object that takes{' '}
+              <EuiCode>icon</EuiCode> and <EuiCode>color</EuiCode>.{' '}
+              <EuiCode>icon</EuiCode> supports any of the icons available in
+              <EuiCode>EuiIcon</EuiCode>. <EuiCode>color</EuiCode> is the color
+              for the icon and its background. The background color is
+              automatically calculated and it is a ligther shade of
+              <EuiCode>color</EuiCode>.
+            </li>
+            <li>
+              <EuiCode>label</EuiCode> is the primary text for the suggestion.
+            </li>
+            <li>
+              <EuiCode>description</EuiCode> is the secondary text for the
+              suggestion and it is optional.
+            </li>
+          </ul>
+        </div>
+      ),
+      props: { EuiSuggestItem },
+      demo: <SuggestItem />,
+    },
+    {
+      title: 'Expand long label',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: suggestItemLongLabelSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: suggestItemLongLabelHtml,
+        },
+      ],
       text: (
         <p>
-          Description needed: how to use the <EuiCode>EuiSuggestItem</EuiCode>{' '}
-          component.
+          By default <EuiCode>EuiSuggestItem</EuiCode>'s{' '}
+          <EuiCode>label</EuiCode> will use ellipsis. It's possible to show the
+          full text by using <EuiCode>expandLongLabel</EuiCode>.
         </p>
       ),
       props: { EuiSuggestItem },
-      demo: <SuggestItem />,
+      demo: <SuggestItemLongLabel />,
     },
   ],
 };
diff --git a/src-docs/src/views/suggest_item/suggest_item_long_label.js b/src-docs/src/views/suggest_item/suggest_item_long_label.js
new file mode 100644
index 00000000000..9b4f4d31e75
--- /dev/null
+++ b/src-docs/src/views/suggest_item/suggest_item_long_label.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { EuiSuggestItem } from '../../../../src/components/suggest_item';
+
+const shortDescription = 'This is the description';
+
+const sampleItem = {
+  type: { icon: 'kqlValue', color: 'secondary' },
+  label: '"Charles de Gaulle International Airport" ',
+  description: shortDescription,
+};
+
+export default () => (
+  <div>
+    <EuiSuggestItem
+      type={sampleItem.type}
+      label={sampleItem.label}
+      description={sampleItem.description}
+    />
+    <EuiSuggestItem
+      type={sampleItem.type}
+      expandLongLabel={true}
+      label={sampleItem.label}
+      description={sampleItem.description}
+    />
+  </div>
+);
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
index 6e766098e1c..568d2ff8e70 100644
--- a/src/components/suggest_item/_suggest_item.scss
+++ b/src/components/suggest_item/_suggest_item.scss
@@ -69,10 +69,13 @@ $buttonTypes: (
     }
   }
 
-  .euiSuggestItem__description {
-    color: $euiColorDarkShade;
+  .euiSuggestItem__description, .euiSuggestItem__label {
     overflow: hidden;
     text-overflow: ellipsis;
-    margin-left: $euiSizeXL;
+    display: block;
+	}
+
+  .euiSuggestItem__description {
+    color: $euiColorDarkShade;
 	}
 }
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
index 31a9e9fb236..ecfba98ded4 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/src/components/suggest_item/suggest_item.js
@@ -18,13 +18,14 @@ export const EuiSuggestItem = ({
   className,
   label,
   type,
+  expandLongLabel,
   description,
   ...rest
 }) => {
   const classes = classNames('euiSuggestItem', className);
 
-  let optionalColorClass = null;
-  let optionalLabelClass = null;
+  let optionalColorClass = '';
+  let optionalLabelClass = '';
   let optionalCustomStyles = undefined;
 
   if (COLORS.indexOf(type.color) > -1) {
@@ -33,8 +34,10 @@ export const EuiSuggestItem = ({
     optionalCustomStyles = { backgroundColor: type.color };
   }
 
-  if (label && label.length > 100) {
-    optionalLabelClass = 'longLabel';
+  if (expandLongLabel) {
+    if (label && label.length > 35) {
+      optionalLabelClass = 'longLabel';
+    }
   }
 
   return (
@@ -69,6 +72,10 @@ EuiSuggestItem.propTypes = {
    * Description for suggestion
    */
   description: PropTypes.string,
+
+  expandLongLabel: PropTypes.bool,
 };
 
-EuiSuggestItem.defaultProps = {};
+EuiSuggestItem.defaultProps = {
+  expandLongLabel: false,
+};

From fe5f173957137e01c54a47cb23a36c6601a7e185 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Tue, 2 Jul 2019 09:34:31 -0700
Subject: [PATCH 04/25] removed some quotes

---
 src-docs/src/views/suggest_item/suggest_item_long_label.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/suggest_item/suggest_item_long_label.js b/src-docs/src/views/suggest_item/suggest_item_long_label.js
index 9b4f4d31e75..baecb7036c8 100644
--- a/src-docs/src/views/suggest_item/suggest_item_long_label.js
+++ b/src-docs/src/views/suggest_item/suggest_item_long_label.js
@@ -6,7 +6,7 @@ const shortDescription = 'This is the description';
 
 const sampleItem = {
   type: { icon: 'kqlValue', color: 'secondary' },
-  label: '"Charles de Gaulle International Airport" ',
+  label: 'Charles de Gaulle International Airport',
   description: shortDescription,
 };
 

From 3185d9b63fb1bf94a553ee88f503e8d4b3265675 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Tue, 2 Jul 2019 16:22:56 -0700
Subject: [PATCH 05/25] added layout to replace expandLongLabel

---
 .../suggest_item/suggest_item_example.js      | 10 ++++-
 .../suggest_item/suggest_item_long_label.js   |  2 +-
 .../suggest_item/_suggest_item.scss           |  2 +-
 src/components/suggest_item/suggest_item.js   | 38 ++++++++++---------
 4 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src-docs/src/views/suggest_item/suggest_item_example.js b/src-docs/src/views/suggest_item/suggest_item_example.js
index 4ac211fd697..1074acfa020 100644
--- a/src-docs/src/views/suggest_item/suggest_item_example.js
+++ b/src-docs/src/views/suggest_item/suggest_item_example.js
@@ -52,6 +52,11 @@ export const SuggestItemExample = {
               <EuiCode>description</EuiCode> is the secondary text for the
               suggestion and it is optional.
             </li>
+            <li>
+              Use <EuiCode>layout</EuiCode> to change the distribution of the{' '}
+              <EuiCode>EuiSuggestItem</EuiCode> elements. The default{' '}
+              <EuiCode>layout</EuiCode> is <EuiCode>setColumns</EuiCode>.
+            </li>
           </ul>
         </div>
       ),
@@ -73,8 +78,9 @@ export const SuggestItemExample = {
       text: (
         <p>
           By default <EuiCode>EuiSuggestItem</EuiCode>'s{' '}
-          <EuiCode>label</EuiCode> will use ellipsis. It's possible to show the
-          full text by using <EuiCode>expandLongLabel</EuiCode>.
+          <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>.
         </p>
       ),
       props: { EuiSuggestItem },
diff --git a/src-docs/src/views/suggest_item/suggest_item_long_label.js b/src-docs/src/views/suggest_item/suggest_item_long_label.js
index baecb7036c8..026f6ae6dae 100644
--- a/src-docs/src/views/suggest_item/suggest_item_long_label.js
+++ b/src-docs/src/views/suggest_item/suggest_item_long_label.js
@@ -19,7 +19,7 @@ export default () => (
     />
     <EuiSuggestItem
       type={sampleItem.type}
-      expandLongLabel={true}
+      layout="inline"
       label={sampleItem.label}
       description={sampleItem.description}
     />
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
index 568d2ff8e70..d97fbea7bd8 100644
--- a/src/components/suggest_item/_suggest_item.scss
+++ b/src/components/suggest_item/_suggest_item.scss
@@ -64,7 +64,7 @@ $buttonTypes: (
     padding: $euiSizeXS $euiSizeS;
     color: $euiTextColor;
     // sass-lint:disable-line empty-line-between-blocks
-    &.longLabel {
+    &.euiSuggestItem__layout--inline {
       width: auto;
     }
   }
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
index ecfba98ded4..9cfbd254a08 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/src/components/suggest_item/suggest_item.js
@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { EuiIcon, IconPropType, IconColor, IconType } from '../icon';
+import { TypePredicateKind } from 'typescript';
 
 const colorToClassNameMap = {
   primary: 'euiSuggestItem__type--primary',
@@ -14,29 +15,32 @@ const colorToClassNameMap = {
 
 export const COLORS = Object.keys(colorToClassNameMap);
 
+const layoutToClassNameMap = {
+  setColumns: 'euiSuggestItem__layout--set',
+  inline: 'euiSuggestItem__layout--inline',
+};
+
+export const LAYOUTS = Object.keys(layoutToClassNameMap);
+
 export const EuiSuggestItem = ({
   className,
   label,
   type,
-  expandLongLabel,
+  layout,
   description,
   ...rest
 }) => {
   const classes = classNames('euiSuggestItem', className);
 
   let optionalColorClass = '';
-  let optionalLabelClass = '';
+  const layoutClass = layoutToClassNameMap[layout];
   let optionalCustomStyles = undefined;
 
-  if (COLORS.indexOf(type.color) > -1) {
-    optionalColorClass = colorToClassNameMap[type.color];
-  } else {
-    optionalCustomStyles = { backgroundColor: type.color };
-  }
-
-  if (expandLongLabel) {
-    if (label && label.length > 35) {
-      optionalLabelClass = 'longLabel';
+  if (type && type.color) {
+    if (COLORS.indexOf(type.color) > -1) {
+      optionalColorClass = colorToClassNameMap[type.color];
+    } else {
+      optionalCustomStyles = { backgroundColor: type.color };
     }
   }
 
@@ -50,9 +54,7 @@ export const EuiSuggestItem = ({
         )}
         <EuiIcon color={type.color} type={type.icon} />
       </span>
-      <span className={`euiSuggestItem__label ${optionalLabelClass}`}>
-        {label}
-      </span>
+      <span className={`euiSuggestItem__label ${layoutClass}`}>{label}</span>
       <span className="euiSuggestItem__description">{description}</span>
     </div>
   );
@@ -72,10 +74,12 @@ EuiSuggestItem.propTypes = {
    * Description for suggestion
    */
   description: PropTypes.string,
-
-  expandLongLabel: PropTypes.bool,
+  /**
+   * Layout for suggest item
+   */
+  layout: PropTypes.oneOf(LAYOUTS),
 };
 
 EuiSuggestItem.defaultProps = {
-  expandLongLabel: false,
+  layout: 'setColumns',
 };

From e23f429523371077d53c932926cdc92b0cc05462 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 3 Jul 2019 12:31:11 -0500
Subject: [PATCH 06/25] tests passing

---
 .../suggest_item/suggest_item_example.js      |  2 +-
 .../__snapshots__/suggest_item.test.js.snap   | 28 +++++++++++++++++++
 .../suggest_item/_suggest_item.scss           |  5 ++--
 src/components/suggest_item/suggest_item.js   |  9 +++---
 .../suggest_item/suggest_item.test.js         |  7 ++++-
 5 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 src/components/suggest_item/__snapshots__/suggest_item.test.js.snap

diff --git a/src-docs/src/views/suggest_item/suggest_item_example.js b/src-docs/src/views/suggest_item/suggest_item_example.js
index 1074acfa020..b3aa9e4b448 100644
--- a/src-docs/src/views/suggest_item/suggest_item_example.js
+++ b/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>.
diff --git a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
new file mode 100644
index 00000000000..5b1061eacd6
--- /dev/null
+++ b/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>
+`;
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
index d97fbea7bd8..7bee5338ff5 100644
--- a/src/components/suggest_item/_suggest_item.scss
+++ b/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;
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
index 9cfbd254a08..86d62876ca5 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/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
    */
diff --git a/src/components/suggest_item/suggest_item.test.js b/src/components/suggest_item/suggest_item.test.js
index 06bf12e108b..1c8c87c5fba 100644
--- a/src/components/suggest_item/suggest_item.test.js
+++ b/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();
   });

From 4a2860f43561303ab3afa5d166e9ddde67e8e941 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 3 Jul 2019 11:21:32 -0700
Subject: [PATCH 07/25] placed suggestItem import and export in correct order

---
 src-docs/src/routes.js                                  | 6 +++---
 src-docs/src/views/suggest_item/suggest_item_example.js | 1 -
 src/components/index.js                                 | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 1fc6248671e..fc63a086bdd 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -116,8 +116,6 @@ import { LinkExample } from './views/link/link_example';
 
 import { ListGroupExample } from './views/list_group/list_group_example';
 
-import { SuggestItemExample } from './views/suggest_item/suggest_item_example';
-
 import { LoadingExample } from './views/loading/loading_example';
 
 import { ModalExample } from './views/modal/modal_example';
@@ -158,6 +156,8 @@ import { StatExample } from './views/stat/stat_example';
 
 import { StepsExample } from './views/steps/steps_example';
 
+import { SuggestItemExample } from './views/suggest_item/suggest_item_example';
+
 import { TableExample } from './views/tables/tables_example';
 
 import { TabsExample } from './views/tabs/tabs_example';
@@ -321,10 +321,10 @@ const navigation = [
       IconExample,
       ImageExample,
       ListGroupExample,
-      SuggestItemExample,
       LoadingExample,
       ProgressExample,
       StatExample,
+      SuggestItemExample,
       TableExample,
       TextExample,
       TitleExample,
diff --git a/src-docs/src/views/suggest_item/suggest_item_example.js b/src-docs/src/views/suggest_item/suggest_item_example.js
index b3aa9e4b448..6c72feb15c3 100644
--- a/src-docs/src/views/suggest_item/suggest_item_example.js
+++ b/src-docs/src/views/suggest_item/suggest_item_example.js
@@ -18,7 +18,6 @@ export const SuggestItemExample = {
   title: 'Suggest Item',
   sections: [
     {
-      title: 'SuggestItem',
       source: [
         {
           type: GuideSectionTypes.JS,
diff --git a/src/components/index.js b/src/components/index.js
index c77188338bf..eb794298245 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -160,8 +160,6 @@ export { EuiLink } from './link';
 
 export { EuiListGroup, EuiListGroupItem } from './list_group';
 
-export { EuiSuggestItem } from './suggest_item';
-
 export {
   EUI_MODAL_CANCEL_BUTTON,
   EUI_MODAL_CONFIRM_BUTTON,
@@ -232,6 +230,8 @@ export { EuiStat } from './stat';
 
 export { EuiStep, EuiSteps, EuiSubSteps, EuiStepsHorizontal } from './steps';
 
+export { EuiSuggestItem } from './suggest_item';
+
 export {
   EuiTable,
   EuiTableBody,

From 0ab76c6b5cd02d13c6a731a44183e968fb5bcff2 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 3 Jul 2019 14:30:02 -0700
Subject: [PATCH 08/25] some css fixes

---
 src/components/index.scss                     |  2 +-
 .../suggest_item/_suggest_item.scss           | 30 +++++++++----------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/components/index.scss b/src/components/index.scss
index 14df51c795c..70278ac88cc 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -35,7 +35,6 @@
 @import 'key_pad_menu/index';
 @import 'link/index';
 @import 'list_group/index';
-@import 'suggest_item/index';
 @import 'loading/index';
 @import 'modal/index';
 @import 'nav_drawer/index';
@@ -52,6 +51,7 @@
 @import 'selectable/index';
 @import 'stat/index';
 @import 'steps/index';
+@import 'suggest_item/index';
 @import 'table/index';
 @import 'tabs/index';
 @import 'title/index';
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
index 7bee5338ff5..12db899eb42 100644
--- a/src/components/suggest_item/_suggest_item.scss
+++ b/src/components/suggest_item/_suggest_item.scss
@@ -5,30 +5,19 @@ $buttonTypes: (
   secondary: $euiColorSecondary,
   warning: $euiColorWarning,
   danger: $euiColorDanger,
-  ghost: $euiColorGhost, // Ghost is special, and does not care about theming.
-  dark: $euiColorMediumShade, // Reserved for special use cases
+  dark: $euiColorMediumShade,
 );
 
-.customBackground {
-  width: 32px;
-  height: 32px;
-  position: absolute;
-  opacity: .2;
-}
-
-
 .euiSuggestItem {
   display: flex;
   flex-grow: 1;
   align-items: center;
   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%);
-      // color: makeHighContrastColor($color, tintOrShade($color, 90%, 50%));
 		}
 	}
 
@@ -41,8 +30,8 @@ $buttonTypes: (
     flex-direction: column;
 	}
 
-
   .euiSuggestItem__type {
+    position: relative;
     flex-grow: 0;
     flex-basis: auto;
     width: $euiSizeXL;
@@ -52,18 +41,27 @@ $buttonTypes: (
     padding: $euiSizeXS;
     justify-content: center;
     align-items: center;
+
+    .customBackground {
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      opacity: .2;
+      top: 0;
+      left: 0;
+    }
   }
 
   .euiSuggestItem__label {
-    flex-grow: 0; /* 2 */
-    flex-basis: auto; /* 2 */
+    flex-grow: 0;
+    flex-basis: auto;
     font-family: $euiCodeFontFamily;
     width: 250px;
     overflow: hidden;
     text-overflow: ellipsis;
     padding: $euiSizeXS $euiSizeS;
     color: $euiTextColor;
-    // sass-lint:disable-line empty-line-between-blocks
+
     &.euiSuggestItem__layout--inline {
       width: auto;
     }

From 091a19f67c10bb3f32032efad9b7180ec1762b27 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Tue, 9 Jul 2019 16:44:55 -0700
Subject: [PATCH 09/25] considering vis colors

---
 .../src/views/suggest_item/suggest_item.js    |  9 ++---
 src/components/suggest_item/_index.scss       |  2 ++
 .../suggest_item/_suggest_item.scss           | 33 ++++++++++--------
 src/components/suggest_item/_variables.scss   |  9 +++++
 src/components/suggest_item/suggest_item.js   | 34 +++++++++++--------
 5 files changed, 53 insertions(+), 34 deletions(-)
 create mode 100644 src/components/suggest_item/_variables.scss

diff --git a/src-docs/src/views/suggest_item/suggest_item.js b/src-docs/src/views/suggest_item/suggest_item.js
index 4cc1d194ea1..10d62c76bfa 100644
--- a/src-docs/src/views/suggest_item/suggest_item.js
+++ b/src-docs/src/views/suggest_item/suggest_item.js
@@ -16,7 +16,7 @@ const sampleItems = [
     description: shortDescription,
   },
   {
-    type: { icon: 'kqlSelector', color: '#7800A6' },
+    type: { icon: 'kqlSelector', color: 'accent' },
     label: 'Conjunction sample',
     description: shortDescription,
   },
@@ -26,20 +26,21 @@ const sampleItems = [
     description: shortDescription,
   },
   {
-    type: { icon: 'search', color: 'dark' },
+    type: { icon: 'search', color: 'text' },
     label: 'Recent search sample',
   },
   {
-    type: { icon: 'save', color: '#DD0A73' },
+    type: { icon: 'save', color: 'vis3' },
     label: 'Saved search',
   },
 ];
 
 export default () => (
   <div>
-    {sampleItems.map(item => (
+    {sampleItems.map((item, index) => (
       <EuiSuggestItem
         type={item.type}
+        key={index}
         label={item.label}
         description={item.description}
       />
diff --git a/src/components/suggest_item/_index.scss b/src/components/suggest_item/_index.scss
index ce53d8187f7..c4dd928bb4e 100644
--- a/src/components/suggest_item/_index.scss
+++ b/src/components/suggest_item/_index.scss
@@ -1 +1,3 @@
+@import 'variables';
+
 @import 'suggest_item';
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
index 12db899eb42..594da0a57e7 100644
--- a/src/components/suggest_item/_suggest_item.scss
+++ b/src/components/suggest_item/_suggest_item.scss
@@ -1,12 +1,12 @@
 @import '../loading/mixins';
 
-$buttonTypes: (
-  primary: $euiColorPrimary,
-  secondary: $euiColorSecondary,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-  dark: $euiColorMediumShade,
-);
+// $buttonTypes: (
+//   primary: $euiColorPrimary,
+//   secondary: $euiColorSecondary,
+//   warning: $euiColorWarning,
+//   danger: $euiColorDanger,
+//   dark: $euiColorMediumShade,
+// );
 
 .euiSuggestItem {
   display: flex;
@@ -15,7 +15,7 @@ $buttonTypes: (
   font-size: $euiFontSizeXS;
   white-space: nowrap;
 
-  @each $name, $color in $buttonTypes {
+  @each $name, $color in $itemColors {
     .euiSuggestItem__type--#{$name} {
       background-color: tintOrShade($color, 90%, 50%);
 		}
@@ -24,15 +24,14 @@ $buttonTypes: (
   .euiSuggestItem__label,
   .euiSuggestItem__type,
   .euiSuggestItem__description {
-    flex-grow: 1;
-    flex-basis: 0%;
+    flex-grow: 0;
     display: flex;
     flex-direction: column;
 	}
 
   .euiSuggestItem__type {
     position: relative;
-    flex-grow: 0;
+    flex-shrink: 0;
     flex-basis: auto;
     width: $euiSizeXL;
     height: $euiSizeXL;
@@ -53,17 +52,15 @@ $buttonTypes: (
   }
 
   .euiSuggestItem__label {
-    flex-grow: 0;
-    flex-basis: auto;
+    flex-basis: 30%;
     font-family: $euiCodeFontFamily;
-    width: 250px;
     overflow: hidden;
     text-overflow: ellipsis;
     padding: $euiSizeXS $euiSizeS;
     color: $euiTextColor;
 
     &.euiSuggestItem__layout--inline {
-      width: auto;
+      flex-basis: auto;
     }
   }
 
@@ -76,5 +73,11 @@ $buttonTypes: (
 
   .euiSuggestItem__description {
     color: $euiColorDarkShade;
+    flex-basis: auto;
+    padding-top: $euiSizeXS * .5;
+    &:empty {
+      flex-grow: 0;
+      margin-left:0;
+    }
 	}
 }
diff --git a/src/components/suggest_item/_variables.scss b/src/components/suggest_item/_variables.scss
new file mode 100644
index 00000000000..140eb1e1bfe
--- /dev/null
+++ b/src/components/suggest_item/_variables.scss
@@ -0,0 +1,9 @@
+$itemColors: (
+  primary: $euiColorPrimary,
+  secondary: $euiColorSecondary,
+  warning: $euiColorWarning,
+  danger: $euiColorDanger,
+  text: $euiColorMediumShade,
+  accent: $euiColorAccent,
+  vis3: $euiColorVis3,
+);
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
index 86d62876ca5..99415c027d7 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/src/components/suggest_item/suggest_item.js
@@ -4,11 +4,16 @@ import classNames from 'classnames';
 import { EuiIcon, IconPropType } from '../icon';
 
 const colorToClassNameMap = {
-  primary: 'euiSuggestItem__type--primary',
-  secondary: 'euiSuggestItem__type--secondary',
-  warning: 'euiSuggestItem__type--warning',
-  danger: 'euiSuggestItem__type--danger',
-  dark: 'euiSuggestItem__type--dark',
+  primary: { class: 'euiSuggestItem__type--primary', colorName: 'primary' },
+  secondary: {
+    class: 'euiSuggestItem__type--secondary',
+    colorName: 'secondary',
+  },
+  warning: { class: 'euiSuggestItem__type--warning', colorName: 'warning' },
+  danger: { class: 'euiSuggestItem__type--danger', colorName: 'danger' },
+  text: { class: 'euiSuggestItem__type--text', colorName: 'text' },
+  accent: { class: 'euiSuggestItem__type--accent', colorName: 'accent' },
+  vis3: { class: 'euiSuggestItem__type--vis3', colorName: '#490092' },
 };
 
 export const COLORS = Object.keys(colorToClassNameMap);
@@ -32,25 +37,24 @@ export const EuiSuggestItem = ({
 
   let optionalColorClass = '';
   const layoutClass = layoutToClassNameMap[layout];
-  let optionalCustomStyles = undefined;
+  // let optionalCustomStyles = undefined;
 
   if (type && type.color) {
     if (COLORS.indexOf(type.color) > -1) {
-      optionalColorClass = colorToClassNameMap[type.color];
-    } else {
-      optionalCustomStyles = { backgroundColor: type.color };
+      optionalColorClass = colorToClassNameMap[type.color].class;
     }
+    // } else {
+    //   optionalCustomStyles = { backgroundColor: type.color };
+    // }
   }
 
+  let colorName;
+  colorName = colorToClassNameMap[type.color].colorName;
+
   return (
     <div className={classes} {...rest}>
       <span className={`euiSuggestItem__type ${optionalColorClass}`}>
-        {optionalCustomStyles ? (
-          <div style={optionalCustomStyles} className="customBackground" />
-        ) : (
-          undefined
-        )}
-        <EuiIcon color={type.color} type={type.icon} />
+        <EuiIcon color={colorName} type={type.icon} />
       </span>
       <span className={`euiSuggestItem__label ${layoutClass}`}>{label}</span>
       <span className="euiSuggestItem__description">{description}</span>

From 3e87f5159ecf0eac51aef9a02052cf9e5621305d Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 11 Jul 2019 14:36:42 -0700
Subject: [PATCH 10/25] changes based on feedback

---
 src-docs/src/routes.js                        |  4 +-
 src-docs/src/views/suggest/suggest.js         |  3 +
 src-docs/src/views/suggest/suggest_example.js | 81 +++++++++++++++++
 src-docs/src/views/suggest/suggest_item.js    | 72 +++++++++++++++
 .../src/views/suggest_item/suggest_item.js    | 49 ----------
 .../suggest_item/suggest_item_example.js      | 89 -------------------
 .../suggest_item/suggest_item_long_label.js   | 27 ------
 .../__snapshots__/suggest_item.test.js.snap   | 58 +++++++++++-
 .../suggest_item/_suggest_item.scss           | 33 +++----
 src/components/suggest_item/_variables.scss   | 14 +--
 src/components/suggest_item/suggest_item.js   | 62 ++++++-------
 .../suggest_item/suggest_item.test.js         | 32 ++++++-
 12 files changed, 290 insertions(+), 234 deletions(-)
 create mode 100644 src-docs/src/views/suggest/suggest.js
 create mode 100644 src-docs/src/views/suggest/suggest_example.js
 create mode 100644 src-docs/src/views/suggest/suggest_item.js
 delete mode 100644 src-docs/src/views/suggest_item/suggest_item.js
 delete mode 100644 src-docs/src/views/suggest_item/suggest_item_example.js
 delete mode 100644 src-docs/src/views/suggest_item/suggest_item_long_label.js

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index fc63a086bdd..a7a86a7c86c 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -156,7 +156,7 @@ import { StatExample } from './views/stat/stat_example';
 
 import { StepsExample } from './views/steps/steps_example';
 
-import { SuggestItemExample } from './views/suggest_item/suggest_item_example';
+import { SuggestExample } from './views/suggest/suggest_example';
 
 import { TableExample } from './views/tables/tables_example';
 
@@ -324,7 +324,6 @@ const navigation = [
       LoadingExample,
       ProgressExample,
       StatExample,
-      SuggestItemExample,
       TableExample,
       TextExample,
       TitleExample,
@@ -348,6 +347,7 @@ const navigation = [
       RangeControlExample,
       SearchBarExample,
       SelectableExample,
+      SuggestExample,
     ].map(example => createExample(example)),
   },
   {
diff --git a/src-docs/src/views/suggest/suggest.js b/src-docs/src/views/suggest/suggest.js
new file mode 100644
index 00000000000..3c4c903427b
--- /dev/null
+++ b/src-docs/src/views/suggest/suggest.js
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => <div />;
diff --git a/src-docs/src/views/suggest/suggest_example.js b/src-docs/src/views/suggest/suggest_example.js
new file mode 100644
index 00000000000..b884f78846b
--- /dev/null
+++ b/src-docs/src/views/suggest/suggest_example.js
@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import { EuiCode, EuiSuggestItem } from '../../../../src/components';
+
+import Suggest from './suggest';
+const suggestSource = require('!!raw-loader!./suggest');
+const suggestHtml = renderToHtml(Suggest);
+
+import SuggestItem from './suggest_item';
+const suggestItemSource = require('!!raw-loader!./suggest_item');
+const suggestItemHtml = renderToHtml(SuggestItem);
+const suggestItemSnippet = [
+  `<EuiSuggestItem
+  type={sampleItem.type}
+  label={sampleItem.label}
+  description={sampleItem.description}
+/>
+`,
+  `<EuiSuggestItem
+  type={sampleItem.type}
+  label={sampleItem.label}
+  description={sampleItem.description}
+  labelDisplay="expand"
+/>`,
+];
+
+export const SuggestExample = {
+  title: 'Suggest',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: suggestSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: suggestHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            <EuiCode>EuiSuggest</EuiCode> description goes here.
+          </p>
+        </div>
+      ),
+    },
+    {
+      title: 'Suggest Item',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: suggestItemSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: suggestItemHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            <EuiCode>EuiSuggestItem</EuiCode> is a list item component to
+            display suggestions when typing queries in{' '}
+            <EuiCode>EuiSuggestInput</EuiCode>. Use{' '}
+            <EuiCode>labelDisplay</EuiCode> to set whether the{' '}
+            <EuiCode>label</EuiCode> has a fixed width or not.
+          </p>
+        </div>
+      ),
+      props: { EuiSuggestItem },
+      snippet: suggestItemSnippet,
+      demo: <SuggestItem />,
+    },
+  ],
+};
diff --git a/src-docs/src/views/suggest/suggest_item.js b/src-docs/src/views/suggest/suggest_item.js
new file mode 100644
index 00000000000..a641ad89b18
--- /dev/null
+++ b/src-docs/src/views/suggest/suggest_item.js
@@ -0,0 +1,72 @@
+import React from 'react';
+
+import { EuiSuggestItem, EuiSpacer } from '../../../../src/components';
+
+const shortDescription = 'This is the description';
+
+const sampleItems = [
+  {
+    type: { iconType: 'kqlField', color: 'itemTint03' },
+    label: 'Field sample',
+    description: shortDescription,
+  },
+  {
+    type: { iconType: 'kqlValue', color: 'itemTint02' },
+    label: 'Value sample',
+    description: shortDescription,
+  },
+  {
+    type: { iconType: 'kqlSelector', color: 'itemTint06' },
+    label: 'Conjunction sample',
+    description: shortDescription,
+  },
+  {
+    type: { iconType: 'kqlOperand', color: 'itemTint01' },
+    label: 'Operator sample',
+    description: shortDescription,
+  },
+  {
+    type: { iconType: 'search', color: 'itemTint05' },
+    label: 'Recent search',
+  },
+  {
+    type: { iconType: 'save', color: 'itemTint07' },
+    label: 'Saved search',
+  },
+];
+
+const sampleItem1 = {
+  type: { iconType: 'kqlValue', color: 'itemTint02' },
+  label: 'Charles de Gaulle International Airport',
+  description: shortDescription,
+};
+
+export default () => (
+  <div>
+    {sampleItems.map((item, index) => (
+      <EuiSuggestItem
+        type={item.type}
+        key={index}
+        label={item.label}
+        description={item.description}
+      />
+    ))}
+    <EuiSpacer size="m" />
+    <EuiSuggestItem
+      type={sampleItem1.type}
+      label={sampleItem1.label}
+      description="This item has a fixed width label"
+    />
+    <EuiSuggestItem
+      type={sampleItem1.type}
+      labelDisplay="expand"
+      label={sampleItem1.label}
+      description="This item expands its label"
+    />
+    <EuiSpacer size="m" />
+    <EuiSuggestItem
+      type={{ iconType: 'search', color: 'itemTint05' }}
+      label="Items with no description will expand their label"
+    />
+  </div>
+);
diff --git a/src-docs/src/views/suggest_item/suggest_item.js b/src-docs/src/views/suggest_item/suggest_item.js
deleted file mode 100644
index 10d62c76bfa..00000000000
--- a/src-docs/src/views/suggest_item/suggest_item.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-
-import { EuiSuggestItem } from '../../../../src/components/suggest_item';
-
-const shortDescription = 'This is the description';
-
-const sampleItems = [
-  {
-    type: { icon: 'kqlField', color: 'warning' },
-    label: 'Field sample',
-    description: shortDescription,
-  },
-  {
-    type: { icon: 'kqlValue', color: 'secondary' },
-    label: 'Value sample',
-    description: shortDescription,
-  },
-  {
-    type: { icon: 'kqlSelector', color: 'accent' },
-    label: 'Conjunction sample',
-    description: shortDescription,
-  },
-  {
-    type: { icon: 'kqlOperand', color: 'primary' },
-    label: 'Operator sample',
-    description: shortDescription,
-  },
-  {
-    type: { icon: 'search', color: 'text' },
-    label: 'Recent search sample',
-  },
-  {
-    type: { icon: 'save', color: 'vis3' },
-    label: 'Saved search',
-  },
-];
-
-export default () => (
-  <div>
-    {sampleItems.map((item, index) => (
-      <EuiSuggestItem
-        type={item.type}
-        key={index}
-        label={item.label}
-        description={item.description}
-      />
-    ))}
-  </div>
-);
diff --git a/src-docs/src/views/suggest_item/suggest_item_example.js b/src-docs/src/views/suggest_item/suggest_item_example.js
deleted file mode 100644
index 6c72feb15c3..00000000000
--- a/src-docs/src/views/suggest_item/suggest_item_example.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-
-import { renderToHtml } from '../../services';
-
-import { GuideSectionTypes } from '../../components';
-
-import { EuiCode, EuiSuggestItem } from '../../../../src/components';
-
-import SuggestItem from './suggest_item';
-const suggestItemSource = require('!!raw-loader!./suggest_item');
-const suggestItemHtml = renderToHtml(SuggestItem);
-
-import SuggestItemLongLabel from './suggest_item_long_label';
-const suggestItemLongLabelSource = require('!!raw-loader!./suggest_item_long_label');
-const suggestItemLongLabelHtml = renderToHtml(SuggestItemLongLabel);
-
-export const SuggestItemExample = {
-  title: 'Suggest Item',
-  sections: [
-    {
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: suggestItemSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: suggestItemHtml,
-        },
-      ],
-      text: (
-        <div>
-          <p>
-            <EuiCode>EuiSuggestItem</EuiCode> is a list item component useful to
-            suggestions when typing queries in input fields.
-          </p>
-          <ul>
-            <li>
-              <EuiCode>type</EuiCode> is an object that takes{' '}
-              <EuiCode>icon</EuiCode> and <EuiCode>color</EuiCode>.{' '}
-              <EuiCode>icon</EuiCode> supports any of the icons available in
-              <EuiCode>EuiIcon</EuiCode>. <EuiCode>color</EuiCode> is the color
-              for the icon and its background. The background color is
-              automatically calculated and it is a ligther shade of
-              <EuiCode>color</EuiCode>.
-            </li>
-            <li>
-              <EuiCode>label</EuiCode> is the primary text for the suggestion.
-            </li>
-            <li>
-              <EuiCode>description</EuiCode> is the secondary text for the
-              suggestion and it is optional.
-            </li>
-            <li>
-              Use <EuiCode>layout</EuiCode> to change the distribution of the{' '}
-              <EuiCode>EuiSuggestItem</EuiCode> elements. The default{' '}
-              <EuiCode>layout</EuiCode> is <EuiCode>setColumns</EuiCode>.
-            </li>
-          </ul>
-        </div>
-      ),
-      props: { EuiSuggestItem },
-      demo: <SuggestItem />,
-    },
-    {
-      title: 'Expand long label',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: suggestItemLongLabelSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: suggestItemLongLabelHtml,
-        },
-      ],
-      text: (
-        <p>
-          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>.
-        </p>
-      ),
-      props: { EuiSuggestItem },
-      demo: <SuggestItemLongLabel />,
-    },
-  ],
-};
diff --git a/src-docs/src/views/suggest_item/suggest_item_long_label.js b/src-docs/src/views/suggest_item/suggest_item_long_label.js
deleted file mode 100644
index 026f6ae6dae..00000000000
--- a/src-docs/src/views/suggest_item/suggest_item_long_label.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { EuiSuggestItem } from '../../../../src/components/suggest_item';
-
-const shortDescription = 'This is the description';
-
-const sampleItem = {
-  type: { icon: 'kqlValue', color: 'secondary' },
-  label: 'Charles de Gaulle International Airport',
-  description: shortDescription,
-};
-
-export default () => (
-  <div>
-    <EuiSuggestItem
-      type={sampleItem.type}
-      label={sampleItem.label}
-      description={sampleItem.description}
-    />
-    <EuiSuggestItem
-      type={sampleItem.type}
-      layout="inline"
-      label={sampleItem.label}
-      description={sampleItem.description}
-    />
-  </div>
-);
diff --git a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
index 5b1061eacd6..f5d2db891f2 100644
--- a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
+++ b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
@@ -7,10 +7,10 @@ exports[`EuiSuggestItem is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <span
-    class="euiSuggestItem__type euiSuggestItem__type--primary"
+    class="euiSuggestItem__type euiSuggestItem__type--itemTint01"
   >
     <svg
-      class="euiIcon euiIcon--medium euiIcon--primary euiIcon-isLoading"
+      class="euiIcon euiIcon--medium euiIcon-isLoading"
       focusable="false"
       height="16"
       viewBox="0 0 16 16"
@@ -19,10 +19,62 @@ exports[`EuiSuggestItem is rendered 1`] = `
     />
   </span>
   <span
-    class="euiSuggestItem__label euiSuggestItem__layout--set"
+    class="euiSuggestItem__label euiSuggestItem__labelDisplay--expand"
   />
   <span
     class="euiSuggestItem__description"
   />
 </div>
 `;
+
+exports[`props item with no description has expanded label is rendered 1`] = `
+<div
+  class="euiSuggestItem"
+>
+  <span
+    class="euiSuggestItem__type euiSuggestItem__type--itemTint02"
+  >
+    <svg
+      class="euiIcon euiIcon--medium 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__labelDisplay--expand"
+  />
+  <span
+    class="euiSuggestItem__description"
+  />
+</div>
+`;
+
+exports[`props labelDisplay as expand is rendered 1`] = `
+<div
+  class="euiSuggestItem"
+>
+  <span
+    class="euiSuggestItem__type euiSuggestItem__type--itemTint02"
+  >
+    <svg
+      class="euiIcon euiIcon--medium 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__labelDisplay--expand"
+  />
+  <span
+    class="euiSuggestItem__description"
+  >
+    This is the description
+  </span>
+</div>
+`;
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
index 594da0a57e7..2fe4558e274 100644
--- a/src/components/suggest_item/_suggest_item.scss
+++ b/src/components/suggest_item/_suggest_item.scss
@@ -1,13 +1,5 @@
 @import '../loading/mixins';
 
-// $buttonTypes: (
-//   primary: $euiColorPrimary,
-//   secondary: $euiColorSecondary,
-//   warning: $euiColorWarning,
-//   danger: $euiColorDanger,
-//   dark: $euiColorMediumShade,
-// );
-
 .euiSuggestItem {
   display: flex;
   flex-grow: 1;
@@ -17,7 +9,12 @@
 
   @each $name, $color in $itemColors {
     .euiSuggestItem__type--#{$name} {
-      background-color: tintOrShade($color, 90%, 50%);
+      $backgroundColor: tintOrShade($color, 90%, 50%);
+      background-color: $backgroundColor;
+
+      svg {
+        fill: makeHighContrastColor($color, $backgroundColor);
+      }
 		}
 	}
 
@@ -40,15 +37,6 @@
     padding: $euiSizeXS;
     justify-content: center;
     align-items: center;
-
-    .customBackground {
-      width: 32px;
-      height: 32px;
-      position: absolute;
-      opacity: .2;
-      top: 0;
-      left: 0;
-    }
   }
 
   .euiSuggestItem__label {
@@ -59,15 +47,15 @@
     padding: $euiSizeXS $euiSizeS;
     color: $euiTextColor;
 
-    &.euiSuggestItem__layout--inline {
+    &.euiSuggestItem__labelDisplay--expand {
       flex-basis: auto;
+      flex-shrink: 1;
     }
   }
 
   .euiSuggestItem__description,
   .euiSuggestItem__label {
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include euiTextTruncate;
     display: block;
 	}
 
@@ -75,9 +63,10 @@
     color: $euiColorDarkShade;
     flex-basis: auto;
     padding-top: $euiSizeXS * .5;
+
     &:empty {
       flex-grow: 0;
-      margin-left:0;
+      margin-left: 0;
     }
 	}
 }
diff --git a/src/components/suggest_item/_variables.scss b/src/components/suggest_item/_variables.scss
index 140eb1e1bfe..dbdf162dd08 100644
--- a/src/components/suggest_item/_variables.scss
+++ b/src/components/suggest_item/_variables.scss
@@ -1,9 +1,9 @@
 $itemColors: (
-  primary: $euiColorPrimary,
-  secondary: $euiColorSecondary,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-  text: $euiColorMediumShade,
-  accent: $euiColorAccent,
-  vis3: $euiColorVis3,
+  itemTint01: $euiColorPrimary,
+  itemTint02: $euiColorSecondary,
+  itemTint03: $euiColorWarning,
+  itemTint04: $euiColorDanger,
+  itemTint05: $euiColorMediumShade,
+  itemTint06: $euiColorAccent,
+  itemTint07: $euiColorVis3,
 );
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
index 99415c027d7..f442609d4f5 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/src/components/suggest_item/suggest_item.js
@@ -4,59 +4,55 @@ import classNames from 'classnames';
 import { EuiIcon, IconPropType } from '../icon';
 
 const colorToClassNameMap = {
-  primary: { class: 'euiSuggestItem__type--primary', colorName: 'primary' },
-  secondary: {
-    class: 'euiSuggestItem__type--secondary',
-    colorName: 'secondary',
-  },
-  warning: { class: 'euiSuggestItem__type--warning', colorName: 'warning' },
-  danger: { class: 'euiSuggestItem__type--danger', colorName: 'danger' },
-  text: { class: 'euiSuggestItem__type--text', colorName: 'text' },
-  accent: { class: 'euiSuggestItem__type--accent', colorName: 'accent' },
-  vis3: { class: 'euiSuggestItem__type--vis3', colorName: '#490092' },
+  itemTint01: 'euiSuggestItem__type--itemTint01',
+  itemTint02: 'euiSuggestItem__type--itemTint02',
+  itemTint03: 'euiSuggestItem__type--itemTint03',
+  itemTint04: 'euiSuggestItem__type--itemTint04',
+  itemTint05: 'euiSuggestItem__type--itemTint05',
+  itemTint06: 'euiSuggestItem__type--itemTint06',
+  itemTint07: 'euiSuggestItem__type--itemTint07',
 };
 
 export const COLORS = Object.keys(colorToClassNameMap);
 
-const layoutToClassNameMap = {
-  setColumns: 'euiSuggestItem__layout--set',
-  inline: 'euiSuggestItem__layout--inline',
+const labelDisplayToClassMap = {
+  fixed: 'euiSuggestItem__labelDisplay--fixed',
+  expand: 'euiSuggestItem__labelDisplay--expand',
 };
 
-export const LAYOUTS = Object.keys(layoutToClassNameMap);
+export const DISPLAYS = Object.keys(labelDisplayToClassMap);
 
 export const EuiSuggestItem = ({
   className,
   label,
   type,
-  layout,
+  labelDisplay,
   description,
   ...rest
 }) => {
   const classes = classNames('euiSuggestItem', className);
 
   let optionalColorClass = '';
-  const layoutClass = layoutToClassNameMap[layout];
-  // let optionalCustomStyles = undefined;
+  let labelDisplayClass = labelDisplayToClassMap[labelDisplay];
+
+  if (!description) {
+    labelDisplayClass = 'euiSuggestItem__labelDisplay--expand';
+  }
 
   if (type && type.color) {
     if (COLORS.indexOf(type.color) > -1) {
-      optionalColorClass = colorToClassNameMap[type.color].class;
+      optionalColorClass = colorToClassNameMap[type.color];
     }
-    // } else {
-    //   optionalCustomStyles = { backgroundColor: type.color };
-    // }
   }
 
-  let colorName;
-  colorName = colorToClassNameMap[type.color].colorName;
-
   return (
     <div className={classes} {...rest}>
       <span className={`euiSuggestItem__type ${optionalColorClass}`}>
-        <EuiIcon color={colorName} type={type.icon} />
+        <EuiIcon type={type.iconType} />
+      </span>
+      <span className={`euiSuggestItem__label ${labelDisplayClass}`}>
+        {label}
       </span>
-      <span className={`euiSuggestItem__label ${layoutClass}`}>{label}</span>
       <span className="euiSuggestItem__description">{description}</span>
     </div>
   );
@@ -65,26 +61,26 @@ export const EuiSuggestItem = ({
 EuiSuggestItem.propTypes = {
   className: PropTypes.string,
   /**
-   * Takes 'icon' for EuiIcon and 'color'. 'color' can be either our palette colors (primary, secondary, etc) or a hex value.
+   * Takes 'iconType' for EuiIcon and 'color'. 'color' can be itemTint01 through itemTint07.
    */
   type: PropTypes.shape({
-    icon: IconPropType,
+    iconType: IconPropType,
     color: PropTypes.oneOfType([PropTypes.oneOf(COLORS), PropTypes.string]),
   }).isRequired,
   /**
-   * Label for suggestion
+   * Label for suggest item
    */
   label: PropTypes.string,
   /**
-   * Description for suggestion
+   * Description for suggest item
    */
   description: PropTypes.string,
   /**
-   * Layout for suggest item
+   * Label display for suggest item
    */
-  layout: PropTypes.oneOf(LAYOUTS),
+  labelDisplay: PropTypes.oneOf(DISPLAYS),
 };
 
 EuiSuggestItem.defaultProps = {
-  layout: 'setColumns',
+  labelDisplay: 'fixed',
 };
diff --git a/src/components/suggest_item/suggest_item.test.js b/src/components/suggest_item/suggest_item.test.js
index 1c8c87c5fba..42eb4e7d7af 100644
--- a/src/components/suggest_item/suggest_item.test.js
+++ b/src/components/suggest_item/suggest_item.test.js
@@ -5,8 +5,8 @@ import { requiredProps } from '../../test/required_props';
 import { EuiSuggestItem } from './suggest_item';
 
 const TYPE = {
-  icon: 'search',
-  color: 'primary',
+  iconType: 'search',
+  color: 'itemTint01',
 };
 
 describe('EuiSuggestItem', () => {
@@ -16,3 +16,31 @@ describe('EuiSuggestItem', () => {
     expect(component).toMatchSnapshot();
   });
 });
+
+describe('props', () => {
+  const sampleItem = {
+    type: { iconType: 'kqlValue', color: 'itemTint02' },
+    label: 'Charles de Gaulle International Airport',
+    description: 'This is the description',
+  };
+
+  describe('labelDisplay as expand', () => {
+    test('is rendered', () => {
+      const component = render(
+        <EuiSuggestItem
+          type={sampleItem.type}
+          description={sampleItem.description}
+          labelDisplay="expand"
+        />
+      );
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  describe('item with no description has expanded label', () => {
+    test('is rendered', () => {
+      const component = render(<EuiSuggestItem type={sampleItem.type} />);
+      expect(component).toMatchSnapshot();
+    });
+  });
+});

From 08197bd1256b18963bc72cd0d20dfba686bbdb33 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Fri, 12 Jul 2019 17:19:17 -0700
Subject: [PATCH 11/25] updated colors and added minor css changes

---
 src-docs/src/views/suggest/suggest_item.js    | 18 +++++++++---------
 .../__snapshots__/suggest_item.test.js.snap   |  6 +++---
 .../suggest_item/_suggest_item.scss           |  8 +++-----
 src/components/suggest_item/_variables.scss   | 16 +++++++++-------
 src/components/suggest_item/suggest_item.js   | 19 +++++++++++--------
 .../suggest_item/suggest_item.test.js         |  4 ++--
 6 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/src-docs/src/views/suggest/suggest_item.js b/src-docs/src/views/suggest/suggest_item.js
index a641ad89b18..6d7b8540120 100644
--- a/src-docs/src/views/suggest/suggest_item.js
+++ b/src-docs/src/views/suggest/suggest_item.js
@@ -6,37 +6,37 @@ const shortDescription = 'This is the description';
 
 const sampleItems = [
   {
-    type: { iconType: 'kqlField', color: 'itemTint03' },
+    type: { iconType: 'kqlField', color: 'tint4' },
     label: 'Field sample',
     description: shortDescription,
   },
   {
-    type: { iconType: 'kqlValue', color: 'itemTint02' },
+    type: { iconType: 'kqlValue', color: 'tint0' },
     label: 'Value sample',
     description: shortDescription,
   },
   {
-    type: { iconType: 'kqlSelector', color: 'itemTint06' },
+    type: { iconType: 'kqlSelector', color: 'tint2' },
     label: 'Conjunction sample',
     description: shortDescription,
   },
   {
-    type: { iconType: 'kqlOperand', color: 'itemTint01' },
+    type: { iconType: 'kqlOperand', color: 'tint1' },
     label: 'Operator sample',
     description: shortDescription,
   },
   {
-    type: { iconType: 'search', color: 'itemTint05' },
+    type: { iconType: 'search', color: 'tint8' },
     label: 'Recent search',
   },
   {
-    type: { iconType: 'save', color: 'itemTint07' },
+    type: { iconType: 'save', color: 'tint3' },
     label: 'Saved search',
   },
 ];
 
 const sampleItem1 = {
-  type: { iconType: 'kqlValue', color: 'itemTint02' },
+  type: { iconType: 'kqlValue', color: 'tint0' },
   label: 'Charles de Gaulle International Airport',
   description: shortDescription,
 };
@@ -61,11 +61,11 @@ export default () => (
       type={sampleItem1.type}
       labelDisplay="expand"
       label={sampleItem1.label}
-      description="This item expands its label"
+      description="This item will expand its label if needed"
     />
     <EuiSpacer size="m" />
     <EuiSuggestItem
-      type={{ iconType: 'search', color: 'itemTint05' }}
+      type={{ iconType: 'search', color: 'tint8' }}
       label="Items with no description will expand their label"
     />
   </div>
diff --git a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
index f5d2db891f2..c8ad08cfaa3 100644
--- a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
+++ b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
@@ -7,7 +7,7 @@ exports[`EuiSuggestItem is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <span
-    class="euiSuggestItem__type euiSuggestItem__type--itemTint01"
+    class="euiSuggestItem__type euiSuggestItem__type--tint1"
   >
     <svg
       class="euiIcon euiIcon--medium euiIcon-isLoading"
@@ -32,7 +32,7 @@ exports[`props item with no description has expanded label is rendered 1`] = `
   class="euiSuggestItem"
 >
   <span
-    class="euiSuggestItem__type euiSuggestItem__type--itemTint02"
+    class="euiSuggestItem__type euiSuggestItem__type--tint2"
   >
     <svg
       class="euiIcon euiIcon--medium euiIcon-isLoading"
@@ -57,7 +57,7 @@ exports[`props labelDisplay as expand is rendered 1`] = `
   class="euiSuggestItem"
 >
   <span
-    class="euiSuggestItem__type euiSuggestItem__type--itemTint02"
+    class="euiSuggestItem__type euiSuggestItem__type--tint2"
   >
     <svg
       class="euiIcon euiIcon--medium euiIcon-isLoading"
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
index 2fe4558e274..4f072246026 100644
--- a/src/components/suggest_item/_suggest_item.scss
+++ b/src/components/suggest_item/_suggest_item.scss
@@ -11,10 +11,7 @@
     .euiSuggestItem__type--#{$name} {
       $backgroundColor: tintOrShade($color, 90%, 50%);
       background-color: $backgroundColor;
-
-      svg {
-        fill: makeHighContrastColor($color, $backgroundColor);
-      }
+      color: makeHighContrastColor($color, $backgroundColor);
 		}
 	}
 
@@ -40,7 +37,8 @@
   }
 
   .euiSuggestItem__label {
-    flex-basis: 30%;
+    flex-basis: 50%;
+    min-width: 50%;
     font-family: $euiCodeFontFamily;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/src/components/suggest_item/_variables.scss b/src/components/suggest_item/_variables.scss
index dbdf162dd08..d90fa21260d 100644
--- a/src/components/suggest_item/_variables.scss
+++ b/src/components/suggest_item/_variables.scss
@@ -1,9 +1,11 @@
 $itemColors: (
-  itemTint01: $euiColorPrimary,
-  itemTint02: $euiColorSecondary,
-  itemTint03: $euiColorWarning,
-  itemTint04: $euiColorDanger,
-  itemTint05: $euiColorMediumShade,
-  itemTint06: $euiColorAccent,
-  itemTint07: $euiColorVis3,
+  tint0: $euiColorVis0,
+  tint1: $euiColorVis1,
+  tint2: $euiColorVis2,
+  tint3: $euiColorVis3,
+  tint4: $euiColorVis5,
+  tint5: $euiColorVis7,
+  tint6: $euiColorVis8,
+  tint7: $euiColorVis9,
+  tint8: $euiColorDarkShade,
 );
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
index f442609d4f5..40435912002 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/src/components/suggest_item/suggest_item.js
@@ -4,13 +4,16 @@ import classNames from 'classnames';
 import { EuiIcon, IconPropType } from '../icon';
 
 const colorToClassNameMap = {
-  itemTint01: 'euiSuggestItem__type--itemTint01',
-  itemTint02: 'euiSuggestItem__type--itemTint02',
-  itemTint03: 'euiSuggestItem__type--itemTint03',
-  itemTint04: 'euiSuggestItem__type--itemTint04',
-  itemTint05: 'euiSuggestItem__type--itemTint05',
-  itemTint06: 'euiSuggestItem__type--itemTint06',
-  itemTint07: 'euiSuggestItem__type--itemTint07',
+  tint0: 'euiSuggestItem__type--tint0',
+  tint1: 'euiSuggestItem__type--tint1',
+  tint2: 'euiSuggestItem__type--tint2',
+  tint3: 'euiSuggestItem__type--tint3',
+  tint4: 'euiSuggestItem__type--tint4',
+  tint5: 'euiSuggestItem__type--tint5',
+  tint6: 'euiSuggestItem__type--tint6',
+  tint7: 'euiSuggestItem__type--tint7',
+  tint8: 'euiSuggestItem__type--tint8',
+  tint9: 'euiSuggestItem__type--tint9',
 };
 
 export const COLORS = Object.keys(colorToClassNameMap);
@@ -61,7 +64,7 @@ export const EuiSuggestItem = ({
 EuiSuggestItem.propTypes = {
   className: PropTypes.string,
   /**
-   * Takes 'iconType' for EuiIcon and 'color'. 'color' can be itemTint01 through itemTint07.
+   * Takes 'iconType' for EuiIcon and 'color'. 'color' can be tint1 through tint9.
    */
   type: PropTypes.shape({
     iconType: IconPropType,
diff --git a/src/components/suggest_item/suggest_item.test.js b/src/components/suggest_item/suggest_item.test.js
index 42eb4e7d7af..fcfeb84355f 100644
--- a/src/components/suggest_item/suggest_item.test.js
+++ b/src/components/suggest_item/suggest_item.test.js
@@ -6,7 +6,7 @@ import { EuiSuggestItem } from './suggest_item';
 
 const TYPE = {
   iconType: 'search',
-  color: 'itemTint01',
+  color: 'tint1',
 };
 
 describe('EuiSuggestItem', () => {
@@ -19,7 +19,7 @@ describe('EuiSuggestItem', () => {
 
 describe('props', () => {
   const sampleItem = {
-    type: { iconType: 'kqlValue', color: 'itemTint02' },
+    type: { iconType: 'kqlValue', color: 'tint2' },
     label: 'Charles de Gaulle International Airport',
     description: 'This is the description',
   };

From eb8e5e88bb82ff0870905adbdd82421385f5d058 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Fri, 21 Jun 2019 10:18:25 -0700
Subject: [PATCH 12/25] basic version works

---
 src-docs/src/routes.js                        |  3 +
 .../src/views/suggest_item/suggest_item.js    | 50 ++++++++++++
 .../suggest_item/suggest_item_example.js      | 38 +++++++++
 src/components/index.js                       |  2 +
 src/components/index.scss                     |  1 +
 src/components/suggest_item/_index.scss       |  1 +
 .../suggest_item/_suggest_item.scss           | 78 +++++++++++++++++++
 src/components/suggest_item/index.js          |  1 +
 src/components/suggest_item/suggest_item.js   | 67 ++++++++++++++++
 .../suggest_item/suggest_item.test.js         | 13 ++++
 10 files changed, 254 insertions(+)
 create mode 100644 src-docs/src/views/suggest_item/suggest_item.js
 create mode 100644 src-docs/src/views/suggest_item/suggest_item_example.js
 create mode 100644 src/components/suggest_item/_index.scss
 create mode 100644 src/components/suggest_item/_suggest_item.scss
 create mode 100644 src/components/suggest_item/index.js
 create mode 100644 src/components/suggest_item/suggest_item.js
 create mode 100644 src/components/suggest_item/suggest_item.test.js

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 81080050344..1fc6248671e 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -116,6 +116,8 @@ import { LinkExample } from './views/link/link_example';
 
 import { ListGroupExample } from './views/list_group/list_group_example';
 
+import { SuggestItemExample } from './views/suggest_item/suggest_item_example';
+
 import { LoadingExample } from './views/loading/loading_example';
 
 import { ModalExample } from './views/modal/modal_example';
@@ -319,6 +321,7 @@ const navigation = [
       IconExample,
       ImageExample,
       ListGroupExample,
+      SuggestItemExample,
       LoadingExample,
       ProgressExample,
       StatExample,
diff --git a/src-docs/src/views/suggest_item/suggest_item.js b/src-docs/src/views/suggest_item/suggest_item.js
new file mode 100644
index 00000000000..ef02bcc56fd
--- /dev/null
+++ b/src-docs/src/views/suggest_item/suggest_item.js
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { EuiSuggestItem } from '../../../../src/components/suggest_item';
+
+const shortDescription = 'This is the description';
+
+const sampleItems = [
+  {
+    type: { icon: 'kqlField', color: 'warning' },
+    label: 'Field sample',
+    description: shortDescription,
+  },
+  {
+    type: { icon: 'kqlValue', color: 'secondary' },
+    label: 'Value sample',
+    description: shortDescription,
+  },
+  {
+    type: { icon: 'kqlSelector', color: '#7800A6' },
+    label: 'Conjunction sample',
+    description: shortDescription,
+  },
+  {
+    type: { icon: 'kqlOperand', color: 'primary' },
+    label: 'Operator sample',
+    description: shortDescription,
+  },
+  {
+    type: { icon: 'search', color: 'dark' },
+    label: 'Recent search sample',
+    description: shortDescription,
+  },
+  {
+    type: { icon: 'save', color: '#DD0A73' },
+    label: 'Saved search sample',
+    description: shortDescription,
+  },
+];
+
+export default () => (
+  <div>
+    {sampleItems.map(item => (
+      <EuiSuggestItem
+        type={item.type}
+        label={item.label}
+        description={item.description}
+      />
+    ))}
+  </div>
+);
diff --git a/src-docs/src/views/suggest_item/suggest_item_example.js b/src-docs/src/views/suggest_item/suggest_item_example.js
new file mode 100644
index 00000000000..f87f8487b7b
--- /dev/null
+++ b/src-docs/src/views/suggest_item/suggest_item_example.js
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import { EuiCode, EuiSuggestItem } from '../../../../src/components';
+
+import SuggestItem from './suggest_item';
+const suggestItemSource = require('!!raw-loader!./suggest_item');
+const suggestItemHtml = renderToHtml(SuggestItem);
+
+export const SuggestItemExample = {
+  title: 'SuggestItem',
+  sections: [
+    {
+      title: 'SuggestItem',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: suggestItemSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: suggestItemHtml,
+        },
+      ],
+      text: (
+        <p>
+          Description needed: how to use the <EuiCode>EuiSuggestItem</EuiCode>{' '}
+          component.
+        </p>
+      ),
+      props: { EuiSuggestItem },
+      demo: <SuggestItem />,
+    },
+  ],
+};
diff --git a/src/components/index.js b/src/components/index.js
index f6008bc1596..c77188338bf 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -160,6 +160,8 @@ export { EuiLink } from './link';
 
 export { EuiListGroup, EuiListGroupItem } from './list_group';
 
+export { EuiSuggestItem } from './suggest_item';
+
 export {
   EUI_MODAL_CANCEL_BUTTON,
   EUI_MODAL_CONFIRM_BUTTON,
diff --git a/src/components/index.scss b/src/components/index.scss
index 9ea1003a31a..14df51c795c 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -35,6 +35,7 @@
 @import 'key_pad_menu/index';
 @import 'link/index';
 @import 'list_group/index';
+@import 'suggest_item/index';
 @import 'loading/index';
 @import 'modal/index';
 @import 'nav_drawer/index';
diff --git a/src/components/suggest_item/_index.scss b/src/components/suggest_item/_index.scss
new file mode 100644
index 00000000000..ce53d8187f7
--- /dev/null
+++ b/src/components/suggest_item/_index.scss
@@ -0,0 +1 @@
+@import 'suggest_item';
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
new file mode 100644
index 00000000000..6e766098e1c
--- /dev/null
+++ b/src/components/suggest_item/_suggest_item.scss
@@ -0,0 +1,78 @@
+@import '../loading/mixins';
+
+$buttonTypes: (
+  primary: $euiColorPrimary,
+  secondary: $euiColorSecondary,
+  warning: $euiColorWarning,
+  danger: $euiColorDanger,
+  ghost: $euiColorGhost, // Ghost is special, and does not care about theming.
+  dark: $euiColorMediumShade, // Reserved for special use cases
+);
+
+.customBackground {
+  width: 32px;
+  height: 32px;
+  position: absolute;
+  opacity: .2;
+}
+
+
+.euiSuggestItem {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  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%);
+      // color: makeHighContrastColor($color, tintOrShade($color, 90%, 50%));
+		}
+	}
+
+  .euiSuggestItem__label,
+  .euiSuggestItem__type,
+  .euiSuggestItem__description {
+    flex-grow: 1;
+    flex-basis: 0%;
+    display: flex;
+    flex-direction: column;
+	}
+
+
+  .euiSuggestItem__type {
+    flex-grow: 0;
+    flex-basis: auto;
+    width: $euiSizeXL;
+    height: $euiSizeXL;
+    text-align: center;
+    overflow: hidden;
+    padding: $euiSizeXS;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .euiSuggestItem__label {
+    flex-grow: 0; /* 2 */
+    flex-basis: auto; /* 2 */
+    font-family: $euiCodeFontFamily;
+    width: 250px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: $euiSizeXS $euiSizeS;
+    color: $euiTextColor;
+    // sass-lint:disable-line empty-line-between-blocks
+    &.longLabel {
+      width: auto;
+    }
+  }
+
+  .euiSuggestItem__description {
+    color: $euiColorDarkShade;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-left: $euiSizeXL;
+	}
+}
diff --git a/src/components/suggest_item/index.js b/src/components/suggest_item/index.js
new file mode 100644
index 00000000000..fde82176579
--- /dev/null
+++ b/src/components/suggest_item/index.js
@@ -0,0 +1 @@
+export { EuiSuggestItem } from './suggest_item';
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
new file mode 100644
index 00000000000..8610277a4f0
--- /dev/null
+++ b/src/components/suggest_item/suggest_item.js
@@ -0,0 +1,67 @@
+/* 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';
+
+const colorToClassNameMap = {
+  primary: 'euiSuggestItem__type--primary',
+  secondary: 'euiSuggestItem__type--secondary',
+  warning: 'euiSuggestItem__type--warning',
+  danger: 'euiSuggestItem__type--danger',
+  dark: 'euiSuggestItem__type--dark',
+};
+
+export const COLORS = Object.keys(colorToClassNameMap);
+
+export const EuiSuggestItem = ({
+  className,
+  label,
+  type,
+  description,
+  ...rest
+}) => {
+  const classes = classNames('euiSuggestItem', className);
+
+  let optionalColorClass = null;
+  let optionalLabelClass = null;
+  let optionalCustomStyles = undefined;
+
+  if (COLORS.indexOf(type.color) > -1) {
+    optionalColorClass = colorToClassNameMap[type.color];
+  } else {
+    optionalCustomStyles = { backgroundColor: type.color };
+  }
+
+  if (label && label.length > 100) {
+    optionalLabelClass = 'longLabel';
+  }
+
+  return (
+    <div className={classes} {...rest}>
+      <span className={`euiSuggestItem__type ${optionalColorClass}`}>
+        {optionalCustomStyles ? (
+          <div style={optionalCustomStyles} className="customBackground" />
+        ) : (
+          undefined
+        )}
+        <EuiIcon color={type.color} type={type.icon} />
+      </span>
+      <span className={`euiSuggestItem__label ${optionalLabelClass}`}>
+        {label}
+      </span>
+      <span className="euiSuggestItem__description">{description}</span>
+    </div>
+  );
+};
+
+EuiSuggestItem.propTypes = {
+  type: IconPropType,
+
+  className: PropTypes.string,
+  type: PropTypes.object,
+  label: PropTypes.string,
+  description: PropTypes.string,
+};
+
+EuiSuggestItem.defaultProps = {};
diff --git a/src/components/suggest_item/suggest_item.test.js b/src/components/suggest_item/suggest_item.test.js
new file mode 100644
index 00000000000..06bf12e108b
--- /dev/null
+++ b/src/components/suggest_item/suggest_item.test.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiSuggestItem } from './suggest_item';
+
+describe('EuiSuggestItem', () => {
+  test('is rendered', () => {
+    const component = render(<EuiSuggestItem {...requiredProps} />);
+
+    expect(component).toMatchSnapshot();
+  });
+});

From 7ccf026fcdec6602f6a749333d654e74997b746a Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Mon, 24 Jun 2019 11:24:42 -0700
Subject: [PATCH 13/25] props descriptions

---
 src/components/suggest_item/suggest_item.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
index 8610277a4f0..31a9e9fb236 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/src/components/suggest_item/suggest_item.js
@@ -56,11 +56,18 @@ export const EuiSuggestItem = ({
 };
 
 EuiSuggestItem.propTypes = {
-  type: IconPropType,
-
   className: PropTypes.string,
+  /**
+   * Takes 'icon' for EuiIcon and 'color'. 'color' can be either our palette colors (primary, secondary, etc) or a hex value.
+   */
   type: PropTypes.object,
+  /**
+   * Label for suggestion
+   */
   label: PropTypes.string,
+  /**
+   * Description for suggestion
+   */
   description: PropTypes.string,
 };
 

From c21843b23e92ce612fb38f4ddb351404713a5dd4 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 27 Jun 2019 14:12:00 -0700
Subject: [PATCH 14/25] added expandLongLabel

---
 .../src/views/suggest_item/suggest_item.js    |  4 +-
 .../suggest_item/suggest_item_example.js      | 54 +++++++++++++++++--
 .../suggest_item/suggest_item_long_label.js   | 27 ++++++++++
 .../suggest_item/_suggest_item.scss           |  9 ++--
 src/components/suggest_item/suggest_item.js   | 17 ++++--
 5 files changed, 96 insertions(+), 15 deletions(-)
 create mode 100644 src-docs/src/views/suggest_item/suggest_item_long_label.js

diff --git a/src-docs/src/views/suggest_item/suggest_item.js b/src-docs/src/views/suggest_item/suggest_item.js
index ef02bcc56fd..4cc1d194ea1 100644
--- a/src-docs/src/views/suggest_item/suggest_item.js
+++ b/src-docs/src/views/suggest_item/suggest_item.js
@@ -28,12 +28,10 @@ const sampleItems = [
   {
     type: { icon: 'search', color: 'dark' },
     label: 'Recent search sample',
-    description: shortDescription,
   },
   {
     type: { icon: 'save', color: '#DD0A73' },
-    label: 'Saved search sample',
-    description: shortDescription,
+    label: 'Saved search',
   },
 ];
 
diff --git a/src-docs/src/views/suggest_item/suggest_item_example.js b/src-docs/src/views/suggest_item/suggest_item_example.js
index f87f8487b7b..4ac211fd697 100644
--- a/src-docs/src/views/suggest_item/suggest_item_example.js
+++ b/src-docs/src/views/suggest_item/suggest_item_example.js
@@ -10,8 +10,12 @@ import SuggestItem from './suggest_item';
 const suggestItemSource = require('!!raw-loader!./suggest_item');
 const suggestItemHtml = renderToHtml(SuggestItem);
 
+import SuggestItemLongLabel from './suggest_item_long_label';
+const suggestItemLongLabelSource = require('!!raw-loader!./suggest_item_long_label');
+const suggestItemLongLabelHtml = renderToHtml(SuggestItemLongLabel);
+
 export const SuggestItemExample = {
-  title: 'SuggestItem',
+  title: 'Suggest Item',
   sections: [
     {
       title: 'SuggestItem',
@@ -25,14 +29,56 @@ export const SuggestItemExample = {
           code: suggestItemHtml,
         },
       ],
+      text: (
+        <div>
+          <p>
+            <EuiCode>EuiSuggestItem</EuiCode> is a list item component useful to
+            suggestions when typing queries in input fields.
+          </p>
+          <ul>
+            <li>
+              <EuiCode>type</EuiCode> is an object that takes{' '}
+              <EuiCode>icon</EuiCode> and <EuiCode>color</EuiCode>.{' '}
+              <EuiCode>icon</EuiCode> supports any of the icons available in
+              <EuiCode>EuiIcon</EuiCode>. <EuiCode>color</EuiCode> is the color
+              for the icon and its background. The background color is
+              automatically calculated and it is a ligther shade of
+              <EuiCode>color</EuiCode>.
+            </li>
+            <li>
+              <EuiCode>label</EuiCode> is the primary text for the suggestion.
+            </li>
+            <li>
+              <EuiCode>description</EuiCode> is the secondary text for the
+              suggestion and it is optional.
+            </li>
+          </ul>
+        </div>
+      ),
+      props: { EuiSuggestItem },
+      demo: <SuggestItem />,
+    },
+    {
+      title: 'Expand long label',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: suggestItemLongLabelSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: suggestItemLongLabelHtml,
+        },
+      ],
       text: (
         <p>
-          Description needed: how to use the <EuiCode>EuiSuggestItem</EuiCode>{' '}
-          component.
+          By default <EuiCode>EuiSuggestItem</EuiCode>'s{' '}
+          <EuiCode>label</EuiCode> will use ellipsis. It's possible to show the
+          full text by using <EuiCode>expandLongLabel</EuiCode>.
         </p>
       ),
       props: { EuiSuggestItem },
-      demo: <SuggestItem />,
+      demo: <SuggestItemLongLabel />,
     },
   ],
 };
diff --git a/src-docs/src/views/suggest_item/suggest_item_long_label.js b/src-docs/src/views/suggest_item/suggest_item_long_label.js
new file mode 100644
index 00000000000..9b4f4d31e75
--- /dev/null
+++ b/src-docs/src/views/suggest_item/suggest_item_long_label.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { EuiSuggestItem } from '../../../../src/components/suggest_item';
+
+const shortDescription = 'This is the description';
+
+const sampleItem = {
+  type: { icon: 'kqlValue', color: 'secondary' },
+  label: '"Charles de Gaulle International Airport" ',
+  description: shortDescription,
+};
+
+export default () => (
+  <div>
+    <EuiSuggestItem
+      type={sampleItem.type}
+      label={sampleItem.label}
+      description={sampleItem.description}
+    />
+    <EuiSuggestItem
+      type={sampleItem.type}
+      expandLongLabel={true}
+      label={sampleItem.label}
+      description={sampleItem.description}
+    />
+  </div>
+);
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
index 6e766098e1c..568d2ff8e70 100644
--- a/src/components/suggest_item/_suggest_item.scss
+++ b/src/components/suggest_item/_suggest_item.scss
@@ -69,10 +69,13 @@ $buttonTypes: (
     }
   }
 
-  .euiSuggestItem__description {
-    color: $euiColorDarkShade;
+  .euiSuggestItem__description, .euiSuggestItem__label {
     overflow: hidden;
     text-overflow: ellipsis;
-    margin-left: $euiSizeXL;
+    display: block;
+	}
+
+  .euiSuggestItem__description {
+    color: $euiColorDarkShade;
 	}
 }
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
index 31a9e9fb236..ecfba98ded4 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/src/components/suggest_item/suggest_item.js
@@ -18,13 +18,14 @@ export const EuiSuggestItem = ({
   className,
   label,
   type,
+  expandLongLabel,
   description,
   ...rest
 }) => {
   const classes = classNames('euiSuggestItem', className);
 
-  let optionalColorClass = null;
-  let optionalLabelClass = null;
+  let optionalColorClass = '';
+  let optionalLabelClass = '';
   let optionalCustomStyles = undefined;
 
   if (COLORS.indexOf(type.color) > -1) {
@@ -33,8 +34,10 @@ export const EuiSuggestItem = ({
     optionalCustomStyles = { backgroundColor: type.color };
   }
 
-  if (label && label.length > 100) {
-    optionalLabelClass = 'longLabel';
+  if (expandLongLabel) {
+    if (label && label.length > 35) {
+      optionalLabelClass = 'longLabel';
+    }
   }
 
   return (
@@ -69,6 +72,10 @@ EuiSuggestItem.propTypes = {
    * Description for suggestion
    */
   description: PropTypes.string,
+
+  expandLongLabel: PropTypes.bool,
 };
 
-EuiSuggestItem.defaultProps = {};
+EuiSuggestItem.defaultProps = {
+  expandLongLabel: false,
+};

From b68f80585b0d977de21f771cdb2570b1971735d0 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Tue, 2 Jul 2019 09:34:31 -0700
Subject: [PATCH 15/25] removed some quotes

---
 src-docs/src/views/suggest_item/suggest_item_long_label.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/suggest_item/suggest_item_long_label.js b/src-docs/src/views/suggest_item/suggest_item_long_label.js
index 9b4f4d31e75..baecb7036c8 100644
--- a/src-docs/src/views/suggest_item/suggest_item_long_label.js
+++ b/src-docs/src/views/suggest_item/suggest_item_long_label.js
@@ -6,7 +6,7 @@ const shortDescription = 'This is the description';
 
 const sampleItem = {
   type: { icon: 'kqlValue', color: 'secondary' },
-  label: '"Charles de Gaulle International Airport" ',
+  label: 'Charles de Gaulle International Airport',
   description: shortDescription,
 };
 

From b5820112b20da9b1eb8e32f696fc955325381c92 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 3 Jul 2019 12:31:11 -0500
Subject: [PATCH 16/25] tests passing

---
 .../suggest_item/suggest_item_example.js      |  2 +-
 .../__snapshots__/suggest_item.test.js.snap   | 28 +++++++++++++++++++
 .../suggest_item/_suggest_item.scss           |  5 ++--
 src/components/suggest_item/suggest_item.js   |  9 +++---
 .../suggest_item/suggest_item.test.js         |  7 ++++-
 5 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 src/components/suggest_item/__snapshots__/suggest_item.test.js.snap

diff --git a/src-docs/src/views/suggest_item/suggest_item_example.js b/src-docs/src/views/suggest_item/suggest_item_example.js
index 1074acfa020..b3aa9e4b448 100644
--- a/src-docs/src/views/suggest_item/suggest_item_example.js
+++ b/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>.
diff --git a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
new file mode 100644
index 00000000000..5b1061eacd6
--- /dev/null
+++ b/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>
+`;
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
index d97fbea7bd8..7bee5338ff5 100644
--- a/src/components/suggest_item/_suggest_item.scss
+++ b/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;
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
index 9cfbd254a08..86d62876ca5 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/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
    */
diff --git a/src/components/suggest_item/suggest_item.test.js b/src/components/suggest_item/suggest_item.test.js
index 06bf12e108b..1c8c87c5fba 100644
--- a/src/components/suggest_item/suggest_item.test.js
+++ b/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();
   });

From 418cba679d3c61feb751aa17479579856409701b Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Tue, 2 Jul 2019 16:22:56 -0700
Subject: [PATCH 17/25] added layout to replace expandLongLabel

---
 .../suggest_item/suggest_item_example.js      | 10 ++++-
 .../suggest_item/suggest_item_long_label.js   |  2 +-
 .../suggest_item/_suggest_item.scss           |  2 +-
 src/components/suggest_item/suggest_item.js   | 38 ++++++++++---------
 4 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src-docs/src/views/suggest_item/suggest_item_example.js b/src-docs/src/views/suggest_item/suggest_item_example.js
index 4ac211fd697..1074acfa020 100644
--- a/src-docs/src/views/suggest_item/suggest_item_example.js
+++ b/src-docs/src/views/suggest_item/suggest_item_example.js
@@ -52,6 +52,11 @@ export const SuggestItemExample = {
               <EuiCode>description</EuiCode> is the secondary text for the
               suggestion and it is optional.
             </li>
+            <li>
+              Use <EuiCode>layout</EuiCode> to change the distribution of the{' '}
+              <EuiCode>EuiSuggestItem</EuiCode> elements. The default{' '}
+              <EuiCode>layout</EuiCode> is <EuiCode>setColumns</EuiCode>.
+            </li>
           </ul>
         </div>
       ),
@@ -73,8 +78,9 @@ export const SuggestItemExample = {
       text: (
         <p>
           By default <EuiCode>EuiSuggestItem</EuiCode>'s{' '}
-          <EuiCode>label</EuiCode> will use ellipsis. It's possible to show the
-          full text by using <EuiCode>expandLongLabel</EuiCode>.
+          <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>.
         </p>
       ),
       props: { EuiSuggestItem },
diff --git a/src-docs/src/views/suggest_item/suggest_item_long_label.js b/src-docs/src/views/suggest_item/suggest_item_long_label.js
index baecb7036c8..026f6ae6dae 100644
--- a/src-docs/src/views/suggest_item/suggest_item_long_label.js
+++ b/src-docs/src/views/suggest_item/suggest_item_long_label.js
@@ -19,7 +19,7 @@ export default () => (
     />
     <EuiSuggestItem
       type={sampleItem.type}
-      expandLongLabel={true}
+      layout="inline"
       label={sampleItem.label}
       description={sampleItem.description}
     />
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
index 568d2ff8e70..d97fbea7bd8 100644
--- a/src/components/suggest_item/_suggest_item.scss
+++ b/src/components/suggest_item/_suggest_item.scss
@@ -64,7 +64,7 @@ $buttonTypes: (
     padding: $euiSizeXS $euiSizeS;
     color: $euiTextColor;
     // sass-lint:disable-line empty-line-between-blocks
-    &.longLabel {
+    &.euiSuggestItem__layout--inline {
       width: auto;
     }
   }
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
index ecfba98ded4..9cfbd254a08 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/src/components/suggest_item/suggest_item.js
@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { EuiIcon, IconPropType, IconColor, IconType } from '../icon';
+import { TypePredicateKind } from 'typescript';
 
 const colorToClassNameMap = {
   primary: 'euiSuggestItem__type--primary',
@@ -14,29 +15,32 @@ const colorToClassNameMap = {
 
 export const COLORS = Object.keys(colorToClassNameMap);
 
+const layoutToClassNameMap = {
+  setColumns: 'euiSuggestItem__layout--set',
+  inline: 'euiSuggestItem__layout--inline',
+};
+
+export const LAYOUTS = Object.keys(layoutToClassNameMap);
+
 export const EuiSuggestItem = ({
   className,
   label,
   type,
-  expandLongLabel,
+  layout,
   description,
   ...rest
 }) => {
   const classes = classNames('euiSuggestItem', className);
 
   let optionalColorClass = '';
-  let optionalLabelClass = '';
+  const layoutClass = layoutToClassNameMap[layout];
   let optionalCustomStyles = undefined;
 
-  if (COLORS.indexOf(type.color) > -1) {
-    optionalColorClass = colorToClassNameMap[type.color];
-  } else {
-    optionalCustomStyles = { backgroundColor: type.color };
-  }
-
-  if (expandLongLabel) {
-    if (label && label.length > 35) {
-      optionalLabelClass = 'longLabel';
+  if (type && type.color) {
+    if (COLORS.indexOf(type.color) > -1) {
+      optionalColorClass = colorToClassNameMap[type.color];
+    } else {
+      optionalCustomStyles = { backgroundColor: type.color };
     }
   }
 
@@ -50,9 +54,7 @@ export const EuiSuggestItem = ({
         )}
         <EuiIcon color={type.color} type={type.icon} />
       </span>
-      <span className={`euiSuggestItem__label ${optionalLabelClass}`}>
-        {label}
-      </span>
+      <span className={`euiSuggestItem__label ${layoutClass}`}>{label}</span>
       <span className="euiSuggestItem__description">{description}</span>
     </div>
   );
@@ -72,10 +74,12 @@ EuiSuggestItem.propTypes = {
    * Description for suggestion
    */
   description: PropTypes.string,
-
-  expandLongLabel: PropTypes.bool,
+  /**
+   * Layout for suggest item
+   */
+  layout: PropTypes.oneOf(LAYOUTS),
 };
 
 EuiSuggestItem.defaultProps = {
-  expandLongLabel: false,
+  layout: 'setColumns',
 };

From 7a0555b55e12aef5610bd59d043124e12a7dd4e6 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 3 Jul 2019 11:21:32 -0700
Subject: [PATCH 18/25] placed suggestItem import and export in correct order

---
 src-docs/src/routes.js                                  | 6 +++---
 src-docs/src/views/suggest_item/suggest_item_example.js | 1 -
 src/components/index.js                                 | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 1fc6248671e..fc63a086bdd 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -116,8 +116,6 @@ import { LinkExample } from './views/link/link_example';
 
 import { ListGroupExample } from './views/list_group/list_group_example';
 
-import { SuggestItemExample } from './views/suggest_item/suggest_item_example';
-
 import { LoadingExample } from './views/loading/loading_example';
 
 import { ModalExample } from './views/modal/modal_example';
@@ -158,6 +156,8 @@ import { StatExample } from './views/stat/stat_example';
 
 import { StepsExample } from './views/steps/steps_example';
 
+import { SuggestItemExample } from './views/suggest_item/suggest_item_example';
+
 import { TableExample } from './views/tables/tables_example';
 
 import { TabsExample } from './views/tabs/tabs_example';
@@ -321,10 +321,10 @@ const navigation = [
       IconExample,
       ImageExample,
       ListGroupExample,
-      SuggestItemExample,
       LoadingExample,
       ProgressExample,
       StatExample,
+      SuggestItemExample,
       TableExample,
       TextExample,
       TitleExample,
diff --git a/src-docs/src/views/suggest_item/suggest_item_example.js b/src-docs/src/views/suggest_item/suggest_item_example.js
index b3aa9e4b448..6c72feb15c3 100644
--- a/src-docs/src/views/suggest_item/suggest_item_example.js
+++ b/src-docs/src/views/suggest_item/suggest_item_example.js
@@ -18,7 +18,6 @@ export const SuggestItemExample = {
   title: 'Suggest Item',
   sections: [
     {
-      title: 'SuggestItem',
       source: [
         {
           type: GuideSectionTypes.JS,
diff --git a/src/components/index.js b/src/components/index.js
index c77188338bf..eb794298245 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -160,8 +160,6 @@ export { EuiLink } from './link';
 
 export { EuiListGroup, EuiListGroupItem } from './list_group';
 
-export { EuiSuggestItem } from './suggest_item';
-
 export {
   EUI_MODAL_CANCEL_BUTTON,
   EUI_MODAL_CONFIRM_BUTTON,
@@ -232,6 +230,8 @@ export { EuiStat } from './stat';
 
 export { EuiStep, EuiSteps, EuiSubSteps, EuiStepsHorizontal } from './steps';
 
+export { EuiSuggestItem } from './suggest_item';
+
 export {
   EuiTable,
   EuiTableBody,

From d85064451dc03bb9700e52dab6b68abafddf291c Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 3 Jul 2019 14:30:02 -0700
Subject: [PATCH 19/25] some css fixes

---
 src/components/index.scss                     |  2 +-
 .../suggest_item/_suggest_item.scss           | 30 +++++++++----------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/components/index.scss b/src/components/index.scss
index 14df51c795c..70278ac88cc 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -35,7 +35,6 @@
 @import 'key_pad_menu/index';
 @import 'link/index';
 @import 'list_group/index';
-@import 'suggest_item/index';
 @import 'loading/index';
 @import 'modal/index';
 @import 'nav_drawer/index';
@@ -52,6 +51,7 @@
 @import 'selectable/index';
 @import 'stat/index';
 @import 'steps/index';
+@import 'suggest_item/index';
 @import 'table/index';
 @import 'tabs/index';
 @import 'title/index';
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
index 7bee5338ff5..12db899eb42 100644
--- a/src/components/suggest_item/_suggest_item.scss
+++ b/src/components/suggest_item/_suggest_item.scss
@@ -5,30 +5,19 @@ $buttonTypes: (
   secondary: $euiColorSecondary,
   warning: $euiColorWarning,
   danger: $euiColorDanger,
-  ghost: $euiColorGhost, // Ghost is special, and does not care about theming.
-  dark: $euiColorMediumShade, // Reserved for special use cases
+  dark: $euiColorMediumShade,
 );
 
-.customBackground {
-  width: 32px;
-  height: 32px;
-  position: absolute;
-  opacity: .2;
-}
-
-
 .euiSuggestItem {
   display: flex;
   flex-grow: 1;
   align-items: center;
   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%);
-      // color: makeHighContrastColor($color, tintOrShade($color, 90%, 50%));
 		}
 	}
 
@@ -41,8 +30,8 @@ $buttonTypes: (
     flex-direction: column;
 	}
 
-
   .euiSuggestItem__type {
+    position: relative;
     flex-grow: 0;
     flex-basis: auto;
     width: $euiSizeXL;
@@ -52,18 +41,27 @@ $buttonTypes: (
     padding: $euiSizeXS;
     justify-content: center;
     align-items: center;
+
+    .customBackground {
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      opacity: .2;
+      top: 0;
+      left: 0;
+    }
   }
 
   .euiSuggestItem__label {
-    flex-grow: 0; /* 2 */
-    flex-basis: auto; /* 2 */
+    flex-grow: 0;
+    flex-basis: auto;
     font-family: $euiCodeFontFamily;
     width: 250px;
     overflow: hidden;
     text-overflow: ellipsis;
     padding: $euiSizeXS $euiSizeS;
     color: $euiTextColor;
-    // sass-lint:disable-line empty-line-between-blocks
+
     &.euiSuggestItem__layout--inline {
       width: auto;
     }

From c0b57c73b1d7f7caa7def5d1fa4d9ef78ea917e7 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Tue, 9 Jul 2019 16:44:55 -0700
Subject: [PATCH 20/25] considering vis colors

---
 .../src/views/suggest_item/suggest_item.js    |  9 ++---
 src/components/suggest_item/_index.scss       |  2 ++
 .../suggest_item/_suggest_item.scss           | 33 ++++++++++--------
 src/components/suggest_item/_variables.scss   |  9 +++++
 src/components/suggest_item/suggest_item.js   | 34 +++++++++++--------
 5 files changed, 53 insertions(+), 34 deletions(-)
 create mode 100644 src/components/suggest_item/_variables.scss

diff --git a/src-docs/src/views/suggest_item/suggest_item.js b/src-docs/src/views/suggest_item/suggest_item.js
index 4cc1d194ea1..10d62c76bfa 100644
--- a/src-docs/src/views/suggest_item/suggest_item.js
+++ b/src-docs/src/views/suggest_item/suggest_item.js
@@ -16,7 +16,7 @@ const sampleItems = [
     description: shortDescription,
   },
   {
-    type: { icon: 'kqlSelector', color: '#7800A6' },
+    type: { icon: 'kqlSelector', color: 'accent' },
     label: 'Conjunction sample',
     description: shortDescription,
   },
@@ -26,20 +26,21 @@ const sampleItems = [
     description: shortDescription,
   },
   {
-    type: { icon: 'search', color: 'dark' },
+    type: { icon: 'search', color: 'text' },
     label: 'Recent search sample',
   },
   {
-    type: { icon: 'save', color: '#DD0A73' },
+    type: { icon: 'save', color: 'vis3' },
     label: 'Saved search',
   },
 ];
 
 export default () => (
   <div>
-    {sampleItems.map(item => (
+    {sampleItems.map((item, index) => (
       <EuiSuggestItem
         type={item.type}
+        key={index}
         label={item.label}
         description={item.description}
       />
diff --git a/src/components/suggest_item/_index.scss b/src/components/suggest_item/_index.scss
index ce53d8187f7..c4dd928bb4e 100644
--- a/src/components/suggest_item/_index.scss
+++ b/src/components/suggest_item/_index.scss
@@ -1 +1,3 @@
+@import 'variables';
+
 @import 'suggest_item';
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
index 12db899eb42..594da0a57e7 100644
--- a/src/components/suggest_item/_suggest_item.scss
+++ b/src/components/suggest_item/_suggest_item.scss
@@ -1,12 +1,12 @@
 @import '../loading/mixins';
 
-$buttonTypes: (
-  primary: $euiColorPrimary,
-  secondary: $euiColorSecondary,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-  dark: $euiColorMediumShade,
-);
+// $buttonTypes: (
+//   primary: $euiColorPrimary,
+//   secondary: $euiColorSecondary,
+//   warning: $euiColorWarning,
+//   danger: $euiColorDanger,
+//   dark: $euiColorMediumShade,
+// );
 
 .euiSuggestItem {
   display: flex;
@@ -15,7 +15,7 @@ $buttonTypes: (
   font-size: $euiFontSizeXS;
   white-space: nowrap;
 
-  @each $name, $color in $buttonTypes {
+  @each $name, $color in $itemColors {
     .euiSuggestItem__type--#{$name} {
       background-color: tintOrShade($color, 90%, 50%);
 		}
@@ -24,15 +24,14 @@ $buttonTypes: (
   .euiSuggestItem__label,
   .euiSuggestItem__type,
   .euiSuggestItem__description {
-    flex-grow: 1;
-    flex-basis: 0%;
+    flex-grow: 0;
     display: flex;
     flex-direction: column;
 	}
 
   .euiSuggestItem__type {
     position: relative;
-    flex-grow: 0;
+    flex-shrink: 0;
     flex-basis: auto;
     width: $euiSizeXL;
     height: $euiSizeXL;
@@ -53,17 +52,15 @@ $buttonTypes: (
   }
 
   .euiSuggestItem__label {
-    flex-grow: 0;
-    flex-basis: auto;
+    flex-basis: 30%;
     font-family: $euiCodeFontFamily;
-    width: 250px;
     overflow: hidden;
     text-overflow: ellipsis;
     padding: $euiSizeXS $euiSizeS;
     color: $euiTextColor;
 
     &.euiSuggestItem__layout--inline {
-      width: auto;
+      flex-basis: auto;
     }
   }
 
@@ -76,5 +73,11 @@ $buttonTypes: (
 
   .euiSuggestItem__description {
     color: $euiColorDarkShade;
+    flex-basis: auto;
+    padding-top: $euiSizeXS * .5;
+    &:empty {
+      flex-grow: 0;
+      margin-left:0;
+    }
 	}
 }
diff --git a/src/components/suggest_item/_variables.scss b/src/components/suggest_item/_variables.scss
new file mode 100644
index 00000000000..140eb1e1bfe
--- /dev/null
+++ b/src/components/suggest_item/_variables.scss
@@ -0,0 +1,9 @@
+$itemColors: (
+  primary: $euiColorPrimary,
+  secondary: $euiColorSecondary,
+  warning: $euiColorWarning,
+  danger: $euiColorDanger,
+  text: $euiColorMediumShade,
+  accent: $euiColorAccent,
+  vis3: $euiColorVis3,
+);
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
index 86d62876ca5..99415c027d7 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/src/components/suggest_item/suggest_item.js
@@ -4,11 +4,16 @@ import classNames from 'classnames';
 import { EuiIcon, IconPropType } from '../icon';
 
 const colorToClassNameMap = {
-  primary: 'euiSuggestItem__type--primary',
-  secondary: 'euiSuggestItem__type--secondary',
-  warning: 'euiSuggestItem__type--warning',
-  danger: 'euiSuggestItem__type--danger',
-  dark: 'euiSuggestItem__type--dark',
+  primary: { class: 'euiSuggestItem__type--primary', colorName: 'primary' },
+  secondary: {
+    class: 'euiSuggestItem__type--secondary',
+    colorName: 'secondary',
+  },
+  warning: { class: 'euiSuggestItem__type--warning', colorName: 'warning' },
+  danger: { class: 'euiSuggestItem__type--danger', colorName: 'danger' },
+  text: { class: 'euiSuggestItem__type--text', colorName: 'text' },
+  accent: { class: 'euiSuggestItem__type--accent', colorName: 'accent' },
+  vis3: { class: 'euiSuggestItem__type--vis3', colorName: '#490092' },
 };
 
 export const COLORS = Object.keys(colorToClassNameMap);
@@ -32,25 +37,24 @@ export const EuiSuggestItem = ({
 
   let optionalColorClass = '';
   const layoutClass = layoutToClassNameMap[layout];
-  let optionalCustomStyles = undefined;
+  // let optionalCustomStyles = undefined;
 
   if (type && type.color) {
     if (COLORS.indexOf(type.color) > -1) {
-      optionalColorClass = colorToClassNameMap[type.color];
-    } else {
-      optionalCustomStyles = { backgroundColor: type.color };
+      optionalColorClass = colorToClassNameMap[type.color].class;
     }
+    // } else {
+    //   optionalCustomStyles = { backgroundColor: type.color };
+    // }
   }
 
+  let colorName;
+  colorName = colorToClassNameMap[type.color].colorName;
+
   return (
     <div className={classes} {...rest}>
       <span className={`euiSuggestItem__type ${optionalColorClass}`}>
-        {optionalCustomStyles ? (
-          <div style={optionalCustomStyles} className="customBackground" />
-        ) : (
-          undefined
-        )}
-        <EuiIcon color={type.color} type={type.icon} />
+        <EuiIcon color={colorName} type={type.icon} />
       </span>
       <span className={`euiSuggestItem__label ${layoutClass}`}>{label}</span>
       <span className="euiSuggestItem__description">{description}</span>

From e6cabe416b837009d019ec0d90c94dade86fe825 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 11 Jul 2019 14:36:42 -0700
Subject: [PATCH 21/25] changes based on feedback

---
 src-docs/src/routes.js                        |  4 +-
 src-docs/src/views/suggest/suggest.js         |  3 +
 src-docs/src/views/suggest/suggest_example.js | 81 +++++++++++++++++
 src-docs/src/views/suggest/suggest_item.js    | 72 +++++++++++++++
 .../src/views/suggest_item/suggest_item.js    | 49 ----------
 .../suggest_item/suggest_item_example.js      | 89 -------------------
 .../suggest_item/suggest_item_long_label.js   | 27 ------
 .../__snapshots__/suggest_item.test.js.snap   | 58 +++++++++++-
 .../suggest_item/_suggest_item.scss           | 33 +++----
 src/components/suggest_item/_variables.scss   | 14 +--
 src/components/suggest_item/suggest_item.js   | 62 ++++++-------
 .../suggest_item/suggest_item.test.js         | 32 ++++++-
 12 files changed, 290 insertions(+), 234 deletions(-)
 create mode 100644 src-docs/src/views/suggest/suggest.js
 create mode 100644 src-docs/src/views/suggest/suggest_example.js
 create mode 100644 src-docs/src/views/suggest/suggest_item.js
 delete mode 100644 src-docs/src/views/suggest_item/suggest_item.js
 delete mode 100644 src-docs/src/views/suggest_item/suggest_item_example.js
 delete mode 100644 src-docs/src/views/suggest_item/suggest_item_long_label.js

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index fc63a086bdd..a7a86a7c86c 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -156,7 +156,7 @@ import { StatExample } from './views/stat/stat_example';
 
 import { StepsExample } from './views/steps/steps_example';
 
-import { SuggestItemExample } from './views/suggest_item/suggest_item_example';
+import { SuggestExample } from './views/suggest/suggest_example';
 
 import { TableExample } from './views/tables/tables_example';
 
@@ -324,7 +324,6 @@ const navigation = [
       LoadingExample,
       ProgressExample,
       StatExample,
-      SuggestItemExample,
       TableExample,
       TextExample,
       TitleExample,
@@ -348,6 +347,7 @@ const navigation = [
       RangeControlExample,
       SearchBarExample,
       SelectableExample,
+      SuggestExample,
     ].map(example => createExample(example)),
   },
   {
diff --git a/src-docs/src/views/suggest/suggest.js b/src-docs/src/views/suggest/suggest.js
new file mode 100644
index 00000000000..3c4c903427b
--- /dev/null
+++ b/src-docs/src/views/suggest/suggest.js
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => <div />;
diff --git a/src-docs/src/views/suggest/suggest_example.js b/src-docs/src/views/suggest/suggest_example.js
new file mode 100644
index 00000000000..b884f78846b
--- /dev/null
+++ b/src-docs/src/views/suggest/suggest_example.js
@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import { EuiCode, EuiSuggestItem } from '../../../../src/components';
+
+import Suggest from './suggest';
+const suggestSource = require('!!raw-loader!./suggest');
+const suggestHtml = renderToHtml(Suggest);
+
+import SuggestItem from './suggest_item';
+const suggestItemSource = require('!!raw-loader!./suggest_item');
+const suggestItemHtml = renderToHtml(SuggestItem);
+const suggestItemSnippet = [
+  `<EuiSuggestItem
+  type={sampleItem.type}
+  label={sampleItem.label}
+  description={sampleItem.description}
+/>
+`,
+  `<EuiSuggestItem
+  type={sampleItem.type}
+  label={sampleItem.label}
+  description={sampleItem.description}
+  labelDisplay="expand"
+/>`,
+];
+
+export const SuggestExample = {
+  title: 'Suggest',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: suggestSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: suggestHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            <EuiCode>EuiSuggest</EuiCode> description goes here.
+          </p>
+        </div>
+      ),
+    },
+    {
+      title: 'Suggest Item',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: suggestItemSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: suggestItemHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            <EuiCode>EuiSuggestItem</EuiCode> is a list item component to
+            display suggestions when typing queries in{' '}
+            <EuiCode>EuiSuggestInput</EuiCode>. Use{' '}
+            <EuiCode>labelDisplay</EuiCode> to set whether the{' '}
+            <EuiCode>label</EuiCode> has a fixed width or not.
+          </p>
+        </div>
+      ),
+      props: { EuiSuggestItem },
+      snippet: suggestItemSnippet,
+      demo: <SuggestItem />,
+    },
+  ],
+};
diff --git a/src-docs/src/views/suggest/suggest_item.js b/src-docs/src/views/suggest/suggest_item.js
new file mode 100644
index 00000000000..a641ad89b18
--- /dev/null
+++ b/src-docs/src/views/suggest/suggest_item.js
@@ -0,0 +1,72 @@
+import React from 'react';
+
+import { EuiSuggestItem, EuiSpacer } from '../../../../src/components';
+
+const shortDescription = 'This is the description';
+
+const sampleItems = [
+  {
+    type: { iconType: 'kqlField', color: 'itemTint03' },
+    label: 'Field sample',
+    description: shortDescription,
+  },
+  {
+    type: { iconType: 'kqlValue', color: 'itemTint02' },
+    label: 'Value sample',
+    description: shortDescription,
+  },
+  {
+    type: { iconType: 'kqlSelector', color: 'itemTint06' },
+    label: 'Conjunction sample',
+    description: shortDescription,
+  },
+  {
+    type: { iconType: 'kqlOperand', color: 'itemTint01' },
+    label: 'Operator sample',
+    description: shortDescription,
+  },
+  {
+    type: { iconType: 'search', color: 'itemTint05' },
+    label: 'Recent search',
+  },
+  {
+    type: { iconType: 'save', color: 'itemTint07' },
+    label: 'Saved search',
+  },
+];
+
+const sampleItem1 = {
+  type: { iconType: 'kqlValue', color: 'itemTint02' },
+  label: 'Charles de Gaulle International Airport',
+  description: shortDescription,
+};
+
+export default () => (
+  <div>
+    {sampleItems.map((item, index) => (
+      <EuiSuggestItem
+        type={item.type}
+        key={index}
+        label={item.label}
+        description={item.description}
+      />
+    ))}
+    <EuiSpacer size="m" />
+    <EuiSuggestItem
+      type={sampleItem1.type}
+      label={sampleItem1.label}
+      description="This item has a fixed width label"
+    />
+    <EuiSuggestItem
+      type={sampleItem1.type}
+      labelDisplay="expand"
+      label={sampleItem1.label}
+      description="This item expands its label"
+    />
+    <EuiSpacer size="m" />
+    <EuiSuggestItem
+      type={{ iconType: 'search', color: 'itemTint05' }}
+      label="Items with no description will expand their label"
+    />
+  </div>
+);
diff --git a/src-docs/src/views/suggest_item/suggest_item.js b/src-docs/src/views/suggest_item/suggest_item.js
deleted file mode 100644
index 10d62c76bfa..00000000000
--- a/src-docs/src/views/suggest_item/suggest_item.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-
-import { EuiSuggestItem } from '../../../../src/components/suggest_item';
-
-const shortDescription = 'This is the description';
-
-const sampleItems = [
-  {
-    type: { icon: 'kqlField', color: 'warning' },
-    label: 'Field sample',
-    description: shortDescription,
-  },
-  {
-    type: { icon: 'kqlValue', color: 'secondary' },
-    label: 'Value sample',
-    description: shortDescription,
-  },
-  {
-    type: { icon: 'kqlSelector', color: 'accent' },
-    label: 'Conjunction sample',
-    description: shortDescription,
-  },
-  {
-    type: { icon: 'kqlOperand', color: 'primary' },
-    label: 'Operator sample',
-    description: shortDescription,
-  },
-  {
-    type: { icon: 'search', color: 'text' },
-    label: 'Recent search sample',
-  },
-  {
-    type: { icon: 'save', color: 'vis3' },
-    label: 'Saved search',
-  },
-];
-
-export default () => (
-  <div>
-    {sampleItems.map((item, index) => (
-      <EuiSuggestItem
-        type={item.type}
-        key={index}
-        label={item.label}
-        description={item.description}
-      />
-    ))}
-  </div>
-);
diff --git a/src-docs/src/views/suggest_item/suggest_item_example.js b/src-docs/src/views/suggest_item/suggest_item_example.js
deleted file mode 100644
index 6c72feb15c3..00000000000
--- a/src-docs/src/views/suggest_item/suggest_item_example.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-
-import { renderToHtml } from '../../services';
-
-import { GuideSectionTypes } from '../../components';
-
-import { EuiCode, EuiSuggestItem } from '../../../../src/components';
-
-import SuggestItem from './suggest_item';
-const suggestItemSource = require('!!raw-loader!./suggest_item');
-const suggestItemHtml = renderToHtml(SuggestItem);
-
-import SuggestItemLongLabel from './suggest_item_long_label';
-const suggestItemLongLabelSource = require('!!raw-loader!./suggest_item_long_label');
-const suggestItemLongLabelHtml = renderToHtml(SuggestItemLongLabel);
-
-export const SuggestItemExample = {
-  title: 'Suggest Item',
-  sections: [
-    {
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: suggestItemSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: suggestItemHtml,
-        },
-      ],
-      text: (
-        <div>
-          <p>
-            <EuiCode>EuiSuggestItem</EuiCode> is a list item component useful to
-            suggestions when typing queries in input fields.
-          </p>
-          <ul>
-            <li>
-              <EuiCode>type</EuiCode> is an object that takes{' '}
-              <EuiCode>icon</EuiCode> and <EuiCode>color</EuiCode>.{' '}
-              <EuiCode>icon</EuiCode> supports any of the icons available in
-              <EuiCode>EuiIcon</EuiCode>. <EuiCode>color</EuiCode> is the color
-              for the icon and its background. The background color is
-              automatically calculated and it is a ligther shade of
-              <EuiCode>color</EuiCode>.
-            </li>
-            <li>
-              <EuiCode>label</EuiCode> is the primary text for the suggestion.
-            </li>
-            <li>
-              <EuiCode>description</EuiCode> is the secondary text for the
-              suggestion and it is optional.
-            </li>
-            <li>
-              Use <EuiCode>layout</EuiCode> to change the distribution of the{' '}
-              <EuiCode>EuiSuggestItem</EuiCode> elements. The default{' '}
-              <EuiCode>layout</EuiCode> is <EuiCode>setColumns</EuiCode>.
-            </li>
-          </ul>
-        </div>
-      ),
-      props: { EuiSuggestItem },
-      demo: <SuggestItem />,
-    },
-    {
-      title: 'Expand long label',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: suggestItemLongLabelSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: suggestItemLongLabelHtml,
-        },
-      ],
-      text: (
-        <p>
-          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>.
-        </p>
-      ),
-      props: { EuiSuggestItem },
-      demo: <SuggestItemLongLabel />,
-    },
-  ],
-};
diff --git a/src-docs/src/views/suggest_item/suggest_item_long_label.js b/src-docs/src/views/suggest_item/suggest_item_long_label.js
deleted file mode 100644
index 026f6ae6dae..00000000000
--- a/src-docs/src/views/suggest_item/suggest_item_long_label.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { EuiSuggestItem } from '../../../../src/components/suggest_item';
-
-const shortDescription = 'This is the description';
-
-const sampleItem = {
-  type: { icon: 'kqlValue', color: 'secondary' },
-  label: 'Charles de Gaulle International Airport',
-  description: shortDescription,
-};
-
-export default () => (
-  <div>
-    <EuiSuggestItem
-      type={sampleItem.type}
-      label={sampleItem.label}
-      description={sampleItem.description}
-    />
-    <EuiSuggestItem
-      type={sampleItem.type}
-      layout="inline"
-      label={sampleItem.label}
-      description={sampleItem.description}
-    />
-  </div>
-);
diff --git a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
index 5b1061eacd6..f5d2db891f2 100644
--- a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
+++ b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
@@ -7,10 +7,10 @@ exports[`EuiSuggestItem is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <span
-    class="euiSuggestItem__type euiSuggestItem__type--primary"
+    class="euiSuggestItem__type euiSuggestItem__type--itemTint01"
   >
     <svg
-      class="euiIcon euiIcon--medium euiIcon--primary euiIcon-isLoading"
+      class="euiIcon euiIcon--medium euiIcon-isLoading"
       focusable="false"
       height="16"
       viewBox="0 0 16 16"
@@ -19,10 +19,62 @@ exports[`EuiSuggestItem is rendered 1`] = `
     />
   </span>
   <span
-    class="euiSuggestItem__label euiSuggestItem__layout--set"
+    class="euiSuggestItem__label euiSuggestItem__labelDisplay--expand"
   />
   <span
     class="euiSuggestItem__description"
   />
 </div>
 `;
+
+exports[`props item with no description has expanded label is rendered 1`] = `
+<div
+  class="euiSuggestItem"
+>
+  <span
+    class="euiSuggestItem__type euiSuggestItem__type--itemTint02"
+  >
+    <svg
+      class="euiIcon euiIcon--medium 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__labelDisplay--expand"
+  />
+  <span
+    class="euiSuggestItem__description"
+  />
+</div>
+`;
+
+exports[`props labelDisplay as expand is rendered 1`] = `
+<div
+  class="euiSuggestItem"
+>
+  <span
+    class="euiSuggestItem__type euiSuggestItem__type--itemTint02"
+  >
+    <svg
+      class="euiIcon euiIcon--medium 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__labelDisplay--expand"
+  />
+  <span
+    class="euiSuggestItem__description"
+  >
+    This is the description
+  </span>
+</div>
+`;
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
index 594da0a57e7..2fe4558e274 100644
--- a/src/components/suggest_item/_suggest_item.scss
+++ b/src/components/suggest_item/_suggest_item.scss
@@ -1,13 +1,5 @@
 @import '../loading/mixins';
 
-// $buttonTypes: (
-//   primary: $euiColorPrimary,
-//   secondary: $euiColorSecondary,
-//   warning: $euiColorWarning,
-//   danger: $euiColorDanger,
-//   dark: $euiColorMediumShade,
-// );
-
 .euiSuggestItem {
   display: flex;
   flex-grow: 1;
@@ -17,7 +9,12 @@
 
   @each $name, $color in $itemColors {
     .euiSuggestItem__type--#{$name} {
-      background-color: tintOrShade($color, 90%, 50%);
+      $backgroundColor: tintOrShade($color, 90%, 50%);
+      background-color: $backgroundColor;
+
+      svg {
+        fill: makeHighContrastColor($color, $backgroundColor);
+      }
 		}
 	}
 
@@ -40,15 +37,6 @@
     padding: $euiSizeXS;
     justify-content: center;
     align-items: center;
-
-    .customBackground {
-      width: 32px;
-      height: 32px;
-      position: absolute;
-      opacity: .2;
-      top: 0;
-      left: 0;
-    }
   }
 
   .euiSuggestItem__label {
@@ -59,15 +47,15 @@
     padding: $euiSizeXS $euiSizeS;
     color: $euiTextColor;
 
-    &.euiSuggestItem__layout--inline {
+    &.euiSuggestItem__labelDisplay--expand {
       flex-basis: auto;
+      flex-shrink: 1;
     }
   }
 
   .euiSuggestItem__description,
   .euiSuggestItem__label {
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include euiTextTruncate;
     display: block;
 	}
 
@@ -75,9 +63,10 @@
     color: $euiColorDarkShade;
     flex-basis: auto;
     padding-top: $euiSizeXS * .5;
+
     &:empty {
       flex-grow: 0;
-      margin-left:0;
+      margin-left: 0;
     }
 	}
 }
diff --git a/src/components/suggest_item/_variables.scss b/src/components/suggest_item/_variables.scss
index 140eb1e1bfe..dbdf162dd08 100644
--- a/src/components/suggest_item/_variables.scss
+++ b/src/components/suggest_item/_variables.scss
@@ -1,9 +1,9 @@
 $itemColors: (
-  primary: $euiColorPrimary,
-  secondary: $euiColorSecondary,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-  text: $euiColorMediumShade,
-  accent: $euiColorAccent,
-  vis3: $euiColorVis3,
+  itemTint01: $euiColorPrimary,
+  itemTint02: $euiColorSecondary,
+  itemTint03: $euiColorWarning,
+  itemTint04: $euiColorDanger,
+  itemTint05: $euiColorMediumShade,
+  itemTint06: $euiColorAccent,
+  itemTint07: $euiColorVis3,
 );
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
index 99415c027d7..f442609d4f5 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/src/components/suggest_item/suggest_item.js
@@ -4,59 +4,55 @@ import classNames from 'classnames';
 import { EuiIcon, IconPropType } from '../icon';
 
 const colorToClassNameMap = {
-  primary: { class: 'euiSuggestItem__type--primary', colorName: 'primary' },
-  secondary: {
-    class: 'euiSuggestItem__type--secondary',
-    colorName: 'secondary',
-  },
-  warning: { class: 'euiSuggestItem__type--warning', colorName: 'warning' },
-  danger: { class: 'euiSuggestItem__type--danger', colorName: 'danger' },
-  text: { class: 'euiSuggestItem__type--text', colorName: 'text' },
-  accent: { class: 'euiSuggestItem__type--accent', colorName: 'accent' },
-  vis3: { class: 'euiSuggestItem__type--vis3', colorName: '#490092' },
+  itemTint01: 'euiSuggestItem__type--itemTint01',
+  itemTint02: 'euiSuggestItem__type--itemTint02',
+  itemTint03: 'euiSuggestItem__type--itemTint03',
+  itemTint04: 'euiSuggestItem__type--itemTint04',
+  itemTint05: 'euiSuggestItem__type--itemTint05',
+  itemTint06: 'euiSuggestItem__type--itemTint06',
+  itemTint07: 'euiSuggestItem__type--itemTint07',
 };
 
 export const COLORS = Object.keys(colorToClassNameMap);
 
-const layoutToClassNameMap = {
-  setColumns: 'euiSuggestItem__layout--set',
-  inline: 'euiSuggestItem__layout--inline',
+const labelDisplayToClassMap = {
+  fixed: 'euiSuggestItem__labelDisplay--fixed',
+  expand: 'euiSuggestItem__labelDisplay--expand',
 };
 
-export const LAYOUTS = Object.keys(layoutToClassNameMap);
+export const DISPLAYS = Object.keys(labelDisplayToClassMap);
 
 export const EuiSuggestItem = ({
   className,
   label,
   type,
-  layout,
+  labelDisplay,
   description,
   ...rest
 }) => {
   const classes = classNames('euiSuggestItem', className);
 
   let optionalColorClass = '';
-  const layoutClass = layoutToClassNameMap[layout];
-  // let optionalCustomStyles = undefined;
+  let labelDisplayClass = labelDisplayToClassMap[labelDisplay];
+
+  if (!description) {
+    labelDisplayClass = 'euiSuggestItem__labelDisplay--expand';
+  }
 
   if (type && type.color) {
     if (COLORS.indexOf(type.color) > -1) {
-      optionalColorClass = colorToClassNameMap[type.color].class;
+      optionalColorClass = colorToClassNameMap[type.color];
     }
-    // } else {
-    //   optionalCustomStyles = { backgroundColor: type.color };
-    // }
   }
 
-  let colorName;
-  colorName = colorToClassNameMap[type.color].colorName;
-
   return (
     <div className={classes} {...rest}>
       <span className={`euiSuggestItem__type ${optionalColorClass}`}>
-        <EuiIcon color={colorName} type={type.icon} />
+        <EuiIcon type={type.iconType} />
+      </span>
+      <span className={`euiSuggestItem__label ${labelDisplayClass}`}>
+        {label}
       </span>
-      <span className={`euiSuggestItem__label ${layoutClass}`}>{label}</span>
       <span className="euiSuggestItem__description">{description}</span>
     </div>
   );
@@ -65,26 +61,26 @@ export const EuiSuggestItem = ({
 EuiSuggestItem.propTypes = {
   className: PropTypes.string,
   /**
-   * Takes 'icon' for EuiIcon and 'color'. 'color' can be either our palette colors (primary, secondary, etc) or a hex value.
+   * Takes 'iconType' for EuiIcon and 'color'. 'color' can be itemTint01 through itemTint07.
    */
   type: PropTypes.shape({
-    icon: IconPropType,
+    iconType: IconPropType,
     color: PropTypes.oneOfType([PropTypes.oneOf(COLORS), PropTypes.string]),
   }).isRequired,
   /**
-   * Label for suggestion
+   * Label for suggest item
    */
   label: PropTypes.string,
   /**
-   * Description for suggestion
+   * Description for suggest item
    */
   description: PropTypes.string,
   /**
-   * Layout for suggest item
+   * Label display for suggest item
    */
-  layout: PropTypes.oneOf(LAYOUTS),
+  labelDisplay: PropTypes.oneOf(DISPLAYS),
 };
 
 EuiSuggestItem.defaultProps = {
-  layout: 'setColumns',
+  labelDisplay: 'fixed',
 };
diff --git a/src/components/suggest_item/suggest_item.test.js b/src/components/suggest_item/suggest_item.test.js
index 1c8c87c5fba..42eb4e7d7af 100644
--- a/src/components/suggest_item/suggest_item.test.js
+++ b/src/components/suggest_item/suggest_item.test.js
@@ -5,8 +5,8 @@ import { requiredProps } from '../../test/required_props';
 import { EuiSuggestItem } from './suggest_item';
 
 const TYPE = {
-  icon: 'search',
-  color: 'primary',
+  iconType: 'search',
+  color: 'itemTint01',
 };
 
 describe('EuiSuggestItem', () => {
@@ -16,3 +16,31 @@ describe('EuiSuggestItem', () => {
     expect(component).toMatchSnapshot();
   });
 });
+
+describe('props', () => {
+  const sampleItem = {
+    type: { iconType: 'kqlValue', color: 'itemTint02' },
+    label: 'Charles de Gaulle International Airport',
+    description: 'This is the description',
+  };
+
+  describe('labelDisplay as expand', () => {
+    test('is rendered', () => {
+      const component = render(
+        <EuiSuggestItem
+          type={sampleItem.type}
+          description={sampleItem.description}
+          labelDisplay="expand"
+        />
+      );
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  describe('item with no description has expanded label', () => {
+    test('is rendered', () => {
+      const component = render(<EuiSuggestItem type={sampleItem.type} />);
+      expect(component).toMatchSnapshot();
+    });
+  });
+});

From 93f1e9bc86e4214157f36fc2410851e885a9253d Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Fri, 12 Jul 2019 17:19:17 -0700
Subject: [PATCH 22/25] updated colors and added minor css changes

---
 src-docs/src/views/suggest/suggest_item.js    | 18 +++++++++---------
 .../__snapshots__/suggest_item.test.js.snap   |  6 +++---
 .../suggest_item/_suggest_item.scss           |  8 +++-----
 src/components/suggest_item/_variables.scss   | 16 +++++++++-------
 src/components/suggest_item/suggest_item.js   | 19 +++++++++++--------
 .../suggest_item/suggest_item.test.js         |  4 ++--
 6 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/src-docs/src/views/suggest/suggest_item.js b/src-docs/src/views/suggest/suggest_item.js
index a641ad89b18..6d7b8540120 100644
--- a/src-docs/src/views/suggest/suggest_item.js
+++ b/src-docs/src/views/suggest/suggest_item.js
@@ -6,37 +6,37 @@ const shortDescription = 'This is the description';
 
 const sampleItems = [
   {
-    type: { iconType: 'kqlField', color: 'itemTint03' },
+    type: { iconType: 'kqlField', color: 'tint4' },
     label: 'Field sample',
     description: shortDescription,
   },
   {
-    type: { iconType: 'kqlValue', color: 'itemTint02' },
+    type: { iconType: 'kqlValue', color: 'tint0' },
     label: 'Value sample',
     description: shortDescription,
   },
   {
-    type: { iconType: 'kqlSelector', color: 'itemTint06' },
+    type: { iconType: 'kqlSelector', color: 'tint2' },
     label: 'Conjunction sample',
     description: shortDescription,
   },
   {
-    type: { iconType: 'kqlOperand', color: 'itemTint01' },
+    type: { iconType: 'kqlOperand', color: 'tint1' },
     label: 'Operator sample',
     description: shortDescription,
   },
   {
-    type: { iconType: 'search', color: 'itemTint05' },
+    type: { iconType: 'search', color: 'tint8' },
     label: 'Recent search',
   },
   {
-    type: { iconType: 'save', color: 'itemTint07' },
+    type: { iconType: 'save', color: 'tint3' },
     label: 'Saved search',
   },
 ];
 
 const sampleItem1 = {
-  type: { iconType: 'kqlValue', color: 'itemTint02' },
+  type: { iconType: 'kqlValue', color: 'tint0' },
   label: 'Charles de Gaulle International Airport',
   description: shortDescription,
 };
@@ -61,11 +61,11 @@ export default () => (
       type={sampleItem1.type}
       labelDisplay="expand"
       label={sampleItem1.label}
-      description="This item expands its label"
+      description="This item will expand its label if needed"
     />
     <EuiSpacer size="m" />
     <EuiSuggestItem
-      type={{ iconType: 'search', color: 'itemTint05' }}
+      type={{ iconType: 'search', color: 'tint8' }}
       label="Items with no description will expand their label"
     />
   </div>
diff --git a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
index f5d2db891f2..c8ad08cfaa3 100644
--- a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
+++ b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
@@ -7,7 +7,7 @@ exports[`EuiSuggestItem is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <span
-    class="euiSuggestItem__type euiSuggestItem__type--itemTint01"
+    class="euiSuggestItem__type euiSuggestItem__type--tint1"
   >
     <svg
       class="euiIcon euiIcon--medium euiIcon-isLoading"
@@ -32,7 +32,7 @@ exports[`props item with no description has expanded label is rendered 1`] = `
   class="euiSuggestItem"
 >
   <span
-    class="euiSuggestItem__type euiSuggestItem__type--itemTint02"
+    class="euiSuggestItem__type euiSuggestItem__type--tint2"
   >
     <svg
       class="euiIcon euiIcon--medium euiIcon-isLoading"
@@ -57,7 +57,7 @@ exports[`props labelDisplay as expand is rendered 1`] = `
   class="euiSuggestItem"
 >
   <span
-    class="euiSuggestItem__type euiSuggestItem__type--itemTint02"
+    class="euiSuggestItem__type euiSuggestItem__type--tint2"
   >
     <svg
       class="euiIcon euiIcon--medium euiIcon-isLoading"
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
index 2fe4558e274..4f072246026 100644
--- a/src/components/suggest_item/_suggest_item.scss
+++ b/src/components/suggest_item/_suggest_item.scss
@@ -11,10 +11,7 @@
     .euiSuggestItem__type--#{$name} {
       $backgroundColor: tintOrShade($color, 90%, 50%);
       background-color: $backgroundColor;
-
-      svg {
-        fill: makeHighContrastColor($color, $backgroundColor);
-      }
+      color: makeHighContrastColor($color, $backgroundColor);
 		}
 	}
 
@@ -40,7 +37,8 @@
   }
 
   .euiSuggestItem__label {
-    flex-basis: 30%;
+    flex-basis: 50%;
+    min-width: 50%;
     font-family: $euiCodeFontFamily;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/src/components/suggest_item/_variables.scss b/src/components/suggest_item/_variables.scss
index dbdf162dd08..d90fa21260d 100644
--- a/src/components/suggest_item/_variables.scss
+++ b/src/components/suggest_item/_variables.scss
@@ -1,9 +1,11 @@
 $itemColors: (
-  itemTint01: $euiColorPrimary,
-  itemTint02: $euiColorSecondary,
-  itemTint03: $euiColorWarning,
-  itemTint04: $euiColorDanger,
-  itemTint05: $euiColorMediumShade,
-  itemTint06: $euiColorAccent,
-  itemTint07: $euiColorVis3,
+  tint0: $euiColorVis0,
+  tint1: $euiColorVis1,
+  tint2: $euiColorVis2,
+  tint3: $euiColorVis3,
+  tint4: $euiColorVis5,
+  tint5: $euiColorVis7,
+  tint6: $euiColorVis8,
+  tint7: $euiColorVis9,
+  tint8: $euiColorDarkShade,
 );
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
index f442609d4f5..40435912002 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/src/components/suggest_item/suggest_item.js
@@ -4,13 +4,16 @@ import classNames from 'classnames';
 import { EuiIcon, IconPropType } from '../icon';
 
 const colorToClassNameMap = {
-  itemTint01: 'euiSuggestItem__type--itemTint01',
-  itemTint02: 'euiSuggestItem__type--itemTint02',
-  itemTint03: 'euiSuggestItem__type--itemTint03',
-  itemTint04: 'euiSuggestItem__type--itemTint04',
-  itemTint05: 'euiSuggestItem__type--itemTint05',
-  itemTint06: 'euiSuggestItem__type--itemTint06',
-  itemTint07: 'euiSuggestItem__type--itemTint07',
+  tint0: 'euiSuggestItem__type--tint0',
+  tint1: 'euiSuggestItem__type--tint1',
+  tint2: 'euiSuggestItem__type--tint2',
+  tint3: 'euiSuggestItem__type--tint3',
+  tint4: 'euiSuggestItem__type--tint4',
+  tint5: 'euiSuggestItem__type--tint5',
+  tint6: 'euiSuggestItem__type--tint6',
+  tint7: 'euiSuggestItem__type--tint7',
+  tint8: 'euiSuggestItem__type--tint8',
+  tint9: 'euiSuggestItem__type--tint9',
 };
 
 export const COLORS = Object.keys(colorToClassNameMap);
@@ -61,7 +64,7 @@ export const EuiSuggestItem = ({
 EuiSuggestItem.propTypes = {
   className: PropTypes.string,
   /**
-   * Takes 'iconType' for EuiIcon and 'color'. 'color' can be itemTint01 through itemTint07.
+   * Takes 'iconType' for EuiIcon and 'color'. 'color' can be tint1 through tint9.
    */
   type: PropTypes.shape({
     iconType: IconPropType,
diff --git a/src/components/suggest_item/suggest_item.test.js b/src/components/suggest_item/suggest_item.test.js
index 42eb4e7d7af..fcfeb84355f 100644
--- a/src/components/suggest_item/suggest_item.test.js
+++ b/src/components/suggest_item/suggest_item.test.js
@@ -6,7 +6,7 @@ import { EuiSuggestItem } from './suggest_item';
 
 const TYPE = {
   iconType: 'search',
-  color: 'itemTint01',
+  color: 'tint1',
 };
 
 describe('EuiSuggestItem', () => {
@@ -19,7 +19,7 @@ describe('EuiSuggestItem', () => {
 
 describe('props', () => {
   const sampleItem = {
-    type: { iconType: 'kqlValue', color: 'itemTint02' },
+    type: { iconType: 'kqlValue', color: 'tint2' },
     label: 'Charles de Gaulle International Airport',
     description: 'This is the description',
   };

From 0a427592bd727ee3fc75994a4156e0df9c0bdc5e Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 18 Jul 2019 10:35:54 -0700
Subject: [PATCH 23/25] docs updates and small improvements

---
 src-docs/src/views/suggest/suggest_item.js    | 23 +++++++-------
 .../__snapshots__/suggest_item.test.js.snap   | 18 +++++++----
 .../suggest_item/_suggest_item.scss           |  2 --
 src/components/suggest_item/suggest_item.js   | 30 +++++++++++--------
 .../suggest_item/suggest_item.test.js         |  9 ++++--
 5 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/src-docs/src/views/suggest/suggest_item.js b/src-docs/src/views/suggest/suggest_item.js
index 6d7b8540120..b3c90b18753 100644
--- a/src-docs/src/views/suggest/suggest_item.js
+++ b/src-docs/src/views/suggest/suggest_item.js
@@ -16,7 +16,7 @@ const sampleItems = [
     description: shortDescription,
   },
   {
-    type: { iconType: 'kqlSelector', color: 'tint2' },
+    type: { iconType: 'kqlSelector', color: 'tint3' },
     label: 'Conjunction sample',
     description: shortDescription,
   },
@@ -30,16 +30,15 @@ const sampleItems = [
     label: 'Recent search',
   },
   {
-    type: { iconType: 'save', color: 'tint3' },
-    label: 'Saved search',
+    type: { iconType: 'save', color: 'tint5' },
+    label: 'Saved query',
   },
 ];
 
-const sampleItem1 = {
-  type: { iconType: 'kqlValue', color: 'tint0' },
-  label: 'Charles de Gaulle International Airport',
-  description: shortDescription,
-};
+const typeObj = { iconType: 'kqlValue', color: 'tint0' };
+
+const longLabel =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar.';
 
 export default () => (
   <div>
@@ -53,14 +52,14 @@ export default () => (
     ))}
     <EuiSpacer size="m" />
     <EuiSuggestItem
-      type={sampleItem1.type}
-      label={sampleItem1.label}
+      type={typeObj}
+      label={longLabel}
       description="This item has a fixed width label"
     />
     <EuiSuggestItem
-      type={sampleItem1.type}
+      type={typeObj}
       labelDisplay="expand"
-      label={sampleItem1.label}
+      label={longLabel}
       description="This item will expand its label if needed"
     />
     <EuiSpacer size="m" />
diff --git a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
index c8ad08cfaa3..6bed947c8e8 100644
--- a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
+++ b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
@@ -19,8 +19,10 @@ exports[`EuiSuggestItem is rendered 1`] = `
     />
   </span>
   <span
-    class="euiSuggestItem__label euiSuggestItem__labelDisplay--expand"
-  />
+    class="euiSuggestItem__label euiSuggestItem__label euiSuggestItem__labelDisplay--fixed euiSuggestItem__labelDisplay--expand"
+  >
+    Test label
+  </span>
   <span
     class="euiSuggestItem__description"
   />
@@ -44,8 +46,10 @@ exports[`props item with no description has expanded label is rendered 1`] = `
     />
   </span>
   <span
-    class="euiSuggestItem__label euiSuggestItem__labelDisplay--expand"
-  />
+    class="euiSuggestItem__label euiSuggestItem__label euiSuggestItem__labelDisplay--fixed euiSuggestItem__labelDisplay--expand"
+  >
+    This is the description
+  </span>
   <span
     class="euiSuggestItem__description"
   />
@@ -69,8 +73,10 @@ exports[`props labelDisplay as expand is rendered 1`] = `
     />
   </span>
   <span
-    class="euiSuggestItem__label euiSuggestItem__labelDisplay--expand"
-  />
+    class="euiSuggestItem__label euiSuggestItem__label euiSuggestItem__labelDisplay--expand"
+  >
+    This is the description
+  </span>
   <span
     class="euiSuggestItem__description"
   >
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
index 4f072246026..9f063b25889 100644
--- a/src/components/suggest_item/_suggest_item.scss
+++ b/src/components/suggest_item/_suggest_item.scss
@@ -1,5 +1,3 @@
-@import '../loading/mixins';
-
 .euiSuggestItem {
   display: flex;
   flex-grow: 1;
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
index 40435912002..5046bc55080 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/src/components/suggest_item/suggest_item.js
@@ -35,22 +35,25 @@ export const EuiSuggestItem = ({
 }) => {
   const classes = classNames('euiSuggestItem', className);
 
-  let optionalColorClass = '';
-  let labelDisplayClass = labelDisplayToClassMap[labelDisplay];
+  let colorClass = '';
 
-  if (!description) {
-    labelDisplayClass = 'euiSuggestItem__labelDisplay--expand';
-  }
+  const labelDisplayClass = classNames(
+    'euiSuggestItem__label',
+    labelDisplayToClassMap[labelDisplay],
+    {
+      'euiSuggestItem__labelDisplay--expand': !description,
+    }
+  );
 
   if (type && type.color) {
     if (COLORS.indexOf(type.color) > -1) {
-      optionalColorClass = colorToClassNameMap[type.color];
+      colorClass = colorToClassNameMap[type.color];
     }
   }
 
   return (
     <div className={classes} {...rest}>
-      <span className={`euiSuggestItem__type ${optionalColorClass}`}>
+      <span className={`euiSuggestItem__type ${colorClass}`}>
         <EuiIcon type={type.iconType} />
       </span>
       <span className={`euiSuggestItem__label ${labelDisplayClass}`}>
@@ -67,19 +70,20 @@ EuiSuggestItem.propTypes = {
    * Takes 'iconType' for EuiIcon and 'color'. 'color' can be tint1 through tint9.
    */
   type: PropTypes.shape({
-    iconType: IconPropType,
-    color: PropTypes.oneOfType([PropTypes.oneOf(COLORS), PropTypes.string]),
+    iconType: IconPropType.isRequired,
+    color: PropTypes.oneOfType([PropTypes.oneOf(COLORS), PropTypes.string])
+      .isRequired,
   }).isRequired,
   /**
-   * Label for suggest item
+   * Label or primary text.
    */
-  label: PropTypes.string,
+  label: PropTypes.string.isRequired,
   /**
-   * Description for suggest item
+   * Description or secondary text (optional).
    */
   description: PropTypes.string,
   /**
-   * Label display for suggest item
+   * Label display is 'fixed' by default. Label will increase its width beyond 50% if needed with 'expand'.
    */
   labelDisplay: PropTypes.oneOf(DISPLAYS),
 };
diff --git a/src/components/suggest_item/suggest_item.test.js b/src/components/suggest_item/suggest_item.test.js
index fcfeb84355f..e6fe2664991 100644
--- a/src/components/suggest_item/suggest_item.test.js
+++ b/src/components/suggest_item/suggest_item.test.js
@@ -11,7 +11,9 @@ const TYPE = {
 
 describe('EuiSuggestItem', () => {
   test('is rendered', () => {
-    const component = render(<EuiSuggestItem {...requiredProps} type={TYPE} />);
+    const component = render(
+      <EuiSuggestItem {...requiredProps} label="Test label" type={TYPE} />
+    );
 
     expect(component).toMatchSnapshot();
   });
@@ -30,6 +32,7 @@ describe('props', () => {
         <EuiSuggestItem
           type={sampleItem.type}
           description={sampleItem.description}
+          label={sampleItem.description}
           labelDisplay="expand"
         />
       );
@@ -39,7 +42,9 @@ describe('props', () => {
 
   describe('item with no description has expanded label', () => {
     test('is rendered', () => {
-      const component = render(<EuiSuggestItem type={sampleItem.type} />);
+      const component = render(
+        <EuiSuggestItem label={sampleItem.description} type={sampleItem.type} />
+      );
       expect(component).toMatchSnapshot();
     });
   });

From 49234df6bf818506b451fd2a332ca7aef7b5493d Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 18 Jul 2019 15:46:57 -0700
Subject: [PATCH 24/25] removed duplicate class

---
 .../suggest_item/__snapshots__/suggest_item.test.js.snap    | 6 +++---
 src/components/suggest_item/suggest_item.js                 | 4 +---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
index 6bed947c8e8..a3068051a5f 100644
--- a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
+++ b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
@@ -19,7 +19,7 @@ exports[`EuiSuggestItem is rendered 1`] = `
     />
   </span>
   <span
-    class="euiSuggestItem__label euiSuggestItem__label euiSuggestItem__labelDisplay--fixed euiSuggestItem__labelDisplay--expand"
+    class="euiSuggestItem__label euiSuggestItem__labelDisplay--fixed euiSuggestItem__labelDisplay--expand"
   >
     Test label
   </span>
@@ -46,7 +46,7 @@ exports[`props item with no description has expanded label is rendered 1`] = `
     />
   </span>
   <span
-    class="euiSuggestItem__label euiSuggestItem__label euiSuggestItem__labelDisplay--fixed euiSuggestItem__labelDisplay--expand"
+    class="euiSuggestItem__label euiSuggestItem__labelDisplay--fixed euiSuggestItem__labelDisplay--expand"
   >
     This is the description
   </span>
@@ -73,7 +73,7 @@ exports[`props labelDisplay as expand is rendered 1`] = `
     />
   </span>
   <span
-    class="euiSuggestItem__label euiSuggestItem__label euiSuggestItem__labelDisplay--expand"
+    class="euiSuggestItem__label euiSuggestItem__labelDisplay--expand"
   >
     This is the description
   </span>
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
index 5046bc55080..0d396023414 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/src/components/suggest_item/suggest_item.js
@@ -56,9 +56,7 @@ export const EuiSuggestItem = ({
       <span className={`euiSuggestItem__type ${colorClass}`}>
         <EuiIcon type={type.iconType} />
       </span>
-      <span className={`euiSuggestItem__label ${labelDisplayClass}`}>
-        {label}
-      </span>
+      <span className={labelDisplayClass}>{label}</span>
       <span className="euiSuggestItem__description">{description}</span>
     </div>
   );

From dd6c8e72bc91d5edd43c288b288fb94720c81aff Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Fri, 19 Jul 2019 09:39:10 -0700
Subject: [PATCH 25/25] added cl and commented out component from routes

---
 CHANGELOG.md           | 1 +
 src-docs/src/routes.js | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2111dfacce9..ad6479a8f99 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `EuiSuggestItem` component ([#2090](https://github.com/elastic/eui/pull/2090))
 - Added support for negated or clauses to `EuiSearchBar` ([#2140](https://github.com/elastic/eui/pull/2140))
 
 **Bug fixes**
diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 4d4c98e905a..f3c8c27dfbc 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -160,7 +160,7 @@ import { StatExample } from './views/stat/stat_example';
 
 import { StepsExample } from './views/steps/steps_example';
 
-import { SuggestExample } from './views/suggest/suggest_example';
+// import { SuggestExample } from './views/suggest/suggest_example';
 
 import { TableExample } from './views/tables/tables_example';
 
@@ -339,7 +339,7 @@ const navigation = [
       RangeControlExample,
       SearchBarExample,
       SelectableExample,
-      SuggestExample,
+      // SuggestExample,
     ].map(example => createExample(example)),
   },
   {