[Joy] Support slots/slotsProps for every component (components with only root slot too)

[hbjORbj]

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

Follow-up on (4) of #36490 (comment)

Changes

• Joy components that only have root slot also support slots/slotProps
• Consequently, every Joy component's API doc now has "Slots" section.

Preview: e.g., https://deploy-preview-36540--material-ui.netlify.app/joy-ui/api/card/#slots

⚠️ This PR must be merged after #36599 is merged.

[mui-bot]

Netlify deploy preview

https://deploy-preview-36540--material-ui.netlify.app/

@mui/joy: parsed: +0.44% , gzip: +0.16%

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 11f748a

[oliviertassinari]

Follow-up on (4) of #36490 (comment)

I'm not sure about this direction. When I land on the page, I assume that I can do slots={{ root }} but it's not the case. What I was wondering there is about the class names. I wonder if there is a way (design-wise) to communicate this. Maybe it's about having more columns. As a developer, I would want to understand, that I can use a class name, a theme component style override but instead of slots.root => component.

[oliviertassinari]

I assume that we can't export any of these types since there is no slots prop?

Suggested change

export interface CardSlots {

[siriwatknp]

@hbjORbj Is it necessary to export these interfaces (including other components)?

[hbjORbj]

For other components, yes, we need to export this to read the JSDoc and generated API docs. More specifically, parseSlots function needs it. https://github.com/mui/material-ui/blob/master/packages/api-docs-builder/utils/parseSlots.ts

[siriwatknp]

Follow-up on (4) of #36490 (comment)

I'm not sure about this direction. When I land on the page, I assume that I can do slots={{ root }} but it's not the case. What I was wondering there is about the class names. I wonder if there is a way (design-wise) to communicate this. Maybe it's about having more columns. As a developer, I would want to understand, that I can use a class name, a theme component style override but instead of slots.root => component.

If my understanding is correct, what you are asking should be done in a separate PR?

[hbjORbj]

@oliviertassinari @siriwatknp During the Friday backlog grooming session, I brought up this topic (displaying classnames for Joy/Base in API docs), and Marija/Michal/I agreed on creating a new section where we list the classnames except those already displayed in "Default class" column under "Slots" section. I am preparing a PR for this. After I create this PR, we can discuss again to make adjustments.

[oliviertassinari]

I guess the PR in question is #36589. It's connected, but these seems different problems: modifier class names vs. class names of components without slots prop.

[hbjORbj]

I agree that Joy users might expect slots/slotProps to work for every component regardless of the number of slots. They won't check the API reference to know if the component supports these props or not, but rather they just go for these props because they are used to using them. Even if they realise that these props aren't supported, they will be confused because they don't know why they aren't.

I think we have first clearly communicate that component !== slots.root in order to explain why we find it unnecessary to support slots/slotProps for components with only root slot.

cc @siriwatknp

[siriwatknp]

I agree that Joy users might expect slots/slotProps to work for every component regardless of the number of slots. They won't check the API reference to know if the component supports these props or not, but rather they just go for these props because they are used to using them. Even if they realise that these props aren't supported, they will be confused because they don't know why they aren't.

👍 All in. All components should support component, slots, and slotProps (except CssBaseline). I found a valid use case for using slots for small component like MenuButton (single DOM) when I want to replace the styles with my custom component but preserve the functionality of the Menu Button.

<MenuButton slots={{ root: IconButton }}>
  <Icon />
</MenuButton>

I think we have first clearly communicate that component !== slots.root in order to explain why we find it unnecessary to support slots/slotProps for components with only root slot.

That will be done by #34990

[hbjORbj]

I made a change so that Joy components that only have root slot also support slots/slotProps. Consequently, every Joy component's API doc now has "Slots" section.

[siriwatknp]

@hbjORbj I think some components like Card need to import and use useSlot because it currently does not accept slots or slotProps.

[hbjORbj]

@siriwatknp You are right. My bad for missing that. Doing it now!

UPDATE: All ready, I think.

[hbjORbj]

This refactoring of Menu is part of #36599. #36599 must be merged before this PR is merged.

[hbjORbj]

@siriwatknp Reminder

[hbjORbj]

@siriwatknp

I think we can merge this? I rebased this branch on top of #36599

Here's a filter of relevant commits for easier review: https://github.com/mui/material-ui/pull/36540/files/f7d03cd84301166c96df417ed8fc47e356c1c85a..01cb82b550c119222d5babde2c90dca12d5b3d64

UPDATE: Merged #36599. This PR is rebased. Ready for merge.