[ui] New component catalog #1003

bharatkashyap · 2022-09-14T21:24:07Z

Closes Component discoverability in catalog #598
Visual demonstration

Screen.Recording.2022-09-15.at.2.49.22.AM.mov

Please follow the the contributing guide on how to create great pull requests.

render · 2022-09-14T21:24:13Z

Your Render PR Server URL is https://toolpad-pr-1003.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-cch4cuirrk02bi4tqce0.

packages/toolpad-app/src/toolpadComponents/index.tsx

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentIcon.tsx

packages/toolpad-app/src/toolpadComponents/index.tsx

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalogItem.tsx

render · 2022-09-21T05:09:01Z

Your Render PR Server URL is https://toolpad-pr-1003.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-ccl9oqta4990ukkqsd40.

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx

Janpot · 2022-10-07T14:57:20Z

Few small points left:

Wasn't the "future components" section collapsible in the design as well?
Do the collapsible sections stay collapsed between reloads?
Should we update this icon as well? (I thought I saw it in one of the designs as a different icon but can't find it back now, maybe I'm dreaming)

gerdadesign · 2022-10-07T15:03:04Z

Looking great overall! 👏

Can we add a little space in between the svg icon and the name of the component? The mockup had a gap of 10px, but it may need to be a little different in this iteration vs the MUI dark theme version.
Wondering if it's clear enough that the WIP components are not available yet. Perhaps giving them a darker background color to make them look a little more disabled?

bharatkashyap · 2022-10-11T08:13:17Z

This is basically the Table material icon vs the Grid material icon. I thought Table fit the representation of the actual component better (even though we name it Grid). I also thought we might use the Grid icon for something that matched the icon more in the future — ex if we added drag and drop layout components like CSS Grid, Flex, etc., or if we wanted to add a grid view to the canvas and could toggle it on/off.

The issue seems to be that we don't currently have the Table icon in the @mui/icons-material package, from what I can see: https://mui.com/material-ui/material-icons/?query=table

Wasn't the "future components" section collapsible in the design as well?

it was! But in this current iteration, we still have a lot of vertical space left over, so doesn't seem critical to me if it's not collapsible at the moment.

I think it's not too much effort to make it collapsible, and in doing so, it feels to me more appropriate to switch the order of the items in the sidebar like so:

Wondering if it's clear enough that the WIP components are not available yet. Perhaps giving them a darker background color to make them look a little more disabled?

I'm not sure if the hover effect in this case should make it lighter:

Screen.Recording.2022-10-11.at.3.05.07.PM.mov

or darker:

Screen.Recording.2022-10-11.at.3.07.42.PM.mov

given that while the components are disabled, the button itself does trigger an action (of redirecting to the GitHub issue)

Did you mean adding a background across the entire section, like so:

I'll go ahead with adding a background to the entire section, combined with a darker background on hover, subject to correction.

gerdadesign · 2022-10-13T16:40:18Z

The issue seems to be that we don't currently have the Table icon in the @mui/icons-material package, from what I can see: https://mui.com/material-ui/material-icons/?query=table

Hmm, why would there be a discrepancy between this and the Material Icons? Is it possible to add it?

I think it's not too much effort to make it collapsible, and in doing so, it feels to me more appropriate to switch the order of the items in the sidebar like so:

Great! Thank you :D

I'll go ahead with adding a background to the entire section, combined with a darker background on hover, subject to correction.

Thank you! For the most part, darker seems to be the usual pattern for hover effects. This screenshot looks like the hover is quite dark—curious what's your system for choosing the gray values?

Janpot · 2022-10-13T17:18:50Z

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalogItem.tsx

