-
-
Notifications
You must be signed in to change notification settings - Fork 32.8k
[blog] Blog post with MUI X v7.0.0 annoucement #41563
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
51a635c
c0e00de
903ca78
2ad8b4e
e6c9499
e9bc91d
ff90332
5401d54
cfe30b7
b92a054
ffcb96a
6c51ec8
9575fdc
d57f4f8
193ac51
0ad8b43
fecdff2
ac50041
480a183
0844612
400c64a
c7946eb
c37608f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
- Loading branch information
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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. | ||
joserodolfofreitas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| [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. | ||
joserodolfofreitas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| 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 | ||
|
|
@@ -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. | ||
joserodolfofreitas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| <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"> | ||
|
|
@@ -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" > | ||
|
|
@@ -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. | ||
|
|
||
|
|
@@ -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. | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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( | ||
|
|
@@ -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). | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Clearly a nitpick but I would add both the |
||
|
|
||
| :::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. | ||
joserodolfofreitas marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
|
|
@@ -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. | ||
|
|
@@ -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"> | ||
|
|
@@ -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.". | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Seems like the
Member
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
|
|
||
| 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 | ||
|
|
||
|
|
@@ -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/) | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.