feat: clear button only shows when not empty (#599) (#634)

* feat: added filter textPlaceholder prop (#597) * added tests for clear button and placeholder
Esri · Dec 12, 2019 · e03487a · e03487a
1 parent 4dcf142
commit e03487a
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 11 deletions.
diff --git a/src/components/calcite-filter/calcite-filter.e2e.ts b/src/components/calcite-filter/calcite-filter.e2e.ts
@@ -7,6 +7,69 @@ describe("calcite-filter", () => {
   it("honors hidden attribute", async () => hidden("calcite-filter"));
   it("is accessible", async () => accessible(`<calcite-filter></calcite-filter>`));
 
+  describe("strings", () => {
+    it.only("should update the filter placeholder when a string is provided", async () => {
+      const page = await newE2EPage();
+      const placeholderText = "hide em";
+      await page.setContent(`<calcite-filter text-placeholder="${placeholderText}"></calcite-filter>`);
+
+      const input = await page.find(`calcite-filter >>> input`);
+      expect(await input.getProperty("placeholder")).toBe(placeholderText);
+    });
+  });
+
+  describe.only("clear button", () => {
+    let page;
+    beforeEach(async () => {
+      page = await newE2EPage();
+      await page.setContent("<calcite-filter></calcite-filter>");
+      await page.evaluate(() => {
+        const filter = document.querySelector("calcite-filter");
+        filter.data = [{ foo: "bar" }];
+      });
+    });
+    it("should only display when the input has a value", async () => {
+      let button = await page.find(`calcite-filter >>> button`);
+
+      expect(button).toBeNull();
+
+      await page.evaluate(() => {
+        const filter = document.querySelector("calcite-filter");
+        const filterInput = filter.shadowRoot.querySelector("input");
+        filterInput.value = "developer";
+        filterInput.dispatchEvent(new Event("input"));
+      });
+
+      await page.waitForChanges();
+
+      button = await page.find(`calcite-filter >>> button`);
+
+      expect(button).not.toBeNull();
+    });
+    it("should clear the value in the input when pressed", async () => {
+      await page.evaluate(() => {
+        const filter = document.querySelector("calcite-filter");
+        const filterInput = filter.shadowRoot.querySelector("input");
+        filterInput.value = "developer";
+        filterInput.dispatchEvent(new Event("input"));
+      });
+
+      await page.waitForChanges();
+
+      const button = await page.find(`calcite-filter >>> button`);
+
+      await button.click();
+
+      const value = await page.evaluate(() => {
+        const filter = document.querySelector("calcite-filter");
+        const filterInput = filter.shadowRoot.querySelector("input");
+        return filterInput.value;
+      });
+
+      expect(value).toBe("");
+    });
+  });
+
   describe("filter behavior", () => {
     let page: E2EPage;
     beforeEach(async () => {

diff --git a/src/components/calcite-filter/calcite-filter.tsx b/src/components/calcite-filter/calcite-filter.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Host, Prop, h } from "@stencil/core";
+import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from "@stencil/core";
 import { search16, x16 } from "@esri/calcite-ui-icons";
 import { debounce, forIn } from "lodash-es";
 import CalciteIcon from "../utils/CalciteIcon";
@@ -42,6 +42,8 @@ export class CalciteFilter {
 
   @Element() el: HTMLCalciteFilterElement;
 
+  @State() empty = true;
+
   // --------------------------------------------------------------------------
   //
   //  Events
@@ -92,11 +94,13 @@ export class CalciteFilter {
 
   inputHandler = (event: Event): void => {
     const target = event.target as HTMLInputElement;
+    this.empty = target.value === "";
     this.filter(target.value);
   };
 
   clear = (): void => {
     this.el.shadowRoot.querySelector("input").value = "";
+    this.empty = true;
     this.calciteFilterChange.emit(this.data);
   };
 
@@ -121,9 +125,11 @@ 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>
+        {!this.empty ? (
+          <button onClick={this.clear} class={CSS.clearButton} aria-label={TEXT.clear}>
+            <CalciteIcon size="16" path={x16} />
+          </button>
+        ) : null}
       </Host>
     );
   }

diff --git a/src/components/calcite-pick-list/calcite-pick-list.tsx b/src/components/calcite-pick-list/calcite-pick-list.tsx
@@ -85,6 +85,11 @@ export class CalcitePickList {
    */
   @Prop({ reflect: true }) textHeading?: string;
 
+  /**
+   * Placeholder text for the filter input field.
+   */
+  @Prop({ reflect: true }) textFilterPlaceholder?: string = TEXT.filterPlaceholder;
+
   // --------------------------------------------------------------------------
   //
   //  Private Properties
@@ -200,6 +205,6 @@ export class CalcitePickList {
   }
 
   render() {
-    return <List props={this} text={TEXT} />;
+    return <List props={this} />;
   }
 }
diff --git a/src/components/calcite-pick-list/shared-list-render.tsx b/src/components/calcite-pick-list/shared-list-render.tsx
@@ -7,17 +7,23 @@ const renderScrim = (loading, disabled): VNode => {
   return <CalciteScrim loading={loading} disabled={disabled} />;
 };
 
-export const List = ({ props, text, ...rest }): VNode => {
-  const { disabled, loading, filterEnabled, dataForFilter, handleFilter } = props;
-  const { filterPlaceholder } = text;
+export const List = ({ props, ...rest }): VNode => {
+  const {
+    disabled,
+    loading,
+    filterEnabled,
+    dataForFilter,
+    handleFilter,
+    textFilterPlaceholder
+  } = props;
   return (
     <Host aria-disabled={disabled.toString()} aria-busy={loading.toString()} {...rest}>
       <header class={{ [CSS.sticky]: true }}>
         {filterEnabled ? (
           <calcite-filter
             data={dataForFilter}
-            textPlaceholder={filterPlaceholder}
-            aria-label={filterPlaceholder}
+            textPlaceholder={textFilterPlaceholder}
+            aria-label={textFilterPlaceholder}
             onCalciteFilterChange={handleFilter}
           />
         ) : null}

diff --git a/src/components/calcite-value-list/calcite-value-list.tsx b/src/components/calcite-value-list/calcite-value-list.tsx
@@ -77,6 +77,11 @@ export class CalciteValueList {
    */
   @Prop({ reflect: true }) multiple = false;
 
+  /**
+   * Placeholder text for the filter input field.
+   */
+  @Prop({ reflect: true }) textFilterPlaceholder?: string = TEXT.filterPlaceholder;
+
   // --------------------------------------------------------------------------
   //
   //  Private Properties
@@ -274,6 +279,6 @@ export class CalciteValueList {
   }
 
   render() {
-    return <List props={this} text={TEXT} onKeyDown={this.keyDownHandler} />;
+    return <List props={this} onKeyDown={this.keyDownHandler} />;
   }
 }