Add Suggest Item

src-docs/src/routes.js

@@ -156,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';
@@ -322,6 +324,7 @@ const navigation = [
       LoadingExample,
       ProgressExample,
       StatExample,
+      SuggestItemExample,
       TableExample,
       TextExample,
       TitleExample,

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

@@ -0,0 +1,48 @@
+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',
+  },
+  {
+    type: { icon: 'save', color: '#DD0A73' },
+    label: 'Saved search',
+  },
+];
+
+export default () => (
+  <div>
+    {sampleItems.map(item => (
+      <EuiSuggestItem
+        type={item.type}
+        label={item.label}
+        description={item.description}
+      />
+    ))}
+  </div>
+);

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

@@ -0,0 +1,89 @@
+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 />,
+    },
+  ],
+};

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}
+      layout="inline"
+      label={sampleItem.label}
+      description={sampleItem.description}
+    />
+  </div>
+);

src/components/index.js

@@ -230,6 +230,8 @@ export { EuiStat } from './stat';
 
 export { EuiStep, EuiSteps, EuiSubSteps, EuiStepsHorizontal } from './steps';
 
+export { EuiSuggestItem } from './suggest_item';
+
 export {
   EuiTable,
   EuiTableBody,

src/components/index.scss

@@ -51,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';

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

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

src/components/suggest_item/_index.scss

@@ -0,0 +1 @@
+@import 'suggest_item';

src/components/suggest_item/_suggest_item.scss

@@ -0,0 +1,80 @@
+@import '../loading/mixins';
+
+$buttonTypes: (
+  primary: $euiColorPrimary,
+  secondary: $euiColorSecondary,
+  warning: $euiColorWarning,
+  danger: $euiColorDanger,
+  dark: $euiColorMediumShade,
+);
+
+.euiSuggestItem {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  font-size: $euiFontSizeXS;
+  white-space: nowrap;
+
+  @each $name, $color in $buttonTypes {
+    .euiSuggestItem__type--#{$name} {
+      background-color: tintOrShade($color, 90%, 50%);
+		}
+	}
+
+  .euiSuggestItem__label,
+  .euiSuggestItem__type,
+  .euiSuggestItem__description {
+    flex-grow: 1;
+    flex-basis: 0%;
+    display: flex;
+    flex-direction: column;
+	}
+
+  .euiSuggestItem__type {
+    position: relative;
+    flex-grow: 0;
+    flex-basis: auto;
+    width: $euiSizeXL;
+    height: $euiSizeXL;
+    text-align: center;
+    overflow: hidden;
+    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;
+    flex-basis: auto;
+    font-family: $euiCodeFontFamily;
+    width: 250px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: $euiSizeXS $euiSizeS;
+    color: $euiTextColor;
+
+    &.euiSuggestItem__layout--inline {
+      width: auto;
+    }
+  }
+
+  .euiSuggestItem__description,
+  .euiSuggestItem__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+	}
+
+  .euiSuggestItem__description {
+    color: $euiColorDarkShade;
+	}
+}

src/components/suggest_item/index.js

@@ -0,0 +1 @@
+export { EuiSuggestItem } from './suggest_item';