From 9c2ba2fb21f195387a8dc0a95009c620f070378d Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 2 Jul 2024 13:49:43 -0700 Subject: [PATCH] feat(icon): type icon names (#9650) **Related issue:** #8858 Adds a type for all supported UI icon names and updates types of component icon props. ### Notes * Moves `@esri/calcite-ui-icons` as a dependency to ensure types are available * Icon name prop includes both kebab-case and camelCase names (supported icon values) * Type resides in `icon/interfaces` (maybe it belongs in the shared interfaces file?) * Type is computed from `@esri/calcite-ui-icons`' module exports using `type-fest` + TS utils --- package-lock.json | 3 +- packages/calcite-components/.eslintrc.cjs | 3 +- packages/calcite-components/package.json | 2 +- .../calcite-components/src/components.d.ts | 190 +++++++++--------- .../accordion-item/accordion-item.tsx | 5 +- .../src/components/action-group/resources.ts | 2 +- .../src/components/action-menu/resources.ts | 2 +- .../src/components/action/action.tsx | 3 +- .../src/components/alert/alert.tsx | 5 +- .../block-section/block-section.tsx | 5 +- .../src/components/block-section/resources.ts | 2 +- .../src/components/block/block.tsx | 5 +- .../src/components/block/resources.ts | 2 +- .../src/components/button/button.tsx | 5 +- .../src/components/card/card.tsx | 3 +- .../src/components/card/resources.ts | 2 +- .../src/components/carousel/resources.ts | 2 +- .../src/components/chip/chip.tsx | 3 +- .../src/components/chip/resources.ts | 2 +- .../combobox-item/combobox-item.tsx | 13 +- .../src/components/combobox/combobox.tsx | 5 +- .../date-picker-month-header/resources.ts | 2 +- .../dropdown-item/dropdown-item.tsx | 5 +- .../src/components/fab/fab.tsx | 3 +- .../src/components/fab/resources.ts | 2 +- .../src/components/filter/resources.ts | 2 +- .../src/components/flow-item/resources.ts | 2 +- .../components/functional/ExpandToggle.tsx | 2 +- .../src/components/functional/Validation.tsx | 3 +- .../src/components/handle/resources.ts | 2 +- .../src/components/icon/icon.tsx | 3 +- .../src/components/icon/interfaces.ts | 15 ++ .../src/components/icon/utils.ts | 3 +- .../input-date-picker/input-date-picker.tsx | 3 +- .../input-message/input-message.tsx | 7 +- .../components/input-message/interfaces.ts | 2 +- .../components/input-number/input-number.tsx | 7 +- .../src/components/input-text/input-text.tsx | 7 +- .../input-time-picker/input-time-picker.tsx | 3 +- .../input-time-zone/input-time-zone.tsx | 3 +- .../src/components/input/input.tsx | 7 +- .../src/components/input/resources.ts | 2 +- .../src/components/link/link.tsx | 5 +- .../src/components/list-item/resources.ts | 2 +- .../src/components/menu-item/menu-item.tsx | 5 +- .../src/components/modal/resources.ts | 2 +- .../navigation-logo/navigation-logo.tsx | 3 +- .../src/components/navigation/resources.ts | 2 +- .../src/components/notice/notice.tsx | 5 +- .../src/components/pagination/resources.ts | 2 +- .../src/components/panel/resources.ts | 2 +- .../components/pick-list-item/resources.ts | 2 +- .../radio-button-group/radio-button-group.tsx | 3 +- .../src/components/resources.ts | 2 +- .../segmented-control-item.tsx | 7 +- .../segmented-control/segmented-control.tsx | 3 +- .../src/components/select/select.tsx | 3 +- .../components/split-button/split-button.tsx | 5 +- .../components/stepper-item/stepper-item.tsx | 3 +- .../src/components/tab-nav/resources.ts | 2 +- .../src/components/tab-title/resources.ts | 2 +- .../src/components/tab-title/tab-title.tsx | 5 +- .../src/components/text-area/text-area.tsx | 3 +- .../components/tile-select/tile-select.tsx | 3 +- .../src/components/tile/resources.ts | 2 +- .../src/components/tile/tile.tsx | 3 +- .../src/components/tip-manager/resources.ts | 2 +- .../src/components/tip/resources.ts | 2 +- .../src/components/tree-item/resources.ts | 2 +- .../src/components/tree-item/tree-item.tsx | 3 +- .../components/value-list-item/resources.ts | 2 +- .../calcite-components/src/utils/dom.spec.ts | 2 + packages/calcite-components/src/utils/dom.ts | 7 +- .../calcite-components/src/utils/form.tsx | 4 +- 74 files changed, 254 insertions(+), 195 deletions(-) create mode 100644 packages/calcite-components/src/components/icon/interfaces.ts diff --git a/package-lock.json b/package-lock.json index ca6049f08c5..7bcd9a5b761 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3910,7 +3910,6 @@ "version": "3.28.2", "resolved": "https://registry.npmjs.org/@esri/calcite-ui-icons/-/calcite-ui-icons-3.28.2.tgz", "integrity": "sha512-XllnLkjjjbnjaYPn1XlsU5ufs8L5Ye/Yo+X/m1+/RaHW/sRYC2h4jXnPRYU3Nhh1yU5ZR8pfgC/BepmZas0FyA==", - "dev": true, "bin": { "spriter": "bin/spriter.js" } @@ -36916,6 +36915,7 @@ "version": "2.10.2-next.2", "license": "SEE LICENSE.md", "dependencies": { + "@esri/calcite-ui-icons": "3.28.2", "@floating-ui/dom": "1.6.5", "@stencil/core": "4.18.3", "@types/color": "3.0.6", @@ -36930,7 +36930,6 @@ }, "devDependencies": { "@esri/calcite-design-tokens": "^2.2.1-next.1", - "@esri/calcite-ui-icons": "3.28.2", "@esri/eslint-plugin-calcite-components": "^1.2.1-next.3", "@stencil-community/eslint-plugin": "0.7.2", "@stencil-community/postcss": "2.2.0", diff --git a/packages/calcite-components/.eslintrc.cjs b/packages/calcite-components/.eslintrc.cjs index 75c1fcfcd12..b5ceb4e7075 100644 --- a/packages/calcite-components/.eslintrc.cjs +++ b/packages/calcite-components/.eslintrc.cjs @@ -70,6 +70,7 @@ module.exports = { ], }, ], + "@typescript-eslint/lines-between-class-members": ["error", "always"], "@typescript-eslint/method-signature-style": ["error", "property"], "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-unused-vars": "error", @@ -84,7 +85,7 @@ module.exports = { "jsdoc/require-property-type": "off", "jsdoc/require-returns-type": "off", "jsdoc/tag-lines": ["error", "any", { startLines: 1 }], - "lines-between-class-members": ["error", "always"], + "lines-between-class-members": "off", "no-eval": "error", "no-implied-eval": "error", "no-multiple-empty-lines": [ diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 89d701cfe75..d04cff374ac 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -63,6 +63,7 @@ "directory": "packages/calcite-components" }, "dependencies": { + "@esri/calcite-ui-icons": "3.28.2", "@floating-ui/dom": "1.6.5", "@stencil/core": "4.18.3", "@types/color": "3.0.6", @@ -77,7 +78,6 @@ }, "devDependencies": { "@esri/calcite-design-tokens": "^2.2.1-next.1", - "@esri/calcite-ui-icons": "3.28.2", "@esri/eslint-plugin-calcite-components": "^1.2.1-next.3", "@stencil-community/eslint-plugin": "0.7.2", "@stencil-community/postcss": "2.2.0", diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 3a76eb679f5..0546404fefd 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -7,6 +7,7 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; import { RequestedItem } from "./components/accordion/interfaces"; +import { IconName } from "./components/icon/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; import { ActionMessages } from "./components/action/assets/action/t9n"; import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; @@ -98,6 +99,7 @@ import { ValueListMessages } from "./components/value-list/assets/value-list/t9n import { ListItemAndHandle } from "./components/value-list-item/interfaces"; export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; +export { IconName } from "./components/icon/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; export { ActionMessages } from "./components/action/assets/action/t9n"; export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; @@ -233,7 +235,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": string; + "iconEnd": IconName; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -245,7 +247,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": string; + "iconStart": IconName; /** * Specifies the type of the icon in the header inherited from the `calcite-accordion`. */ @@ -283,7 +285,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": string; + "icon": IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -510,7 +512,7 @@ export namespace Components { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon": string | boolean; + "icon": IconName | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -613,7 +615,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": string; + "iconEnd": IconName; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -621,7 +623,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": string; + "iconStart": IconName; /** * When `true`, a busy indicator is displayed. */ @@ -656,7 +658,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": string; + "iconEnd": IconName; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -664,7 +666,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": string; + "iconStart": IconName; /** * Use this property to override individual strings used by the component. */ @@ -726,7 +728,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": string; + "iconEnd": IconName; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -734,7 +736,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": string; + "iconStart": IconName; /** * Specifies the kind of the component, which will apply to the border and background if applicable. */ @@ -1010,7 +1012,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": string; + "icon": IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -1288,7 +1290,7 @@ export namespace Components { /** * Specifies the placeholder icon for the input. */ - "placeholderIcon": string; + "placeholderIcon": IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -1338,7 +1340,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": string | boolean; + "validationIcon": IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -1382,7 +1384,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": string; + "icon": IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -1721,7 +1723,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": string; + "iconEnd": IconName; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -1729,7 +1731,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": string; + "iconStart": IconName; /** * Accessible name for the component. */ @@ -1772,7 +1774,7 @@ export namespace Components { * Specifies an icon to display. * @default "plus" */ - "icon": string; + "icon": IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -2016,7 +2018,7 @@ export namespace Components { * Displays a specific icon. * @see [Icons](https://esri.github.io/calcite-ui-icons) */ - "icon": string; + "icon": IconName; /** * Specifies the size of the component. */ @@ -2115,7 +2117,7 @@ export namespace Components { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon": string | boolean; + "icon": IconName | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -2253,7 +2255,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": string | boolean; + "validationIcon": IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -2376,7 +2378,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": string | boolean; + "validationIcon": IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -2400,7 +2402,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": boolean | string; + "icon": IconName | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -2456,7 +2458,7 @@ export namespace Components { * Specifies an icon to display. * @futureBreaking Remove boolean type as it is not supported. */ - "icon": string | boolean; + "icon": IconName | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -2571,7 +2573,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": string | boolean; + "validationIcon": IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -2625,7 +2627,7 @@ export namespace Components { * Specifies an icon to display. * @futureBreaking Remove boolean type as it is not supported. */ - "icon": string | boolean; + "icon": IconName | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -2712,7 +2714,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": string | boolean; + "validationIcon": IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -2812,7 +2814,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": string | boolean; + "validationIcon": IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -2900,7 +2902,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": string | boolean; + "validationIcon": IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -2951,7 +2953,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": string; + "iconEnd": IconName; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -2959,7 +2961,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": string; + "iconStart": IconName; /** * Specifies the relationship to the linked document defined in `href`. */ @@ -3240,7 +3242,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": string; + "iconEnd": IconName; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -3248,7 +3250,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": string; + "iconStart": IconName; "isTopLevelItem": boolean; /** * Accessible name for the component. @@ -3479,7 +3481,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": string; + "icon": IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -3549,7 +3551,7 @@ export namespace Components { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon": string | boolean; + "icon": IconName | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -4069,7 +4071,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": string | boolean; + "validationIcon": IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -4188,7 +4190,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": string | boolean; + "validationIcon": IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -4220,7 +4222,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": string; + "iconEnd": IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -4228,7 +4230,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": string; + "iconStart": IconName; /** * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`. */ @@ -4283,7 +4285,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": string | boolean; + "validationIcon": IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -4631,7 +4633,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the primary button. */ - "primaryIconEnd": string; + "primaryIconEnd": IconName; /** * Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -4639,7 +4641,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the primary button. */ - "primaryIconStart": string; + "primaryIconStart": IconName; /** * Accessible name for the primary button. */ @@ -4901,7 +4903,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": string; + "iconEnd": IconName; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -4909,7 +4911,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": string; + "iconStart": IconName; "layout": TabLayout; /** * Use this property to override individual strings used by the component. @@ -5237,7 +5239,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": string | boolean; + "validationIcon": IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -5292,7 +5294,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": string; + "icon": IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -5394,7 +5396,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": string; + "icon": IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -5622,7 +5624,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": string; + "iconStart": IconName; /** * In ancestor selection mode, show as indeterminate when only some children are selected. */ @@ -7995,7 +7997,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: string; + "iconEnd"?: IconName; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8007,7 +8009,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: string; + "iconStart"?: IconName; /** * Specifies the type of the icon in the header inherited from the `calcite-accordion`. */ @@ -8043,7 +8045,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: string; + "icon"?: IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8258,7 +8260,7 @@ declare namespace LocalJSX { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon"?: string | boolean; + "icon"?: IconName | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8381,7 +8383,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: string; + "iconEnd"?: IconName; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8389,7 +8391,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: string; + "iconStart"?: IconName; /** * When `true`, a busy indicator is displayed. */ @@ -8441,7 +8443,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: string; + "iconEnd"?: IconName; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8449,7 +8451,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: string; + "iconStart"?: IconName; /** * Use this property to override individual strings used by the component. */ @@ -8511,7 +8513,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: string; + "iconEnd"?: IconName; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8519,7 +8521,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: string; + "iconStart"?: IconName; /** * Specifies the kind of the component, which will apply to the border and background if applicable. */ @@ -8808,7 +8810,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: string; + "icon"?: IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -9125,7 +9127,7 @@ declare namespace LocalJSX { /** * Specifies the placeholder icon for the input. */ - "placeholderIcon"?: string; + "placeholderIcon"?: IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -9165,7 +9167,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: string | boolean; + "validationIcon"?: IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -9209,7 +9211,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: string; + "icon"?: IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -9585,7 +9587,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: string; + "iconEnd"?: IconName; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -9593,7 +9595,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: string; + "iconStart"?: IconName; /** * Accessible name for the component. */ @@ -9639,7 +9641,7 @@ declare namespace LocalJSX { * Specifies an icon to display. * @default "plus" */ - "icon"?: string; + "icon"?: IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -9877,7 +9879,7 @@ declare namespace LocalJSX { * Displays a specific icon. * @see [Icons](https://esri.github.io/calcite-ui-icons) */ - "icon"?: string; + "icon"?: IconName; /** * Specifies the size of the component. */ @@ -9981,7 +9983,7 @@ declare namespace LocalJSX { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon"?: string | boolean; + "icon"?: IconName | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -10121,7 +10123,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: string | boolean; + "validationIcon"?: IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -10255,7 +10257,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: string | boolean; + "validationIcon"?: IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -10279,7 +10281,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: boolean | string; + "icon"?: IconName | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -10335,7 +10337,7 @@ declare namespace LocalJSX { * Specifies an icon to display. * @futureBreaking Remove boolean type as it is not supported. */ - "icon"?: string | boolean; + "icon"?: IconName | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -10452,7 +10454,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: string | boolean; + "validationIcon"?: IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -10506,7 +10508,7 @@ declare namespace LocalJSX { * Specifies an icon to display. * @futureBreaking Remove boolean type as it is not supported. */ - "icon"?: string | boolean; + "icon"?: IconName | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -10598,7 +10600,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: string | boolean; + "validationIcon"?: IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -10709,7 +10711,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: string | boolean; + "validationIcon"?: IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -10816,7 +10818,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: string | boolean; + "validationIcon"?: IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -10870,7 +10872,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: string; + "iconEnd"?: IconName; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -10878,7 +10880,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: string; + "iconStart"?: IconName; /** * Specifies the relationship to the linked document defined in `href`. */ @@ -11194,7 +11196,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: string; + "iconEnd"?: IconName; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -11202,7 +11204,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: string; + "iconStart"?: IconName; "isTopLevelItem"?: boolean; /** * Accessible name for the component. @@ -11436,7 +11438,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: string; + "icon"?: IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -11498,7 +11500,7 @@ declare namespace LocalJSX { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon"?: string | boolean; + "icon"?: IconName | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -12048,7 +12050,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: string | boolean; + "validationIcon"?: IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -12167,7 +12169,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: string | boolean; + "validationIcon"?: IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -12199,7 +12201,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: string; + "iconEnd"?: IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -12207,7 +12209,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: string; + "iconStart"?: IconName; /** * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`. */ @@ -12266,7 +12268,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: string | boolean; + "validationIcon"?: IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -12640,7 +12642,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the primary button. */ - "primaryIconEnd"?: string; + "primaryIconEnd"?: IconName; /** * Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -12648,7 +12650,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the primary button. */ - "primaryIconStart"?: string; + "primaryIconStart"?: IconName; /** * Accessible name for the primary button. */ @@ -12888,7 +12890,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: string; + "iconEnd"?: IconName; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -12896,7 +12898,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: string; + "iconStart"?: IconName; "layout"?: TabLayout; /** * Use this property to override individual strings used by the component. @@ -13249,7 +13251,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: string | boolean; + "validationIcon"?: IconName | boolean; /** * Specifies the validation message to display under the component. */ @@ -13304,7 +13306,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: string; + "icon"?: IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -13411,7 +13413,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: string; + "icon"?: IconName; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -13653,7 +13655,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: string; + "iconStart"?: IconName; /** * In ancestor selection mode, show as indeterminate when only some children are selected. */ diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx index 973e9374f3a..c8e99f9512b 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx @@ -30,6 +30,7 @@ import { setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable"; +import { IconName } from "../icon/interfaces"; import { SLOTS, CSS, IDS } from "./resources"; import { RequestedItem } from "./interfaces"; @@ -60,10 +61,10 @@ export class AccordionItem implements ConditionalSlotComponent, LoadableComponen @Prop() description: string; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: string; + @Prop({ reflect: true }) iconStart: IconName; /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: string; + @Prop({ reflect: true }) iconEnd: IconName; /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl: FlipContext; diff --git a/packages/calcite-components/src/components/action-group/resources.ts b/packages/calcite-components/src/components/action-group/resources.ts index c43144a4821..7d8be4ba27e 100644 --- a/packages/calcite-components/src/components/action-group/resources.ts +++ b/packages/calcite-components/src/components/action-group/resources.ts @@ -5,7 +5,7 @@ export const SLOTS = { export const ICONS = { menu: "ellipsis", -}; +} as const; export const CSS = { container: "container", diff --git a/packages/calcite-components/src/components/action-menu/resources.ts b/packages/calcite-components/src/components/action-menu/resources.ts index d10c0e03549..38223214d32 100644 --- a/packages/calcite-components/src/components/action-menu/resources.ts +++ b/packages/calcite-components/src/components/action-menu/resources.ts @@ -10,6 +10,6 @@ export const SLOTS = { export const ICONS = { menu: "ellipsis", -}; +} as const; export const activeAttr = "data-active"; diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx index 64e3169ffcd..59acf41142a 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/packages/calcite-components/src/components/action/action.tsx @@ -37,6 +37,7 @@ import { updateMessages, } from "../../utils/t9n"; import { Alignment, Appearance, Scale } from "../interfaces"; +import { IconName } from "../icon/interfaces"; import { ActionMessages } from "./assets/action/t9n"; import { CSS, SLOTS } from "./resources"; @@ -83,7 +84,7 @@ export class Action @Prop({ reflect: true }) disabled = false; /** Specifies an icon to display. */ - @Prop() icon: string; + @Prop() icon: IconName; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index 366fd9b6a81..d70a9677195 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -42,6 +42,7 @@ import { } from "../../utils/t9n"; import { Kind, Scale } from "../interfaces"; import { KindIcons } from "../resources"; +import { IconName } from "../icon/interfaces"; import { AlertMessages } from "./assets/alert/t9n"; import { AlertDuration, Sync, Unregister } from "./interfaces"; import { CSS, DURATIONS, SLOTS } from "./resources"; @@ -102,7 +103,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen * When `true`, shows a default recommended icon. Alternatively, * pass a Calcite UI Icon name to display a specific icon. */ - @Prop({ reflect: true }) icon: string | boolean; + @Prop({ reflect: true }) icon: IconName | boolean; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; @@ -308,7 +309,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen ); } - private renderIcon(icon: string): VNode { + private renderIcon(icon: IconName): VNode { return (
diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx index 82f42b74585..fe1a3842b85 100644 --- a/packages/calcite-components/src/components/block-section/block-section.tsx +++ b/packages/calcite-components/src/components/block-section/block-section.tsx @@ -28,6 +28,7 @@ import { setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable"; +import { IconName } from "../icon/interfaces"; import { BlockSectionMessages } from "./assets/block-section/t9n"; import { BlockSectionToggleDisplay } from "./interfaces"; import { CSS, ICONS, IDS } from "./resources"; @@ -49,13 +50,13 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC // -------------------------------------------------------------------------- /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: string; + @Prop({ reflect: true }) iconEnd: IconName; /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: string; + @Prop({ reflect: true }) iconStart: IconName; /** * When `true`, expands the component and its contents. diff --git a/packages/calcite-components/src/components/block-section/resources.ts b/packages/calcite-components/src/components/block-section/resources.ts index 9efb94b3684..08eee3e4a6c 100644 --- a/packages/calcite-components/src/components/block-section/resources.ts +++ b/packages/calcite-components/src/components/block-section/resources.ts @@ -26,4 +26,4 @@ export const ICONS = { menuClosed: "chevron-down", valid: "check-circle", invalid: "exclamation-mark-triangle", -}; +} as const; diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx index 7c5bd1abe53..c06303aaa8e 100644 --- a/packages/calcite-components/src/components/block/block.tsx +++ b/packages/calcite-components/src/components/block/block.tsx @@ -48,6 +48,7 @@ import { import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent"; import { OverlayPositioning } from "../../utils/floating-ui"; import { FlipContext } from "../interfaces"; +import { IconName } from "../icon/interfaces"; import { CSS, ICONS, IDS, SLOTS } from "./resources"; import { BlockMessages } from "./assets/block/t9n"; @@ -106,13 +107,13 @@ export class Block @Prop({ reflect: true }) headingLevel: HeadingLevel; /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: string; + @Prop({ reflect: true }) iconEnd: IconName; /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: string; + @Prop({ reflect: true }) iconStart: IconName; /** * When `true`, a busy indicator is displayed. diff --git a/packages/calcite-components/src/components/block/resources.ts b/packages/calcite-components/src/components/block/resources.ts index 758e209afd5..aced6eb14ae 100644 --- a/packages/calcite-components/src/components/block/resources.ts +++ b/packages/calcite-components/src/components/block/resources.ts @@ -41,4 +41,4 @@ export const ICONS = { closed: "chevron-down", valid: "check-circle", invalid: "exclamation-mark-triangle", -}; +} as const; diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx index 5eb13e520d0..7c433f30177 100644 --- a/packages/calcite-components/src/components/button/button.tsx +++ b/packages/calcite-components/src/components/button/button.tsx @@ -37,6 +37,7 @@ import { } from "../../utils/t9n"; import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces"; import { toAriaBoolean } from "../../utils/dom"; +import { IconName } from "../icon/interfaces"; import { ButtonMessages } from "./assets/button/t9n"; import { ButtonAlignment } from "./interfaces"; import { CSS } from "./resources"; @@ -117,13 +118,13 @@ export class Button @Prop({ reflect: true }) href: string; /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: string; + @Prop({ reflect: true }) iconEnd: IconName; /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: string; + @Prop({ reflect: true }) iconStart: IconName; /** * When `true`, a busy indicator is displayed and interaction is disabled. diff --git a/packages/calcite-components/src/components/card/card.tsx b/packages/calcite-components/src/components/card/card.tsx index 265ec7b7b86..f19ba3a9348 100644 --- a/packages/calcite-components/src/components/card/card.tsx +++ b/packages/calcite-components/src/components/card/card.tsx @@ -35,6 +35,7 @@ import { updateHostInteraction, } from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; +import { IconName } from "../icon/interfaces"; import { CSS, ICONS, SLOTS } from "./resources"; import { CardMessages } from "./assets/card/t9n"; @@ -276,7 +277,7 @@ export class Card } private renderSelectionIcon(): VNode { - const icon = + const icon: IconName = this.selectionMode === "multiple" && this.selected ? ICONS.selected : this.selectionMode === "multiple" diff --git a/packages/calcite-components/src/components/card/resources.ts b/packages/calcite-components/src/components/card/resources.ts index 9f36ac2a531..ca463b37216 100644 --- a/packages/calcite-components/src/components/card/resources.ts +++ b/packages/calcite-components/src/components/card/resources.ts @@ -28,4 +28,4 @@ export const ICONS = { unselected: "square", selectedSingle: "circle-f", unselectedSingle: "circle", -}; +} as const; diff --git a/packages/calcite-components/src/components/carousel/resources.ts b/packages/calcite-components/src/components/carousel/resources.ts index 7f139137438..088997a1a50 100644 --- a/packages/calcite-components/src/components/carousel/resources.ts +++ b/packages/calcite-components/src/components/carousel/resources.ts @@ -25,4 +25,4 @@ export const ICONS = { active: "bullet-point-large", pause: "pause-f", play: "play-f", -}; +} as const; diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx index fdd0326f811..f85448c4618 100644 --- a/packages/calcite-components/src/components/chip/chip.tsx +++ b/packages/calcite-components/src/components/chip/chip.tsx @@ -38,6 +38,7 @@ import { import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { isActivationKey } from "../../utils/key"; import { getIconScale } from "../../utils/component"; +import { IconName } from "../icon/interfaces"; import { ChipMessages } from "./assets/chip/t9n"; import { CSS, SLOTS, ICONS } from "./resources"; @@ -73,7 +74,7 @@ export class Chip @Prop({ reflect: true }) closable = false; /** Specifies an icon to display. */ - @Prop({ reflect: true }) icon: string; + @Prop({ reflect: true }) icon: IconName; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; diff --git a/packages/calcite-components/src/components/chip/resources.ts b/packages/calcite-components/src/components/chip/resources.ts index 7f9bacb67fd..88e23590fcc 100644 --- a/packages/calcite-components/src/components/chip/resources.ts +++ b/packages/calcite-components/src/components/chip/resources.ts @@ -24,4 +24,4 @@ export const ICONS = { unchecked: "circle", checkedSingle: "circle-f", checked: "check-circle-f", -}; +} as const; diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx index 32a23eb9cf8..f65d4d4fb19 100644 --- a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx +++ b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx @@ -27,6 +27,7 @@ import { ComboboxChildElement } from "../combobox/interfaces"; import { getAncestors, getDepth, isSingleLike } from "../combobox/utils"; import { Scale, SelectionMode } from "../interfaces"; import { getIconScale } from "../../utils/component"; +import { IconName } from "../icon/interfaces"; import { CSS } from "./resources"; /** @@ -62,7 +63,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon @Prop({ reflect: true }) guid = guid(); /** Specifies an icon to display. */ - @Prop({ reflect: true }) icon: string; + @Prop({ reflect: true }) icon: IconName; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; @@ -182,7 +183,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon // // -------------------------------------------------------------------------- - renderIcon(iconPath: string): VNode { + renderIcon(iconPath: IconName): VNode { return this.icon ? ( = T extends `${infer Base}${"16" | "24" | "32"}F` + ? `${Base}F` + : T extends `${infer Base}F` + ? `${Base}F` + : T extends `${infer Base}${"16" | "24" | "32"}` + ? Base + : never; + +type CamelCaseIcons = ExtractBaseIcon; +type KebabCaseIcons = KebabCase; + +export type IconName = KebabCaseIcons | CamelCaseIcons; diff --git a/packages/calcite-components/src/components/icon/utils.ts b/packages/calcite-components/src/components/icon/utils.ts index ac308690bbe..0602f44e0f7 100644 --- a/packages/calcite-components/src/components/icon/utils.ts +++ b/packages/calcite-components/src/components/icon/utils.ts @@ -1,9 +1,10 @@ import { CalciteIconPath } from "@esri/calcite-ui-icons"; import { getAssetPath } from "@stencil/core"; import { Scale } from "../interfaces"; +import { IconName } from "./interfaces"; export interface FetchIconProps { - icon: string; + icon: IconName; scale: Scale; } diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index 65541a7d149..f45fc2e3c82 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -88,6 +88,7 @@ import { guid } from "../../utils/guid"; import { getIconScale } from "../../utils/component"; import { Status } from "../interfaces"; import { Validation } from "../functional/Validation"; +import { IconName } from "../icon/interfaces"; import { syncHiddenFormInput } from "../input/common/input"; import { normalizeToCurrentCentury, isTwoDigitYear } from "./utils"; import { InputDatePickerMessages } from "./assets/input-date-picker/t9n"; @@ -278,7 +279,7 @@ export class InputDatePicker @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: string | boolean; + @Prop({ reflect: true }) validationIcon: IconName | boolean; /** * The current validation state of the component. 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 0fb1ff6555f..8719748bc7f 100644 --- a/packages/calcite-components/src/components/input-message/input-message.tsx +++ b/packages/calcite-components/src/components/input-message/input-message.tsx @@ -1,6 +1,7 @@ import { Component, Element, h, Host, Prop, VNode, Watch } from "@stencil/core"; import { setRequestedIcon } from "../../utils/dom"; import { Scale, Status } from "../interfaces"; +import { IconName } from "../icon/interfaces"; import { StatusIconDefaults } from "./interfaces"; /** @@ -19,7 +20,7 @@ export class InputMessage { //-------------------------------------------------------------------------- /** Specifies an icon to display. */ - @Prop({ reflect: true }) icon: boolean | string; + @Prop({ reflect: true }) icon: IconName | boolean; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; @@ -65,7 +66,7 @@ export class InputMessage { @Element() el: HTMLCalciteInputMessageElement; /** the computed icon to render */ - private requestedIcon?: string; + private requestedIcon?: IconName; //-------------------------------------------------------------------------- // @@ -73,7 +74,7 @@ export class InputMessage { // //-------------------------------------------------------------------------- - private renderIcon(iconName: string): VNode { + private renderIcon(iconName: IconName): VNode { if (iconName) { return ( this.setDisabledAction()); diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index 9e4ef66a35b..023442b8fdc 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -80,6 +80,7 @@ import { decimalPlaces } from "../../utils/math"; import { getIconScale } from "../../utils/component"; import { Validation } from "../functional/Validation"; import { focusFirstTabbable } from "../../utils/dom"; +import { IconName } from "../icon/interfaces"; import { syncHiddenFormInput } from "../input/common/input"; import { CSS } from "./resources"; import { InputTimePickerMessages } from "./assets/input-time-picker/t9n"; @@ -269,7 +270,7 @@ export class InputTimePicker @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: string | boolean; + @Prop({ reflect: true }) validationIcon: IconName | boolean; /** * The current validation state of the component. diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx index e3e54037ad3..bc742585e5f 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx @@ -46,6 +46,7 @@ import { HiddenFormInputSlot, MutableValidityState, } from "../../utils/form"; +import { IconName } from "../icon/interfaces"; import { createTimeZoneItems, findTimeZoneItemByProp, @@ -154,7 +155,7 @@ export class InputTimeZone @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: string | boolean; + @Prop({ reflect: true }) validationIcon: IconName | boolean; /** * The current validation state of the component. diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx index 0064313186f..0224b9c60b1 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/packages/calcite-components/src/components/input/input.tsx @@ -68,6 +68,7 @@ import { } from "../../utils/t9n"; import { getIconScale } from "../../utils/component"; import { Validation } from "../functional/Validation"; +import { IconName } from "../icon/interfaces"; import { InputMessages } from "./assets/input/t9n"; import { InputPlacement, NumberNudgeDirection, SetValueOrigin } from "./interfaces"; import { CSS, INPUT_TYPE_ICONS, SLOTS } from "./resources"; @@ -164,7 +165,7 @@ export class Input /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - @Prop({ reflect: true }) icon: string | boolean; + @Prop({ reflect: true }) icon: IconName | boolean; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; @@ -241,7 +242,7 @@ export class Input @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: string | boolean; + @Prop({ reflect: true }) validationIcon: IconName | boolean; /** * The current validation state of the component. @@ -479,7 +480,7 @@ export class Input private previousValueOrigin: SetValueOrigin = "initial"; /** the computed icon to render */ - private requestedIcon?: string; + private requestedIcon?: IconName; private nudgeNumberValueIntervalId: number; diff --git a/packages/calcite-components/src/components/input/resources.ts b/packages/calcite-components/src/components/input/resources.ts index 72206aab7b2..f278c4d0da7 100644 --- a/packages/calcite-components/src/components/input/resources.ts +++ b/packages/calcite-components/src/components/input/resources.ts @@ -22,7 +22,7 @@ export const INPUT_TYPE_ICONS = { date: "calendar", time: "clock", search: "search", -}; +} as const; export const SLOTS = { action: "action", diff --git a/packages/calcite-components/src/components/link/link.tsx b/packages/calcite-components/src/components/link/link.tsx index 0a78c436a14..f83c0c7ba8f 100644 --- a/packages/calcite-components/src/components/link/link.tsx +++ b/packages/calcite-components/src/components/link/link.tsx @@ -15,6 +15,7 @@ import { } from "../../utils/loadable"; import { CSS_UTILITY } from "../../utils/resources"; import { FlipContext } from "../interfaces"; +import { IconName } from "../icon/interfaces"; /** Any attributes placed on component will propagate to the rendered child */ /** Passing a 'href' will render an anchor link, instead of a span. Role will be set to link, or link, depending on this. */ @@ -47,13 +48,13 @@ export class Link implements InteractiveComponent, LoadableComponent { @Prop({ reflect: true }) href: string; /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: string; + @Prop({ reflect: true }) iconEnd: IconName; /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: string; + @Prop({ reflect: true }) iconStart: IconName; /** Specifies the relationship to the linked document defined in `href`. */ @Prop() rel: string; diff --git a/packages/calcite-components/src/components/list-item/resources.ts b/packages/calcite-components/src/components/list-item/resources.ts index 00688d07e17..64609366ca1 100644 --- a/packages/calcite-components/src/components/list-item/resources.ts +++ b/packages/calcite-components/src/components/list-item/resources.ts @@ -49,6 +49,6 @@ export const ICONS = { open: "chevron-down", blank: "blank", close: "x", -}; +} as const; export const activeCellTestAttribute = "data-test-active"; diff --git a/packages/calcite-components/src/components/menu-item/menu-item.tsx b/packages/calcite-components/src/components/menu-item/menu-item.tsx index 73744b0f7dd..f54fdb40829 100644 --- a/packages/calcite-components/src/components/menu-item/menu-item.tsx +++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx @@ -30,6 +30,7 @@ import { updateMessages, } from "../../utils/t9n"; import { LocalizedComponent, connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { IconName } from "../icon/interfaces"; import { CSS } from "./resources"; import { MenuItemCustomEvent } from "./interfaces"; import { MenuItemMessages } from "./assets/menu-item/t9n"; @@ -62,13 +63,13 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz @Prop() href: string; /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: string; + @Prop({ reflect: true }) iconEnd: IconName; /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: string; + @Prop({ reflect: true }) iconStart: IconName; /** * @internal diff --git a/packages/calcite-components/src/components/modal/resources.ts b/packages/calcite-components/src/components/modal/resources.ts index 0bac8afae13..aa5f9954dfe 100644 --- a/packages/calcite-components/src/components/modal/resources.ts +++ b/packages/calcite-components/src/components/modal/resources.ts @@ -33,7 +33,7 @@ export const DURATIONS = { export const ICONS = { close: "x", -}; +} as const; export const SLOTS = { content: "content", diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx index 0a817879832..b25155eb643 100644 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx @@ -6,6 +6,7 @@ import { setUpLoadableComponent, } from "../../utils/loadable"; import { Heading, HeadingLevel } from "../functional/Heading"; +import { IconName } from "../icon/interfaces"; import { CSS } from "./resources"; @Component({ @@ -29,7 +30,7 @@ export class CalciteNavigationLogo implements LoadableComponent { @Prop({ reflect: true }) href: string; /** Specifies an icon to display. */ - @Prop({ reflect: true }) icon: string; + @Prop({ reflect: true }) icon: IconName; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; diff --git a/packages/calcite-components/src/components/navigation/resources.ts b/packages/calcite-components/src/components/navigation/resources.ts index cefa4e288a9..8ef4f5c9d10 100644 --- a/packages/calcite-components/src/components/navigation/resources.ts +++ b/packages/calcite-components/src/components/navigation/resources.ts @@ -22,4 +22,4 @@ export const SLOTS = { export const ICONS = { hamburger: "hamburger", -}; +} as const; diff --git a/packages/calcite-components/src/components/notice/notice.tsx b/packages/calcite-components/src/components/notice/notice.tsx index dd16d5e07b8..6e56aa3277e 100644 --- a/packages/calcite-components/src/components/notice/notice.tsx +++ b/packages/calcite-components/src/components/notice/notice.tsx @@ -34,6 +34,7 @@ import { Kind, Scale, Width } from "../interfaces"; import { KindIcons } from "../resources"; import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent"; import { getIconScale } from "../../utils/component"; +import { IconName } from "../icon/interfaces"; import { NoticeMessages } from "./assets/notice/t9n"; import { CSS, SLOTS } from "./resources"; @@ -91,7 +92,7 @@ export class Notice /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - @Prop({ reflect: true }) icon: string | boolean; + @Prop({ reflect: true }) icon: IconName | boolean; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; @@ -281,7 +282,7 @@ export class Notice private closeButton?: HTMLButtonElement; /** The computed icon to render. */ - private requestedIcon?: string; + private requestedIcon?: IconName; @State() effectiveLocale: string; diff --git a/packages/calcite-components/src/components/pagination/resources.ts b/packages/calcite-components/src/components/pagination/resources.ts index 3ba74cdb169..50561c421fd 100644 --- a/packages/calcite-components/src/components/pagination/resources.ts +++ b/packages/calcite-components/src/components/pagination/resources.ts @@ -13,4 +13,4 @@ export const ICONS = { previous: "chevron-left", first: "chevron-start", last: "chevron-end", -}; +} as const; diff --git a/packages/calcite-components/src/components/panel/resources.ts b/packages/calcite-components/src/components/panel/resources.ts index fed52d703ef..b76560c9571 100644 --- a/packages/calcite-components/src/components/panel/resources.ts +++ b/packages/calcite-components/src/components/panel/resources.ts @@ -26,7 +26,7 @@ export const ICONS = { backRight: "chevron-right", expand: "chevron-down", collapse: "chevron-up", -}; +} as const; export const SLOTS = { actionBar: "action-bar", diff --git a/packages/calcite-components/src/components/pick-list-item/resources.ts b/packages/calcite-components/src/components/pick-list-item/resources.ts index b7f207d35e7..6ae6b6e491a 100644 --- a/packages/calcite-components/src/components/pick-list-item/resources.ts +++ b/packages/calcite-components/src/components/pick-list-item/resources.ts @@ -17,7 +17,7 @@ export const CSS = { export const ICONS = { checked: "check", remove: "x", -}; +} as const; export const SLOTS = { actionsEnd: "actions-end", diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx index 1738ecaaee4..047907fe944 100644 --- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx +++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx @@ -21,6 +21,7 @@ import { setUpLoadableComponent, } from "../../utils/loadable"; import { Validation } from "../functional/Validation"; +import { IconName } from "../icon/interfaces"; import { CSS } from "./resources"; /** @@ -89,7 +90,7 @@ export class RadioButtonGroup implements LoadableComponent { @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: string | boolean; + @Prop({ reflect: true }) validationIcon: IconName | boolean; @Watch("scale") onScaleChange(): void { diff --git a/packages/calcite-components/src/components/resources.ts b/packages/calcite-components/src/components/resources.ts index b64461ecf90..87d8d1dd310 100644 --- a/packages/calcite-components/src/components/resources.ts +++ b/packages/calcite-components/src/components/resources.ts @@ -4,4 +4,4 @@ export const KindIcons = { info: "information", success: "checkCircle", warning: "exclamationMarkTriangle", -}; +} as const; diff --git a/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx b/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx index 1e8f3372b9a..0dc3e22b8b2 100644 --- a/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx +++ b/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx @@ -12,6 +12,7 @@ import { } from "@stencil/core"; import { slotChangeHasContent, toAriaBoolean } from "../../utils/dom"; import { Appearance, Layout, Scale } from "../interfaces"; +import { IconName } from "../icon/interfaces"; import { CSS, SLOTS } from "./resources"; @Component({ @@ -39,10 +40,10 @@ export class SegmentedControlItem { @Prop({ reflect: true }) iconFlipRtl = false; /** Specifies an icon to display at the start of the component. */ - @Prop({ reflect: true }) iconStart: string; + @Prop({ reflect: true }) iconStart: IconName; /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: string; + @Prop({ reflect: true }) iconEnd: IconName; /** * The component's value. @@ -77,7 +78,7 @@ export class SegmentedControlItem { // //-------------------------------------------------------------------------- - private renderIcon(icon: string, solo: boolean = false): VNode { + private renderIcon(icon: IconName, solo: boolean = false): VNode { return icon ? ( { describe("setRequestedIcon()", () => { it("returns the custom icon name if custom value is passed", () => + // @ts-expect-error -- unsupported icon names are used to make the test more readable expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, "myCustomValue", "exampleValue")).toBe( "myCustomValue", )); it("returns the pre-defined icon name if custom value is not passed", () => + // @ts-expect-error -- unsupported icon names are used to make the test more readable expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, "", "exampleValue")).toBe( "exampleReturnedValue", )); diff --git a/packages/calcite-components/src/utils/dom.ts b/packages/calcite-components/src/utils/dom.ts index 72e3e4212bd..e622ab4194c 100644 --- a/packages/calcite-components/src/utils/dom.ts +++ b/packages/calcite-components/src/utils/dom.ts @@ -1,4 +1,5 @@ import { tabbable } from "tabbable"; +import { IconName } from "../components/icon/interfaces"; import { guid } from "./guid"; import { CSS_UTILITY } from "./resources"; @@ -427,10 +428,10 @@ export function filterDirectChildren(el: Element, selector: s * @returns {string|undefined} The resulting icon value. */ export function setRequestedIcon( - iconObject: Record, - iconValue: string | boolean, + iconObject: Record, + iconValue: IconName | boolean | "", matchedValue: string, -): string | undefined { +): IconName | undefined { if (typeof iconValue === "string" && iconValue !== "") { return iconValue; } else if (iconValue === "") { diff --git a/packages/calcite-components/src/utils/form.tsx b/packages/calcite-components/src/utils/form.tsx index 2d2f87e3b4a..8a39e706a91 100644 --- a/packages/calcite-components/src/utils/form.tsx +++ b/packages/calcite-components/src/utils/form.tsx @@ -1,6 +1,6 @@ import { FunctionalComponent, h } from "@stencil/core"; import { Writable } from "type-fest"; -import { Status } from "../components"; +import { IconName, Status } from "../components"; import { closestElementCrossShadowBoundary, queryElementRoots } from "./dom"; /** @@ -211,7 +211,7 @@ function hasRegisteredFormComponentParent( export interface ValidationProps { status: Status; message: string; - icon: string | boolean; + icon: IconName | boolean | ""; } function displayValidationMessage(