Skip to content

Commit

Permalink
[docs] MUI X v7 blog post annoucement followup (#41601)
Browse files Browse the repository at this point in the history 
Co-authored-by: Andrew Cherniavskyi <andrew@mui.com>
  • Loading branch information
@joserodolfofreitas @cherniavskii
joserodolfofreitas and cherniavskii committed Mar 22, 2024
1 parent 9951d3d commit 8b5eee5
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 34 deletions.
70 changes: 36 additions & 34 deletions docs/pages/blog/mui-x-v7.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Introducing MUI X v7.0.0
description: Check out all the newest additions to the next major of the advanced components.
date: 2024-03-21T08:00:00.000Z
date: 2024-03-22T08:00:00.000Z
authors: ['josefreitas']
tags: ['MUI X', 'Product']
card: true
Expand Down Expand Up @@ -47,7 +47,7 @@ After a few months in pre-release, we're thrilled to announce the stable release

As MUI X commercial offerings continue to expand, we're pleased to enhance the [Community plan](/pricing/) by integrating features previously exclusive to commercial users.

Check warning on line 48 in docs/pages/blog/mui-x-v7.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[Google.We] Try to avoid using first-person plural like 'we'.

Raw Output:
{"message": "[Google.We] Try to avoid using first-person plural like 'we'.", "location": {"path": "docs/pages/blog/mui-x-v7.md", "range": {"start": {"line": 48, "column": 51}}}, "severity": "WARNING"}

[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 previously Pro features, are now available to all the users at no cost.
[Column resizing](/x/react-data-grid/column-dimensions/#resizing) and [auto-sizing](/x/react-data-grid/column-dimensions/#autosizing), which were previously Pro features, are now available to all the 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.

Check warning on line 51 in docs/pages/blog/mui-x-v7.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[Google.We] Try to avoid using first-person plural like 'our'.

Raw Output:
{"message": "[Google.We] Try to avoid using first-person plural like 'our'.", "location": {"path": "docs/pages/blog/mui-x-v7.md", "range": {"start": {"line": 51, "column": 26}}}, "severity": "WARNING"}

### Sticky headers and improved scrolling performance
Expand Down Expand Up @@ -111,26 +111,26 @@ The term 'unstable' refers solely to the potential for breaking changes in minor

We're excited to announce that the following features have been promoted to stable:

Check warning on line 112 in docs/pages/blog/mui-x-v7.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[Google.We] Try to avoid using first-person plural like 'We'.

Raw Output:
{"message": "[Google.We] Try to avoid using first-person plural like 'We'.", "location": {"path": "docs/pages/blog/mui-x-v7.md", "range": {"start": {"line": 112, "column": 1}}}, "severity": "WARNING"}

- [Column groups](https://mui.com/x/react-data-grid/column-groups/)
- [Lazy loading](https://mui.com/x/react-data-grid/row-updates/#lazy-loading) [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
- [Header filters](https://mui.com/x/react-data-grid/filtering/header-filters/) [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
- [Cell selection](https://mui.com/x/react-data-grid/cell-selection/) [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
- [Clipboard paste](https://mui.com/x/react-data-grid/clipboard/#clipboard-paste) [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
- [Column groups](/x/react-data-grid/column-groups/)
- [Lazy loading](/x/react-data-grid/row-updates/#lazy-loading) [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
- [Header filters](/x/react-data-grid/filtering/header-filters/) [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
- [Cell selection](/x/react-data-grid/cell-selection/) [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
- [Clipboard paste](/x/react-data-grid/clipboard/#clipboard-paste) [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

## Tree View

Since the promotion from the [lab's package](/material-ui/about-the-lab/) to MUI X, the primary focus has been on improving the component's developer experience.
This includes efforts aimed to simplify its usage, implement new customization APIs, and provide clearer documentation and illustrative examples, making them more informative and user-friendly.

A significant addition is the time-saving alternative to the traditional JSX architecture, the RichTreeView.
A significant addition is the time-saving alternative to the traditional JSX architecture, the Rich Tree View.

### Rich Tree View

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 />`.
The first is the [Simple Tree View](/x/react-tree-view/#simple-tree-view), which retains the classic and familiar JSX approach and is still the one behind the original Tree View.

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.
The second is the [Rich Tree View](/x/react-tree-view/#rich-tree-view), a new component designed to streamline the development process, and with which we aim to support several common use cases out-of-the-box.

Check warning on line 133 in docs/pages/blog/mui-x-v7.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[Google.We] Try to avoid using first-person plural like 'we'.

Raw Output:
{"message": "[Google.We] Try to avoid using first-person plural like 'we'.", "location": {"path": "docs/pages/blog/mui-x-v7.md", "range": {"start": {"line": 133, "column": 152}}}, "severity": "WARNING"}

Similar to the Data Grid, it only requires a dataset and possibly a few properties to render; it does all the heavy lifting for you, handling most of the complexities internally.

Expand All @@ -155,12 +155,12 @@ const myDataSet = [
<RichTreeView items={myDataSet} multiSelect />
```

Check out the [new component](https://mui.com/x/react-tree-view/rich-tree-view/items/)!
Check out the [new component](/x/react-tree-view/rich-tree-view/items/)!

### New customization hook: `useTreeItem2`

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.
It can be used with both Simple Tree View and Rich Tree View, 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.

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.
Expand Down Expand Up @@ -206,19 +206,19 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
<RichTreeView items={myDataSet} slots={{ item: 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).
You can check all the details of the given example on the [Rich Tree View customization page](/x/react-tree-view/rich-tree-view/customization/#headless-api).

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

Our plan is to replace the move the new implementation to the `TreeItem` component on the next major release and remove all those suffixes.
Our plan is to move the new implementation to the Tree Item component on the next major release and remove all those suffixes.

Check warning on line 216 in docs/pages/blog/mui-x-v7.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[Google.We] Try to avoid using first-person plural like 'Our'.

Raw Output:
{"message": "[Google.We] Try to avoid using first-person plural like 'Our'.", "location": {"path": "docs/pages/blog/mui-x-v7.md", "range": {"start": {"line": 216, "column": 1}}}, "severity": "WARNING"}
:::

## Charts

Since launching MUI X Charts, we've been closely listening to your feedback, and our focus has been on refining these foundational elements through bug fixes, enriched documentation, and increasing support for more complex scenarios.
Since [launching MUI X Charts](/blog/mui-x-mid-v6-features/#charts-alpha-version), we've been closely listening to your feedback, and our focus has been on refining these foundational elements through bug fixes, enriched documentation, and increasing support for more complex scenarios.

Check warning on line 221 in docs/pages/blog/mui-x-v7.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[Google.We] Try to avoid using first-person plural like 'we'.

Raw Output:
{"message": "[Google.We] Try to avoid using first-person plural like 'we'.", "location": {"path": "docs/pages/blog/mui-x-v7.md", "range": {"start": {"line": 221, "column": 84}}}, "severity": "WARNING"}

The charts portfolio has also expanded with one of the most commonly used data visualization components for dashboards.

Expand All @@ -234,7 +234,7 @@ With customizable options for pointers, sizes, and colors, they allow for a pers
<figcaption style="color: #888; font-size: 0.9em; text-align: center;">Three different styles of Gauge charts.</figcaption>
</figure>

Check out the [new charts](https://mui.com/x/react-charts/gauge/) documentation page for detailed information.
Check out the [new charts](/x/react-charts/gauge/) documentation page for detailed information.

### Click event handler

Expand All @@ -249,9 +249,9 @@ This feature makes charts more interactive and transforms the way users can expl

You can find more information about specific event handlers for each type of chart by visiting their respective overview page:

- [Line charts click events](https://mui.com/x/react-charts/lines/#click-event)
- [Bar charts click events](https://mui.com/x/react-charts/bars/#click-event)
- [Pie charts click events](https://mui.com/x/react-charts/pie/#click-event)
- [Line charts click events](/x/react-charts/lines/#click-event)
- [Bar charts click events](/x/react-charts/bars/#click-event)
- [Pie charts click events](/x/react-charts/pie/#click-event)

### Built-in Grid

Expand All @@ -262,7 +262,7 @@ The Axis component now features a built-in Grid, offering users a structured lay
<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.
For details on its usage and configuration, please refer to the [Grid section](/x/react-charts/axis/#grid) in the documentation.

### Reference line

Expand All @@ -273,11 +273,11 @@ The `ChartsReferenceLine` component enhances data visualization, providing users
<figcaption style="color: #888; font-size: 0.9em; text-align: center;">A line chart using a reference line.</figcaption>
</figure>

You can find more details on its [documentation](https://mui.com/x/react-charts/axis/#reference-line).
You can find more details on its [documentation](/x/react-charts/axis/#reference-line).

## Date and Time Pickers

The focus has been primarily on developing the highly anticipated `DateTimeRangePicker`, alongside a significant effort to enhance accessibility in the fields, ensuring that our components are as inclusive and user-friendly as possible.
The focus has been primarily on developing the highly anticipated Date Time Range Picker, alongside a significant effort to enhance accessibility in the fields, ensuring that our components are as inclusive and user-friendly as possible.

### Improved accessibility for the field components

Expand All @@ -292,11 +292,11 @@ This feature greatly improves the experience for screen reader users, making int
<DatePicker enableAccessibleFieldDOMStructure />
```

For more details, please check out the [documentation section](https://mui.com/x/react-date-pickers/fields/#accessible-dom-structure).
For more details, please check out the [documentation section](/x/react-date-pickers/fields/#accessible-dom-structure).

### Support for date-fns v3

The Date and Time Pickers now support both versions of v2 and v3 of [`date-fns`](https://www.npmjs.com/package/date-fns), and you can select your desired version from one of the two import lines:
The Date and Time Pickers now support both versions of v2 and v3 of [date-fns](https://www.npmjs.com/package/date-fns), and you can select your desired version from one of the two import lines:

```jsx
// date-fns v2.x
Expand All @@ -318,28 +318,30 @@ This intuitive picker simplifies the process of selecting date and time ranges,
<figcaption style="color: #888; font-size: 0.9em; text-align: center;">A video showcasing a date and time range selection.</figcaption>
</figure>

Learn how to use and customize the [new component](https://mui.com/x/react-date-pickers/date-time-range-picker/) now!
Learn how to use and customize the [new component](/x/react-date-pickers/date-time-range-picker/) now!

## What's next

As usual, we're committed to further improving the library by introducing new features, refining existing ones, and focusing on community feedback to shape our roadmap.

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

We're also excited to announce that we're transitioning MUI X components from using Emotion to using [Pigment CSS](https://github.com/mui/material-ui/blob/master/packages/pigment-css-react/README.md), MUI's new zero-runtime CSS-in-JS library. This move is aimed at better supporting React Server Components, boosting performance and guaranteeing compatibility with the next major version of Material UI.

Additionally, the following are the deliveries planned for the next few months.

### Data Grid

- [Improved server-side integration](https://mui.com/x/react-data-grid/server-side-data/)
- [Improved server-side integration](/x/react-data-grid/server-side-data/)
- [Column management panel with support for pivoting and other features](https://github.com/mui/mui-x/issues/5700)
- [Pivoting](https://github.com/mui/mui-x/issues/214) [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

### Tree View

- [Inline node name editing](https://github.com/mui/mui-x/issues/10112)
- [Checkbox selection for `SimpleTreeView` and `RichTreeView`](https://github.com/mui/mui-x/pull/11452)
- [Drag and drop support for RichTreeView](https://github.com/mui/mui-x/issues/9686)[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
- [Checkbox selection for Simple Tree View and Rich Tree View](https://github.com/mui/mui-x/pull/11452)
- [Drag and drop support for Rich Tree View](https://github.com/mui/mui-x/issues/9686)[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

### Charts

Expand All @@ -355,7 +357,7 @@ For a complete overview, please visit the [MUI X roadmap](https://github.com/mu

## Long-Term Support

We roll bug fixes, performance enhancements, and other improvements into new releases, so as we introduce MUI X v7, MUI X v6 now is officially in [Long-Term Support (LTS)](https://mui.com/x/introduction/support/#long-term-support-lts). This means only critical bug fixes and security updates will be patched to MUI X v6.
We roll bug fixes, performance enhancements, and other improvements into new releases, so as we introduce MUI X v7, MUI X v6 now is officially in [Long-Term Support (LTS)](/x/introduction/support/#long-term-support-lts). This means only critical bug fixes and security updates will be patched to MUI X v6.

Support for MUI X v5 is officially **discontinued**, and we encourage you to migrate to v6 and then to v7 to benefit from enhanced features, performance improvements, and ongoing support.

Expand All @@ -364,10 +366,10 @@ Support for MUI X v5 is officially **discontinued**, and we encourage you to m
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/)
- [Date and Time Pickers](https://mui.com/x/migration/migration-pickers-v6/)
- [Charts](https://mui.com/x/migration/migration-charts-v6/)
- [Tree View](https://mui.com/x/migration/migration-tree-view-v6/)
- [Data Grid](/x/migration/migration-data-grid-v6/)
- [Date and Time Pickers](/x/migration/migration-pickers-v6/)
- [Charts](/x/migration/migration-charts-v6/)
- [Tree View](/x/migration/migration-tree-view-v6/)

These component-specific guides are reference pages designed to assist you if you encounter any challenges while updating to the new major version.
It's our way of making the upgrade process more manageable and less burdensome for you.
Expand Down
Binary file modified docs/public/static/blog/mui-x-v7/intro.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 8b5eee5

Please sign in to comment.