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))
 - Added missing `compressed` styling to `EuiSwitch` ([#2327](https://github.com/elastic/eui/pull/2327))
 
 ## [`14.0.0`](https://github.com/elastic/eui/tree/v14.0.0)

src-docs/src/routes.js

@@ -162,7 +162,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';
 
@@ -352,7 +352,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_add.js → src-docs/src/views/suggest/global_filter_add.js

@@ -13,13 +13,9 @@ import GlobalFilterForm from './global_filter_form';
 export default class GlobalFilterAdd extends Component {
   static propTypes = {};
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isPopoverOpen: false,
-    };
-  }
+  state = {
+    isPopoverOpen: false,
+  };
 
   togglePopover = () => {
     this.setState(prevState => ({

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

@@ -75,26 +75,22 @@ export default class GlobalFilterForm extends Component {
     selectedObject: PropTypes.object,
   };
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      fieldOptions: fieldOptions,
-      operandOptions: operatorOptions,
-      valueOptions: valueOptions,
-      selectedField: this.props.selectedObject
-        ? this.props.selectedObject.field
-        : [],
-      selectedOperand: this.props.selectedObject
-        ? this.props.selectedObject.operand
-        : [],
-      selectedValues: this.props.selectedObject
-        ? this.props.selectedObject.values
-        : [],
-      useCustomLabel: false,
-      customLabel: '',
-    };
-  }
+  state = {
+    fieldOptions: fieldOptions,
+    operandOptions: operatorOptions,
+    valueOptions: valueOptions,
+    selectedField: this.props.selectedObject
+      ? this.props.selectedObject.field
+      : [],
+    selectedOperand: this.props.selectedObject
+      ? this.props.selectedObject.operand
+      : [],
+    selectedValues: this.props.selectedObject
+      ? this.props.selectedObject.values
+      : [],
+    useCustomLabel: false,
+    customLabel: '',
+  };
 
   onFieldChange = selectedOptions => {
     // We should only get back either 0 or 1 options.