fix: icons in Nextjs App Router

[motinados]

Description As indicated in the error message of the issue, the problem arose from passing a function from the server component to the client component. To resolve this, I made it possible to pass the Icon as a ReactElement.

I've created a simple sample. Please take a look.

This change is related to many components that accept Icon as a Prop. Badge, Icon, Button, MultiSelect, BaseInput, NumberInput, TextInput, SearchSelect, SearchSelectItem, Select, SelectItem, Tab

Please note that this pull request does not include tests for ReactServerComponents.

Related issue(s) Fixes #693

What kind of change does this PR introduce? (check at least one)

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] New Feature (non-breaking change which adds functionality)
• [ ] Refactor
• [ ] Build-related changes
• [ ] Other, please describe:

Does this PR introduce a breaking change? (check one)

• [x] Yes
• [ ] No

This pull request includes a breaking change, but the previous usage remains valid. Specifically, you can pass either the previous ElementType or the new ReactElement as a Prop.

In the future, it might be beneficial to consider removing ElementType. This would help in keeping the code and documentation streamlined and simple.

How has This been tested?

Screenshots (if appropriate):

The PR fulfills these requirements:

• [x] It's submitted to the main branch
• [x] When resolving a specific issue, it's referenced in the related issue section above
• [x] My change requires a change to the documentation. (Managed by Tremor Team)
• [ ] I have added tests to cover my changes
• [x] Check the "Allow edits from maintainers" option while creating your PR.
• [x] Add refs #XXX or fixes #XXX to the related issue section if your PR refers to or fixes an issue.
• [x] By contributing to Tremor, you confirm that you have read and agreed to Tremor's CONTRIBUTING.md guideline. You also agree that your contributions will be licensed under the Apache License 2.0 license.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tremor-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 26, 2024 9:18pm

[severinlandolt]

Uh, thank you very much @motinados, this is an extremely helpful PR. Will be reviewing that this week 🔎

[motinados]

You're welcome. Happy to help.

[severinlandolt]

Hi @motinados, I see the PR is still marked as a draft. Do you think it's ready for review?

[motinados]

Not yet. I still need to make changes to some components.

[severinlandolt]

🚢!

[motinados]

The repair of the component that was producing errors has been completed. There are no errors in Callout and BarList, but I think changes should be made to give a sense of consistency in the user-side code.

bad

   <TextInput icon={<BeakerIcon />} />
   <Callout
          title="Critical speed limit reached"
          icon={ExclamationCircleIcon}
   >
          Turbine reached critical speed. Immediately reduce turbine speed.
   </Callout>

good

   <TextInput icon={<BeakerIcon />} />
   <Callout
          title="Critical speed limit reached"
          icon={<ExclamationCircleIcon />}
   >
          Turbine reached critical speed. Immediately reduce turbine speed.
   </Callout>

@severinlandolt Would you like me to make the changes?

[severinlandolt]

Hi @motinados, sorry for the delayed response – I completely missed your comment. Yes, please feel free to make any edits you deem necessary :)

[motinados]

@severinlandolt The changes are done, and the PR is ready for review. Appreciate your time!

[severinlandolt]

Hey @motinados, I truly appreciate the effort you've put into fixing the Icon problem 🫶🏻 Given that this introduces a breaking change, I'll be looking at it for the v4 release, which is likely around Jan/Feb next year.

[motinados]

I understand the situation, and I'm looking forward to the v4 release.