Better styling of filter items

elastic · Aug 23, 2018 · 7427a4f · 7427a4f
1 parent 3fb9980
commit 7427a4f
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 65 deletions.
diff --git a/src-docs/src/views/header/_global_filter_bar.scss b/src-docs/src/views/header/_global_filter_bar.scss
diff --git a/src-docs/src/views/header/_global_filter_group.scss b/src-docs/src/views/header/_global_filter_group.scss
@@ -1,13 +1,15 @@
-@import 'global_filter_bar';
 @import 'global_filter_item';
 @import 'global_filter_form';
 
 .globalFilterGroup__filterBar {
-  margin-top: 8px;
+  margin-top: $euiSizeM - 1px;
 }
 
 .globalFilterGroup__branch {
-  fill: $euiColorLightShade;
+  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 {

diff --git a/src-docs/src/views/header/_global_filter_item.scss b/src-docs/src/views/header/_global_filter_item.scss
@@ -1,12 +1,20 @@
 .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-isExcluded {
-  text-decoration: line-through;
+.globalFilterItem-isPinned {
+  border-left: $euiSizeXS solid $euiColorSuccess;
 }
diff --git a/src-docs/src/views/header/global_filter_bar.js b/src-docs/src/views/header/global_filter_bar.js
@@ -5,11 +5,8 @@ import classNames from 'classnames';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiToolTip,
-  EuiButtonIcon,
 } from '../../../../src/components';
 import GlobalFilterAdd from './global_filter_add';
-import GlobalFilterOptions from './global_filter_options';
 import { GlobalFilterItem } from './global_filter_item';
 
 export const GlobalFilterBar = ({
@@ -45,35 +42,15 @@ export const GlobalFilterBar = ({
       wrap={true}
       responsive={false}
       gutterSize="xs"
+      alignItems="center"
       {...rest}
     >
-      {pinnedFilters.length && ( // Show pinned filters first and in a specific group
-        <EuiFlexItem
-          className="globalFilterBar__pinned"
-          title="This group is pinned"
-          grow={false}
-        >
-          <EuiFlexGroup justifyContent="flexStart" gutterSize="xs" wrap={true} responsive={false}>
-            <EuiFlexItem grow={false}>
-              <EuiToolTip content="Unpin all">
-                <EuiButtonIcon aria-label="Unpin all" className="globalFilterBar__pinnedIcon" color="text" iconType="pin" />
-              </EuiToolTip>
-            </EuiFlexItem>
-
-            {pinnedFilters}
-
-          </EuiFlexGroup>
-        </EuiFlexItem>
-      )}
 
+      {/* Show pinned filters first and in a specific group */}
+      {pinnedFilters}
       {unpinnedFilters}
 
-      <EuiFlexItem>
-        <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" responsive={false}>
-          <EuiFlexItem grow={false}><GlobalFilterAdd /></EuiFlexItem>
-          <EuiFlexItem grow={false}><GlobalFilterOptions /></EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
+      <EuiFlexItem grow={false}><GlobalFilterAdd /></EuiFlexItem>
     </EuiFlexGroup>
   );
 };

diff --git a/src-docs/src/views/header/global_filter_item.js b/src-docs/src/views/header/global_filter_item.js
@@ -52,6 +52,13 @@ export class GlobalFilterItem extends Component {
     });
   };
 
+  deleteFilter = (e) => {
+    window.alert('Filter would have been deleted.');
+    // Make sure it doesn't also trigger the onclick for the whole badge
+    e.stopPropagation();
+  }
+
+
   render() {
     const {
       className,
@@ -75,26 +82,37 @@ export class GlobalFilterItem extends Component {
       className
     );
 
-    let icon;
-    let badgeColor = 'hollow';
+    let prefix = null;
+    if (isExcluded) {
+      prefix = <span>NOT </span>;
+    }
 
-    if (isDisabled) {
-      icon = 'eyeClosed';
-      badgeColor = 'default';
-    } else if (isExcluded) {
-      icon = 'minusInCircle';
+    let title = `Filter: ${field}: "${value}". Select for more filter actions.`;
+    if (isPinned) {
+      title = `Pinned ${title}`;
+    } else if (isDisabled) {
+      title = `Disabled ${title}`;
     }
 
     const badge = (
       <EuiBadge
         id={id}
         className={classes}
-        iconType={icon}
-        color={badgeColor}
+        title={title}
+        iconOnClick={this.deleteFilter}
+        iconOnClickAriaLabel={`Delete filter`}
+        iconType="cross"
+        iconSide="right"
         onClick={this.togglePopover}
-        onClickAriaLabel="Filter options"
+        onClickAriaLabel="Filter actions"
+        closeButtonProps={{
+          // Removing tab focus on close button because the same option can be optained through the context menu
+          // Also, we may want to add a `DEL` keyboard press functionality
+          tabIndex: '-1'
+        }}
         {...rest}
       >
+        {prefix}
         <span>{field}: </span>
         <span>&quot;{value}&quot;</span>
       </EuiBadge>

diff --git a/src-docs/src/views/header/global_filter_options.js b/src-docs/src/views/header/global_filter_options.js
@@ -112,6 +112,7 @@ export default class GlobalFilterOptions extends Component {
             color="text"
             iconType="gear"
             aria-label="Change all filters"
+            title="Change all filters"
           />
         }
         anchorPosition="downCenter"

diff --git a/src-docs/src/views/header/global_query.js b/src-docs/src/views/header/global_query.js
@@ -10,6 +10,7 @@ import {
 } from '../../../../src/components';
 
 import { GlobalFilterBar } from './global_filter_bar';
+import GlobalFilterOptions from './global_filter_options';
 
 export default class extends Component {
   constructor(props) {
@@ -90,7 +91,10 @@ export default class extends Component {
     this.filterBar = node;
   }
 
+
   render() {
+    const filterButtonTitle = `${this.state.filters.length} filters applied. Select to ${this.state.isFiltersVisible ? 'hide' : 'show'}.`;
+
     const filterTriggerButton = (
       <EuiFilterButton
         onClick={this.toggleFilterVisibility}
@@ -99,6 +103,7 @@ export default class extends Component {
         numFilters={this.state.filters.length > 0 ? this.state.filters.length : null}
         aria-controls="GlobalFilterGroup"
         aria-expanded={!!this.state.isFiltersVisible}
+        title={filterButtonTitle}
       >
         Filters
       </EuiFilterButton>
@@ -138,11 +143,8 @@ export default class extends Component {
                 alignItems="flexStart"
                 responsive={false}
               >
-                <EuiFlexItem grow={false}>
-                  <svg className="globalFilterGroup__branch" width="33" height="48" viewBox="0 0 33 48" xmlns="http://www.w3.org/2000/svg">
-                    <rect fillOpacity="0" width="33" height="48" />
-                    <path d="M17,28 L17,-9.18485099e-17 L18,9.18485099e-17 L18,28 L33,28 L33,29 L17,29 L17,28 Z" />
-                  </svg>
+                <EuiFlexItem className="globalFilterGroup__branch" grow={false}>
+                  <GlobalFilterOptions />
                 </EuiFlexItem>
 
                 <EuiFlexItem>