fix(button.tsx): Button as prop internal logic + TS props

[nigellima]

• I have followed the Your First Code Contribution section of the Contributing guide

Summarize the changes made and the motivation behind them.
This fixes the issue with Next Link component which also uses the href prop (which the internal logic was always rendering an anchor tag).

It also improves the TS props of Button and DropdownItem components to actually inherit the props of the tag/component passed in the as prop, instead of using extends Record<string, unknown>.

Reference related issues using # followed by the issue number.
Fix #865

[vercel]

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	Jul 27, 2023 6:01am

[codecov]

Codecov Report

Patch coverage: 99.85% and project coverage change: -0.02% ⚠️

Comparison is base (7461173) 99.54% compared to head (b41ed1a) 99.53%.
Report is 44 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #885      +/-   ##
==========================================
- Coverage   99.54%   99.53%   -0.02%     
==========================================
  Files         163      167       +4     
  Lines        6621     6902     +281     
  Branches      401      417      +16     
==========================================
+ Hits         6591     6870     +279     
- Misses         30       32       +2     

Files Changed	Coverage Δ
src/components/Toast/theme.ts	100.00% <ø> (ø)
src/components/Dropdown/Dropdown.tsx	99.24% <99.43%> (-0.76%)	⬇️
src/components/Badge/Badge.tsx	100.00% <100.00%> (ø)
src/components/Button/Button.tsx	100.00% <100.00%> (ø)
src/components/Button/ButtonBase.tsx	100.00% <100.00%> (ø)
src/components/Button/theme.ts	100.00% <100.00%> (ø)
src/components/Card/Card.tsx	100.00% <100.00%> (ø)
src/components/Carousel/Carousel.tsx	99.02% <100.00%> (+0.06%)	⬆️
src/components/DarkThemeToggle/DarkThemeToggle.tsx	100.00% <100.00%> (ø)
src/components/Dropdown/DropdownItem.tsx	100.00% <100.00%> (ø)
... and 18 more

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[shixiao]

Hi there,

https://codesandbox.io/p/sandbox/epic-khayyam-87pg9k?file=%2Fpages%2Findex.tsx

It looks like the following code triggers a typechecker error:

<Button as={Link} href="www.example.com">Toggle 2</Button>

Types of property 'as' are incompatible.
    Type 'ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps> & InternalLinkProps & { ...; } & RefAttributes<...>>' [i.e., Link] is not assignable to type 'Url | undefined'.typescript(2322)

(Though as="a" or having the Link component wrapping the button both work.)

Am I missing something?

[rluders]

Hi there,

https://codesandbox.io/p/sandbox/epic-khayyam-87pg9k?file=%2Fpages%2Findex.tsx

It looks like the following code triggers a typechecker error:

<Button as={Link} href="www.example.com">Toggle 2</Button>

Types of property 'as' are incompatible.
    Type 'ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps> & InternalLinkProps & { ...; } & RefAttributes<...>>' [i.e., Link] is not assignable to type 'Url | undefined'.typescript(2322)

(Though as="a" or having the Link component wrapping the button both work.)

Am I missing something?

Yes, you didn't updated you flowbite-react and still using "flowbite-react": "^0.3.7",

[shixiao]

https://codesandbox.io/p/sandbox/button-as-3jpqss?file=%2Fpages%2Findex.tsx%3A9%2C63

Apologies! I didn't paste the correct link... In this sandbox, even though the 3 buttons render, there's a typechecker error.

[rluders]

@shixiao this is really weird, I don't see the same issue at the docs project. Anyway, please, open an issue.