[material-ui][docs] Improve documentation for "complementary" components

[samuelsycamore]

Feedback received:

Please include some example code in the demo. There are four different components listed at the bottom of this page, the API docs for three of them have no details about what they do or how to use them, they link back to this page with a "see our demo" message but then are ONLY mentioned at the very bottom in the link to the page I was just on. Documentation should be better than this. Show me how to use your system, I can't read the minds of strangers, let alone strangers who are obviously several orders of magnitude more experienced than I am if they built this library.

from https://mui.com/material-ui/react-accordion/#

I can empathize with this frustration. Material UI has lots of these complementary components (or maybe supplementary is a better term?) that don't have their own demo pages, because you would only ever use them in the context of their parent component. But they're not consistently documented in the parent demo docs either, leading to this awful UX loop:

1. Look for info on Accordion Actions component usage on the Accordion page
2. Find the link to the Accordion Actions API page and click through
3. The API page, in turn, redirects you back to the Accordion demo page, which has no info about Accordion Actions other than the link to the API page

Not fun!

I think we've largely resolved this issue in the Joy and Base docs by consistently documenting these complementary components in their respective parent component demo pages. We need to comb through the Material UI docs to find these undocumented components and show users what to do with them.

[Triluk98]

I'd be interested in resolving this issue, can I help?

[anle9650]

Here are the components I've found that seem to lack clear documentation for complementary components:

• DATA DISPLAY
  • [x] List #41329
  • [ ] Table
• FEEDBACK
  • [x] Dialog https://github.com/mui/material-ui/pull/41313
• SURFACES
  • [x] Accordion #40284
  • [x] Card #40346
• NAGIVATION
  • [ ] Menu
  • [x] Stepper #41900
  • [x] Tabs #40587

[samuelsycamore]

Thanks for investigating this @anle9650 !! I've added the ready to take tag in case anybody else wants to pitch in and document some of these.

[DiegoAndai]

Created an issue for the tabs complementary components: #40558

[DiegoAndai]

An issue was created for the Stepper complementary components: https://github.com/mui/material-ui/issues/41454

[samuelsycamore]

@anle9650 reviewing the list above again, I think we can drop Snackbar — <SnackbarContent /> is documented under "Content" on that page, and it's an optional component so not necessary for implementation.