[docs] MUI X v7 blog post annoucement followup (#41601)

Co-authored-by: Andrew Cherniavskyi <andrew@mui.com>

docs/pages/blog/mui-x-v7.md

@@ -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
@@ -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.
 
-[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.
 
 ### Sticky headers and improved scrolling performance
@@ -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:
 
-- [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.
 
 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.
 
@@ -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.
@@ -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.
 :::
 
 ## 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.
 
 The charts portfolio has also expanded with one of the most commonly used data visualization components for dashboards.
 
@@ -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
 
@@ -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
 
@@ -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
 
@@ -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
 
@@ -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
@@ -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
 
@@ -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.
 
@@ -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.