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

[material-ui][StepContent] Add slots and slotProps #44742

Merged
merged 13 commits into from
Dec 18, 2024

Conversation

sai6855
Copy link
Contributor

@sai6855 sai6855 commented Dec 12, 2024

Part of #41281

This PR adds slots and slotProps and deprecates TransitionComponent and TransitionProps

@sai6855 sai6855 added component: stepper This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material labels Dec 12, 2024
@mui-bot
Copy link

mui-bot commented Dec 12, 2024

Netlify deploy preview

StepContent: parsed: +2.37% , gzip: +2.08%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against d27d73c

@sai6855 sai6855 marked this pull request as draft December 12, 2024 06:52
@sai6855 sai6855 marked this pull request as ready for review December 12, 2024 13:33
Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

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

@sai6855 I replied in #42157 (comment), but that's a special case. For TransitionComponent, lets deprecate as we did with the others: https://mui.com/material-ui/migration/migrating-from-deprecated-apis/#transitioncomponent

Besides that, the PR is good 👍🏼 but please let's deprecate in the same PR.

@sai6855
Copy link
Contributor Author

sai6855 commented Dec 15, 2024

For TransitionComponent, lets deprecate as we did with the others: https://mui.com/material-ui/migration/migrating-from-deprecated-apis/#transitioncomponent

In cases you shown above, TransitionComponent was used as <TransitionComponent/> where as in StepContent TransitionComponent is used as as={TransitionComponent}, because TransitionComponent is being used in as prop, i wanted to double check with you before deprecating.

@DiegoAndai
Copy link
Member

@sai6855 thanks for checking. I still think we should go forward with the deprecation, as:

  • We should try to make all transition override APIs equivalent.
  • I would expect this as -> slots.transition change not to be problematic as the others, because StepContentTransition has no styles in its styled call. So no styles would be lost when using slots.transition.

Again, thanks for checking first. I think it won't be a problem, but if users have issues, we can remove/change the deprecation in the future.

@sai6855 sai6855 requested a review from DiegoAndai December 17, 2024 10:06
Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

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

Hey @sai6855, sorry for not being clearer before: I only meant we should add the deprecation, not change how TransitionComponent is handled, see the comment below.

This is so change happens only when migrating to slots, and not when upgrading to a new version. Does that make sense?

@@ -110,9 +110,7 @@ const StepContent = React.forwardRef(function StepContent(inProps, ref) {
ownerState={ownerState}
{...other}
>
<TransitionSlot as={TransitionComponent} {...transitionProps}>
Copy link
Member

Choose a reason for hiding this comment

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

Lets revert this change, TransitionComponent should still be passed through as

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Opps! as prop somehow got lost, added it back here 3dc1b68

@@ -83,24 +86,33 @@ const StepContent = React.forwardRef(function StepContent(inProps, ref) {
transitionDuration = undefined;
}

const externalForwardedProps = {
slots: { transition: TransitionComponent, ...slots },
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 be:

Suggested change
slots: { transition: TransitionComponent, ...slots },
slots,

As TransitionComponent is being passed through as

Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

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

Thanks @sai6855!

@sai6855 sai6855 merged commit 7f04342 into mui:master Dec 18, 2024
22 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: stepper This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants