From 06fbeea213c94644782d6898b108eee1fa64f757 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 3 Apr 2024 17:39:11 -0300 Subject: [PATCH] [blog] Refresh the design slightly (#41697) --- docs/pages/blog.tsx | 239 +++++++++--------- docs/pages/blog/mui-x-v7.md | 32 +-- docs/src/modules/components/TopLayoutBlog.js | 13 + .../mui-docs/src/branding/brandingTheme.ts | 14 +- 4 files changed, 155 insertions(+), 143 deletions(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 544fcd02b06a42..fc98fa100f8f9a 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { InferGetStaticPropsType } from 'next'; import { useRouter } from 'next/router'; -import { alpha } from '@mui/material/styles'; import Avatar from '@mui/material/Avatar'; import AvatarGroup from '@mui/material/AvatarGroup'; import Box from '@mui/material/Box'; @@ -64,19 +63,12 @@ function PostPreview(props: BlogPost) { /> ))} - + )} {props.date && ( - + {new Date(props.date).toDateString()} )} @@ -164,6 +156,7 @@ function PostPreview(props: BlogPost) { href={`/blog/${props.slug}`} id={`describe-${props.slug}`} endIcon={} + size="small" sx={{ mt: { xs: 0.5, md: 0 }, p: { xs: 0, sm: '6px 8px' } }} > Read more @@ -173,7 +166,7 @@ function PostPreview(props: BlogPost) { ); } -const PAGE_SIZE = 5; +const PAGE_SIZE = 7; export default function Blog(props: InferGetStaticPropsType) { const router = useRouter(); @@ -236,6 +229,7 @@ export default function Blog(props: InferGetStaticPropsType } /> + + + - theme.applyDarkStyles({ - boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.4)', - }), - ]} + sx={(theme) => ({ + p: 2, + display: 'flex', + flexDirection: 'column', + backgroundImage: (theme.vars || theme).palette.gradients.radioSubtle, + boxShadow: '0 4px 12px rgba(170, 180, 190, 0.2)', + ...theme.applyDarkStyles({ + background: (theme.vars || theme).palette.primaryDark[900], + backgroundImage: (theme.vars || theme).palette.gradients.radioSubtle, + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)', + }), + })} > {post.image && ( ))} - - + Posts{' '} @@ -342,94 +330,105 @@ export default function Blog(props: InferGetStaticPropsType ({ + sx={{ position: 'sticky', - top: 100, - alignSelf: 'start', - mb: 2, - mt: { xs: 3, sm: 2, md: 9 }, // margin-top makes the title appear when scroll into view - p: 2, - borderRadius: 1, - border: '1px solid', - borderColor: (theme.vars || theme).palette.divider, - boxShadow: '0px 2px 6px rgba(170, 180, 190, 0.2)', - ...theme.applyDarkStyles({ - background: alpha(theme.palette.primaryDark[700], 0.2), - boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.2)', - }), - })} + top: 90, + mt: { xs: 0, md: 9 }, + mb: { xs: 2, md: 0 }, + display: 'flex', + flexDirection: 'column', + gap: 2, + '& .MuiPaper-root': { + p: 2, + bgcolor: 'transparent', + borderColor: 'divider', + }, + }} > - - Filter by tag - - - {Object.keys(tagInfo).map((tag) => { - const selected = !!selectedTags[tag]; - return ( - { - postListRef.current?.scrollIntoView(); - removeTag(tag); - }, - } - : { - label: tag, - onClick: () => { - postListRef.current?.scrollIntoView(); - router.push( - { - query: { - ...router.query, - tags: tag, + + + Filter posts by tag + + + {Object.keys(tagInfo).map((tag) => { + const selected = !!selectedTags[tag]; + return ( + { + postListRef.current?.scrollIntoView(); + removeTag(tag); + }, + } + : { + label: tag, + onClick: () => { + postListRef.current?.scrollIntoView(); + router.push( + { + query: { + ...router.query, + tags: tag, + }, }, - }, - undefined, - { shallow: true }, - ); - }, - })} - size="small" - sx={{ - py: 1.2, - }} - /> - ); - })} - - - - Want to hear more from us? - - - Get up to date with everything MUI-related through our social media: - - svg': { mr: 1 } }}> - - - GitHub - - - X - - - - Discord - - - - LinkedIn - - - - Youtube - - + undefined, + { shallow: true }, + ); + }, + })} + size="small" + sx={{ + py: 1.2, + }} + /> + ); + })} + + + + + Want to hear more from us? + + + Get up to date with everything MUI-related through our social media: + + svg': { mr: 1 } }}> + + + GitHub + + + X + + + + Discord + + + + LinkedIn + + + + Youtube + + +
diff --git a/docs/pages/blog/mui-x-v7.md b/docs/pages/blog/mui-x-v7.md index e95aadeedbe9bd..84106e4c649e51 100644 --- a/docs/pages/blog/mui-x-v7.md +++ b/docs/pages/blog/mui-x-v7.md @@ -56,11 +56,11 @@ The Data Grid now offers a more responsive experience with smoother scrolling an On its first announcement, some of these improvements were showcased, but during the beta phase, the scrolling performance was further polished for an even better user experience. -
+
-
A before and after showcase, first with horizontal and then with vertical scrolling.
+
A before and after showcase, first with horizontal and then with vertical scrolling.
:::warning @@ -81,9 +81,9 @@ As part of an overarching project aimed at enhancing usability in managing colum The goal is to further enhance this panel by incorporating additional column management functions, such as column reordering and pinning. Additionally, the internal component has been extracted to ease the introduction of the upcoming pivoting UI. -
+
The new column management panel design -
The new column managemeent panel design
+
The new column managemeent panel design
### Date Object support in filter model @@ -98,9 +98,9 @@ Introducing a separate entry point for locales has significantly reduced the bun As a reference, with the `@mui/x-data-grid` npm package, this change led to a reduction of approximately 19% – shrinking the bundle size from [114.2kB](https://bundlephobia.com/package/@mui/x-data-grid@6.19.2) to [92.9kB](https://bundlephobia.com/package/@mui/x-data-grid@7.0.0). -
+
A chart showcasing the bundle size change -
A chart showcasing the Data Grid's bundle size change.
+
A chart showcasing the Data Grid's bundle size change.
### New stable features @@ -233,9 +233,9 @@ The newest gauge charts are designed to offer a visually compelling way to displ These charts are particularly useful for showing progress toward a goal or displaying a value within a predefined range. With customizable options for pointers, sizes, and colors, they allow for a personalized visual representation that makes it easy for users to interpret data at a glance. -
+
Gauge charts -
Three different styles of Gauge charts.
+
Three different styles of Gauge charts.
Check out the [new charts](/x/react-charts/gauge/) documentation page for detailed information. @@ -246,9 +246,9 @@ The charts now have click event handlers, so users can interact with chart eleme This feature makes charts more interactive and transforms the way users can explore the data, improving the overall user experience with details and other information accessed on demand. -
+
Gauge charts -
A pie chart with an item click handler.
+
A pie chart with an item click handler.
You can find more information about specific event handlers for each type of chart by visiting their respective overview page: @@ -261,9 +261,9 @@ You can find more information about specific event handlers for each type of cha The Axis component now features a built-in Grid, offering users a structured layout for easier data analysis and visualization. -
+
A Chart axis showcasing an horizontal grid -
A Chart axis with an horizontal grid.
+
A Chart axis with an horizontal grid.
For details on its usage and configuration, please refer to the [Grid section](/x/react-charts/axis/#grid) in the documentation. @@ -272,9 +272,9 @@ For details on its usage and configuration, please refer to the [Grid section](/ The `ChartsReferenceLine` component enhances data visualization, providing users with a clear reference to better understand and analyze key data points. -
+
A chart with a reference line -
A line chart using a reference line.
+
A line chart using a reference line.
You can find more details on its [documentation](/x/react-charts/axis/#reference-line). @@ -315,11 +315,11 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'; The latest addition to the Date and Time Pickers suite is the ``, a most anticipated component designed to enrich the user experience with the advanced date and time selection. This intuitive picker simplifies the process of selecting date and time ranges, making it ideal for applications that require detailed scheduling or period selection. -
+
-
A video showcasing a date and time range selection.
+
A video showcasing a date and time range selection.
Learn how to use and customize the [new component](/x/react-date-pickers/date-time-range-picker/) now! diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index be14672647dbc1..e7cf4068a84f5c 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -180,6 +180,19 @@ const Root = styled('div')( margin: 'auto', marginBottom: 16, }, + '& figure': { + margin: 0, + padding: 0, + marginBottom: 16, + '& img, & video': { + marginBottom: 8, + }, + }, + '& figcaption': { + color: (theme.vars || theme).palette.text.tertiary, + fontSize: theme.typography.pxToRem(14), + textAlign: 'center', + }, '& strong': { color: (theme.vars || theme).palette.grey[900], }, diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts index 2788f6680d6300..e901fab77e47b9 100644 --- a/packages/mui-docs/src/branding/brandingTheme.ts +++ b/packages/mui-docs/src/branding/brandingTheme.ts @@ -32,8 +32,7 @@ declare module '@mui/material/styles/createPalette' { interface Palette { primaryDark: PaletteColor; gradients: { - lightGrayRadio: string; - stylizedRadio: string; + radioSubtle: string; linearSubtle: string; }; } @@ -255,12 +254,10 @@ export const getDesignTokens = (mode: 'light' | 'dark') => }, warning, gradients: { - lightGrayRadio: - 'radial-gradient(50% 50% at 50% 50%, #F0F7FF 0%, rgba(240, 247, 255, 0.05) 100%)', - stylizedRadio: + radioSubtle: mode === 'dark' - ? 'linear-gradient(rgba(0 0 0 / 0.1), rgba(0 0 0 / 0.1)), linear-gradient(254.86deg, rgba(0, 58, 117, 0.18) 0%, rgba(11, 13, 14, 0.3) 49.98%, rgba(0, 76, 153, 0.21) 100.95%)' - : 'linear-gradient(rgba(255 255 255 / 0.3), rgba(255 255 255 / 0.3)), linear-gradient(254.86deg, rgba(194, 224, 255, 0.12) 0%, rgba(194, 224, 255, 0.12) 0%, rgba(255, 255, 255, 0.3) 49.98%, rgba(240, 247, 255, 0.3) 100.95%)', + ? `radial-gradient(100% 100% at 100% 100%, transparent 0, ${alpha(blue[900], 0.3)} 300%)` + : `radial-gradient(100% 90% at 50% 0, transparent 0, ${alpha(blue[100], 0.3)} 300%)`, linearSubtle: mode === 'light' ? `linear-gradient(to bottom right, ${alpha(blue[50], 0.3)} 25%, ${alpha(grey[50], 0.2)} 100%)` @@ -954,6 +951,9 @@ export function getThemedComponents(): ThemeOptions { color: (theme.vars || theme).palette.primary[700], }, }, + '&.Mui-focusVisible': { + backgroundColor: (theme.vars || theme).palette.primary[200], + }, ...theme.applyDarkStyles({ color: (theme.vars || theme).palette.primary[100], backgroundColor: alpha(theme.palette.primary[800], 0.5),