Skip to content
Merged
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
51a635c
First version of Blog post with MUI X v7 annoucement
joserodolfofreitas Mar 19, 2024
c0e00de
Grid and small details
joserodolfofreitas Mar 20, 2024
903ca78
Apply suggestions from code review
joserodolfofreitas Mar 20, 2024
2ad8b4e
Apply Andrii suggestions from code review
joserodolfofreitas Mar 20, 2024
e6c9499
Improve sticky header video and fix a couple of other issues
joserodolfofreitas Mar 20, 2024
e9bc91d
Apply suggestions from code review
joserodolfofreitas Mar 20, 2024
ff90332
Small fix
joserodolfofreitas Mar 20, 2024
5401d54
Small fixes
joserodolfofreitas Mar 20, 2024
cfe30b7
Add captions to all media
joserodolfofreitas Mar 20, 2024
b92a054
Style fix
joserodolfofreitas Mar 20, 2024
ffcb96a
Small fix
joserodolfofreitas Mar 20, 2024
6c51ec8
Fix tag white space
joserodolfofreitas Mar 20, 2024
9575fdc
Fix brand white space
joserodolfofreitas Mar 20, 2024
d57f4f8
general revision
joserodolfofreitas Mar 20, 2024
193ac51
Update docs/pages/blog/mui-x-v7.md
joserodolfofreitas Mar 20, 2024
0ad8b43
Apply suggestions from code review
joserodolfofreitas Mar 20, 2024
fecdff2
Apply suggestions from code review
joserodolfofreitas Mar 21, 2024
ac50041
update card
joserodolfofreitas Mar 21, 2024
480a183
Merge branch 'next' into mui-x-v7-announcement
cherniavskii Mar 21, 2024
0844612
lint
cherniavskii Mar 21, 2024
400c64a
update the date
cherniavskii Mar 21, 2024
c7946eb
fix failing docs build
cherniavskii Mar 21, 2024
c37608f
Update docs/pages/blog/mui-x-v7.md
cherniavskii Mar 21, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
general revision
  • Loading branch information
joserodolfofreitas committed Mar 20, 2024
commit d57f4f83cfe72f18a9ffdf353758d2563f8af42c
31 changes: 15 additions & 16 deletions docs/pages/blog/mui-x-v7.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@ After a few months in pre-release, we're thrilled to announce the stable release

### Column resizing on the community plan

As our commercial offerings expand, we're pleased to also enhance our community plan by integrating features previously exclusive to commercial users.
As MUI X commercial offerings continue to expand, we're pleased to enhance the community plan by integrating features previously exclusive to commercial users.

