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

forwarding refs to Box and Text component #16062

Merged
merged 1 commit into from
Oct 4, 2022

Conversation

georgewrmarshall
Copy link
Contributor

Explanation

Currently, the Box component does not forward refs down to it's root html element

This is a problem because we use the Box component as a base for all of our UI components. It's handy to be able to pass refs to components such as inputs or you need a DOM node's dimensions

In order to solve this problem, this pull request forwards refs for the Box and Text component.

More Information

Pre-Merge Checklist

  • PR template is filled out
  • IF this PR fixes a bug, a test that would have caught the bug has been added
  • PR is linked to the appropriate GitHub issue
  • [ ] PR has been added to the appropriate release Milestone N/A

+ If there are functional changes:

  • Manual testing complete & passed
  • [ ] "Extension QA Board" label has been applied N/A

@georgewrmarshall georgewrmarshall self-assigned this Oct 3, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Oct 3, 2022

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@georgewrmarshall georgewrmarshall added area-UI Relating to the user interface. team-design-system All issues relating to design system in Extension labels Oct 3, 2022
@georgewrmarshall georgewrmarshall marked this pull request as ready for review October 3, 2022 22:05
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner October 3, 2022 22:05
@@ -29,61 +29,72 @@ export const ValidTags = [
'strong',
'ul',
'label',
'input',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

We are using the Text component and polymorphic prop to create the input element in TextInputBase component PR https://github.com/MetaMask/metamask-extension/pull/16043/files#diff-d3b7305f6fb5c8d3d68007b90b8edefae588ed1141b5319e3785c4bc4f03c218R138-R167

const mockRef = jest.fn();
render(<Text ref={mockRef} />);
expect(mockRef).toHaveBeenCalledTimes(1);
});
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't think this is the most robust test but I struggled to find a reliable way to unit test forwarding refs open to suggestions

@metamaskbot
Copy link
Collaborator

Builds ready [5563e63]
Page Load Metrics (2204 ± 90 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint90139103136
domContentLoaded19472898219918388
load19472918220418790
domInteractive19472898219918388

highlights:

storybook

@georgewrmarshall georgewrmarshall merged commit 393088e into develop Oct 4, 2022
@georgewrmarshall georgewrmarshall deleted the fix/16060/box-text-forward-refs branch October 4, 2022 17:05
@github-actions github-actions bot locked and limited conversation to collaborators Oct 4, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area-UI Relating to the user interface. team-design-system All issues relating to design system in Extension
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Forward refs to Box and Text components
5 participants