[docs][base & joy] Display "Classes" Section in API docs

[hbjORbj]

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

• 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. This is very open to suggestion for improvement.

• This is also a follow-up of [Joy] Support slots/slotsProps for every component (components with only root slot too) #36540 (review) pointed out by Olivier

Before:

• base
• joy

After:

• base
• joy

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against 446a37b

[mnajdova]

Thanks Benny, few comments.

1. Should we name the section State classes? All other classes are included in the slots section
2. Wait for the descriptions to be added before merging this
3. Make the table same width as the other tables on the page

We will have conflicts with the tabs API PR, this is why I proposed to wait for that one to be merged first, but hopefully we can resolve the merge conflicts successfully.

Would be great if you can add tests for the changes introduced

[hbjORbj]

@mnajdova

1. Should we name the section State classes? All other classes are included in the slots section

Agree. Done.

2. Wait for the descriptions to be added before merging this

Sure👌

3. Make the table same width as the other tables on the page

Done.

We will have conflicts with the tabs API PR, this is why I proposed to wait for that one to be merged first, but hopefully we can resolve the merge conflicts successfully.

Got it👌

Would be great if you can add tests for the changes introduced

Can you elaborate please? Tests for the function parseSlotsAndClasses, or do you mean something else?

[hbjORbj]

Joy Slider apparently had a "CSS" Section while all other Joy components didn't. Now we rather have a "State classes" section.

[oliviertassinari]

The concept is interesting 👍.

The only information that I can think of that is missing is which slot is the class name available on, but it's likely overkill to solve this problem.

[siriwatknp]

I find Rule name not useful, would this be simpler? and more explicit?

Or the list of the class names could be a table with description of each class name (that's even better).

[hbjORbj]

• Added the description @siriwatknp suggested under "State classes" heading
• Removed "Rule name" column
• We now have 2 columns: "Global class" and "Description"
• Changed the description of Joy component classes from "Styles applied to..." to "Class name applied to..." for consistency

[hbjORbj]

The only information that I can think of that is missing is which slot is the class name available on, but it's likely overkill to solve this problem. @oliviertassinari

Doesn't the "Slots' table already achieve this? The slots with non-empty value cell in "Default class" column have matching class names while those with empty cell do not. Or I may have misunderstood your point.

[hbjORbj]

@siriwatknp @oliviertassinari Review reminder

[hbjORbj]

Been waiting for review quite a while 🥲

Rebased on master and applied the changes to ComponentsApiContent as well. Should be ready for merge. cc @mnajdova

[siriwatknp]

@hbjORbj Push some fixes:

• rename State classes to Class names to be consistent with React
• add classnames to TOC (it was missing)
• sort the class names so that state class names come up first.

[hbjORbj]

Thanks. I think this is ready for merge.

[samuelsycamore]

This is looking great! I was just randomly clicking through different components and I noticed that there's no info for the Joy UI Card component. Is there a reason why this one was skipped? If not, we should comb through these one more time to make sure all pages are included.

[hbjORbj]

@samuelsycamore Thanks for the review. This currently excludes components that only have root slot. If we merge #36540 and rebase this PR on top, the problem will be fixed.

[samuelsycamore]

Ah ok thanks for clarifying @hbjORbj ! In that case I think this is good to go.

[siriwatknp]

👍 Thanks for working on this!

[mnajdova]

We are missing the CSS classes title int he table of content in: https://deploy-preview-36589--material-ui.netlify.app/base/react-switch/components-api/

[hbjORbj]

@mnajdova Thanks for the catch. Fixed it.