[TreeView] Migrate to emotion

[tomasznguyen]

• I have followed (at least) the PR section of the contributing guide.

Related to #24405

[mui-pr-bot]

Details of bundle changes

@material-ui/lab: parsed: +0.11% , gzip: +0.07%

Generated by 🚫 dangerJS against 94d4a52

[oliviertassinari]

A first quick review. In packages/material-ui-lab/src/TreeView/TreeView.d.ts, Theme needs to be imported from @material-ui/core/styles.

[tomasznguyen]

@oliviertassinari Tnx for the quick review. I fixed the imports. I'll have a look at the other errors tomorrow.

[tomasznguyen]

@oliviertassinari I got stuck with migrating TreeView. When running yarn proptypes, the properties className, onBlur, onFocus, and onKeyDown are removed from TreeView.propTypes.

When replacing (for testing):

const TreeView = React.forwardRef(function TreeView(inProps, ref) {
  const { isRtl, ...props } = useThemeProps({ props: inProps, name: 'MuiTreeView' });

by:

const TreeView = React.forwardRef(function TreeView(props, ref) {

yarn proptypes adds the 4 properties to TreeView.propTypes.

I try to understand why this is happening, but till now without success. Do you have any suggestion for me where to look at?

[mnajdova]

@oliviertassinari I got stuck with migrating TreeView. When running yarn proptypes, the properties className, onBlur, onFocus, and onKeyDown are removed from TreeView.propTypes.

When replacing (for testing):

const TreeView = React.forwardRef(function TreeView(inProps, ref) {
const { isRtl, ...props } = useThemeProps({ props: inProps, name: 'MuiTreeView' });
by:

const TreeView = React.forwardRef(function TreeView(props, ref) {
yarn proptypes adds the 4 properties to TreeView.propTypes.

I try to understand why this is happening, but till now without success. Do you have any suggestion for me where to look at?

Taking a look.

[mnajdova]

@tomasznguyen fixed the proptypes by c295e40

feedback handled

[tomasznguyen]

@mnajdova @oliviertassinari Thank you very much for your feedback and reviews. All tests are passing now.

Based on your reviews, I reviewed my other migration PRs. I see that index.d.ts of those PRs need to be updated as well. I'll fix that. Furthermore, in Menu, I used destructuring to extract isRtl as in TreeView which resulted in className missing from proptypes. I'll fix this as well.

What I understand from migrating TreeView is that it is not recommended to destructure the output of useThemeProps at the moment, because this results in incorrectly generated proptypes, right?

[mnajdova]

Good to go :)

[mnajdova]

Based on your reviews, I reviewed my other migration PRs. I see that index.d.ts of those PRs need to be updated as well. I'll fix that. Furthermore, in Menu, I used destructuring to extract isRtl as in TreeView which resulted in className missing from proptypes. I'll fix this as well.

Great! We may have missed that.

What I understand from migrating TreeView is that it is not recommended to destructure the output of useThemeProps at the moment, because this results in incorrectly generated proptypes, right?

Correct