fix(autocomplete, dom): fix default icon types

packages/calcite-components/src/components/alert/alert.tsx

@@ -405,7 +405,7 @@ export class Alert extends LitElement implements OpenCloseComponent, LoadableCom
     const { open, autoClose, label, placement, active, openAlertCount } = this;
     const role = autoClose ? "alert" : "alertdialog";
     const hidden = !open;
-    const effectiveIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
+    const effectiveIcon = setRequestedIcon(KindIcons, this.kind, this.icon);
     const hasQueuedAlerts = openAlertCount > 1;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
     this.el.inert = hidden;

packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts

@@ -435,6 +435,21 @@ describe("calcite-autocomplete", () => {
       await page.setContent(simpleHTML);
     });
 
+    it("should be able to remove icon", async () => {
+      const page = await newE2EPage();
+      await page.setContent(simpleHTML);
+
+      const autocomplete = await page.find("calcite-autocomplete");
+      const input = await page.find("calcite-autocomplete >>> calcite-input");
+
+      expect(await input.getProperty("icon")).toBe(undefined);
+
+      autocomplete.setProperty("icon", false);
+      await page.waitForChanges();
+
+      expect(await input.getProperty("icon")).toBe(false);
+    });
+
     it("should open on focus", async () => {
       const page = await newE2EPage();
       await page.setContent(simpleHTML);

packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts

@@ -134,6 +134,21 @@ export const simple = (args: AutocompleteStoryArgs): string => html`
   </div>
 `;
 
+export const customIcon = (): string => html`
+  <div style="width:350px">
+    <calcite-autocomplete icon="banana"></calcite-autocomplete>
+  </div>
+`;
+
+export const noIcon = (): string => html`
+  <div style="width:350px">
+    <calcite-autocomplete id="autocomplete"></calcite-autocomplete>
+  </div>
+  <script>
+    document.getElementById("autocomplete").icon = false;
+  </script>
+`;
+
 export const matchResults = (): string =>
   html`<div style="width:350px; height: 600px;">
     <calcite-autocomplete label="Item list" id="myAutocomplete" input-value="item" open>

packages/calcite-components/src/components/autocomplete/autocomplete.tsx

@@ -60,7 +60,7 @@ import { Validation } from "../functional/Validation";
 import { createObserver } from "../../utils/observers";
 import { styles } from "./autocomplete.scss";
 import T9nStrings from "./assets/t9n/messages.en.json";
-import { CSS, ICONS, IDS, SLOTS } from "./resources";
+import { CSS, IDS, SLOTS } from "./resources";
 
 const groupItemSelector = "calcite-autocomplete-item-group";
 const itemSelector = "calcite-autocomplete-item";
@@ -654,12 +654,6 @@ export class Autocomplete
     this.updateGroups();
   }
 
-  private getIcon(): IconNameOrString {
-    const { icon } = this;
-
-    return icon === true ? ICONS.search : icon || ICONS.search;
-  }
-
   private setReferenceEl(el: Input["el"]): void {
     this.referenceEl = el;
 
@@ -804,7 +798,7 @@ export class Autocomplete
             disabled={disabled}
             enterKeyHint={enterKeyHint}
             form={this.form}
-            icon={this.getIcon()}
+            icon={this.icon}
             iconFlipRtl={this.iconFlipRtl}
             id={inputId}
             inputMode={inputMode}

packages/calcite-components/src/components/autocomplete/resources.ts

@@ -3,10 +3,6 @@ export const SLOTS = {
   contentTop: "content-top",
 } as const;
 
-export const ICONS = {
-  search: "search",
-} as const;
-
 export const CSS = {
   inputContainer: "input-container",
   input: "input",

packages/calcite-components/src/components/input-message/input-message.tsx

@@ -55,7 +55,7 @@ export class InputMessage extends LitElement {
   // #region Lifecycle
 
   override connectedCallback(): void {
-    this.requestedIcon = setRequestedIcon(StatusIconDefaults, this.icon, this.status);
+    this.requestedIcon = setRequestedIcon(StatusIconDefaults, this.status, this.icon);
   }
 
   override willUpdate(changes: PropertyValues<this>): void {
@@ -67,7 +67,7 @@ export class InputMessage extends LitElement {
       (changes.has("status") && (this.hasUpdated || this.status !== "idle")) ||
       changes.has("icon")
     ) {
-      this.requestedIcon = setRequestedIcon(StatusIconDefaults, this.icon, this.status);
+      this.requestedIcon = setRequestedIcon(StatusIconDefaults, this.status, this.icon);
     }
   }
 

packages/calcite-components/src/components/input-number/input-number.tsx

@@ -413,7 +413,7 @@ export class InputNumber
     setUpLoadableComponent(this);
     this.maxString = this.max?.toString();
     this.minString = this.min?.toString();
-    this.requestedIcon = setRequestedIcon({}, this.icon, "number");
+    this.requestedIcon = setRequestedIcon({}, "number", this.icon);
     this.setPreviousEmittedNumberValue(this.value);
     this.setPreviousNumberValue(this.value);
 
@@ -440,7 +440,7 @@ export class InputNumber
     }
 
     if (changes.has("icon")) {
-      this.requestedIcon = setRequestedIcon({}, this.icon, "number");
+      this.requestedIcon = setRequestedIcon({}, "number", this.icon);
     }
 
     if (changes.has("messages")) {

packages/calcite-components/src/components/input-text/input-text.tsx

@@ -353,14 +353,14 @@ export class InputText
 
   async load(): Promise<void> {
     setUpLoadableComponent(this);
-    this.requestedIcon = setRequestedIcon({}, this.icon, "text");
+    this.requestedIcon = setRequestedIcon({}, "text", this.icon);
     this.setPreviousEmittedValue(this.value);
     this.setPreviousValue(this.value);
   }
 
   override willUpdate(changes: PropertyValues<this>): void {
     if (changes.has("icon")) {
-      this.requestedIcon = setRequestedIcon({}, this.icon, "text");
+      this.requestedIcon = setRequestedIcon({}, "text", this.icon);
     }
   }
 

packages/calcite-components/src/components/input/input.tsx

@@ -479,7 +479,7 @@ export class Input
     this.childElType = this.type === "textarea" ? "textarea" : "input";
     this.maxString = this.max?.toString();
     this.minString = this.min?.toString();
-    this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
+    this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.type, this.icon);
     this.setPreviousEmittedValue(this.value);
     this.setPreviousValue(this.value);
 
@@ -511,7 +511,7 @@ export class Input
     }
 
     if (changes.has("icon") || (changes.has("type") && (this.hasUpdated || this.type !== "text"))) {
-      this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
+      this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.type, this.icon);
     }
   }
 

packages/calcite-components/src/components/notice/notice.tsx

@@ -151,7 +151,7 @@ export class Notice extends LitElement implements LoadableComponent, OpenCloseCo
 
   async load(): Promise<void> {
     setUpLoadableComponent(this);
-    this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
+    this.requestedIcon = setRequestedIcon(KindIcons, this.kind, this.icon);
     if (this.open) {
       onToggleOpenCloseComponent(this);
     }
@@ -170,7 +170,7 @@ export class Notice extends LitElement implements LoadableComponent, OpenCloseCo
       changes.has("icon") ||
       (changes.has("kind") && (this.hasUpdated || this.kind !== "brand"))
     ) {
-      this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
+      this.requestedIcon = setRequestedIcon(KindIcons, this.kind, this.icon);
     }
   }
 

packages/calcite-components/src/utils/dom.spec.ts

@@ -58,15 +58,23 @@ describe("dom", () => {
   }
 
   describe("setRequestedIcon()", () => {
+    const iconObject = { exampleValue: "exampleReturnedValue" };
+    const matchedValue = "exampleValue";
+
     it("returns the custom icon name if custom value is passed", () =>
-      expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, "myCustomValue", "exampleValue")).toBe(
-        "myCustomValue",
-      ));
-
-    it("returns the pre-defined icon name if custom value is not passed", () =>
-      expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, "", "exampleValue")).toBe(
-        "exampleReturnedValue",
-      ));
+      expect(setRequestedIcon(iconObject, matchedValue, "myCustomValue")).toBe("myCustomValue"));
+
+    it("returns the pre-defined icon name if custom value is true", () =>
+      expect(setRequestedIcon(iconObject, matchedValue, true)).toBe(iconObject[matchedValue]));
+
+    it("returns undefined if custom value is an empty string", () =>
+      expect(setRequestedIcon(iconObject, matchedValue, "")).toBe(undefined));
+
+    it("returns undefined if custom value is undefined", () =>
+      expect(setRequestedIcon(iconObject, matchedValue, undefined)).toBe(undefined));
+
+    it("returns undefined if custom value is false", () =>
+      expect(setRequestedIcon(iconObject, matchedValue, false)).toBe(undefined));
   });
 
   describe("uniqueId", () => {

packages/calcite-components/src/utils/dom.ts

@@ -321,19 +321,19 @@ export function filterElementsBySelector<T extends Element>(elements: Element[],
  * Set a default icon from a defined set or allow an override with an icon name string
  *
  * @param {Record<string, string>} iconObject The icon object.
- * @param {string | boolean} iconValue The icon value.
  * @param {string} matchedValue The matched value.
+ * @param {string|boolean|undefined} iconValue The icon value.
  * @returns {string|undefined} The resulting icon value.
  */
 export function setRequestedIcon(
   iconObject: Record<string, IconNameOrString>,
-  iconValue: IconNameOrString | boolean | "",
   matchedValue: string,
+  iconValue: IconNameOrString | boolean | undefined,
 ): IconNameOrString | undefined {
-  if (typeof iconValue === "string" && iconValue !== "") {
+  if (typeof iconValue === "boolean") {
+    return iconValue ? iconObject[matchedValue] : undefined;
+  } else if (typeof iconValue === "string" && !!iconValue) {
     return iconValue;
-  } else if (iconValue === "" || iconValue === true) {
-    return iconObject[matchedValue];
   }
 }