Skip to content

Commit

Permalink
Showing 4 changed files with 155 additions and 143 deletions.
239 changes: 119 additions & 120 deletions docs/pages/blog.tsx
Original file line number Diff line number Diff line change
@@ -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) {
/>
))}
</Box>
<Typography
component="h2"
fontWeight="bold"
variant="subtitle1"
sx={{
mb: 0.5,
}}
>
<Typography component="h2" fontWeight="bold" variant="subtitle1" gutterBottom>
<Link
aria-describedby={`describe-${props.slug}`}
href={`/blog/${props.slug}/`}
color="text.primary"
sx={{
color: 'text.primary',
'&:hover': {
textDecoration: 'underline',
},
@@ -153,7 +145,7 @@ function PostPreview(props: BlogPost) {
</Typography>
)}
{props.date && (
<Typography variant="caption" fontWeight="regular" color="text.secondary">
<Typography variant="caption" fontWeight="regular" color="text.tertiary">
{new Date(props.date).toDateString()}
</Typography>
)}
@@ -164,6 +156,7 @@ function PostPreview(props: BlogPost) {
href={`/blog/${props.slug}`}
id={`describe-${props.slug}`}
endIcon={<KeyboardArrowRightRoundedIcon />}
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<typeof getStaticProps>) {
const router = useRouter();
@@ -236,6 +229,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
{ shallow: true },
);
};

