Building Strongly Typed Polymorphic Components

[guidari]

When using PolymorphicProps in Carbon, we are not accounting for type errors. For example, in the code snippet below, a type error should occur if a user attempts to use an attribute that is incompatible with the specified tag. However, this is not currently being enforced.

// Should throw an error in the `href`
<Component as="button" href="www.google.com" />

There is this really good article that talks about How to Build Strongly Typed Polymorphic Components

Here is a PR that serves as an example of how to implement this.

Components with PolymorphicProps

Preview Give feedback

1. Adding strong PolymorphicProps to Button #18371
   role: dev 🤖 +1
   
2. Adding strong PolymorphicProps to Column
3. Adding strong PolymorphicProps to Layer
4. Adding strong PolymorphicProps to Link #18370
   role: dev 🤖 +1
   
5. Adding strong PolymorphicProps to Popover
6. Adding strong PolymorphicProps to Tag #18369
   role: dev 🤖 +1
   
7. Implement the reusable code and add to Text component #18279
   role: dev 🤖 +1
   
8. Adding strong PolymorphicProps to Toggletip
9. Adding strong PolymorphicProps to Tooltip
10. Adding strong PolymorphicProps to Layer
11. Adding strong PolymorphicProps to UIShell Link
12. Adding strong PolymorphicProps to Grid

Components that could use PolymorphicProps

Preview Give feedback

1. Adding strong PolymorphicProps to SideNavMenuItem