fix(autocomplete, dom): fix default icon types #11224

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/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,33 +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",
-      ));
+      expect(setRequestedIcon(iconObject, matchedValue, "myCustomValue")).toBe("myCustomValue"));
 
     it("returns the pre-defined icon name if custom value is empty string", () =>
-      expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, "", "exampleValue")).toBe(
-        "exampleReturnedValue",
-      ));
+      expect(setRequestedIcon(iconObject, matchedValue, "")).toBe(iconObject[matchedValue]));
 
     it("returns the pre-defined icon name if custom value is undefined", () =>
-      expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, undefined, "exampleValue")).toBe(
-        "exampleReturnedValue",
-      ));
-
-    it("returns the pre-defined icon name if custom value is null", () =>
-      expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, null, "exampleValue")).toBe(
-        "exampleReturnedValue",
-      ));
+      expect(setRequestedIcon(iconObject, matchedValue, undefined)).toBe(iconObject[matchedValue]));
 
     it("returns the pre-defined icon name if custom value is true", () =>
-      expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, true, "exampleValue")).toBe(
-        "exampleReturnedValue",
-      ));
+      expect(setRequestedIcon(iconObject, matchedValue, true)).toBe(iconObject[matchedValue]));
 
-    it("returns no icon if custom value is false", () =>
-      expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, false, "exampleValue")).toBe(undefined));
+    it("returns no icon name if custom value is false", () =>
+      expect(setRequestedIcon(iconObject, matchedValue, false)).toBe(undefined));
   });
 
   describe("uniqueId", () => {

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

@@ -321,24 +321,20 @@ 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 {
-  console.log(iconValue, matchedValue);
-
-  if (iconValue === false) {
-    return undefined;
-  } else if (iconValue === true || !iconValue) {
-    return iconObject[matchedValue];
+  if (typeof iconValue === "boolean") {
+    return iconValue ? iconObject[matchedValue] : undefined;
+  } else if (typeof iconValue === "string") {
+    return iconValue || iconObject[matchedValue];
   }
-
-  return iconValue;
 }
 
 /**