return (
<BrandingCssVarsProvider>
<Head
@@ -257,13 +251,15 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
</Typography>
}
/>
</Section>
<Divider />
<Container sx={{ mt: { xs: 2, sm: -6 } }}>
<Box
component="ul"
sx={{
display: 'grid',
m: 0,
p: 0,
pt: 8,
gap: 2,
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
}}
@@ -273,25 +269,18 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
key={post.slug}
component="li"
variant="outlined"
sx={[
{
p: 2,
display: 'flex',
flexDirection: 'column',
position: 'relative',
borderColor: 'grey.200',
boxShadow: '0px 4px 12px rgba(170, 180, 190, 0.2)',
'&:focus-within': {
'& a': {
outline: 0,
},
},
},
(theme) =>
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 && (
<Box
@@ -310,8 +299,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
</Paper>
))}
</Box>
</Section>
<Divider />
</Container>
<Container
ref={postListRef}
sx={{
@@ -325,7 +313,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
<Typography
component="h2"
variant="h6"
fontWeight="700"
fontWeight="semiBold"
sx={{ mb: { xs: 1, sm: 2 }, mt: 8 }} // margin-top makes the title appear when scroll into view
>
Posts{' '}
@@ -342,94 +330,105 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
</Typography>
<Box sx={{ gridRow: 'span 2' }}>
<Box
sx={(theme) => ({
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',
},
}}
>
<Typography color="text.primary" fontWeight="semiBold" sx={{ mb: 2 }}>
Filter by tag
</Typography>
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
{Object.keys(tagInfo).map((tag) => {
const selected = !!selectedTags[tag];
return (
<Chip
key={tag}
variant={selected ? 'filled' : 'outlined'}
color={selected ? 'primary' : undefined}
{...(selected
? {
label: tag,
onDelete: () => {
postListRef.current?.scrollIntoView();
removeTag(tag);
},
}
: {
label: tag,
onClick: () => {
postListRef.current?.scrollIntoView();
router.push(
{
query: {
...router.query,
tags: tag,
<Paper variant="outlined">
<Typography
color="text.primary"
fontWeight="semiBold"
variant="subtitle2"
sx={{ mb: 2 }}
>
Filter posts by tag
</Typography>
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
{Object.keys(tagInfo).map((tag) => {
const selected = !!selectedTags[tag];
return (
<Chip
key={tag}
variant={selected ? 'filled' : 'outlined'}
color={selected ? 'primary' : undefined}
{...(selected
? {
label: tag,
onDelete: () => {
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,
}}
/>
);
})}
</Box>
<Divider sx={{ my: 2 }} />
<Typography color="text.primary" fontWeight="semiBold" gutterBottom>
Want to hear more from us?
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
Get up to date with everything MUI-related through our social media:
</Typography>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, '* > svg': { mr: 1 } }}>
<Link href="https://github.com/mui" target="_blank" fontSize={14}>
<GitHubIcon fontSize="small" />
GitHub
</Link>
<Link href="https://twitter.com/MUI_hq" target="_blank" fontSize={14}>
<XIcon fontSize="small" />X
</Link>
<Link href="https://mui.com/r/discord/" target="_blank" fontSize={14}>
<DiscordIcon fontSize="small" />
Discord
</Link>
<Link href="https://www.linkedin.com/company/mui/" target="_blank" fontSize={14}>
<LinkedInIcon fontSize="small" />
LinkedIn
</Link>
<Link href="https://www.youtube.com/@MUI_hq" target="_blank" fontSize={14}>
<YouTubeIcon fontSize="small" />
Youtube
</Link>
</Box>
undefined,
{ shallow: true },
);
},
})}
size="small"
sx={{
py: 1.2,
}}
/>
);
})}
</Box>
</Paper>
<Paper variant="outlined">
<Typography
color="text.primary"
fontWeight="semiBold"
variant="subtitle2"
gutterBottom
>
Want to hear more from us?
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
Get up to date with everything MUI-related through our social media:
</Typography>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, '* > svg': { mr: 1 } }}>
<Link href="https://github.com/mui" target="_blank" fontSize={14}>
<GitHubIcon fontSize="small" />
GitHub
</Link>
<Link href="https://twitter.com/MUI_hq" target="_blank" fontSize={14}>
<XIcon fontSize="small" />X
</Link>
<Link href="https://mui.com/r/discord/" target="_blank" fontSize={14}>
<DiscordIcon fontSize="small" />
Discord
</Link>
<Link href="https://www.linkedin.com/company/mui/" target="_blank" fontSize={14}>
<LinkedInIcon fontSize="small" />
LinkedIn
</Link>
<Link href="https://www.youtube.com/@MUI_hq" target="_blank" fontSize={14}>
<YouTubeIcon fontSize="small" />
Youtube
</Link>
</Box>
</Paper>
</Box>
</Box>
<div>
32 changes: 16 additions & 16 deletions docs/pages/blog/mui-x-v7.md
Original file line number Diff line number Diff line change
@@ -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.

<figure style="padding:0; margin:0">
<figure>
<video preload="metadata" autoplay muted loop playsinline width="690" height="417" controls>
  <source src="/static/blog/mui-x-v7/sticky-headers-and-vertical-scrolling.mp4" type="video/mp4">
</video>
<figcaption style="color: #888; font-size: 0.9em; text-align: center;">A before and after showcase, first with horizontal and then with vertical scrolling.</figcaption>
<figcaption>A before and after showcase, first with horizontal and then with vertical scrolling.</figcaption>
</figure>

:::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.

<figure style="padding:0; margin:0; margin-bottom:20px">
<figure>
<img width="310" alt="The new column management panel design" src="/static/blog/mui-x-v7/column-management-panel.png">
<figcaption style="color: #888; font-size: 0.9em; text-align: center;">The new column managemeent panel design</figcaption>
<figcaption>The new column managemeent panel design</figcaption>
</figure>

### 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).

<figure style="padding:0; margin:0">
<figure>
<img width="600" alt="A chart showcasing the bundle size change" src="/static/blog/mui-x-v7/new-bundle-size.png" >
<figcaption style="color: #888; font-size: 0.9em; text-align: center;">A chart showcasing the Data Grid's bundle size change.</figcaption>
<figcaption>A chart showcasing the Data Grid's bundle size change.</figcaption>
</figure>

### 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.

<figure style="padding:0; margin:0; margin-bottom:20px">
<figure>
<img alt="Gauge charts" src="/static/blog/mui-x-v7/gauge-charts.png" width="1200" height="800" loading="lazy" />
<figcaption style="color: #888; font-size: 0.9em; text-align: center;">Three different styles of Gauge charts.</figcaption>
<figcaption>Three different styles of Gauge charts.</figcaption>
</figure>

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.

<figure style="padding:0; margin:0; margin-bottom:20px">
<figure>
<img alt="Gauge charts" src="/static/blog/mui-x-v7/click-handler.png" width="450" height="416" loading="lazy" />
<figcaption style="color: #888; font-size: 0.9em; text-align: center;">A pie chart with an item click handler.</figcaption>
<figcaption>A pie chart with an item click handler.</figcaption>
</figure>

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.

<figure style="padding:0; margin:0; margin-bottom:20px">
<figure>
<img alt="A Chart axis showcasing an horizontal grid" src="/static/blog/mui-x-v7/axis-grid.png" width="1550" height="654" loading="lazy" />
<figcaption style="color: #888; font-size: 0.9em; text-align: center;">A Chart axis with an horizontal grid.</figcaption>
<figcaption>A Chart axis with an horizontal grid.</figcaption>
</figure>

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.

<figure style="padding:0; margin:0; margin-bottom:20px">
<figure>
<img alt="A chart with a reference line" src="/static/blog/mui-x-v7/charts-reference-line.png" width="1200" height="840" loading="lazy" />
<figcaption style="color: #888; font-size: 0.9em; text-align: center;">A line chart using a reference line.</figcaption>
<figcaption>A line chart using a reference line.</figcaption>
</figure>

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 `<DateTimeRangePicker />`, 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.

<figure style="padding:0; margin:0; margin-bottom:20px">
<figure>
<video preload="metadata" autoplay muted loop playsinline width="600" height="510">
  <source src="/static/blog/mui-x-v7/date-time-range-picker.mp4" type="video/mp4">
</video>
<figcaption style="color: #888; font-size: 0.9em; text-align: center;">A video showcasing a date and time range selection.</figcaption>
<figcaption>A video showcasing a date and time range selection.</figcaption>
</figure>

Learn how to use and customize the [new component](/x/react-date-pickers/date-time-range-picker/) now!
13 changes: 13 additions & 0 deletions docs/src/modules/components/TopLayoutBlog.js
Original file line number Diff line number Diff line change
@@ -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],
},
14 changes: 7 additions & 7 deletions packages/mui-docs/src/branding/brandingTheme.ts
Original file line number Diff line number Diff line change
@@ -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),

0 comments on commit 06fbeea

Please sign in to comment.