[docs] Add products identifier and drawer

[siriwatknp]

1st iteration for the product identifier.

Note: base is under the feature toggle which will be enabled after the migration (new content)

---

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

[mui-pr-bot]

No bundle size changes

Generated by 🚫 dangerJS against cd44657

[mbrookes]

As mentioned on the related issue: "I'm not sure it will be immediately obvious with just the icon how to navigate between products." It would take some usability testing to prove it definitively, but I think playing with this demo is still pretty convincing.

[siriwatknp]

As mentioned on the related issue: "I'm not sure it will be immediately obvious with just the icon how to navigate between products." It would take some usability testing to prove it definitively, but I think playing with this demo is still pretty convincing.

@danilo-leal Is the preview good enough for us to move forward?

[danilo-leal]

I think there are potential improvements to the design + structure but thought of asking first what were you expecting with this PR: do we discuss things in more detail now or were you thinking of moving on with this in rough shape to join the pieces first and later refine it?

[siriwatknp]

I think there are potential improvements to the design + structure but thought of asking first what were you expecting with this PR: do we discuss things in more detail now or were you thinking of moving on with this in rough shape to join the pieces first and later refine it?

My intention is that this PR should have a good enough version that can show to users (in production) and then refine in the future. So, we can edit, change the UI as we'd like to have the first version that is good enough for the users to navigate between products but we should have a deadline. Otherwise, I can't proceed with the next phase in #30091

design + structure

I am not sure I understand what you meant by structure (the URLs?)

[danilo-leal]

Regarding structure, I was mainly talking about how we're presenting the products in the drawer. My only two considerations really are actually regarding MUI X and Styles.

About the first, I don't think we should display each component as if they were separated products, equivalent to Material and Joy, in Core's case. I believe it should only be MUI X, like in the image's left example. And regarding the latter, I was wondering if maybe it wouldn't make sense to hold Styles content inside MUI System docs? It seems reasonable to have in the current styling solution docs a section explaining what happened with the old one and what are the plans for it. Otherwise, it would be only 3 lonely pages (what's left about Styles).

About the design, I think I can tweak a few things here and there myself, mostly polishing it up. I think it's also a good opportunity to tackle the docs app bar on mobile, which is almost entirely all buttons at this point 😅

[mnajdova]

My only two considerations really are actually regarding MUI X and Styles.

The contra argument would be that we have packages there, and I think it makes sense to have the docs per package, at least I think it would be clearer when you open docs that it is the docs for one particular package. Should be easier to find what's where that way :)

[danilo-leal]

That's an interesting point of view. Regarding the styles, even though it is indeed a stand-alone package, I still think it makes sense to live inside the System docs, as a subsection, mainly because we could explain in context why JSS has been deprecated. It's an opportunity to have a more in-depth comparison between the styling approaches and to expand on how to migrate and think about them, which is a fairly hot topic as seen in the survey (devs upset about JSS deprecation therefore not migrating).

Regarding MUI X, I'm now a bit mixed up 😅 I suppose then that when Tree View and other X components are released, they'll be available under their own packages, for example, x-tree-view and x-charts, right? (please correct me if I'm wrong!) @DanailH and @m4theushw - Given that, maybe it makes sense, yeah to have Data Grid as it is now on this prototype but I confess it feels a bit inconsistent with Core to me, but I'm not sure that's a problem anyway, so...

[flaviendelangle]

Regarding MUI X, I'm now a bit mixed up 😅 I suppose then that when Tree View and other X components are released, they'll be available under their own packages, for example, x-tree-view and x-charts, right? (please correct me if I'm wrong!)

Exactly, the next one will be the date pickers package hopefully in a few weeks.

[siriwatknp]

@danilo-leal I found a lot of comments and WIP, how do you want to proceed with this PR.

[danilo-leal]

I've cleaned up the files a bit and iterated following Matt's suggestion. I think it's looking good but this iteration has some considerations to think about:

• Given that the logo and product identifier are sitting on the Nav drawer, it's not possible to increase the box width that holds them without affecting the whole Nav drawer component width. I increased a bit, so they have some breathing room, but it's still a kinda small container. Ended up removing the Apps icon because of that as well, which I'm not sure whether its good or bad. It's cleaner but does its absence impact functionality clarity?
• Just to get it out: the closeness of the current doc selected to the Diamond sponsor button is bothering me a bit. Not sure if we should do something about it.
• We don't solve the drawer on top of drawer issue. I honestly think it's not that big of a deal though.

@siriwatknp Based on what we discussed a few weeks ago at the Weekly meeting, as for not delaying the whole migration effort, I believe that from a UI perspective, we're good enough to move forward, considering that during the Post Migration phase, before actually making the separation official, we'll have a moment to do some final reviews and polishing. Also, as I tweaked a bunch of things, I think now it's a good time to code review to guarantee I haven't broken too much stuff 😅

[mbrookes]

A couple of observations on the current iteration:

• We're back with drawer-on-drawer, rather than trying a menu. It isn't terrible, but...
• We're using a right-chevron to mean three things:
  • Product: Open a drawer
  • Sponsors: Go to page
  • Nav: Open section

But we can revisit it later if this is in the critical path and holding things up.

[mnajdova]

Let's merge and refine it at later stage, before we put this in production

[oliviertassinari]

Great to see progress on this problem!

There is something I don't understand with the data grid:

Will we have a space for each MUI X component? Does it mean that as a developer I will have to switch between different docs when I used the data grid, then a sparkling, then a date picker, then an upload component, then a tree-view (that we could migrate tomorrow)? The UI suggests it:

From what I understand the objective is to have one "space" for all the MUI X components (we need nested sidenav support in MUI Core too, e.g. the autocomplete), so maybe we could consider how to clarify the UI of the popup.

[siriwatknp]

Does it mean that as a developer I will have to switch between different docs when I used the data grid, then a sparkling, then a date picker, then an upload component, then a tree-view

I think this makes sense. @flaviendelangle seems to agree with the idea of having data-grid its own space (other advanced components will follow the same).

Advanced components are far more complex than usual components and may have different features, so having their own space allow them to use all 3 levels of the Sidebar efficiently (by grouping them together within one sidebar is not gonna work long term as you have seen DataGrid, in the core sidebar)

Some examples:

• https://recharts.org/en-US/examples
• https://recharts.org/en-US/api

From my developer perspective, I am okay to switch between advanced components because not every project needs all advanced components. If I am working on the feature that requires data-grid component, there are more chances that I will work with data-grid at least whole day (no need to jump to other advanced components). Worse case, if I have to jump between components, I will just open a new tab.

cc @mui-org/core @mui-org/x for opinions (we should have an agreement on this before doing the migration)

[oliviertassinari]

we should have an agreement on this before doing the migration

Right, I had assumed that we were already aligned with MUI X = one product (not a product line) based on the visuals of the animation that Danilo crated but I see that we have never really weighed the pros and cons.

I have added a section at the footer of the notion's page https://www.notion.so/mui-org/Documentation-per-product-decision-time-d9347d7d37b641129d2fea12d68555d2#2539dfbebf76479580a4037464a606f6 so we can discuss it further.