[Column resizing](https://next.mui.com/x/react-data-grid/column-dimensions/#resizing) and [auto-sizing](https://mui.com/x/react-data-grid/column-dimensions/#autosizing), which were once Pro features, are now available to all users at no cost.
[Column resizing](https://mui.com/x/react-data-grid/column-dimensions/#resizing) and [auto-sizing](https://mui.com/x/react-data-grid/column-dimensions/#autosizing), which were once Pro features, are now available to all users at no cost.
This transition reflects our commitment to providing an exceptional user experience across the board, and aims to make the free components stand out more in the open-source space.

### Sticky headers and improved scrolling performance
Expand All @@ -74,7 +74,7 @@ Without it, you may need to manually set an appropriate background color to main

As part of an overarching project aimed at enhancing usability in managing columns within the Data Grid, we've redesigned the column visibility panel, introducing a more streamlined, checkbox-based interface to replace the previous toggle switch design.

Our goal is to further develop this panel by incorporating additional column management functions, such as column reordering and pinning. Additionally, We've extracted the internal component to facilitate the introduction of the upcoming pivoting UI.
The goal is to further develop this panel by incorporating additional column management functions, such as column reordering and pinning. Additionally, We've extracted the internal component to ease the introduction of the upcoming pivoting UI.

<figure style="padding:0; margin:0; margin-bottom:20px">
<img width="310" alt="The new column management panel design" src="/static/blog/mui-x-v7/column-management-panel.png">
Expand All @@ -89,9 +89,9 @@ While string values remain compatible for these types, any updates to the `filte

### Smaller bundle size

Introducing a separate entry point for locales has significantly reduced the bundle size of the barrel index when tree-shaking isn't operational (for example Webpack in dev mode).
Introducing a separate entry point for locales has significantly reduced the bundle size of the barrel index when tree-shaking isn't operational (for example, Webpack in dev mode).

For example, 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/[email protected]) to [92.9kB](https://bundlephobia.com/package/@mui/[email protected]).
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/[email protected]) to [92.9kB](https://bundlephobia.com/package/@mui/[email protected]).

<figure style="padding:0; margin:0">
<img width="600" alt="A chart showcasing the bundle size change" src="/static/blog/mui-x-v7/new-bundle-size.png" >
Expand Down Expand Up @@ -125,9 +125,9 @@ A significant addition is the time-saving alternative to the traditional JSX arc

### Rich Tree View

We've split the Tree View into two distinct components.
The Tree View was split into two distinct components.

The first is the `SimpleTreeView`, which retains the classic and familiar JSX approach and is still the one behind the original `TreeView` component.
The first is the `SimpleTreeView`, which retains the classic and familiar JSX approach and is still the one behind the original `<TreeView />`.

The second is the `RichTreeView`, a new component designed to streamline the development process, and with which we aim to support several common use cases out-of-the-box.

Expand Down Expand Up @@ -158,11 +158,11 @@ Check out the [new component](https://mui.com/x/react-tree-view/rich-tree-view/i

### New customization hook: `useTreeItem2`

We're introducing a new API to customize Tree items through a hook called `useTreeItem2`.
It can be used with both `SimpleTreeView` and `RichTreeView`, and enables developers to fully leverage the Tree Item's subcomponents along with their default behaviors.
The Tree View now features a new API that enables fully customization of Tree items through a hook called `useTreeItem2`.
It can be used with both `SimpleTreeView` and `RichTreeView`, and empowers developers to fully leverage the Tree Item's subcomponents along with their default behaviors.
This approach ensures customization and flexibility are at the forefront without sacrificing the component's inherent features.
Copy link
Member

Choose a reason for hiding this comment

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

I would start from the pain people have with the current approach: people have to copy-paste a lot of the Tree Item's logic to do customization, stuff like expansion and selection events. This will be more and more painful in the future as we add new features.


When using this hook, developers can create a tailored Tree Item that aligns perfectly with their project needs while reusing key behaviors and features the component is known for.
When using this hook, you can create a tailored Tree Item that aligns perfectly with your project needs while reusing key behaviors and features the component is known for.

```jsx
const CustomTreeItem = React.forwardRef(function CustomTreeItem(
Expand Down Expand Up @@ -208,7 +208,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
You can check all the details of the given example on the [RichTreeView customization page](https://mui.com/x/react-tree-view/rich-tree-view/customization/#headless-api).
Copy link
Member

Choose a reason for hiding this comment

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

Clearly a nitpick but I would add both the SimpleTreeView and RichTreeView doc page here to make extra clear that we are supporting SimpleTreeView (even though you said it above)


:::info
To avoid further breaking changes with the subcomponents names, we're delivering this new customization API with a numerical suffix '2', for example, `TreeItem2` and `TreeItem2Content`.
To avoid further breaking changes with the subcomponents names, this new customization API was named with a numerical suffix '2', for example, `TreeItem2` and `TreeItem2Content`.

This update ensures that any existing customizations remain unaffected, providing you with a seamless transition to adopt the latest API at your convenience.

Expand Down Expand Up @@ -258,7 +258,7 @@ The Axis component now features a built-in Grid, offering users a structured lay

<figure style="padding:0; margin:0; margin-bottom:20px">
<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 showcasing an horizontal grid.</figcaption>
<figcaption style="color: #888; font-size: 0.9em; text-align: center;">A Chart axis with an horizontal grid.</figcaption>
</figure>

For details on its usage and configuration, please refer to the [Grid section](https://mui.com/x/react-charts/axis/#grid) in the documentation.
Expand Down Expand Up @@ -307,8 +307,7 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';

### Date Time Range Picker [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Support new use cases with this most anticipated component.
The latest addition to the Date and Time Pickers suite is the `<DateTimeRangePicker />`, a component designed to enrich the user experience with the advanced date and time selection.
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">
Expand All @@ -327,7 +326,7 @@ As usual, we're committed to further improving the library by introducing new fe
Throughout this year, we'll invest in making MUI X components **design agnostic**. The components will still ship using Material UI as the default, but we're striving to ensure that they seamlessly integrate with any design system.
The result is advanced components offering extreme flexibility and customization options, enabling a broader range of application styles without compromising the high-quality use cases and workflows that MUI X is known for.".
Copy link
Member

Choose a reason for hiding this comment

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

Seems like the ". at the end is not needed. 🙈

Copy link
Member Author

@joserodolfofreitas joserodolfofreitas Mar 22, 2024

Choose a reason for hiding this comment

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

Thanks, @LukasTy! I've incorporated your fixes on the followup:
#41601


Additionally, the following are the deliveries we're planning for the next few months.
Additionally, the following are the deliveries planned for the next few months.

### Data Grid

Expand Down Expand Up @@ -361,7 +360,7 @@ Support for MUI X v5 is officially **discontinued**, and we encourage you to m

## Migration guide

We fully understand that updating a dependency library can sometimes be daunting.
Updating a dependency library can sometimes be daunting.
To smooth the transition to the new version, we have documented all breaking changes in our migration guides:

- [Data Grid](https://mui.com/x/migration/migration-data-grid-v6/)
Expand Down