Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Update the nav order #28323

Merged
merged 9 commits into from Sep 15, 2021
Merged

[docs] Update the nav order #28323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d0f0b7d
[Docs] Update the nav order
mbrookes Sep 13, 2021
565713e
Remove the padding between nav list items
mbrookes Sep 13, 2021
994ba01
Increase the padding again
mbrookes Sep 14, 2021
2f284aa
yarn docs:i18n
eps1lon Sep 15, 2021
e9b3eac
Merge remote-tracking branch 'upstream/master' into docs-nav-order
eps1lon Sep 15, 2021
5ce5b09
cleanup
oliviertassinari Sep 15, 2021
955567d
remove false class name
oliviertassinari Sep 15, 2021
751ecd8
fix date picker group style
oliviertassinari Sep 15, 2021
59eff7b
Apply suggestions from code review
mbrookes Sep 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 7 additions & 8 deletions docs/src/modules/components/AppNavDrawerItem.js
View file
Open in desktop
Expand Up @@ -128,9 +128,9 @@ const ItemButton = styled(Item, {
}
return theme.palette.text.primary;
})(),
fontSize: depth === 1 ? theme.typography.pxToRem(12) : theme.typography.pxToRem(14.5),
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,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yeah, great catch. We aren't importing the 600 font-weight, only 400, 500, and 700. 600 ends up rendering the 700.

