Open
Description
Package
@carbon/react
Browser
Chrome
Package version
v1.59.0
React version
v18.2.0
Description
Using the <Tab /> Component alongside the renderIcon property and passing an icon (in my case passing DataTable) from @carbon/react/icons displays a Typescript error:
Type 'CarbonIconType' is not assignable to type 'ComponentType<{ size: number; }> | undefined'.
Type 'ForwardRefExoticComponent<CarbonIconProps & RefAttributes<ReactSVGElement>>' is not assignable to type 'FunctionComponent<{ size: number; }>'.
Types of property 'propTypes' are incompatible.
Type 'WeakValidationMap<CarbonIconProps & RefAttributes<ReactSVGElement>> | undefined' is not assignable to type 'WeakValidationMap<{ size: number; }> | undefined'.
Type 'WeakValidationMap<CarbonIconProps & RefAttributes<ReactSVGElement>>' is not assignable to type 'WeakValidationMap<{ size: number; }>'.
Types of property 'size' are incompatible.
Type 'Validator<string | number | null | undefined> | undefined' is not assignable to type 'Validator<number> | undefined'.
Type 'Validator<string | number | null | undefined>' is not assignable to type 'Validator<number>'.
Type 'string | number | null | undefined' is not assignable to type 'number'.
Type 'undefined' is not assignable to type 'number'.ts(2322)
This is due to the type of renderIcon being ComponentType<{size: number}>. From my understanding and researching, ComponentType is used for when the component is either a Class or a Function. And looking into the CarbonIconType, this is an SVGElement?
I'm following the examples of the Tabs with Icons:
My code:
I modified the Tabs.d.ts file and changed the type ElementType similar to what the Button component does for its' renderIcon and this worked.
Reproduction/example
https://stackblitz.com/edit/github-mbuhin?file=src%2FApp.tsx
Steps to reproduce
- Install @carbon/react v1.59.0, typescript@5.4.5
- Create a component and use the
Tabcomponent from Carbon. - Pass in an Icon from @carbon/react/icons (in this case DataTable) into the
renderIconproperty ofTab
Suggested Severity
None
Application/PAL
No response
Code of Conduct
- I agree to follow this project's Code of Conduct
- I checked the current issues for duplicate problems
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Metadata
Assignees
Labels
Type
Projects
Status
⏱ Backlog