Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Tab renderIcon typescript error when passing Carbon Icon #16735

Open
2 tasks done
jose-b1253 opened this issue Jun 11, 2024 · 0 comments · May be fixed by #18683
Open
2 tasks done

[Bug]: Tab renderIcon typescript error when passing Carbon Icon #16735

jose-b1253 opened this issue Jun 11, 2024 · 0 comments · May be fixed by #18683
Labels
area: typescript component: tabs role: dev 🤖 severity: 3 https://ibm.biz/carbon-severity type: bug 🐛

Comments

@jose-b1253
Copy link

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:

image

My code:

image

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

  1. Install @carbon/react v1.59.0, [email protected]
  2. Create a component and use the Tab component from Carbon.
  3. Pass in an Icon from @carbon/react/icons (in this case DataTable) into the renderIcon property of Tab

Suggested Severity

None

Application/PAL

No response

Code of Conduct
@alisonjoseph alisonjoseph moved this to ⏱ Backlog in Design System Jun 12, 2024
@adamalston adamalston linked a pull request Feb 24, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: typescript component: tabs role: dev 🤖 severity: 3 https://ibm.biz/carbon-severity type: bug 🐛
Projects
Design System
Status: ⏱ Backlog
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: normalize renderIcon types adamalston/carbon
2 participants
@alisonjoseph @jose-b1253