feat: add clear button to filter (#575)

* add clear button to filter * fix a11y on new filter button * capitalize
Esri · Nov 22, 2019 · 302a13d · 302a13d
1 parent f1f424c
commit 302a13d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 12 deletions.
diff --git a/src/components/calcite-filter/calcite-filter.scss b/src/components/calcite-filter/calcite-filter.scss
@@ -29,15 +29,6 @@ input[type="text"] {
   }
 }
 
-.search-icon {
-  color: var(--calcite-app-foreground-subtle);
-  display: flex;
-  left: 0;
-  position: absolute;
-  transition: left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function),
-    opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);
-}
-
 input[type="text"]:focus {
   border-color: var(--calcite-app-foreground-active);
   box-shadow: 0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);
@@ -51,6 +42,25 @@ input[type="text"]:focus ~ .search-icon {
   opacity: 0;
 }
 
+.search-icon {
+  color: var(--calcite-app-foreground-subtle);
+  display: flex;
+  left: 0;
+  position: absolute;
+  transition: left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function),
+    opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);
+}
+
+.clear-button {
+  color: var(--calcite-app-foreground);
+  background: none;
+  border: 0;
+  cursor: pointer;
+  &:hover {
+    color: var(--calcite-app-foreground-hover);
+  }
+}
+
 .calcite--rtl {
   input[type="text"] {
     padding-left: var(--calcite-app-side-spacing-quarter);

diff --git a/src/components/calcite-filter/calcite-filter.tsx b/src/components/calcite-filter/calcite-filter.tsx
@@ -1,8 +1,9 @@
 import { Component, Element, Event, EventEmitter, Host, Prop, h } from "@stencil/core";
-import { search16 } from "@esri/calcite-ui-icons";
+import { search16, x16 } from "@esri/calcite-ui-icons";
 import { debounce, forIn } from "lodash-es";
 import CalciteIcon from "../utils/CalciteIcon";
 import { CSS } from "./resources";
+import { TEXT } from "../calcite-pick-list/resources";
 
 const filterDebounceInMs = 250;
 
@@ -95,6 +96,11 @@ export class CalciteFilter {
     this.filter(target.value);
   };
 
+  clear = (): void => {
+    this.el.shadowRoot.querySelector("input").value = "";
+    this.calciteFilterChange.emit(this.data);
+  };
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -116,6 +122,9 @@ export class CalciteFilter {
             <CalciteIcon size="16" path={search16} />
           </div>
         </label>
+        <button onClick={this.clear} class={CSS.clearButton} aria-label={TEXT.clear}>
+          <CalciteIcon size="16" path={x16} />
+        </button>
       </Host>
     );
   }

diff --git a/src/components/calcite-filter/resources.ts b/src/components/calcite-filter/resources.ts
@@ -1,3 +1,4 @@
 export const CSS = {
-  searchIcon: "search-icon"
+  searchIcon: "search-icon",
+  clearButton: "clear-button"
 };
diff --git a/src/components/calcite-pick-list/resources.ts b/src/components/calcite-pick-list/resources.ts
@@ -8,5 +8,6 @@ export enum ICON_TYPES {
   grip = "grip"
 }
 export const TEXT = {
-  filterPlaceholder: "Filter results"
+  filterPlaceholder: "Filter results",
+  clear: "Clear filter"
 };