Skip to content

Commit

Permalink
fix(autocomplete, dom): fix default icon types
Browse files Browse the repository at this point in the history
  • Loading branch information
driskull committed Jan 8, 2025
1 parent 904623b commit ebf59b4
Show file tree
Hide file tree
Showing 6 changed files with 59 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -433,6 +433,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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -794,7 +788,7 @@ export class Autocomplete
disabled={disabled}
enterKeyHint={enterKeyHint}
form={this.form}
icon={this.getIcon()}
icon={this.icon}
iconFlipRtl={this.iconFlipRtl}
id={inputId}
inputMode={inputMode}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
20 changes: 19 additions & 1 deletion packages/calcite-components/src/utils/dom.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,28 @@ describe("dom", () => {
"myCustomValue",
));

it("returns the pre-defined icon name if custom value is not passed", () =>
it("returns the pre-defined icon name if custom value is empty string", () =>
expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, "", "exampleValue")).toBe(
"exampleReturnedValue",
));

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",
));

it("returns the pre-defined icon name if custom value is true", () =>
expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, true, "exampleValue")).toBe(
"exampleReturnedValue",
));

it("returns no icon if custom value is false", () =>
expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, false, "exampleValue")).toBe(undefined));
});

describe("uniqueId", () => {
Expand Down
12 changes: 8 additions & 4 deletions packages/calcite-components/src/utils/dom.ts
Original file line number Diff line number Diff line change
Expand Up @@ -327,14 +327,18 @@ export function filterElementsBySelector<T extends Element>(elements: Element[],
*/
export function setRequestedIcon(
iconObject: Record<string, IconNameOrString>,
iconValue: IconNameOrString | boolean | "",
iconValue: IconNameOrString | boolean,
matchedValue: string,
): IconNameOrString | undefined {
if (typeof iconValue === "string" && iconValue !== "") {
return iconValue;
} else if (iconValue === "" || iconValue === true) {
console.log(iconValue, matchedValue);

if (iconValue === false) {
return undefined;
} else if (iconValue === true || !iconValue) {
return iconObject[matchedValue];
}

return iconValue;
}

/**
Expand Down

0 comments on commit ebf59b4

Please sign in to comment.