Add Suggest component

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Created `EuiSuggest` component ([#2270](https://github.com/elastic/eui/pull/2270))
 - Fixed alignment of icons and label in `EuiSideNavItem` ([#2297](https://github.com/elastic/eui/pull/2297))
 
 ## [`13.8.0`](https://github.com/elastic/eui/tree/v13.8.0)

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';
 
@@ -349,7 +349,7 @@ const navigation = [
       RangeControlExample,
       SearchBarExample,
       SelectableExample,
-      // SuggestExample,
+      SuggestExample,
     ].map(example => createExample(example)),
   },
   {

src-docs/src/theme_dark.scss

@@ -4,8 +4,4 @@
 
 @import '../../src/theme_dark';
 @import './components/guide_components';
-@import './views/header/global_filter_group';
-
-// Elastic charts
-@import '~@elastic/charts/dist/theme';
-@import '../../src/themes/charts/theme';
+@import './views/suggest/global_filter_group';

src-docs/src/theme_light.scss

@@ -4,9 +4,4 @@
 
 @import '../../src/theme_light';
 @import './components/guide_components';
-@import './views/header/global_filter_group';
-
-// Elastic charts
-@import '~@elastic/charts/dist/theme';
-@import '../../src/themes/charts/theme';
-
+@import './views/suggest/global_filter_group';

src-docs/src/views/header/header_example.js

@@ -14,15 +14,8 @@ import {
   EuiCode,
   EuiHeaderLinks,
   EuiHeaderLink,
-  EuiCallOut,
 } from '../../../../src/components';
 
-import { GlobalFilterBar } from './global_filter_bar';
-import GlobalFilterAdd from './global_filter_add';
-import GlobalFilterOptions from './global_filter_options';
-import GlobalFilterForm from './global_filter_form';
-import { GlobalFilterItem } from './global_filter_item';
-
 import Header from './header';
 const headerSource = require('!!raw-loader!./header');
 const headerHtml = renderToHtml(Header);
@@ -31,10 +24,6 @@ import HeaderLinks from './header_links';
 const headerLinksSource = require('!!raw-loader!./header_links');
 const headerLinksHtml = renderToHtml(HeaderLinks);
 
-import GlobalQuery from './global_query';
-const globalQuerySource = require('!!raw-loader!./global_query');
-const globalQueryHtml = renderToHtml(GlobalQuery);
-
 const headerSnippet = `<EuiHeader>
   <EuiHeaderSection grow={false}>
     <EuiHeaderSectionItem border="right">
@@ -122,39 +111,5 @@ export const HeaderExample = {
       snippet: headerLinksSnippet,
       demo: <HeaderLinks />,
     },
-    {
-      title: 'Global query and filters',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: globalQuerySource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: globalQueryHtml,
-        },
-      ],
-      text: (
-        <div>
-          <EuiCallOut color="warning" title="Demo of visual pattern only">
-            <p>
-              This documents a <strong>visual</strong> pattern for the eventual
-              replacement of Kibana&apos;s global query and filter bars. The
-              filter bar has been broken down into multiple components. There
-              are still bugs and not all the logic is well-formed.
-            </p>
-          </EuiCallOut>
-        </div>
-      ),
-      props: {
-        GlobalQuery,
-        GlobalFilterBar,
-        GlobalFilterOptions,
-        GlobalFilterAdd,
-        GlobalFilterForm,
-        GlobalFilterItem,
-      },
-      demo: <GlobalQuery />,
-    },
   ],
 };

src-docs/src/views/header/_global_filter_group.scss → src-docs/src/views/suggest/_global_filter_group.scss

@@ -1,5 +1,5 @@
 @import 'global_filter_item';
-@import 'global_filter_form';
+@import 'saved_queries';
 
 .globalFilterGroup__filterBar {
   margin-top: $euiSizeM;
@@ -25,4 +25,4 @@
 
 .globalFilterBar__flexItem {
   max-width: calc(100% - #{$euiSizeXS}); // Width minus margin around each flex itm
-}
+}

src-docs/src/views/suggest/_saved_queries.scss

@@ -0,0 +1,31 @@
+.savedQueriesInput__hideDatepicker {
+  .euiSuperDatePicker__flexWrapper {
+    width: 100%;
+
+    > div:nth-of-type(1) {
+      display: none;
+    }
+  }
+}
+
+.savedQueriesInput {
+  padding-bottom: $euiSizeXL * 6;
+}
+
+.savedQueryManagement__text {
+  padding: $euiSizeM $euiSizeM ($euiSizeM / 2);
+}
+
+.savedQueryManagement__listWrapper {
+  // Addition height will ensure one item is "cutoff" to indicate more below the scroll
+  max-height: $euiFormMaxWidth + $euiSize;
+  overflow-y: hidden;
+}
+
+.savedQueryManagement__list {
+  @include euiYScrollWithShadows;
+  max-height: inherit; // Fixes overflow for applied max-height
+  // Left/Right padding is calculated to match the left alignment of the
+  // popover text and buttons
+  padding: ($euiSizeM / 2) $euiSizeXS !important; // sass-lint:disable-line no-important
+}

src-docs/src/views/header/global_filter_options.js → src-docs/src/views/suggest/global_filter_options.js

@@ -109,7 +109,7 @@ export default class GlobalFilterOptions extends Component {
           <EuiButtonIcon
             onClick={this.togglePopover}
             color="text"
-            iconType="gear"
+            iconType="filter"
             aria-label="Change all filters"
             title="Change all filters"
           />