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.

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

fix(ButtonClose): update types for React 18 #2658

Merged
merged 4 commits into from
Dec 16, 2022

Conversation

joshblack
Copy link
Member

Closes #2621

Update the types for the deprecated ButtonClose to work in React 18. It seems like there are extra props that exist in React.ButtonHTMLAttributes<HTMLButtonElement> that do not exist in the expanded styled.button props, specifically: nonce, onResize, and onResizeCapture.

When the type definition is expanded, it looks like this currently:

Screenshot 2022-12-06 at 12 46 42 PM

Screenshot 2022-12-06 at 12 46 46 PM

And has the following error in React 18:

Screenshot 2022-12-06 at 12 47 38 PM

This PR changes the type from ComponentProps<typeof StyledButton> to the native HTML attributes and intersects with the expanded theme and sx prop types.

This generates the following type which satisfies the type requirements:

Screenshot 2022-12-06 at 12 49 26 PM

Alternatives considered

  • I tried using React.ComponentPropsWithoutRef<typeof StyledButton> but it unfortunately expanded to { [key: number]: any, [key: string]: any, ... } and lost type information
  • I tried using StyledComponentPropsWithRef but it no longer included custom props (like sx) and the theme prop was also omitted

@joshblack joshblack requested review from a team and JoshBowdenConcepts December 6, 2022 18:56
@changeset-bot
Copy link

changeset-bot bot commented Dec 6, 2022

🦋 Changeset detected

Latest commit: 2e00e29

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@joshblack
Copy link
Member Author

Curious if you have any other approaches you'd recommend @siddharthkp! I couldn't seem to find a good way to satisfy the types and am unfamiliar with why the expanded types in the generated Pick don't include nonce, onResize, and onResizeCapture 🤔

@github-actions
Copy link
Contributor

github-actions bot commented Dec 6, 2022

size-limit report 📦

Path Size
dist/browser.esm.js 84.04 KB (0%)
dist/browser.umd.js 84.66 KB (0%)

@joshblack joshblack temporarily deployed to github-pages December 6, 2022 19:03 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-2658 December 6, 2022 19:04 Inactive
@joshblack joshblack temporarily deployed to github-pages December 13, 2022 18:17 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-2658 December 13, 2022 18:18 Inactive
@joshblack joshblack enabled auto-merge (squash) December 16, 2022 17:11
@joshblack joshblack temporarily deployed to github-pages December 16, 2022 17:19 — with GitHub Actions Inactive
@joshblack joshblack merged commit 20e18c0 into main Dec 16, 2022
@joshblack joshblack deleted the 2621-update-button-close-tyupes branch December 16, 2022 17:19
@primer-css primer-css mentioned this pull request Dec 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[React 18] ButtonClose type declarations are invalid
2 participants