[material-ui][docs] Revise the Accordion page

[anle9650]

Part of #39952. Adds documentation for accordion's complementary components.

https://deploy-preview-40284--material-ui.netlify.app/material-ui/react-accordion/#introduction

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

[mui-bot]

Netlify deploy preview

• docs/data/material/components/accordion/accordion.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against d814a5e

[danilo-leal]

Sweet! Thank you, @anle9650, for kicking this one off! Took advantage of this PR to expand the scope a bit and already revisef the Accordion page as a whole! 👌 Tagging @samuelsycamore for a further content review, too!

(PS: I'm seeing a hydration error that I didn't quite figure out where yet)

[anle9650]

@danilo-leal nice! I fixed the hydration error in 802eb4a

[samuelsycamore]

Love to see the improvements here! @danilo-leal do you think we should give this page the full editorial makeover (#35158) or try to limit the scope to #39952?

[danilo-leal]

@samuelsycamore, appreciate the review! 🙏 Are you foreseeing any other changes to this PR? I applied the latest template you put together for the Material UI docs on my first edit, and with these edits, I think it's looking pretty good. What do you think?

[samuelsycamore]

couple more tiny style edits

[samuelsycamore]

@samuelsycamore, appreciate the review! 🙏 Are you foreseeing any other changes to this PR? I applied the latest template you put together for the Material UI docs on my first edit, and with these edits, I think it's looking pretty good. What do you think?

One thing that's not entirely clear to me is how comprehensive the component demo pages should be, compared with the API reference pages. There are several props that are documented in the API page (like expandIcon, which feels like an important element of the component), but their use isn't explicitly demonstrated on the demo page. Should we try to cover them all here? (My gut says yes, because I think there's a fair number of users who only use the the demo pages.)

[danilo-leal]

Good call—pushed a commit adding a few more sections for other props available to the Accordion!

One that is still broken, though, that I couldn't figure out properly, is the transition demo. Would appreciate some help here! It seems there's a TypeScript issue with passing another transition component using the TransitionComponent pro. Every other demo, from other components, using that prop does it in a slightly different way. I'd love to have something like the Tooltip transition demo; it's simple, and it just works. 😬 Not sure what's going on here — aside from the TS thing, the content does fade out, but the container still stays there... 🤔

[danilo-leal]

Uhm, I'm hesitant to change things on the source code of the Fade component to pull this PR off — maybe there's another way out that I'm just not seeing?

[anle9650]

@danilo-leal I'm seeing that TransitionComponent.children is optional in Accordion, but is required in Tooltip. Making this prop also required in Accordion fixes the problem...

---TransitionProps & { children?: React.ReactElement<any, any> }
+++TransitionProps & { children: React.ReactElement<any, any> }

Maybe Accordion was supposed to also be included in #29028 updates, but was missed?

[danilo-leal]

Oh, interesting; it does seem to solve the TypeScript issue, but not the uncollapsed Accordion Details panel. Maybe @mnajdova or @DiegoAndai could help us out with this matter? 😬

[DiegoAndai]

Hi! I discussed with @mnajdova, and we think that the best path forward is to:

• Cast the type on the demo for this PR (TransitionComponent={Fade as AccordionProps['TransitionComponent']). This is safe to do, as the Accordion component always provides children to the transition component.
• We'll deprecate TransitionComponent prop in favor of slots.transition soon. I started to work on adding the deprecations yesterday. So let's get the correct type in slots.transition and not modify TransitionComponent.

Does that make sense?

Regarding this:

aside from the TS thing, the content does fade out, but the container still stays there

By replacing the Collapse animation, we lose the collapse mechanic that changes the container's height. I recommend creating a custom transition for this demo that combines the collapse and fading mechanics.

[danilo-leal]

@DiegoAndai appreciate the guidance! Let me know if the way I did it up there works well — didn't use a custom transition but instead toggled the styles conditionally using the Accordion's expanded state. 🤙

[DiegoAndai]

@DiegoAndai appreciate the guidance! Let me know if the way I did it up there works well — didn't use a custom transition but instead toggled the styles conditionally using the Accordion's expanded state. 🤙

@danilo-leal yeah! that looks good 😊

[danilo-leal]

Yay, this is looking good to me! Thanks for kicking it off & working with us throughout @anle9650! 🎉

[samuelsycamore]

looks great!

[anle9650]

Thanks for all your help and feedback on this!