mui-toolpad icon indicating copy to clipboard operation
mui-toolpad copied to clipboard

Published 20 hours ago • verified publisher icon mui

Component discoverability in catalog

Open Janpot opened this issue 2 years ago • 1 comments

Aspects:

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

Benchmarks

  • Framer

    Screenshot 2022-05-01 at 18 14 19

  • retool Screenshot 2022-06-24 at 15 12 34

  • appsmith Screenshot 2022-06-24 at 15 13 46

  • notion

    Screenshot 2022-06-24 at 15 14 18

  • makeswift

    Screenshot 2022-06-24 at 15 15 35

  • Flutterflow

    Screenshot 2022-06-24 at 15 16 27

  • Jetadmin

    Screenshot 2022-06-24 at 15 18 30

Janpot avatar Jun 24 '22 13:06 Janpot

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

prakhargupta1 avatar Aug 23 '22 08:08 prakhargupta1

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

prakhargupta1 avatar Sep 07 '22 08:09 prakhargupta1

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.

Drawer mockup

gerdadesign avatar Sep 14 '22 01:09 gerdadesign

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.

prakhargupta1 avatar Sep 14 '22 04:09 prakhargupta1

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

Janpot avatar Sep 14 '22 09:09 Janpot

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.

Drawer version 2

gerdadesign avatar Sep 14 '22 17:09 gerdadesign

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.

bharatkashyap avatar Sep 14 '22 18:09 bharatkashyap

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

prakhargupta1 avatar Sep 14 '22 20:09 prakhargupta1