[docs-infra] Mark unstable components with a chip in the nav drawer

[michaldudak]

Realizing we don't have any way of showing unstable components, I added a chip (similarly to "planned") to the app nav drawer entries.
I marked Base UI's Number Input as such:

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 859b0f1

[alexfauquette]

On X we were using 🧪 in the name, but a chip seems more stable.

I let @danilo-leal make sure the design is 👍

---

@mui/x We will be able to replace the page title including a 🧪 by the property unstable: true

[flaviendelangle]

On X we have a "NEW" badge that is also often used on unstable elements.
We should probably not keep both.

[alexfauquette]

Field components can stay with "new" and charts move to "unstable"

[noraleonte]

Field components can stay with "new" and charts move to "unstable"

Having both a 'new' and 'unstable' chips is a bit confusing. We should probably have a clear definition of what is new and what is unstable 🤔 What do we mark as new? A new docs page? A new library?

[danilo-leal]

Design-wise, it looks good! But echoing folks here on whether we want to have both New and Unstable or one or the other? From a distance, they don't sound like the same thing ⎯ I'd assume that New is something fresh that's ready for me to use, whereas Unstable sounds like a beta thing?

[michaldudak]

I see it exactly like that: "New" is ready to use, stable, and shiny, whereas "unstable" is, well, unstable :) Nothing in "new" suggests the component's API can still change between majors.

We could add tooltips to provide further explanation to all the chips.

[michaldudak]

We've discussed the issue with the Core team. The word "unstable" has perhaps some negative connotations. Other options that we feel would work better include "alpha" or "experimental". Do you have any preferences in this matter?

[flaviendelangle]

I like experimental, because "alpha" can be weird when it's in a component that is not itself in alpha

[samuelsycamore]

The only drawback I could see for "experimental" is that it's a longer word, so it takes up a lot of space on the menu! 😅 But as long as it works design-wise then I think it's preferable over "unstable."

[danilo-leal]

I'm also up for "experimental", but it will break on the side nav if added to components with a big name. For the Number Input particularly, it works all right. But not sure if still the best option.

At the Core meeting earlier today, we discussed the concept of the Lab and how it overlaps with what we understand "unstable" to be. In a world where "components in the lab" don't necessarily mean that they're available through another package (i.e., @mui/lab), we could use the word "lab" to refer to those in an experimental phase. What do y'all think? Of course, a much smaller label that also can convey the same thing.

[mnajdova]

We could also use a "preview" label instead of unstable, this is what Radix UI uses, it shorter and to the point :)

[flaviendelangle]

we discussed the concept of the Lab and how it overlaps with what we understand "unstable" to be. In a world where "components in the lab" don't necessarily mean that they're available through another package (i.e., @mui/lab), we could use the word "lab" to refer to those in an experimental phase. What do y'all think? Of course, a much smaller label that also can convey the same thing.

By the way, how does the lab package will evolve in the future?
Will you have a lab-joy, lab-material and lab-base?
Will you have only a lab for material (but why would material have a different structure than the other lines of product)?
Do you plan on removing the lab at some point and have the "unstable" components live in their final package?

[michaldudak]

Do you plan on removing the lab at some point and have the "unstable" components live in their final package?

We're leaning toward it. Having a separate lab package for each stable one would require much bigger effort.

[michaldudak]

I changed the text to "Preview". @danilo-leal let me know what you think about the color. I wouldn't leave it as grey, as it's too similar to "Planned"

[danilo-leal]

@michaldudak cool, that's looking good! @mnajdova killed it with this word suggestion 😬 It doesn't seem we're using a blue chip yet. I think I'd use that and save the green one for "New", it seems more fitting. So, the final arrangement would be:

{legacy && <Chip label="Legacy" sx={sxChip('warning')} />}
{newFeature && <Chip label="New" sx={sxChip('success')} />}
{planned && <Chip label="Planned" sx={sxChip('grey')} />}
{unstable && <Chip label="Preview" sx={sxChip('primary')} />}

[michaldudak]

Blue it is!

[danilo-leal]

Awesome! 🚢 it!

(Forgot to mark the review above as approve 🤦)