feat(textinput.tsx): added renderIcon and renderRightIcon to allow for Icon onClick

[rtraficante]

TextInput icon onClick #734

Description

This change allows for users to render Icons using the renderIcon function property, instead of the icon property. This gives users the ability to add custom props to their Icon, such as an onClick handler. The same goes for the renderRightIcon property, but the Icon will be displayed on the right side of the text input instead.

Fixes #734

Type of change

Please delete options that are not relevant.

• [X] New feature (non-breaking change which adds functionality)

How Has This Been Tested?

I created 4 new tests to the TextInput.spec.tsx file that check if the Icon is present in the document and make sure the onClick handler works for both the renderIcon and renderRightIcon properties

Checklist:

• [X] My code follows the style guidelines of this project
• [X] I have performed a self-review of my own code
• [ ] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [X] My changes generate no new warnings
• [X] I have added tests that prove my fix is effective or that my feature works
• [X] New and existing unit tests pass locally with my changes
• [ ] Any dependent changes have been merged and published in downstream modules
• [X] I have checked my code and corrected any misspellings

[codecov[bot]]

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (1b07a76) 99.43% compared to head (3ae36ac) 99.43%.

:exclamation: Current head 3ae36ac differs from pull request most recent head af16c42. Consider uploading reports for the commit af16c42 to get more accurate results

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #758   +/-   ##
=======================================
  Coverage   99.43%   99.43%           
=======================================
  Files         131      131           
  Lines        6528     6577   +49     
  Branches      490      495    +5     
=======================================
+ Hits         6491     6540   +49     
  Misses         37       37           

Impacted Files	Coverage Δ
src/lib/components/Label/Label.tsx	100.00% <100.00%> (ø)
src/lib/components/Pagination/Pagination.tsx	100.00% <100.00%> (ø)
src/lib/components/Pagination/PaginationButton.tsx	100.00% <100.00%> (ø)
src/lib/components/TextInput/TextInput.tsx	100.00% <100.00%> (ø)
src/lib/theme/default.ts	100.00% <100.00%> (ø)

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[rtraficante]

@tulup-conner When fixing up the documentation, I noticed that when the property is a function, the function doesn't actually show in the code preview. It is showing "renderIcon={renderIcon}" instead of renderIcon={(style) => ...}. I'm not sure if this is on purpose, but I think it would be a good idea to show how to pass the theme into the icon.

I checked the code-preview component and I'm getting an error "Property replaceAll does not exist on type string. Do you need to change your target library? Try changing the 'lib' compiler option to es2021 or later."

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
flowbite-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 26, 2023 8:35pm

[tulup-conner]

@tulup-conner When fixing up the documentation, I noticed that when the property is a function, the function doesn't actually show in the code preview. It is showing "renderIcon={renderIcon}" instead of renderIcon={(style) => ...}. I'm not sure if this is on purpose, but I think it would be a good idea to show how to pass the theme into the icon.

I checked the code-preview component and I'm getting an error "Property replaceAll does not exist on type string. Do you need to change your target library? Try changing the 'lib' compiler option to es2021 or later."

Yeah, this is something I'm trying to fix. We might have to do something hacky to fix it, which is fine. I'll resolve that, though, so don't worry about it. I just created an issue so we can track this publicly #771

[tulup-conner]

Are you still able to finish this @rtraficante?

[IsabelFreitas-catapult]

any updates on when this PR will be merged?

[SutuSebastian]

any updates on when this PR will be merged?

It has loads of conflicts, maybe a re-do and a re-evaluation would be a better idea here.

[SutuSebastian]

Closing due to age and inactivity.