Update types for IconButton, ActionMenu.Button, TabNav.Link and internal consumers

[mattcosta7]

Describe your changes here.

The types for these buttons have seemed incorrect for some time. This should correct these types and ensure they get proper autocompletion in IDEs. I'm not 100% sure if the polymorphism on AnchorMenu.Button is correct, but it's consistent with what the types purported to be previously as far as I can tell

fixes #2622
fixes #2519

Are there are, similar instances we should fixup while here?

I snuck in a small change more broadly, which replaces

const component = ({sx: sxProp = {}}) => {}
//with
const component = ({sx: sxProp = defaultSxProp}) => {}

This should avoid a new object allocation on every render of multiple components, and potentially memo/callback/effect re-evaluations related to them. I don't expect a significant perf improvement, but this should be a small one with no negative effects

These changes lead to many incompatible typings inside primer, which I've fixed up. I think there are likely many more typing inconsistencies in primer we should work to root out, but this should at least build as expected.

A consideration here is "Are these fixes broad enough to be considered breaking changes" as they'll likely require consumers to update code, similar to what we've had to do here

Merge checklist

• Added/updated tests
• Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 4761a20

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	Minor

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

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	84.94 KB (+0.02% 🔺)
dist/browser.umd.js	85.55 KB (+0.02% 🔺)

[mattcosta7]

broadens these to they work with arbitrary components, and not only primer octicons

[mattcosta7]

this is used polymorphically, but the styled-components as types conflict some with the polymorphic helper types - overriding the styled-components version gives better typing, and avoids those issues

[mattcosta7]

validates that we can accept specific props, and as

[mattcosta7]

@joshblack opened this one - https://github.com/github/github/pull/252052

Which fixes up the type errors in dotcom. We'd probably need to work with product teams to ensure the aria-labels added are good enough, but it does the heavy lifting.

This did uncover some additional fixes necessary to improve the as prop in TabNav.Link for a case used currently in dotcom

96a6224

and opens a new question related to a test.

This updates the types to support a test we have currently in this codebase. I think the test, incorrectly, accepts an href attribute for a div. The polymorphic as prop changes catch that. I've updated the types to support the test, but I think it might be more valid to update the test to avoid setting an href on a div.

bf1f55e

[colebemis]

Looks great. Thanks for taking this on @mattcosta7 and @joshblack! 💖