feat(input): add clear button for search input (Trendyol#715)

src/components/calendar/bl-calendar.css

@@ -127,6 +127,7 @@
 
 .grid-item {
   width: 93.33px;
+
   --bl-size-3xs: 15px;
 }
 

src/components/input/bl-input.css

@@ -159,6 +159,10 @@ input::-webkit-calendar-picker-indicator {
   display: none;
 }
 
+input::-webkit-search-cancel-button {
+  display: none;
+}
+
 input::-moz-calendar-picker-indicator {
   display: none;
 }
@@ -193,7 +197,7 @@ input:-webkit-autofill {
   margin-inline-end: var(--label-padding);
 }
 
-bl-icon:not(.reveal-icon),
+bl-icon:not(.reveal-icon, .clear-icon),
 ::slotted(bl-icon) {
   font-size: var(--icon-size);
   color: var(--icon-color);

src/components/input/bl-input.test.ts

@@ -154,6 +154,18 @@ describe("bl-input", () => {
 
       expect(revealButton).to.have.style("display", "none");
     });
+
+    it("should hide clear button for empty or non-search inputs", async () => {
+      const emptySearchEl = await fixture<BlInput>(html`<bl-input type="search" value=""></bl-input>`);
+      const emptySearchCloseIcon = emptySearchEl?.shadowRoot?.querySelector('bl-icon[name="close"]');
+
+      expect(emptySearchCloseIcon).to.not.exist;
+
+      const textInputEl = await fixture<BlInput>(html`<bl-input type="text" value="test"></bl-input>`);
+      const textInputCloseIcon = textInputEl?.shadowRoot?.querySelector('bl-icon[name="close"]');
+
+      expect(textInputCloseIcon).to.not.exist;
+    });
   });
 
   describe("validation", () => {
@@ -319,6 +331,22 @@ describe("bl-input", () => {
       expect(input).to.attr("type", "text");
     });
 
+    it("should show clear button and clear value on clear button click", async () => {
+      const el = await fixture<BlInput>(html`<bl-input type="search" value="test"></bl-input>`);
+      const closeIcon = el?.shadowRoot?.querySelector('bl-icon[name="close"]') as HTMLElement | null;
+      const input = el?.shadowRoot?.querySelector("input");
+
+      expect(input).to.attr("type", "search");
+      expect(closeIcon).to.exist;
+      expect(el.value).to.equal("test");
+
+      closeIcon?.click();
+      await elementUpdated(el);
+
+      expect(el.value).to.equal("");
+    });
+
+
     it("should fire bl-input event when input value changes", async () => {
       const el = await fixture<BlInput>(html`<bl-input></bl-input>`);
       const input = el.shadowRoot?.querySelector("input");

src/components/input/bl-input.ts

@@ -259,6 +259,13 @@ export default class BlInput extends FormControlMixin(LitElement) {
     this.passwordVisible = !this.passwordVisible;
   }
 
+  private async clearSearch() {
+    this.value = "";
+
+    await this.clearCustomError();
+    this.validationTarget.focus();
+  }
+
   showPicker() {
     if ("showPicker" in HTMLInputElement.prototype) {
       this.validationTarget.showPicker();
@@ -391,6 +398,19 @@ export default class BlInput extends FormControlMixin(LitElement) {
         </bl-button>`
       : "";
 
+    const clearButton =
+      this.type === "search" && this.value !== "" && this.value !== null
+        ? html`<bl-button
+            size="small"
+            kind="neutral"
+            variant="tertiary"
+            aria-label="Clear search"
+            @bl-click="${this.clearSearch}"
+          >
+            <bl-icon class="clear-icon" slot="icon" name="close"></bl-icon>
+          </bl-button>`
+        : "";
+
     const hasCustomIcon = this.icon || this._hasIconSlot;
     const classes = {
       "wrapper": true,
@@ -430,7 +450,7 @@ export default class BlInput extends FormControlMixin(LitElement) {
           aria-describedby=${ifDefined(this.helpText ? "helpText" : undefined)}
           aria-errormessage=${ifDefined(this.checkValidity() ? undefined : "errorMessage")}
         />
-        <div class="icon">${revealButton} ${icon}</div>
+        <div class="icon">${revealButton} ${clearButton} ${icon}</div>
       </fieldset>
       <div class="hint">${invalidMessage} ${helpMessage}</div>
     </div>`;