Add Suggest Item (#2090)

Added EuiSuggestItem

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**

src-docs/src/routes.js

@@ -160,6 +160,8 @@ import { StatExample } from './views/stat/stat_example';
 
 import { StepsExample } from './views/steps/steps_example';
 
+// import { SuggestExample } from './views/suggest/suggest_example';
+
 import { TableExample } from './views/tables/tables_example';
 
 import { TabsExample } from './views/tabs/tabs_example';
@@ -337,6 +339,7 @@ const navigation = [
       RangeControlExample,
       SearchBarExample,
       SelectableExample,
+      // SuggestExample,
     ].map(example => createExample(example)),
   },
   {

src-docs/src/views/suggest/suggest.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => <div />;

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 />,
+    },
+  ],
+};

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

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { EuiSuggestItem, EuiSpacer } from '../../../../src/components';
+
+const shortDescription = 'This is the description';
+
+const sampleItems = [
+  {
+    type: { iconType: 'kqlField', color: 'tint4' },
+    label: 'Field sample',
+    description: shortDescription,
+  },
+  {
+    type: { iconType: 'kqlValue', color: 'tint0' },
+    label: 'Value sample',
+    description: shortDescription,
+  },
+  {
+    type: { iconType: 'kqlSelector', color: 'tint3' },
+    label: 'Conjunction sample',
+    description: shortDescription,
+  },
+  {
+    type: { iconType: 'kqlOperand', color: 'tint1' },
+    label: 'Operator sample',
+    description: shortDescription,
+  },
+  {
+    type: { iconType: 'search', color: 'tint8' },
+    label: 'Recent search',
+  },
+  {
+    type: { iconType: 'save', color: 'tint5' },
+    label: 'Saved query',
+  },
+];
+
+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>
+    {sampleItems.map((item, index) => (
+      <EuiSuggestItem
+        type={item.type}
+        key={index}
+        label={item.label}
+        description={item.description}
+      />
+    ))}
+    <EuiSpacer size="m" />
+    <EuiSuggestItem
+      type={typeObj}
+      label={longLabel}
+      description="This item has a fixed width label"
+    />
+    <EuiSuggestItem
+      type={typeObj}
+      labelDisplay="expand"
+      label={longLabel}
+      description="This item will expand its label if needed"
+    />
+    <EuiSpacer size="m" />
+    <EuiSuggestItem
+      type={{ iconType: 'search', color: 'tint8' }}
+      label="Items with no description will expand their label"
+    />
+  </div>
+);

src/components/index.js

@@ -234,6 +234,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,86 @@
+// 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--tint1"
+  >
+    <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--fixed euiSuggestItem__labelDisplay--expand"
+  >
+    Test label
+  </span>
+  <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--tint2"
+  >
+    <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--fixed euiSuggestItem__labelDisplay--expand"
+  >
+    This is the description
+  </span>
+  <span
+    class="euiSuggestItem__description"
+  />
+</div>
+`;
+
+exports[`props labelDisplay as expand is rendered 1`] = `
+<div
+  class="euiSuggestItem"
+>
+  <span
+    class="euiSuggestItem__type euiSuggestItem__type--tint2"
+  >
+    <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"
+  >
+    This is the description
+  </span>
+  <span
+    class="euiSuggestItem__description"
+  >
+    This is the description
+  </span>
+</div>
+`;

src/components/suggest_item/_index.scss

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

src/components/suggest_item/_suggest_item.scss

@@ -0,0 +1,68 @@
+.euiSuggestItem {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  font-size: $euiFontSizeXS;
+  white-space: nowrap;
+
+  @each $name, $color in $itemColors {
+    .euiSuggestItem__type--#{$name} {
+      $backgroundColor: tintOrShade($color, 90%, 50%);
+      background-color: $backgroundColor;
+      color: makeHighContrastColor($color, $backgroundColor);
+		}
+	}
+
+  .euiSuggestItem__label,
+  .euiSuggestItem__type,
+  .euiSuggestItem__description {
+    flex-grow: 0;
+    display: flex;
+    flex-direction: column;
+	}
+
+  .euiSuggestItem__type {
+    position: relative;
+    flex-shrink: 0;
+    flex-basis: auto;
+    width: $euiSizeXL;
+    height: $euiSizeXL;
+    text-align: center;
+    overflow: hidden;
+    padding: $euiSizeXS;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .euiSuggestItem__label {
+    flex-basis: 50%;
+    min-width: 50%;
+    font-family: $euiCodeFontFamily;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: $euiSizeXS $euiSizeS;
+    color: $euiTextColor;
+
+    &.euiSuggestItem__labelDisplay--expand {
+      flex-basis: auto;
+      flex-shrink: 1;
+    }
+  }
+
+  .euiSuggestItem__description,
+  .euiSuggestItem__label {
+    @include euiTextTruncate;
+    display: block;
+	}
+
+  .euiSuggestItem__description {
+    color: $euiColorDarkShade;
+    flex-basis: auto;
+    padding-top: $euiSizeXS * .5;
+
+    &:empty {
+      flex-grow: 0;
+      margin-left: 0;
+    }
+	}
+}

src/components/suggest_item/_variables.scss

@@ -0,0 +1,11 @@
+$itemColors: (
+  tint0: $euiColorVis0,
+  tint1: $euiColorVis1,
+  tint2: $euiColorVis2,
+  tint3: $euiColorVis3,
+  tint4: $euiColorVis5,
+  tint5: $euiColorVis7,
+  tint6: $euiColorVis8,
+  tint7: $euiColorVis9,
+  tint8: $euiColorDarkShade,
+);

src/components/suggest_item/index.js

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