fix(types): extend icon prop type to support Component

carbon-design-system · Feb 3, 2025 · e07c74d · e07c74d
1 parent ece9e03
commit e07c74d
Show file tree

Hide file tree

Showing 39 changed files with 264 additions and 226 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -624,7 +624,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render\nAlternatively, use the named slot \"icon\" (e.g., `<Icon slot=\"icon\" size=\"{20}\" />`)",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -2570,7 +2570,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render\nIcon is rendered to the left of the label text",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -5771,7 +5771,7 @@
           "name": "iconMenu",
           "kind": "let",
           "description": "Specify the icon to render for the closed state.\nDefaults to `<Menu size={20} />`",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -5782,7 +5782,7 @@
           "name": "iconClose",
           "kind": "let",
           "description": "Specify the icon to render for the opened state.\nDefaults to `<Close size={20} />`",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -5849,7 +5849,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render when the action panel is closed.\nDefaults to `<Switcher size={20} />`",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -5860,7 +5860,7 @@
           "name": "closeIcon",
           "kind": "let",
           "description": "Specify the icon to render when the action panel is open.\nDefaults to `<Close size={20} />`",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -5996,7 +5996,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -6059,7 +6059,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -7007,7 +7007,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render\n`inline` must be `false`",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -7987,7 +7987,7 @@
           "name": "primaryButtonIcon",
           "kind": "let",
           "description": "Specify the primary button icon",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -8228,7 +8228,7 @@
           "name": "primaryButtonIcon",
           "kind": "let",
           "description": "Specify the primary button icon",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -9000,7 +9000,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -9712,7 +9712,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render.\nDefaults to `<OverflowMenuVertical />`",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -12032,7 +12032,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render.\nDefaults to `<Search />`",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -12974,7 +12974,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -13054,7 +13054,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -15061,7 +15061,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -17297,7 +17297,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render for the tooltip button.\nDefault to `<Information />`",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -17646,7 +17646,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render",
-          "type": "typeof import(\"svelte\").SvelteComponent<any>",
+          "type": "typeof import(\"svelte\").SvelteComponent<any> | import(\"svelte\").Component",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,

diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
@@ -29,7 +29,7 @@
    * Specify the icon to render
    * Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`)
    *
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let icon = undefined;
 

diff --git a/src/ComposedModal/ModalFooter.svelte b/src/ComposedModal/ModalFooter.svelte
@@ -8,7 +8,7 @@
 
   /**
    * Specify the primary button icon
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let primaryButtonIcon = undefined;
 

diff --git a/src/ContextMenu/ContextMenuOption.svelte b/src/ContextMenu/ContextMenuOption.svelte
@@ -14,7 +14,7 @@
   /**
    * Specify the icon to render
    * Icon is rendered to the left of the label text
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let icon = undefined;
 

diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte
@@ -17,7 +17,7 @@
   /**
    * Specify the icon to render
    * `inline` must be `false`
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let icon = undefined;
 

diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
@@ -57,7 +57,7 @@
 
   /**
    * Specify the primary button icon
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let primaryButtonIcon = undefined;
 

diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte
@@ -7,7 +7,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let icon = Close;
 

diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
@@ -33,7 +33,7 @@
   /**
    * Specify the icon to render.
    * Defaults to `<OverflowMenuVertical />`
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let icon = OverflowMenuVertical;
 

diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte
@@ -56,7 +56,7 @@
   /**
    * Specify the icon to render.
    * Defaults to `<Search />`
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let icon = IconSearch;
 

diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
@@ -27,7 +27,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let icon = undefined;
 

diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte
@@ -31,7 +31,7 @@
   /**
    * Specify the icon to render for the tooltip button.
    * Default to `<Information />`
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let icon = Information;
 

diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte
@@ -7,7 +7,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let icon = undefined;
 

diff --git a/src/TreeView/TreeViewNode.svelte b/src/TreeView/TreeViewNode.svelte
@@ -46,7 +46,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let icon = undefined;
 

diff --git a/src/TreeView/TreeViewNodeList.svelte b/src/TreeView/TreeViewNodeList.svelte
@@ -16,7 +16,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let icon = undefined;
 

diff --git a/src/UIShell/HamburgerMenu.svelte b/src/UIShell/HamburgerMenu.svelte
@@ -11,14 +11,14 @@
   /**
    * Specify the icon to render for the closed state.
    * Defaults to `<Menu size={20} />`
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let iconMenu = Menu;
 
   /**
    * Specify the icon to render for the opened state.
    * Defaults to `<Close size={20} />`
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let iconClose = Close;
 

diff --git a/src/UIShell/Header.svelte b/src/UIShell/Header.svelte
@@ -51,14 +51,14 @@
   /**
    * Specify the icon to render for the closed state.
    * Defaults to `<Menu size={20} />`
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let iconMenu = Menu;
 
   /**
    * Specify the icon to render for the opened state.
    * Defaults to `<Close size={20} />`
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let iconClose = Close;
 

diff --git a/src/UIShell/HeaderAction.svelte b/src/UIShell/HeaderAction.svelte
@@ -10,14 +10,14 @@
   /**
    * Specify the icon to render when the action panel is closed.
    * Defaults to `<Switcher size={20} />`
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let icon = Switcher;
 
   /**
    * Specify the icon to render when the action panel is open.
    * Defaults to `<Close size={20} />`
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let closeIcon = Close;
 

diff --git a/src/UIShell/HeaderActionLink.svelte b/src/UIShell/HeaderActionLink.svelte
@@ -10,7 +10,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let icon = undefined;
 

diff --git a/src/UIShell/HeaderGlobalAction.svelte b/src/UIShell/HeaderGlobalAction.svelte
@@ -8,7 +8,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let icon = undefined;
 

diff --git a/src/UIShell/SideNavLink.svelte b/src/UIShell/SideNavLink.svelte
@@ -16,7 +16,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let icon = undefined;
 

diff --git a/src/UIShell/SideNavMenu.svelte b/src/UIShell/SideNavMenu.svelte
@@ -10,7 +10,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent<any>}
+   * @type {typeof import("svelte").SvelteComponent<any> | import("svelte").Component}
    */
   export let icon = undefined;
 

diff --git a/types/Button/Button.svelte.d.ts b/types/Button/Button.svelte.d.ts
@@ -44,7 +44,9 @@ type $Props = {
    * Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`)
    * @default undefined
    */
-  icon?: typeof import("svelte").SvelteComponent<any>;
+  icon?:
+    | typeof import("svelte").SvelteComponent<any>
+    | import("svelte").Component;
 
   /**
    * Specify the ARIA label for the button icon

diff --git a/types/ComposedModal/ModalFooter.svelte.d.ts b/types/ComposedModal/ModalFooter.svelte.d.ts
@@ -14,7 +14,9 @@ type $Props = {
    * Specify the primary button icon
    * @default undefined
    */
-  primaryButtonIcon?: typeof import("svelte").SvelteComponent<any>;
+  primaryButtonIcon?:
+    | typeof import("svelte").SvelteComponent<any>
+    | import("svelte").Component;
 
   /**
    * Set to `true` to disable the primary button