+        borderStyle: kind === 'create' ? 'dashed' : 'solid',
+        color: 'text.secondary',
+        '&:hover': {
+          backgroundColor: 'action.disabled',


This looks right to me:

Suggested change

backgroundColor: 'action.disabled',

backgroundColor: 'action.hover',

It adds a black background with opacity, so it should be just additive with whatever is underneath. For future reference, I'd say adding action.disabled to a hover effect can be categorized as a code smell. And if we have to do it to make things look right, that'd probably be something that needs to fixed in the theme. Imagine a maintainer working on the theme in 6 months from now finding out we've been using action.disabled for all kinds of things other than disabled states.

bharatkashyap · 2022-10-13T19:57:15Z

Hmm, why would there be a discrepancy between this and the Material Icons? Is it possible to add it?

I think this is to do with the icon set being supported by @mui/icons-material being Material Icons, not Material Symbols

Thank you! For the most part, darker seems to be the usual pattern for hover effects. This screenshot looks like the hover is quite dark—curious what's your system for choosing the gray values?

Update this based on #1003 (comment) to have a lighter background on hover and a slightly darker background overall:

…d into catalog-ui

Janpot · 2022-10-14T07:28:51Z

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx

+                  borderWidth: 1,
+                  borderStyle: 'inset',
+                  borderColor: 'divider',
+                  backgroundColor: 'grey.200',


Will this work with a dark theme?

I've made some updates to this PR to handle the new theme on the catalog when it gets merged.

Screen.Recording.2022-10-14.at.4.29.42.PM.mov

The issue is that given that they are independent pull requests, I can't seem to make any change that is dependent on the other to either pull request.

I think the solution is to merge this first, pull these changes into #988 and then handle any other changes there.

I'm mainly wondering whether it's possible to make this more theme-agnostic? Instead of specifying a specific color, rather darken/lighten the background. Or darken/lighten a theme color.

Testing whether a generic dark theme produces acceptable results is just a matter of switching the palette mode.

Agreed, I've made a change to use darken which is theme agnostic and does the job:

Screen.Recording.2022-10-18.at.2.18.38.PM.mov

Janpot · 2022-10-16T18:30:00Z

I think this is to do with the icon set being supported by @mui/icons-material being Material Icons, not Material Symbols

Also see mui/material-ui#32846 (cc @oliviertassinari )

render · 2022-10-18T07:50:12Z

Your Render PR Server URL is https://toolpad-pr-1003.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-cd75lc9a6gdukrlliimg.

Janpot

👍 Alright, let's go

New component catalog

79265b3

oliviertassinari requested a deployment to catalog-ui - toolpad-db PR #1003 September 14, 2022 21:24 — with Render Abandoned

Merge branch 'master' into catalog-ui

65b55de

Janpot reviewed Sep 15, 2022

View reviewed changes

packages/toolpad-app/src/toolpadComponents/index.tsx Outdated Show resolved Hide resolved

Janpot reviewed Sep 15, 2022

View reviewed changes

packages/toolpad-app/src/toolpadComponents/index.tsx Outdated Show resolved Hide resolved

Janpot reviewed Sep 15, 2022

View reviewed changes

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentIcon.tsx Outdated Show resolved Hide resolved

Merge branch 'master' of github.com:mui/mui-toolpad into catalog-ui

9d3fde7

apedroferreira reviewed Sep 15, 2022

View reviewed changes

packages/toolpad-app/src/toolpadComponents/index.tsx Outdated Show resolved Hide resolved

bharatkashyap added 2 commits September 15, 2022 21:15

No need to lazy load, use an IconMap instead

2f42f40

Merge branch 'master' of github.com:mui/mui-toolpad into catalog-ui

509cf14

Janpot reviewed Sep 15, 2022

View reviewed changes

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalogItem.tsx Outdated Show resolved Hide resolved

Janpot reviewed Sep 15, 2022

View reviewed changes

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalogItem.tsx Outdated Show resolved Hide resolved

Janpot reviewed Sep 15, 2022

View reviewed changes

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalogItem.tsx Outdated Show resolved Hide resolved

bharatkashyap added 2 commits September 16, 2022 02:09

Use the sx prop better

5d0170e

Merge branch 'master' into catalog-ui

1ea010b

apedroferreira reviewed Sep 16, 2022

View reviewed changes

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalogItem.tsx Outdated Show resolved Hide resolved

apedroferreira approved these changes Sep 16, 2022

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 19, 2022

bharatkashyap added 4 commits September 20, 2022 22:06

Merge branch 'master' of github.com:mui/mui-toolpad into catalog-ui

3df3b74

Fix merge conflict

5f2b096

Merge branch 'catalog-ui' of github.com:mui/mui-toolpad into catalog-ui

0ca4912

Fix more tests

e1b1a36

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 21, 2022

No need for this

941638a

bharatkashyap requested a review from gerdadesign September 21, 2022 05:10

Janpot reviewed Oct 4, 2022

View reviewed changes

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx Show resolved Hide resolved

oliviertassinari requested a deployment to catalog-ui - toolpad-db PR #1003 October 11, 2022 08:07 — with Render Abandoned

bharatkashyap added 8 commits October 11, 2022 15:11

Review Jan, Gerda

be3fa46

Merge branch 'catalog-ui' of github.com:mui/mui-toolpad into catalog-ui

87d73b5

Merge branch 'master' into catalog-ui

9de5811

Missed removing this

c77b103

Merge branch 'catalog-ui' of github.com:mui/mui-toolpad into catalog-ui

25a12bc

This was for debugging only

3b30caa

Separate component ID and display name

ad99ac2

Disable entire future section, padding tweaks

d73a5f5

Janpot reviewed Oct 13, 2022

View reviewed changes

bharatkashyap added 2 commits October 14, 2022 01:31

Merge branches 'catalog-ui' and 'master' of github.com:mui/mui-toolpa…

536dc42

…d into catalog-ui

Correct hover theming

ae8be91

Janpot reviewed Oct 14, 2022

View reviewed changes

bharatkashyap added 3 commits October 14, 2022 16:36

Update to handle new theme, scroll fixes

99e28ca

Move this to theme PR

a2e18e2

Merge branch 'master' into catalog-ui

9a6a018

bharatkashyap added design: ui Design design: ux Design labels Oct 17, 2022

Make darkening theme agnostic

f3cd806

bharatkashyap added 2 commits October 18, 2022 13:37

Merge branch 'master' into catalog-ui

e21ce41

Only for debug

7cefccb

oliviertassinari requested a deployment to catalog-ui - toolpad-db PR #1003 October 18, 2022 08:33 — with Render Abandoned

Janpot approved these changes Oct 18, 2022

View reviewed changes

bharatkashyap merged commit 5a04a61 into master Oct 18, 2022

bharatkashyap deleted the catalog-ui branch October 18, 2022 09:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ui] New component catalog #1003

