feat(filter): add placeholder property (#854)

Deprecates `textPlaceholder`.
Esri · Feb 27, 2020 · dec10b1 · dec10b1
1 parent c0d3a7e
commit dec10b1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/components/calcite-filter/calcite-filter.e2e.ts b/src/components/calcite-filter/calcite-filter.e2e.ts
@@ -12,7 +12,7 @@ describe("calcite-filter", () => {
     it("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>`);
+      await page.setContent(`<calcite-filter placeholder="${placeholderText}"></calcite-filter>`);
 
       const input = await page.find(`calcite-filter >>> input`);
       expect(await input.getProperty("placeholder")).toBe(placeholderText);

diff --git a/src/components/calcite-filter/calcite-filter.tsx b/src/components/calcite-filter/calcite-filter.tsx
@@ -32,6 +32,11 @@ export class CalciteFilter {
    */
   @Prop() intlLabel?: string;
 
+  /**
+   * Placeholder text for the input element's placeholder attribute
+   */
+  @Prop() placeholder?: string;
+
   /**
    * A text label that will appear next to the input field.
    *
@@ -41,8 +46,10 @@ export class CalciteFilter {
 
   /**
    * Placeholder text for the input element's placeholder attribute
+   *
+   * @deprecated since 5.4.0 - use "placeholder" instead.
    */
-  @Prop() textPlaceholder: string;
+  @Prop() textPlaceholder?: string;
 
   // --------------------------------------------------------------------------
   //
@@ -129,7 +136,7 @@ export class CalciteFilter {
           <input
             type="text"
             value=""
-            placeholder={this.textPlaceholder}
+            placeholder={this.placeholder || this.textPlaceholder}
             onInput={this.inputHandler}
             aria-label={this.intlLabel || this.textLabel || TEXT.filterLabel}
             ref={(el) => (this.textInput = el as HTMLInputElement)}