From 255fcea5e026da295adcccd3a892987b04f5996e Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 30 Jul 2024 16:50:51 -0700 Subject: [PATCH 1/2] fix: widen icon type to allow string --- .../calcite-components/src/components.d.ts | 240 +++++++++--------- .../accordion-item/accordion-item.tsx | 6 +- .../src/components/action/action.tsx | 4 +- .../src/components/alert/alert.tsx | 6 +- .../block-section/block-section.tsx | 6 +- .../src/components/block/block.tsx | 6 +- .../src/components/button/button.tsx | 6 +- .../src/components/card/card.tsx | 4 +- .../src/components/chip/chip.tsx | 4 +- .../combobox-item/combobox-item.tsx | 10 +- .../src/components/combobox/combobox.tsx | 6 +- .../dropdown-item/dropdown-item.tsx | 6 +- .../src/components/fab/fab.tsx | 4 +- .../src/components/functional/Validation.tsx | 4 +- .../src/components/icon/icon.tsx | 4 +- .../src/components/icon/interfaces.ts | 1 + .../src/components/icon/utils.ts | 4 +- .../input-date-picker/input-date-picker.tsx | 4 +- .../input-message/input-message.tsx | 8 +- .../components/input-number/input-number.tsx | 8 +- .../src/components/input-text/input-text.tsx | 8 +- .../input-time-picker/input-time-picker.tsx | 4 +- .../input-time-zone/input-time-zone.tsx | 4 +- .../src/components/input/input.tsx | 8 +- .../src/components/link/link.tsx | 6 +- .../src/components/menu-item/menu-item.tsx | 6 +- .../navigation-logo/navigation-logo.tsx | 4 +- .../src/components/notice/notice.tsx | 6 +- .../radio-button-group/radio-button-group.tsx | 4 +- .../segmented-control-item.tsx | 8 +- .../segmented-control/segmented-control.tsx | 4 +- .../src/components/select/select.tsx | 4 +- .../components/split-button/split-button.tsx | 6 +- .../components/stepper-item/stepper-item.tsx | 4 +- .../src/components/tab-title/tab-title.tsx | 6 +- .../src/components/text-area/text-area.tsx | 4 +- .../components/tile-select/tile-select.tsx | 4 +- .../src/components/tile/tile.tsx | 4 +- .../src/components/tree-item/tree-item.tsx | 4 +- packages/calcite-components/src/utils/dom.ts | 8 +- .../calcite-components/src/utils/form.tsx | 4 +- 41 files changed, 226 insertions(+), 225 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 346aed4f24b..411857daccc 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -7,7 +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 { IconNameOrString } 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"; @@ -103,7 +103,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 { IconNameOrString } 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"; @@ -243,7 +243,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -255,7 +255,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; /** * Specifies the type of the icon in the header inherited from the `calcite-accordion`. */ @@ -294,7 +294,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": IconName; + "icon": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -525,7 +525,7 @@ export namespace Components { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon": IconName | boolean; + "icon": IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -624,7 +624,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -632,7 +632,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; /** * When `true`, a busy indicator is displayed. */ @@ -667,7 +667,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -675,7 +675,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; /** * Use this property to override individual strings used by the component. */ @@ -737,7 +737,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -745,7 +745,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; /** * Specifies the kind of the component, which will apply to the border and background if applicable. */ @@ -992,7 +992,7 @@ export namespace Components { "status": Status; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -1021,7 +1021,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": IconName; + "icon": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -1299,7 +1299,7 @@ export namespace Components { /** * Specifies the placeholder icon for the input. */ - "placeholderIcon": IconName; + "placeholderIcon": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -1349,14 +1349,14 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -1397,7 +1397,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": IconName; + "icon": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -1830,7 +1830,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -1838,7 +1838,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; /** * Accessible name for the component. */ @@ -1881,7 +1881,7 @@ export namespace Components { * Specifies an icon to display. * @default "plus" */ - "icon": IconName; + "icon": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -2133,7 +2133,7 @@ export namespace Components { * Displays a specific icon. * @see [Icons](https://esri.github.io/calcite-ui-icons) */ - "icon": IconName; + "icon": IconNameOrString; /** * Specifies the size of the component. */ @@ -2232,7 +2232,7 @@ export namespace Components { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon": IconName | boolean; + "icon": IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -2370,14 +2370,14 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -2494,14 +2494,14 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -2518,7 +2518,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": IconName | boolean; + "icon": IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -2574,7 +2574,7 @@ export namespace Components { * Specifies an icon to display. * @futureBreaking Remove boolean type as it is not supported. */ - "icon": IconName | boolean; + "icon": IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -2689,14 +2689,14 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -2743,7 +2743,7 @@ export namespace Components { * Specifies an icon to display. * @futureBreaking Remove boolean type as it is not supported. */ - "icon": IconName | boolean; + "icon": IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -2830,14 +2830,14 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -2930,14 +2930,14 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -3018,14 +3018,14 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -3069,7 +3069,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -3077,7 +3077,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; /** * Specifies the relationship to the linked document defined in `href`. */ @@ -3358,7 +3358,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -3366,7 +3366,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; "isTopLevelItem": boolean; /** * Accessible name for the component. @@ -3597,7 +3597,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": IconName; + "icon": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -3667,7 +3667,7 @@ export namespace Components { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon": IconName | boolean; + "icon": IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -4195,7 +4195,7 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -4314,14 +4314,14 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -4346,7 +4346,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -4354,7 +4354,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; /** * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`. */ @@ -4409,14 +4409,14 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -4757,7 +4757,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the primary button. */ - "primaryIconEnd": IconName; + "primaryIconEnd": IconNameOrString; /** * Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -4765,7 +4765,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the primary button. */ - "primaryIconStart": IconName; + "primaryIconStart": IconNameOrString; /** * Accessible name for the primary button. */ @@ -5025,7 +5025,7 @@ export namespace Components { /** * Specifies an icon to display at the end of the component. */ - "iconEnd": IconName; + "iconEnd": IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -5033,7 +5033,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; "layout": TabLayout; /** * Use this property to override individual strings used by the component. @@ -5324,7 +5324,7 @@ export namespace Components { "placeholder": string; /** * When `true`, the component's `value` can be read, but cannot be modified. - * @readonly + * @readonly * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) */ "readOnly": boolean; @@ -5361,14 +5361,14 @@ export namespace Components { /** * Specifies the validation icon to display under the component. */ - "validationIcon": IconName | boolean; + "validationIcon": IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -5416,7 +5416,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": IconName; + "icon": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -5518,7 +5518,7 @@ export namespace Components { /** * Specifies an icon to display. */ - "icon": IconName; + "icon": IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -5746,7 +5746,7 @@ export namespace Components { /** * Specifies an icon to display at the start of the component. */ - "iconStart": IconName; + "iconStart": IconNameOrString; /** * In ancestor selection mode, show as indeterminate when only some children are selected. */ @@ -8131,7 +8131,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8143,7 +8143,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; /** * Specifies the type of the icon in the header inherited from the `calcite-accordion`. */ @@ -8180,7 +8180,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: IconName; + "icon"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8399,7 +8399,7 @@ declare namespace LocalJSX { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon"?: IconName | boolean; + "icon"?: IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8518,7 +8518,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8526,7 +8526,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; /** * When `true`, a busy indicator is displayed. */ @@ -8578,7 +8578,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8586,7 +8586,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; /** * Use this property to override individual strings used by the component. */ @@ -8648,7 +8648,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -8656,7 +8656,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; /** * Specifies the kind of the component, which will apply to the border and background if applicable. */ @@ -8916,7 +8916,7 @@ declare namespace LocalJSX { "status"?: Status; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -8945,7 +8945,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: IconName; + "icon"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -9262,7 +9262,7 @@ declare namespace LocalJSX { /** * Specifies the placeholder icon for the input. */ - "placeholderIcon"?: IconName; + "placeholderIcon"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -9302,14 +9302,14 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -9350,7 +9350,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: IconName; + "icon"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -9824,7 +9824,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -9832,7 +9832,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; /** * Accessible name for the component. */ @@ -9878,7 +9878,7 @@ declare namespace LocalJSX { * Specifies an icon to display. * @default "plus" */ - "icon"?: IconName; + "icon"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -10124,7 +10124,7 @@ declare namespace LocalJSX { * Displays a specific icon. * @see [Icons](https://esri.github.io/calcite-ui-icons) */ - "icon"?: IconName; + "icon"?: IconNameOrString; /** * Specifies the size of the component. */ @@ -10228,7 +10228,7 @@ declare namespace LocalJSX { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon"?: IconName | boolean; + "icon"?: IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -10368,14 +10368,14 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -10502,14 +10502,14 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -10526,7 +10526,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: IconName | boolean; + "icon"?: IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -10582,7 +10582,7 @@ declare namespace LocalJSX { * Specifies an icon to display. * @futureBreaking Remove boolean type as it is not supported. */ - "icon"?: IconName | boolean; + "icon"?: IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -10699,14 +10699,14 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -10753,7 +10753,7 @@ declare namespace LocalJSX { * Specifies an icon to display. * @futureBreaking Remove boolean type as it is not supported. */ - "icon"?: IconName | boolean; + "icon"?: IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -10845,14 +10845,14 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -10956,14 +10956,14 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -11063,14 +11063,14 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -11117,7 +11117,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -11125,7 +11125,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; /** * Specifies the relationship to the linked document defined in `href`. */ @@ -11441,7 +11441,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -11449,7 +11449,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; "isTopLevelItem"?: boolean; /** * Accessible name for the component. @@ -11683,7 +11683,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: IconName; + "icon"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -11745,7 +11745,7 @@ declare namespace LocalJSX { /** * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */ - "icon"?: IconName | boolean; + "icon"?: IconNameOrString | boolean; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -12303,7 +12303,7 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ @@ -12422,14 +12422,14 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -12454,7 +12454,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -12462,7 +12462,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; /** * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`. */ @@ -12521,14 +12521,14 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -12895,7 +12895,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the primary button. */ - "primaryIconEnd"?: IconName; + "primaryIconEnd"?: IconNameOrString; /** * Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -12903,7 +12903,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the primary button. */ - "primaryIconStart"?: IconName; + "primaryIconStart"?: IconNameOrString; /** * Accessible name for the primary button. */ @@ -13141,7 +13141,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the end of the component. */ - "iconEnd"?: IconName; + "iconEnd"?: IconNameOrString; /** * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @@ -13149,7 +13149,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; "layout"?: TabLayout; /** * Use this property to override individual strings used by the component. @@ -13473,7 +13473,7 @@ declare namespace LocalJSX { "placeholder"?: string; /** * When `true`, the component's `value` can be read, but cannot be modified. - * @readonly + * @readonly * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) */ "readOnly"?: boolean; @@ -13502,14 +13502,14 @@ declare namespace LocalJSX { /** * Specifies the validation icon to display under the component. */ - "validationIcon"?: IconName | boolean; + "validationIcon"?: IconNameOrString | boolean; /** * Specifies the validation message to display under the component. */ "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -13557,7 +13557,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: IconName; + "icon"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -13664,7 +13664,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display. */ - "icon"?: IconName; + "icon"?: IconNameOrString; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -13906,7 +13906,7 @@ declare namespace LocalJSX { /** * Specifies an icon to display at the start of the component. */ - "iconStart"?: IconName; + "iconStart"?: IconNameOrString; /** * 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 c8e99f9512b..936fcf062ef 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx @@ -30,7 +30,7 @@ import { setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { SLOTS, CSS, IDS } from "./resources"; import { RequestedItem } from "./interfaces"; @@ -61,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: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: IconName; + @Prop({ reflect: true }) iconEnd: IconNameOrString; /** 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/action.tsx b/packages/calcite-components/src/components/action/action.tsx index f68e5515f88..ad16ee39aa6 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/packages/calcite-components/src/components/action/action.tsx @@ -36,7 +36,7 @@ import { updateMessages, } from "../../utils/t9n"; import { Alignment, Appearance, Scale } from "../interfaces"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { isBrowser } from "../../utils/browser"; import { ActionMessages } from "./assets/action/t9n"; import { CSS, SLOTS } from "./resources"; @@ -86,7 +86,7 @@ export class Action @Prop({ reflect: true }) disabled = false; /** Specifies an icon to display. */ - @Prop() icon: IconName; + @Prop() icon: IconNameOrString; /** 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 2ba97cd4a11..f59e346cd4a 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -42,7 +42,7 @@ import { } from "../../utils/t9n"; import { Kind, Scale } from "../interfaces"; import { KindIcons } from "../resources"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { AlertMessages } from "./assets/alert/t9n"; import { AlertDuration, Sync, Unregister } from "./interfaces"; import { CSS, DURATIONS, SLOTS } from "./resources"; @@ -111,7 +111,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: IconName | boolean; + @Prop({ reflect: true }) icon: IconNameOrString | boolean; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; @@ -309,7 +309,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen ); } - private renderIcon(icon: IconName): VNode { + private renderIcon(icon: IconNameOrString): 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 fe1a3842b85..b5ef39a1837 100644 --- a/packages/calcite-components/src/components/block-section/block-section.tsx +++ b/packages/calcite-components/src/components/block-section/block-section.tsx @@ -28,7 +28,7 @@ import { setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { BlockSectionMessages } from "./assets/block-section/t9n"; import { BlockSectionToggleDisplay } from "./interfaces"; import { CSS, ICONS, IDS } from "./resources"; @@ -50,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: IconName; + @Prop({ reflect: true }) iconEnd: IconNameOrString; /** 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: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** * When `true`, expands the component and its contents. diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx index c06303aaa8e..2b72394c144 100644 --- a/packages/calcite-components/src/components/block/block.tsx +++ b/packages/calcite-components/src/components/block/block.tsx @@ -48,7 +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 { IconNameOrString } from "../icon/interfaces"; import { CSS, ICONS, IDS, SLOTS } from "./resources"; import { BlockMessages } from "./assets/block/t9n"; @@ -107,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: IconName; + @Prop({ reflect: true }) iconEnd: IconNameOrString; /** 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: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** * When `true`, a busy indicator is displayed. diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx index d655278282a..c69e1a035ba 100644 --- a/packages/calcite-components/src/components/button/button.tsx +++ b/packages/calcite-components/src/components/button/button.tsx @@ -36,7 +36,7 @@ import { } from "../../utils/t9n"; import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces"; import { toAriaBoolean } from "../../utils/dom"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { isBrowser } from "../../utils/browser"; import { ButtonMessages } from "./assets/button/t9n"; import { ButtonAlignment } from "./interfaces"; @@ -118,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: IconName; + @Prop({ reflect: true }) iconEnd: IconNameOrString; /** 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: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** * 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 f19ba3a9348..da851ee380f 100644 --- a/packages/calcite-components/src/components/card/card.tsx +++ b/packages/calcite-components/src/components/card/card.tsx @@ -35,7 +35,7 @@ import { updateHostInteraction, } from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS, ICONS, SLOTS } from "./resources"; import { CardMessages } from "./assets/card/t9n"; @@ -277,7 +277,7 @@ export class Card } private renderSelectionIcon(): VNode { - const icon: IconName = + const icon: IconNameOrString = this.selectionMode === "multiple" && this.selected ? ICONS.selected : this.selectionMode === "multiple" diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx index 4a6cdaab93b..c3a2523c9c6 100644 --- a/packages/calcite-components/src/components/chip/chip.tsx +++ b/packages/calcite-components/src/components/chip/chip.tsx @@ -37,7 +37,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 { IconNameOrString } from "../icon/interfaces"; import { isBrowser } from "../../utils/browser"; import { ChipMessages } from "./assets/chip/t9n"; import { CSS, SLOTS, ICONS } from "./resources"; @@ -74,7 +74,7 @@ export class Chip @Prop({ reflect: true }) closable = false; /** Specifies an icon to display. */ - @Prop({ reflect: true }) icon: IconName; + @Prop({ reflect: true }) icon: IconNameOrString; /** 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/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx index cf7ddfc459b..7c3c6568c1e 100644 --- a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx +++ b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx @@ -27,7 +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 { IconNameOrString } from "../icon/interfaces"; import { CSS, SLOTS } from "./resources"; /** @@ -76,7 +76,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon @Prop({ reflect: true }) guid = guid(); /** Specifies an icon to display. */ - @Prop({ reflect: true }) icon: IconName; + @Prop({ reflect: true }) icon: IconNameOrString; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; @@ -203,7 +203,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon // // -------------------------------------------------------------------------- - renderIcon(iconPath: IconName): VNode { + renderIcon(iconPath: IconNameOrString): VNode { return this.icon ? ( ; type KebabCaseIcons = KebabCase; export type IconName = KebabCaseIcons | CamelCaseIcons; +export type IconNameOrString = IconName | string; diff --git a/packages/calcite-components/src/components/icon/utils.ts b/packages/calcite-components/src/components/icon/utils.ts index 0602f44e0f7..91d418256cb 100644 --- a/packages/calcite-components/src/components/icon/utils.ts +++ b/packages/calcite-components/src/components/icon/utils.ts @@ -1,10 +1,10 @@ import { CalciteIconPath } from "@esri/calcite-ui-icons"; import { getAssetPath } from "@stencil/core"; import { Scale } from "../interfaces"; -import { IconName } from "./interfaces"; +import { IconNameOrString } from "./interfaces"; export interface FetchIconProps { - icon: IconName; + icon: IconNameOrString; 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 3d52178a33e..5009fcd90a1 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 @@ -87,7 +87,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 { IconNameOrString } from "../icon/interfaces"; import { syncHiddenFormInput } from "../input/common/input"; import { isBrowser } from "../../utils/browser"; import { normalizeToCurrentCentury, isTwoDigitYear } from "./utils"; @@ -279,7 +279,7 @@ export class InputDatePicker @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: IconName | boolean; + @Prop({ reflect: true }) validationIcon: IconNameOrString | 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 8719748bc7f..acce2c1862f 100644 --- a/packages/calcite-components/src/components/input-message/input-message.tsx +++ b/packages/calcite-components/src/components/input-message/input-message.tsx @@ -1,7 +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 { IconNameOrString } from "../icon/interfaces"; import { StatusIconDefaults } from "./interfaces"; /** @@ -20,7 +20,7 @@ export class InputMessage { //-------------------------------------------------------------------------- /** Specifies an icon to display. */ - @Prop({ reflect: true }) icon: IconName | boolean; + @Prop({ reflect: true }) icon: IconNameOrString | boolean; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; @@ -66,7 +66,7 @@ export class InputMessage { @Element() el: HTMLCalciteInputMessageElement; /** the computed icon to render */ - private requestedIcon?: IconName; + private requestedIcon?: IconNameOrString; //-------------------------------------------------------------------------- // @@ -74,7 +74,7 @@ export class InputMessage { // //-------------------------------------------------------------------------- - private renderIcon(iconName: IconName): VNode { + private renderIcon(iconName: IconNameOrString): 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 53a9395df70..374842f1687 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,7 +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 { IconNameOrString } from "../icon/interfaces"; import { syncHiddenFormInput } from "../input/common/input"; import { CSS } from "./resources"; import { InputTimePickerMessages } from "./assets/input-time-picker/t9n"; @@ -270,7 +270,7 @@ export class InputTimePicker @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: IconName | boolean; + @Prop({ reflect: true }) validationIcon: IconNameOrString | 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 bc742585e5f..db0221fe17a 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,7 +46,7 @@ import { HiddenFormInputSlot, MutableValidityState, } from "../../utils/form"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { createTimeZoneItems, findTimeZoneItemByProp, @@ -155,7 +155,7 @@ export class InputTimeZone @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: IconName | boolean; + @Prop({ reflect: true }) validationIcon: IconNameOrString | 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 0224b9c60b1..520945097a1 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/packages/calcite-components/src/components/input/input.tsx @@ -68,7 +68,7 @@ import { } from "../../utils/t9n"; import { getIconScale } from "../../utils/component"; import { Validation } from "../functional/Validation"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { InputMessages } from "./assets/input/t9n"; import { InputPlacement, NumberNudgeDirection, SetValueOrigin } from "./interfaces"; import { CSS, INPUT_TYPE_ICONS, SLOTS } from "./resources"; @@ -165,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: IconName | boolean; + @Prop({ reflect: true }) icon: IconNameOrString | boolean; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; @@ -242,7 +242,7 @@ export class Input @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: IconName | boolean; + @Prop({ reflect: true }) validationIcon: IconNameOrString | boolean; /** * The current validation state of the component. @@ -480,7 +480,7 @@ export class Input private previousValueOrigin: SetValueOrigin = "initial"; /** the computed icon to render */ - private requestedIcon?: IconName; + private requestedIcon?: IconNameOrString; private nudgeNumberValueIntervalId: number; diff --git a/packages/calcite-components/src/components/link/link.tsx b/packages/calcite-components/src/components/link/link.tsx index f83c0c7ba8f..507487b58d1 100644 --- a/packages/calcite-components/src/components/link/link.tsx +++ b/packages/calcite-components/src/components/link/link.tsx @@ -15,7 +15,7 @@ import { } from "../../utils/loadable"; import { CSS_UTILITY } from "../../utils/resources"; import { FlipContext } from "../interfaces"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } 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. */ @@ -48,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: IconName; + @Prop({ reflect: true }) iconEnd: IconNameOrString; /** 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: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** Specifies the relationship to the linked document defined in `href`. */ @Prop() rel: string; 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 f54fdb40829..50aa5f8e046 100644 --- a/packages/calcite-components/src/components/menu-item/menu-item.tsx +++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx @@ -30,7 +30,7 @@ import { updateMessages, } from "../../utils/t9n"; import { LocalizedComponent, connectLocalized, disconnectLocalized } from "../../utils/locale"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS } from "./resources"; import { MenuItemCustomEvent } from "./interfaces"; import { MenuItemMessages } from "./assets/menu-item/t9n"; @@ -63,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: IconName; + @Prop({ reflect: true }) iconEnd: IconNameOrString; /** 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: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** * @internal 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 b25155eb643..9bd4a669e64 100644 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx @@ -6,7 +6,7 @@ import { setUpLoadableComponent, } from "../../utils/loadable"; import { Heading, HeadingLevel } from "../functional/Heading"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS } from "./resources"; @Component({ @@ -30,7 +30,7 @@ export class CalciteNavigationLogo implements LoadableComponent { @Prop({ reflect: true }) href: string; /** Specifies an icon to display. */ - @Prop({ reflect: true }) icon: IconName; + @Prop({ reflect: true }) icon: IconNameOrString; /** 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/notice/notice.tsx b/packages/calcite-components/src/components/notice/notice.tsx index 6e56aa3277e..676c8820d52 100644 --- a/packages/calcite-components/src/components/notice/notice.tsx +++ b/packages/calcite-components/src/components/notice/notice.tsx @@ -34,7 +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 { IconNameOrString } from "../icon/interfaces"; import { NoticeMessages } from "./assets/notice/t9n"; import { CSS, SLOTS } from "./resources"; @@ -92,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: IconName | boolean; + @Prop({ reflect: true }) icon: IconNameOrString | boolean; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; @@ -282,7 +282,7 @@ export class Notice private closeButton?: HTMLButtonElement; /** The computed icon to render. */ - private requestedIcon?: IconName; + private requestedIcon?: IconNameOrString; @State() effectiveLocale: string; 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 047907fe944..28bd75b34ec 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,7 +21,7 @@ import { setUpLoadableComponent, } from "../../utils/loadable"; import { Validation } from "../functional/Validation"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS } from "./resources"; /** @@ -90,7 +90,7 @@ export class RadioButtonGroup implements LoadableComponent { @Prop() validationMessage: string; /** Specifies the validation icon to display under the component. */ - @Prop({ reflect: true }) validationIcon: IconName | boolean; + @Prop({ reflect: true }) validationIcon: IconNameOrString | boolean; @Watch("scale") onScaleChange(): void { 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 0dc3e22b8b2..db07b73dd07 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,7 +12,7 @@ import { } from "@stencil/core"; import { slotChangeHasContent, toAriaBoolean } from "../../utils/dom"; import { Appearance, Layout, Scale } from "../interfaces"; -import { IconName } from "../icon/interfaces"; +import { IconNameOrString } from "../icon/interfaces"; import { CSS, SLOTS } from "./resources"; @Component({ @@ -40,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: IconName; + @Prop({ reflect: true }) iconStart: IconNameOrString; /** Specifies an icon to display at the end of the component. */ - @Prop({ reflect: true }) iconEnd: IconName; + @Prop({ reflect: true }) iconEnd: IconNameOrString; /** * The component's value. @@ -78,7 +78,7 @@ export class SegmentedControlItem { // //-------------------------------------------------------------------------- - private renderIcon(icon: IconName, solo: boolean = false): VNode { + private renderIcon(icon: IconNameOrString, solo: boolean = false): VNode { return icon ? ( (elements: Element[], * @returns {string|undefined} The resulting icon value. */ export function setRequestedIcon( - iconObject: Record, - iconValue: IconName | boolean | "", + iconObject: Record, + iconValue: IconNameOrString | boolean | "", matchedValue: string, -): IconName | undefined { +): IconNameOrString | 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 8a39e706a91..2154f2fb806 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 { IconName, Status } from "../components"; +import { IconNameOrString, Status } from "../components"; import { closestElementCrossShadowBoundary, queryElementRoots } from "./dom"; /** @@ -211,7 +211,7 @@ function hasRegisteredFormComponentParent( export interface ValidationProps { status: Status; message: string; - icon: IconName | boolean | ""; + icon: IconNameOrString | boolean | ""; } function displayValidationMessage( From a59236f33a068c942c0116d6bc0aff72d66a3bac Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 30 Jul 2024 17:22:04 -0700 Subject: [PATCH 2/2] drop ts-expect-errors as wider type no longer causes an error --- packages/calcite-components/src/utils/dom.spec.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/calcite-components/src/utils/dom.spec.ts b/packages/calcite-components/src/utils/dom.spec.ts index 487e95190c1..2cca961be93 100644 --- a/packages/calcite-components/src/utils/dom.spec.ts +++ b/packages/calcite-components/src/utils/dom.spec.ts @@ -293,13 +293,11 @@ describe("dom", () => { 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", ));