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

Update Icons to use React.forwardRef & Remove support for Octicon #943

Merged
merged 8 commits into from
May 8, 2023

Conversation

broccolinisoup
Copy link
Member

@broccolinisoup broccolinisoup commented May 3, 2023

Closes #910

As stated in the issue itself, our icon components do not forward their refs and this is currently causing issues in the remediated Tooltip implementation primer/react#3032. It is also a great enhancement for future cases to make sure their refs are available to access when needed.

Re introducing this change as a major, please see the comment

@broccolinisoup broccolinisoup requested a review from a team as a code owner May 3, 2023 01:31
@broccolinisoup broccolinisoup requested a review from tallys May 3, 2023 01:31
@changeset-bot
Copy link

changeset-bot bot commented May 3, 2023

🦋 Changeset detected

Latest commit: ac2dc3f

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

This PR includes changesets to release 1 package
Name Type
@primer/octicons Major

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

@broccolinisoup broccolinisoup changed the title UpdatecreateIconComponent utility func to return React.forwardRef Update createIconComponent utility func to return React.forwardRef May 3, 2023
@@ -6,7 +6,7 @@ export default function Octicon({icon: Icon, children, ...props}) {
// eslint-disable-next-line github/unescaped-html-literal
'<Octicon> is deprecated. Use icon components on their own instead (e.g. <Octicon icon={AlertIcon} /> → <AlertIcon />)'
)
return typeof Icon === 'function' ? <Icon {...props} /> : React.cloneElement(React.Children.only(children), props)
return typeof Icon === 'object' ? <Icon {...props} /> : React.cloneElement(React.Children.only(children), props)
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am a little unsure about this change 😵‍💫 Would there be any impact on consumer applications? 🤔

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@broccolinisoup would you want to include this as part of the breaking change or leave them separate?

As an alternative, we might be able to use the react-is package to check if it is a valid element type (like ReactIs.isValidElementType(Icon)) as a more stable way of passing props versus not

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your great suggestion @joshblack! I removed the deprecated Octicons 🎉 Build and tests seems fine but let me know if there is anything I am missing to do here.

Also, I pushed it as a commit here, would that be better if I pushed another PR for it you think? 🤔

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it is good to go within this PR, I'll update the title and the changeset. If not, I'll push another PR

Copy link
Member

@joshblack joshblack left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just left one comment for the README 👀 This looks great!

lib/octicons_react/README.md Outdated Show resolved Hide resolved
broccolinisoup and others added 2 commits May 5, 2023 09:28
Co-authored-by: Josh Black <joshblack@github.com>
@broccolinisoup broccolinisoup changed the title Update createIconComponent utility func to return React.forwardRef Update Icons to use React.forwardRef & Remove support for Octicon May 4, 2023
Copy link
Contributor

@colebemis colebemis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

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.

Update React components to use React.forwardRef()
3 participants