[docs] Update the nav order#28323
[docs] Update the nav order#28323mnajdova merged 9 commits intomui:masterfrom mbrookes:docs-nav-order
Conversation
danilo-leal
left a comment
There was a problem hiding this comment.
I'm ok with it, it makes sense for me!
Co-authored-by: danilo leal <67129314+danilo-leal@users.noreply.github.com>
Fair enough, but could we "skew" the nav item header to more clearly recognize what's the header of what? Current
Proposal
diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index f2cae9359b..04a419f91e 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -130,7 +130,7 @@ const ItemButton = styled(Item, {
})(),
fontSize: depth === 1 ? theme.typography.pxToRem(12) : theme.typography.pxToRem(14.5),
fontWeight: depth === 1 ? 700 : 500,
- margin: theme.spacing(0.5, 0),
+ margin: depth === 0 ? theme.spacing(0.5, 0) : '8px 0 4px',
'&:hover': {
backgroundColor: depth === 0 ? '' : alpha(theme.palette.primary.main, 0),
color: (() => { |
|
As a side note, on
We could consider grey 600 instead of 500 to improve the contrast of the subheader. |
Agree 👍 |
|
I am mering this in order to include it before the stable release. |
| fontWeight: depth === 1 ? 700 : 500, | ||
| margin: theme.spacing(0.5, 0), | ||
| fontSize: theme.typography.pxToRem(depth === 0 ? 14.5 : 12), | ||
| fontWeight: depth === 0 ? 600 : 700, |
There was a problem hiding this comment.
I thought we said we wouldn't use 600? #28327. In #28323 (comment) I mean for the color, not the font-weight 👼 .
I guess it's another example where not using design tokens can cost us.
There was a problem hiding this comment.
Oh yeah, great catch. We aren't importing the 600 font-weight, only 400, 500, and 700. 600 ends up rendering the 700.
preview: https://deploy-preview-28323--material-ui.netlify.app/components/buttons/
This PR updates the order of the components in the nav to something slightly more logical:
Components
This roughly flows from the "inside" to the "outside" of a UI, and with the most common / popular components first.
The main exceptions are Data grid, which is a data display component, but isn't in core; and Lab. Utils has always been an odd one out, since they aren't all components... I could also see Surfaces and Navigation being swapped, but no strong preference.
I also think we should remove the padding between list items. The nav is too long already:
This also makes navigation feel snappier not having the dead space between items when moving the pointer.