[ui] New component catalog #1003

bharatkashyap commented Sep 14, 2022

render bot commented Sep 14, 2022

render bot commented Sep 21, 2022

Janpot commented Oct 7, 2022

gerdadesign commented Oct 7, 2022 •

edited

Loading

bharatkashyap commented Oct 11, 2022 •

edited

Loading

gerdadesign commented Oct 13, 2022

Janpot Oct 13, 2022 •

edited

Loading

bharatkashyap commented Oct 13, 2022 •

edited

Loading

Janpot Oct 14, 2022

bharatkashyap Oct 14, 2022 •

edited

Loading

Janpot Oct 17, 2022

bharatkashyap Oct 18, 2022

Janpot commented Oct 16, 2022

render bot commented Oct 18, 2022

Janpot left a comment

	backgroundColor: 'action.disabled',
	backgroundColor: 'action.hover',

[ui] New component catalog #1003

[ui] New component catalog #1003

Conversation

bharatkashyap commented Sep 14, 2022

render bot commented Sep 14, 2022

render bot commented Sep 21, 2022

Janpot commented Oct 7, 2022

gerdadesign commented Oct 7, 2022 • edited Loading

bharatkashyap commented Oct 11, 2022 • edited Loading

gerdadesign commented Oct 13, 2022

Janpot Oct 13, 2022 • edited Loading

Choose a reason for hiding this comment

bharatkashyap commented Oct 13, 2022 • edited Loading

Janpot Oct 14, 2022

Choose a reason for hiding this comment

bharatkashyap Oct 14, 2022 • edited Loading

Choose a reason for hiding this comment

Janpot Oct 17, 2022

Choose a reason for hiding this comment

bharatkashyap Oct 18, 2022

Choose a reason for hiding this comment

Janpot commented Oct 16, 2022

render bot commented Oct 18, 2022

Janpot left a comment

Choose a reason for hiding this comment

gerdadesign commented Oct 7, 2022 •

edited

Loading

bharatkashyap commented Oct 11, 2022 •

edited

Loading

Janpot Oct 13, 2022 •

edited

Loading

bharatkashyap commented Oct 13, 2022 •

edited

Loading

bharatkashyap Oct 14, 2022 •

edited

Loading