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

[charts] Fix some bad practice with useSlotProps #13141

Merged
merged 8 commits into from
May 16, 2024

Conversation

alexfauquette
Copy link
Member

Follow up on #12921 comments

Each comment get its commit

The class should be passed to className instead of being inside additionalProps (several occurrences in the package)

@flaviendelangle about this last comment, I thought the goal of this hook is to do the merging, and so I could delegate it the fact of merging multiple className props.

This pattern of passing className to the additionalProps also exists in the pickers package. Is it a mistake?

https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx/#L121-L134

@alexfauquette alexfauquette added the component: charts This is the name of the generic UI component, not the React module! label May 15, 2024
@mui-bot
Copy link

mui-bot commented May 15, 2024

Deploy preview: https://deploy-preview-13141--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 0439d02

@flaviendelangle
Copy link
Member

This pattern of passing className to the additionalProps also exists in the pickers package. Is it a mistake?

Probably yes


@flaviendelangle about this last comment, I thought the goal of this hook is to do the merging, and so I could delegate it the fact of merging multiple className props.

Yes, that's also how I understand it's purpose.
To be fair, I can't think of any difference between passing the className to additionalProps vs to it's dedicated root param, other than consistency throughout the codebase.

@alexfauquette alexfauquette marked this pull request as ready for review May 16, 2024 07:48
@alexfauquette
Copy link
Member Author

@JCQuintas I think this PR contains some code standards :)

@JCQuintas
Copy link
Member

😆
Screenshot 2024-05-16 at 10 17 16

@@ -145,17 +145,16 @@ function BarElement(props: BarElementProps) {
elementType: Bar,
externalSlotProps: slotProps?.bar,
Copy link
Member

Choose a reason for hiding this comment

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

This should work and allow you to not spread other below:

Suggested change
externalSlotProps: slotProps?.bar,
externalSlotProps: slotProps?.bar,
externalForwardedProps: other,

It should also automatically merge the event handlers and stuff like ref and style

Copy link
Member

Choose a reason for hiding this comment

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

This is a nice suggestion! 👍
Other than that, the changes look great! 💯

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've not done the other components, because the TS result seems buggy. even if other type contains d: string the resulting props do not contain it

Copy link
Member

Choose a reason for hiding this comment

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

The typing of useSlotProps is ... complex 😆

@JCQuintas
Copy link
Member

@JCQuintas I think this PR contains some code standards :)

Will add a section about slots 😅

@@ -145,17 +145,16 @@ function BarElement(props: BarElementProps) {
elementType: Bar,
externalSlotProps: slotProps?.bar,
Copy link
Member

Choose a reason for hiding this comment

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

This is a nice suggestion! 👍
Other than that, the changes look great! 💯

@JCQuintas
Copy link
Member

JCQuintas commented May 16, 2024

Btw, not sure who handles this, but it would be really helpful if these functions/types we use extensively had more comprehensive typedocs with how to use them and examples.

@alexfauquette alexfauquette merged commit 0e6031d into mui:master May 16, 2024
17 checks passed
@flaviendelangle
Copy link
Member

it would be really helpful if these functions/types we use extensively had more comprehensive typedocs with how to use them and examples.

There is nothing preventing us from opening a PR on the core to improve the JSDOC 👍

@JCQuintas
Copy link
Member

it would be really helpful if these functions/types we use extensively had more comprehensive typedocs with how to use them and examples.

There is nothing preventing us from opening a PR on the core to improve the JSDOC 👍

I would if I knew how they worked 😆

@flaviendelangle
Copy link
Member

Sure, I was not asking you to open the PR for something like useSlotProps right away 😆

arthurbalduini pushed a commit to arthurbalduini/mui-x that referenced this pull request May 23, 2024
DungTiger pushed a commit to DungTiger/mui-x that referenced this pull request Jul 23, 2024
thomasmoon pushed a commit to thomasmoon/mui-x that referenced this pull request Sep 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: charts This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants