From 24ec9abf82d73e2aaad69369f649ee9dab178e72 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 8 Jan 2025 12:49:56 -0800 Subject: [PATCH] fix(autocomplete, dom): fix default icon types #11224 --- .../src/components/alert/alert.tsx | 2 +- .../input-message/input-message.tsx | 4 +-- .../components/input-number/input-number.tsx | 4 +-- .../src/components/input-text/input-text.tsx | 4 +-- .../src/components/input/input.tsx | 4 +-- .../src/components/notice/notice.tsx | 4 +-- .../calcite-components/src/utils/dom.spec.ts | 28 ++++++------------- packages/calcite-components/src/utils/dom.ts | 16 ++++------- 8 files changed, 26 insertions(+), 40 deletions(-) diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index a34b7ec6a7d..6eae60f18cc 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/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 before. In Stencil, props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */ this.el.inert = hidden; diff --git a/packages/calcite-components/src/components/input-message/input-message.tsx b/packages/calcite-components/src/components/input-message/input-message.tsx index be873a47cda..725710afad5 100644 --- a/packages/calcite-components/src/components/input-message/input-message.tsx +++ b/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): 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); } } diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx index 10038f090e7..a45ab45802a 100644 --- a/packages/calcite-components/src/components/input-number/input-number.tsx +++ b/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")) { diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx index d1f48e82064..e90351528e8 100644 --- a/packages/calcite-components/src/components/input-text/input-text.tsx +++ b/packages/calcite-components/src/components/input-text/input-text.tsx @@ -353,14 +353,14 @@ export class InputText async load(): Promise { 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): void { if (changes.has("icon")) { - this.requestedIcon = setRequestedIcon({}, this.icon, "text"); + this.requestedIcon = setRequestedIcon({}, "text", this.icon); } } diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx index 01ca297e9f4..5d73f40c901 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/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); } } diff --git a/packages/calcite-components/src/components/notice/notice.tsx b/packages/calcite-components/src/components/notice/notice.tsx index ff20f21095a..06bfbddc8ae 100644 --- a/packages/calcite-components/src/components/notice/notice.tsx +++ b/packages/calcite-components/src/components/notice/notice.tsx @@ -151,7 +151,7 @@ export class Notice extends LitElement implements LoadableComponent, OpenCloseCo async load(): Promise { 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); } } diff --git a/packages/calcite-components/src/utils/dom.spec.ts b/packages/calcite-components/src/utils/dom.spec.ts index 9ed8bd625a6..3a82a1fd7c3 100644 --- a/packages/calcite-components/src/utils/dom.spec.ts +++ b/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", () => { diff --git a/packages/calcite-components/src/utils/dom.ts b/packages/calcite-components/src/utils/dom.ts index 9d12aecf6c5..5ef19a3f1c7 100644 --- a/packages/calcite-components/src/utils/dom.ts +++ b/packages/calcite-components/src/utils/dom.ts @@ -321,24 +321,20 @@ export function filterElementsBySelector(elements: Element[], * Set a default icon from a defined set or allow an override with an icon name string * * @param {Record} 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, - 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; } /**