Global patterns for query and filter bar (#1137)

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Decorated `pagination` _next_ and _previous_ buttons with `data-test-subj`. ([#1182](https://github.com/elastic/eui/pull/1182))
 - Added `euiFacetButton` and `euiFacetGroup` ([#1167](https://github.com/elastic/eui/pull/1167))
 - Added `width` prop to `EuiContextMenu` panels ([#1173](https://github.com/elastic/eui/pull/1173))
+- Added patterns for global query and filters ([#1137](https://github.com/elastic/eui/pull/1137))
 
 **Bug fixes**
 

src-docs/src/theme_dark.scss

@@ -1,2 +1,3 @@
 @import "../../src/theme_dark";
 @import "./components/guide_components";
+@import "./views/header/global_filter_group";

src-docs/src/theme_k6_dark.scss

@@ -1,2 +1,3 @@
 @import "../../src/theme_k6_dark";
 @import "./components/guide_components";
+@import "./views/header/global_filter_group";

src-docs/src/theme_k6_light.scss

@@ -1,2 +1,3 @@
 @import "../../src/theme_k6_light";
 @import "./components/guide_components";
+@import "./views/header/global_filter_group";

src-docs/src/theme_light.scss

@@ -1,3 +1,4 @@
 @import "../../src/theme_light";
 @import "./components/guide_components";
+@import "./views/header/global_filter_group";
 

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

@@ -0,0 +1,18 @@
+@import 'global_filter_item';
+@import 'global_filter_form';
+
+.globalFilterGroup__filterBar {
+  margin-top: $euiSizeM;
+}
+
+.globalFilterGroup__branch {
+  padding: $euiSize $euiSize $euiSizeS $euiSizeS;
+  background-repeat: no-repeat;
+  background-position: right top;
+  background-image: url("data:image/svg+xml,%0A%3Csvg width='28px' height='28px' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='#{hexToRGB($euiColorLightShade)}'%3E%3Crect x='14' y='27' width='14' height='1'%3E%3C/rect%3E%3Crect x='0' y='0' width='1' height='14'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
+}
+
+.globalFilterGroup__wrapper {
+  overflow: hidden;
+  transition: height $euiAnimSpeedNormal $euiAnimSlightResistance;
+}

src-docs/src/views/header/_global_filter_item.scss

@@ -0,0 +1,30 @@
+.globalFilterItem {
+  line-height: $euiSizeL + $euiSizeXS;
+  border: none;
+  color: $euiTextColor;
+
+  &:not(.globalFilterItem-isDisabled) {
+    @include euiFormControlDefaultShadow;
+  }
+}
+
+.globalFilterItem-isDisabled {
+  background-color: transparentize($euiColorLightShade, .4);
+  text-decoration: line-through;
+  font-weight: $euiFontWeightRegular;
+  font-style: italic;
+}
+
+.globalFilterItem-isPinned {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: $euiSizeXS;
+    background-color: $euiColorVis0;
+  }
+}

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

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+
+import {
+  EuiButtonEmpty,
+  EuiPopover,
+  EuiPopoverTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
+
+import GlobalFilterForm from './global_filter_form';
+
+export default class GlobalFilterAdd extends Component {
+  static propTypes = {
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isPopoverOpen: false,
+    };
+  }
+
+  togglePopover = () => {
+    this.setState(prevState => ({
+      isPopoverOpen: !prevState.isPopoverOpen,
+    }));
+  };
+
+  closePopover = () => {
+    this.setState({ isPopoverOpen: false });
+  };
+
+  render() {
+    const { isPopoverOpen } = this.state;
+
+    return (
+      <EuiPopover
+        isOpen={isPopoverOpen}
+        closePopover={this.closePopover}
+        button={
+          <EuiButtonEmpty onClick={this.togglePopover} size="xs">
+            + Add filter
+          </EuiButtonEmpty>
+        }
+        anchorPosition="downCenter"
+        withTitle
+      >
+        <EuiPopoverTitle>
+          <EuiFlexGroup alignItems="baseline">
+            <EuiFlexItem>Add a filter</EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              {/* This button should open a modal */}
+              <EuiButtonEmpty flush="right" size="xs">Edit as Query DSL</EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPopoverTitle>
+
+        <GlobalFilterForm style={{ width: 400 }} onAdd={this.togglePopover} onCancel={this.togglePopover} />
+      </EuiPopover>
+    );
+  }
+}

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
+import GlobalFilterAdd from './global_filter_add';
+import { GlobalFilterItem } from './global_filter_item';
+
+export const GlobalFilterBar = ({
+  filters,
+  className,
+  ...rest,
+}) => {
+
+  const classes = classNames(
+    'globalFilterBar',
+    className,
+  );
+
+  const pinnedFilters = filters.filter(filter => filter.isPinned).map((filter) => {
+    return (
+      <EuiFlexItem key={filter.id} grow={false}>
+        <GlobalFilterItem {...filter} />
+      </EuiFlexItem>
+    );
+  });
+
+  const unpinnedFilters = filters.filter(filter => !filter.isPinned).map((filter) => {
+    return (
+      <EuiFlexItem key={filter.id} grow={false}>
+        <GlobalFilterItem {...filter} />
+      </EuiFlexItem>
+    );
+  });
+
+  return (
+    <EuiFlexGroup
+      className={classes}
+      wrap={true}
+      responsive={false}
+      gutterSize="xs"
+      alignItems="center"
+      {...rest}
+    >
+
+      {/* Show pinned filters first and in a specific group */}
+      {pinnedFilters}
+      {unpinnedFilters}
+
+      <EuiFlexItem grow={false}><GlobalFilterAdd /></EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+
+GlobalFilterBar.propTypes = {
+  filters: PropTypes.array,
+};