fix(Card): Wrap in React.forwardRef #26
Conversation
Codecov Report
@@ Coverage Diff @@
## master #26 +/- ##
=======================================
Coverage 71.91% 71.91%
=======================================
Files 12 12
Lines 146 146
Branches 19 19
=======================================
Hits 105 105
Misses 31 31
Partials 10 10
Continue to review full report at Codecov.
|
1 similar comment
Codecov Report
@@ Coverage Diff @@
## master #26 +/- ##
=======================================
Coverage 71.91% 71.91%
=======================================
Files 12 12
Lines 146 146
Branches 19 19
=======================================
Hits 105 105
Misses 31 31
Partials 10 10
Continue to review full report at Codecov.
|
| @@ -16,7 +16,7 @@ const StyledCard = createComponent({ | |||
| `, | |||
| }); | |||
|
|
|||
| const Card = props => <StyledCard {...props} />; | |||
| const Card = React.forwardRef((props, ref) => <StyledCard ref={ref} {...props} />); | |||
There was a problem hiding this comment.
styled-components will forward refs for you but if you want the ref to be on Box instead of the wrapped StyledCard you might have to verify that createComponent does the right thing. could be worth adding a test in that case
There was a problem hiding this comment.
Thanks, I will add a test to ensure that the ref is assigned as expected.
There was a problem hiding this comment.
This is right - functional components don't forward refs out of the box and this ref should be passed directly to Box. We're wrapping some components as a hack for <PropsTable /> to work with styled-components. All documentation generators (storybook, docz, stylguidist) are affected due to the issue in the underlying react-docgen parser. Searching for better solutions
Description
This change wraps
<Card/>inReact.forwardRef.Task
https://app.asana.com/0/887402852146010/1112252089781752/f