[docs][base-ui] Add new batch of coming soon pages

[danilo-leal]

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

Following @oliviertassinari's feedback in #37575 about missing pages for upcoming planned components. Additionally, tweaked the callout copy a tiny bit as well as changed the chip text from "Coming soon" to "Planned" given the discussion had in this PR. The new ones added are:

1. Accordion
2. Pagination
3. Rating
4. Tooltip
5. Toggle Button Group
6. Drawer

Preview: https://deploy-preview-38025--material-ui.netlify.app/base-ui/react-tooltip/

[mui-bot]

Netlify deploy preview

• docs/data/base/components/drawer/drawer.md
• docs/data/base/components/pagination/pagination.md
• docs/data/base/components/rating/rating.md
• docs/data/base/components/toggle-button-group/toggle-button-group.md
• docs/data/base/components/tooltip/tooltip.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 8b352b5

[oliviertassinari]

A couple of ideas:

1. In the title, I think adding 🚧 like in MUI X would help skip the page from the search:

2. There is a strange change of cursor on the badge:

Screen.Recording.2023-07-19.at.02.36.00.mov

This seems to be an old bug, I stopped my origin hunt at 943f95f#diff-d1439e644fd94d980426ac362fcc36489ba82e228bab753e9a37dd96c61fded4R29 but it's even older. As far as I know, this style is crap, to remove. Joy UI has is correct IMHO https://deploy-preview-38025--material-ui.netlify.app/joy-ui/react-chip/#basic-usage.

material-ui/packages/mui-material/src/Chip/Chip.js

Line 96 in 3c99d8b

cursor: 'default',

cc @DiegoAndai

3. "do just want to point out that we may want to strike a max number of coming soon components in the docs given having 6 there already looks like a bit too many"

With MUI X, we literally added all the missing features in the docs, each with its own issues, we had about 20, it worked out really well. I think that the issue is with the design and wording. I would connect this back to #36279 (comment). Something like this would draw less attention.

[danilo-leal]

@oliviertassinari Interesting, appreciate the feedback! I'm a bit torn on using emojis ⎯ they look a bit cluttered to me but I also see that "Coming soon" as a label might be too long. Wondering if just using "Soon" would cut it?! I wish we could use actual icons though ⎯ would that be possible? Not necessarily on the chip but to help out with the search use case you mentioned, which definitely makes sense!

About the cursor change: is there anything we could do here to fix it?

[oliviertassinari]

but I also see that "Coming soon" as a label might be too long

@danilo-leal I had the feedback from a friend that "Coming soon" is confusing, he feels that has been waiting on one of the components forever (Joy UI's accordion). MUI X refers to them as "upcoming": https://mui.com/x/react-data-grid/#upcoming-features this is more relevant to me. So maybe simply "Planned" would be great?

I wish we could use actual icons though ⎯ would that be possible? Not necessarily on the chip but to help out with the search use case you mentioned, which definitely makes sense!

It's possible with the docs search, but it's a bit more involved, we need to store the data in the Algolia index. Since we are already using 🚧 for the page h1 with MUI X, I think that we could start there, and improve it as another step.

About the cursor change: is there anything we could do here to fix it?

• I think it would be great for @DiegoAndai to own the fix. It's likely a one-line change to Material UI 😁

[danilo-leal]

@oliviertassinari I'm cool with either of these (Planned or Upcoming), they're definitely better than "Coming soon" or "Soon"! 🤙 And about the emoji on the title, that's fair ⎯ too much work to flow with Algolia now 😬

[DiegoAndai]

Will look into the Chip cursor fix. Fixed in #38076

[danilo-leal]

@michaldudak & @oliviertassinari hey y'all, circling back to this as it would be great to have it merged this week. Some pending actions/questions that I have visibility of to move forward ⎯ let me know if I'm missing something:

1. Should we add a chip for all the other components this PR hasn't yet covered? (I'm checking the full list)
2. Refine the copy to communicate to a user's benefit (i.e., "help prioritize" to "see it faster")
3. Not really sure why the test_static test is failing ⎯ when running yarn:docs:api, some other test fails 🤔

[michaldudak]

Should we add a chip for all the other components this PR hasn't yet covered?

I feel like it could add too much noise. Plus, we don't really know if we'll work on all of these components. The issues are there to measure interest.

Refine the copy to communicate to a user's benefit (i.e., "help prioritize" to "see it faster")

I'd leave the exact content for people who are better with words than me, but I feel like it's important to underline why we need feedback (upvotes, but also features people would like to see in these components).

[oliviertassinari]

1. Should we add a chip for all the other components this PR hasn't yet covered?

Agree with Michal, 👍 for only the one we know we will build. I think we do this PR to 1. learn in which order they should be built & 2. to increase the trust with the developers that these will be eventually implemented.

More ideas for components that could make sense to build:

• Avatar: for the image loading logic.
• Context Menu: Material UI would need this as well
• Menu Bar
• Navigation Menu

2. Refine the copy to communicate to a user's benefit (i.e., "help prioritize" to "see it faster")

I think that the best drives are the ones anchored on our selfishness. I would be amazed if "see it faster" doesn't work better than "help us prioritize", at least based on how I would behave seeing each variant.

At the end of the day, we build components so that people can use them to solve their problems, "see it faster" has one less indirection toward what is eventually success () vs. "help us prioritize" which makes a hop with MUI.

Having said this, we could also remove the notion of MUI in the framing, while keeping the prioritization notion, as long as it's centered on win for the user, no issues on my end.

[danilo-leal]

as long as it's centered on win for the user

Sounds like a good motto for me! Resonates with what @samuelsycamore frequently makes us ask ourselves (i.e. "what is there for the reader?") 🤙