margin: depth === 0 ? theme.spacing(0.5, 0) : '8px 0 4px',
'&:hover': {
backgroundColor: depth === 0 ? '' : alpha(theme.palette.primary.main, 0),
color: (() => {
Expand Down Expand Up @@ -161,7 +161,7 @@ const ItemButton = styled(Item, {
const StyledLi = styled('li', { shouldForwardProp: (prop) => prop !== 'depth' })(
({ theme, depth }) => {
return {
padding: depth === 0 ? '0 10px' : '4px 0',
padding: depth === 0 ? '0 10px' : '2px 0',
marginTop: depth === 0 ? theme.spacing(1) : undefined,
display: 'block',
};
Expand All @@ -187,7 +187,7 @@ export default function AppNavDrawerItem(props) {
};

const hasIcon = icon && iconsMap[icon];
const IconComponent = hasIcon ? iconsMap[icon] : React.Fragment;
const IconComponent = hasIcon ? iconsMap[icon] : null;
const iconProps = hasIcon ? { fontSize: 'small', color: 'primary' } : {};
const iconElement = hasIcon ? (
<Box
Expand All @@ -197,8 +197,7 @@ export default function AppNavDrawerItem(props) {
alignItems: 'center',
height: '100%',
marginRight: 1.5,
py: 0.5,
px: 0.5,
p: 0.5,
borderRadius: '5px',
backgroundColor: (theme) =>
theme.palette.mode === 'dark'
Expand Down Expand Up @@ -241,7 +240,7 @@ export default function AppNavDrawerItem(props) {
depth={depth}
hasIcon={hasIcon}
disableRipple
className={topLevel && 'algolia-lvl0'}
className={topLevel ? 'algolia-lvl0' : null}
onClick={handleClick}
>
{iconElement}
Expand Down
112 changes: 56 additions & 56 deletions docs/src/pages.ts
View file
Open in desktop
Expand Up @@ -46,18 +46,6 @@ const pages: readonly MuiPage[] = [
pathname: '/components',
icon: 'ToggleOnIcon',
children: [
{
pathname: '/components',
subheader: '/components/layout',
children: [
{ pathname: '/components/box' },
{ pathname: '/components/container' },
{ pathname: '/components/grid' },
{ pathname: '/components/stack' },
{ pathname: '/components/image-list' },
{ pathname: '/components/hidden' },
],
},
{
pathname: '/components',
subheader: '/components/inputs',
Expand All @@ -79,17 +67,30 @@ const pages: readonly MuiPage[] = [
},
{
pathname: '/components',
subheader: '/components/navigation',
subheader: '/components/data-display',
children: [
{ pathname: '/components/bottom-navigation' },
{ pathname: '/components/breadcrumbs' },
{ pathname: '/components/drawers', title: 'Drawer' },
{ pathname: '/components/links', title: 'Link' },
{ pathname: '/components/menus', title: 'Menu' },
{ pathname: '/components/pagination' },
{ pathname: '/components/speed-dial' },
{ pathname: '/components/steppers', title: 'Stepper' },
{ pathname: '/components/tabs' },
{ pathname: '/components/avatars', title: 'Avatar' },
{ pathname: '/components/badges', title: 'Badge' },
{ pathname: '/components/chips', title: 'Chip' },
{ pathname: '/components/dividers', title: 'Divider' },
{ pathname: '/components/icons' },
{ pathname: '/components/material-icons' },
{ pathname: '/components/lists', title: 'List' },
{ pathname: '/components/tables', title: 'Table' },
{ pathname: '/components/tooltips', title: 'Tooltip' },
{ pathname: '/components/typography' },
],
},
{
pathname: '/components',
subheader: '/components/feedback',
children: [
{ pathname: '/components/alert' },
{ pathname: '/components/backdrop' },
{ pathname: '/components/dialogs' },
{ pathname: '/components/progress' },
{ pathname: '/components/skeleton' },
{ pathname: '/components/snackbars', title: 'Snackbar' },
],
},
{
Expand All @@ -104,30 +105,45 @@ const pages: readonly MuiPage[] = [
},
{
pathname: '/components',
subheader: '/components/feedback',
subheader: '/components/navigation',
children: [
{ pathname: '/components/alert' },
{ pathname: '/components/backdrop' },
{ pathname: '/components/dialogs' },
{ pathname: '/components/progress' },
{ pathname: '/components/skeleton' },
{ pathname: '/components/snackbars', title: 'Snackbar' },
{ pathname: '/components/bottom-navigation' },
{ pathname: '/components/breadcrumbs' },
{ pathname: '/components/drawers', title: 'Drawer' },
{ pathname: '/components/links', title: 'Link' },
{ pathname: '/components/menus', title: 'Menu' },
{ pathname: '/components/pagination' },
{ pathname: '/components/speed-dial' },
{ pathname: '/components/steppers', title: 'Stepper' },
{ pathname: '/components/tabs' },
],
},
{
pathname: '/components',
subheader: '/components/data-display',
subheader: '/components/layout',
children: [
{ pathname: '/components/avatars', title: 'Avatar' },
{ pathname: '/components/badges', title: 'Badge' },
{ pathname: '/components/chips', title: 'Chip' },
{ pathname: '/components/dividers', title: 'Divider' },
{ pathname: '/components/icons' },
{ pathname: '/components/material-icons' },
{ pathname: '/components/lists', title: 'List' },
{ pathname: '/components/tables', title: 'Table' },
{ pathname: '/components/tooltips', title: 'Tooltip' },
{ pathname: '/components/typography' },
{ pathname: '/components/box' },
{ pathname: '/components/container' },
{ pathname: '/components/grid' },
{ pathname: '/components/stack' },
{ pathname: '/components/image-list' },
{ pathname: '/components/hidden' },
],
},
{
pathname: '/components',
subheader: '/components/utils',
children: [
{ pathname: '/components/click-away-listener' },
{ pathname: '/components/css-baseline', title: 'CSS Baseline' },
{ pathname: '/components/modal' },
{ pathname: '/components/no-ssr', title: 'No SSR' },
{ pathname: '/components/popover' },
{ pathname: '/components/popper' },
{ pathname: '/components/portal' },
{ pathname: '/components/textarea-autosize' },
{ pathname: '/components/transitions' },
{ pathname: '/components/use-media-query', title: 'useMediaQuery' },
],
},
{
Expand Down Expand Up @@ -157,22 +173,6 @@ const pages: readonly MuiPage[] = [
{ pathname: '/components/data-grid/group-pivot', title: '🚧 Group & Pivot' },
],
},
{
pathname: '/components',
subheader: '/components/utils',
children: [
{ pathname: '/components/click-away-listener' },
{ pathname: '/components/css-baseline', title: 'CSS Baseline' },
{ pathname: '/components/modal' },
{ pathname: '/components/no-ssr', title: 'No SSR' },
{ pathname: '/components/popover' },
{ pathname: '/components/popper' },
{ pathname: '/components/portal' },
{ pathname: '/components/textarea-autosize' },
{ pathname: '/components/transitions' },
{ pathname: '/components/use-media-query', title: 'useMediaQuery' },
],
},
{
pathname: '/components',
subheader: '/components/lab',
Expand Down
80 changes: 40 additions & 40 deletions docs/translations/translations.json
View file
Open in desktop
Expand Up @@ -173,13 +173,6 @@
"/getting-started/supported-platforms": "Supported Platforms",
"/getting-started/support": "Support",
"/components": "Components",
"/components/layout": "Layout",
"/components/box": "Box",
"/components/container": "Container",
"/components/grid": "Grid",
"/components/stack": "Stack",
"/components/image-list": "Image List",
"/components/hidden": "Hidden",
"/components/inputs": "Inputs",
"/components/autocomplete": "Autocomplete",
"/components/buttons": "Button",
Expand All @@ -194,28 +187,6 @@
"/components/text-fields": "Text field",
"/components/transfer-list": "Transfer List",
"/components/toggle-button": "Toggle Button",
"/components/navigation": "Navigation",
"/components/bottom-navigation": "Bottom Navigation",
"/components/breadcrumbs": "Breadcrumbs",
"/components/drawers": "Drawer",
"/components/links": "Link",
"/components/menus": "Menu",
"/components/pagination": "Pagination",
"/components/speed-dial": "Speed Dial",
"/components/steppers": "Stepper",
"/components/tabs": "Tabs",
"/components/surfaces": "Surfaces",
"/components/accordion": "Accordion",
"/components/app-bar": "App Bar",
"/components/cards": "Card",
"/components/paper": "Paper",
"/components/feedback": "Feedback",
"/components/alert": "Alert",
"/components/backdrop": "Backdrop",
"/components/dialogs": "Dialogs",
"/components/progress": "Progress",
"/components/skeleton": "Skeleton",
"/components/snackbars": "Snackbar",
"/components/data-display": "Data Display",
"/components/avatars": "Avatar",
"/components/badges": "Badge",
Expand All @@ -227,6 +198,46 @@
"/components/tables": "Table",
"/components/tooltips": "Tooltip",
"/components/typography": "Typography",
"/components/feedback": "Feedback",
"/components/alert": "Alert",
"/components/backdrop": "Backdrop",
"/components/dialogs": "Dialogs",
"/components/progress": "Progress",
"/components/skeleton": "Skeleton",
"/components/snackbars": "Snackbar",
"/components/surfaces": "Surfaces",
"/components/accordion": "Accordion",
"/components/app-bar": "App Bar",
"/components/cards": "Card",
"/components/paper": "Paper",
"/components/navigation": "Navigation",
"/components/bottom-navigation": "Bottom Navigation",
"/components/breadcrumbs": "Breadcrumbs",
"/components/drawers": "Drawer",
"/components/links": "Link",
"/components/menus": "Menu",
"/components/pagination": "Pagination",
"/components/speed-dial": "Speed Dial",
"/components/steppers": "Stepper",
"/components/tabs": "Tabs",
"/components/layout": "Layout",
"/components/box": "Box",
"/components/container": "Container",
"/components/grid": "Grid",
"/components/stack": "Stack",
"/components/image-list": "Image List",
"/components/hidden": "Hidden",
"/components/utils": "Utils",
"/components/click-away-listener": "Click Away Listener",
"/components/css-baseline": "CSS Baseline",
"/components/modal": "Modal",
"/components/no-ssr": "No SSR",
"/components/popover": "Popover",
"/components/popper": "Popper",
"/components/portal": "Portal",
"/components/textarea-autosize": "Textarea Autosize",
"/components/transitions": "Transitions",
"/components/use-media-query": "useMediaQuery",
"/components/data-grid": "Data Grid",
"/components/data-grid/overview": "Overview",
"/components/data-grid/demo": "Demo",
Expand All @@ -246,17 +257,6 @@
"/components/data-grid/virtualization": "Virtualization",
"/components/data-grid/accessibility": "Accessibility",
"/components/data-grid/group-pivot": "🚧 Group & Pivot",
"/components/utils": "Utils",
"/components/click-away-listener": "Click Away Listener",
"/components/css-baseline": "CSS Baseline",
"/components/modal": "Modal",
"/components/no-ssr": "No SSR",
"/components/popover": "Popover",
"/components/popper": "Popper",
"/components/portal": "Portal",
"/components/textarea-autosize": "Textarea Autosize",
"/components/transitions": "Transitions",
"/components/use-media-query": "useMediaQuery",
"/components/lab": "Lab",
"/components/about-the-lab": "About the lab 🧪",
"/components/lab-pickers": "Date / Time",
Expand Down