Allow Icon to receive ref #50816
Allow Icon to receive ref #50816
Conversation
ravicious
added
no-changelog
|
Ill test this out later today, but so far the code (for Icon) looks fine. this is probably going to be a nightmare to backport |
Why though? 🌞 |
|
|
||
| const timeoutMs = 200; | ||
|
|
||
| const StyledBroadcast = styled(Broadcast)` |
There was a problem hiding this comment.
This is all a little bit too complex, let me know if you have a better idea on how to demonstrate usage of ref. One thing I like about this example is that we're showing that we can just pass a ref through a styled generated component to the final Icon, without having to change the ref prop name along the way.
There was a problem hiding this comment.
I replaced it with a simpler example based on https://react.dev/reference/react/useRef#scrolling-an-image-into-view.
ravicious
force-pushed
the
r7s/icon-ref
branch
from
2577808 to
60a8073
Compare
| useEffect(() => { | ||
| const interval = setInterval(() => { | ||
| setIsShown(value => !value); | ||
| }, timeoutMs * 3); |
There was a problem hiding this comment.
Should this be configurable via prop?
There was a problem hiding this comment.
If it was a real component then sure, but I don't think it matters that much for the story.
There's lots of files changed in this PR, but 205 of them are auto-generated.
I wanted to use an icon with
CSSTransition, but I discovered that it's impossible without some kind of a wrapper sinceIcondoesn't acceptref. Using wrappers for icons is rather annoying, especially in the context of a flex parent, so I decided to refactorIconto acceptref.First I had to update references of
JSX.ElementtoReact.ReactNode. This is because the new version ofIconreturns the return value offorwardRef, which is an object that React can render, but it's not a valid JSX element.https://www.totaltypescript.com/jsx-element-vs-react-reactnode
At the time of writing, this change doesn't require an update to teleport.e.
I ended up not needing to pass a ref to an icon, but I think it's worthwhile to keep this in case someone else runs into this.