Component discoverability in catalog

[Janpot]

Aspects:

• Catalog placement in overall app layout
• Search box to filter
• Organization of components in categories
• Visual cues (icon for each component)

Benchmarks

• Framer

  

• retool

• appsmith

• notion

  

• makeswift

  

• Flutterflow

  

• Jetadmin

  

[prakhargupta1]

More discussion in: https://github.com/mui/mui-toolpad/issues/344

[prakhargupta1]

As discussed yesterday, we can do this separately. @gerdadesign to share component library designs.

[gerdadesign]

As discussed, here's a quick screenshot of the component drawer in its current position, but just swapping the layout of the components inside. This is created with some styling exploration for the MUI dark theme in mind, but let me know if anything is unclear in order to move forward with this incremental change.

[prakhargupta1]

I think we decided to replace upvote icons with the icon illustration. We can show the icon near Upvote reference. Like Upvote :thumbsup: to get it prioritized.

[Janpot]

Shall we change the vertical "Components" text to "Component library" to be more in line with https://github.com/mui/mui-toolpad/issues/878?

[gerdadesign]

Updates with the name change & an alternative option for showing the WIP components.

Personally, I feel like the 👍 icon better connects the people to action we want them to take. In the second version, the instruction is at the top (and requires users to read) instead of visually connected on the button itself. The boxes have to look disabled to show you can't use them, even though they are actually clickable and we do want you to take an action on them.

[bharatkashyap]

In the second version, the instruction is at the top (and requires users to read) instead of visually connected on the button itself.

Agreed; however, the second version also requires users to read the name of the component instead of being able to see what component they could get if they upvoted. I would personally feel a greater sense of "missing out" if I saw the component icon, which would then prompt me to go and upvote. Seeing an upvote icon might not trigger in me the need to go and upvote at all.

[prakhargupta1]

In case 1, I think having many upvote icons draws user attention from the more significant upper section. I would prefer 2nd UI.