From 6837926c0876a892d364dc719cfa8d8543f21a30 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 27 Mar 2024 17:13:19 -0300 Subject: [PATCH 01/10] redesign the page slightly --- docs/pages/blog.tsx | 238 ++++++++++++++++++++++---------------------- 1 file changed, 118 insertions(+), 120 deletions(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 544fcd02b06a42..0fd7b587fbdbf0 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.stylizedRadio, + 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.stylizedRadio, + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)', + }), + })} > {post.image && ( ))} - - + Posts{' '} @@ -342,94 +330,104 @@ 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: 3, sm: 2, md: 9 }, + 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 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 + + +
From 1001f202fadbeb3279f61d97b785ed91c74ba8be Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 27 Mar 2024 17:13:51 -0300 Subject: [PATCH 02/10] update the stylizedRadio token --- packages/mui-docs/src/branding/brandingTheme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts index ddce97e695a62b..cf401e5f107559 100644 --- a/packages/mui-docs/src/branding/brandingTheme.ts +++ b/packages/mui-docs/src/branding/brandingTheme.ts @@ -260,8 +260,8 @@ export const getDesignTokens = (mode: 'light' | 'dark') => 'radial-gradient(50% 50% at 50% 50%, #F0F7FF 0%, rgba(240, 247, 255, 0.05) 100%)', stylizedRadio: 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 50% 0, transparent 0, ${alpha(blue[900], 0.3)} 300%)` + : `radial-gradient(100% 100% at 50% 0, transparent 0, ${alpha(blue[100], 0.6)} 300%)`, linearSubtle: mode === 'light' ? `linear-gradient(to top right, ${alpha(blue[50], 0.3)} 40%, ${alpha( From df04bc1538654d8cb9a1ff4c55c387c8fb7f0007 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Thu, 28 Mar 2024 12:42:32 -0300 Subject: [PATCH 03/10] remove non-used gradient styles --- packages/mui-docs/src/branding/brandingTheme.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts index f6073c75b6e73e..67109f3c0ee99c 100644 --- a/packages/mui-docs/src/branding/brandingTheme.ts +++ b/packages/mui-docs/src/branding/brandingTheme.ts @@ -32,7 +32,6 @@ declare module '@mui/material/styles/createPalette' { interface Palette { primaryDark: PaletteColor; gradients: { - lightGrayRadio: string; stylizedRadio: string; linearSubtle: string; }; @@ -256,8 +255,6 @@ 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: mode === 'dark' ? `radial-gradient(100% 100% at 50% 0, transparent 0, ${alpha(blue[900], 0.3)} 300%)` From 240f2aab3e2835e0c43bbe0f5b592ae8cc1b5523 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Thu, 28 Mar 2024 12:46:47 -0300 Subject: [PATCH 04/10] tweak the filter title --- docs/pages/blog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 0fd7b587fbdbf0..8114f957027409 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -351,7 +351,7 @@ export default function Blog(props: InferGetStaticPropsType - Filter by tag + Filter posts by tag {Object.keys(tagInfo).map((tag) => { From b16306cc8b8e130f303cf02bc3c9979154b318b8 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Thu, 28 Mar 2024 12:55:42 -0300 Subject: [PATCH 05/10] spacing adjustments --- docs/pages/blog.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 8114f957027409..181ed6c86e7c87 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -333,7 +333,8 @@ export default function Blog(props: InferGetStaticPropsType Date: Thu, 28 Mar 2024 12:55:52 -0300 Subject: [PATCH 06/10] improve chip focus-visible state --- packages/mui-docs/src/branding/brandingTheme.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts index 67109f3c0ee99c..375ff71eac30e1 100644 --- a/packages/mui-docs/src/branding/brandingTheme.ts +++ b/packages/mui-docs/src/branding/brandingTheme.ts @@ -952,6 +952,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), From 3b79dd988196b6e34d28ed946c106fb49e7f5989 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Thu, 28 Mar 2024 13:44:21 -0300 Subject: [PATCH 07/10] refine the "radioSubtle" gradient token --- docs/pages/blog.tsx | 4 ++-- packages/mui-docs/src/branding/brandingTheme.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 181ed6c86e7c87..fc98fa100f8f9a 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -273,11 +273,11 @@ export default function Blog(props: InferGetStaticPropsType }, warning, gradients: { - stylizedRadio: + radioSubtle: mode === 'dark' ? `radial-gradient(100% 100% at 50% 0, transparent 0, ${alpha(blue[900], 0.3)} 300%)` - : `radial-gradient(100% 100% at 50% 0, transparent 0, ${alpha(blue[100], 0.6)} 300%)`, + : `radial-gradient(100% 90% at 50% 0, transparent 0, ${alpha(blue[100], 0.6)} 300%)`, linearSubtle: mode === 'light' ? `linear-gradient(to bottom right, ${alpha(blue[50], 0.3)} 25%, ${alpha(grey[50], 0.2)} 100%)` From c9341e3ff0dd8f874a9cb5729165fb931f3add5b Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 29 Mar 2024 11:40:38 -0300 Subject: [PATCH 08/10] Victor's gradient nudges --- packages/mui-docs/src/branding/brandingTheme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts index 8f681b09041417..469db6070efb01 100644 --- a/packages/mui-docs/src/branding/brandingTheme.ts +++ b/packages/mui-docs/src/branding/brandingTheme.ts @@ -257,8 +257,8 @@ export const getDesignTokens = (mode: 'light' | 'dark') => gradients: { radioSubtle: mode === 'dark' - ? `radial-gradient(100% 100% at 50% 0, transparent 0, ${alpha(blue[900], 0.3)} 300%)` - : `radial-gradient(100% 90% at 50% 0, transparent 0, ${alpha(blue[100], 0.6)} 300%)`, + ? `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%)` From 966ac02e8b808b06c458ebd4421d902be98c146c Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 29 Mar 2024 12:15:18 -0300 Subject: [PATCH 09/10] run CI checks again From 3ef737d55635b7578d13732dbbe1ccc2d5782653 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Mon, 1 Apr 2024 15:56:40 -0300 Subject: [PATCH 10/10] standardize
and
styles --- docs/pages/blog/mui-x-v7.md | 32 ++++++++++---------- docs/src/modules/components/TopLayoutBlog.js | 13 ++++++++ 2 files changed, 29 insertions(+), 16 deletions(-) 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], },