changes based on feedback

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)),
   },
   {

src-docs/src/views/icon/tokens.js

@@ -112,7 +112,7 @@ export default () => (
               displayOptions={{
                 color: 'tokenTint10',
                 shape: 'square',
-                fill: true,
+                fill: false,
               }}
             />
           </div>

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,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>
+);