[docs] Update new links to MD2 (mui#34848)

CHANGELOG.md

@@ -4610,7 +4610,7 @@ _Jun 23, 2021_
 A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
 
 - 🚀 We have only 2 left in the [breaking changes](https://github.com/mui/material-ui/issues/20012). The plan to release 5.0.0-beta.0 is on July 1st and will start to promote its usage over v4.
-- 🎨 We have updated `Slider` to match current [Material Design guidelines](https://material.io/components/sliders).
+- 🎨 We have updated `Slider` to match current [Material Design guidelines](https://m2.material.io/components/sliders).
 
   <a href="https://mui.com/components/slider/#continuous-sliders"><img width="247" alt="" src="https://user-images.githubusercontent.com/3165635/121884800-a8808600-cd13-11eb-8cdf-e25de8f1ba73.png" style="margin: auto"></a>
 
@@ -4695,7 +4695,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
 
 - &#8203;<!-- 08 -->[Slider] Adjust css to match the specification (#26632) @siriwatknp
 
-  Rework the CSS to match the latest [Material Design guidelines](https://material.io/components/sliders) and make custom styles more intuitive. [See documentation](https://mui.com/components/slider/).
+  Rework the CSS to match the latest [Material Design guidelines](https://m2.material.io/components/sliders) and make custom styles more intuitive. [See documentation](https://mui.com/components/slider/).
 
   <a href="https://mui.com/components/slider/#continuous-sliders"><img width="247" alt="" src="https://user-images.githubusercontent.com/3165635/121884800-a8808600-cd13-11eb-8cdf-e25de8f1ba73.png" style="margin: auto"></a>
 
@@ -4943,7 +4943,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som
 
 - &#8203;<!-- 10 -->[AppBar] Fix background color on dark mode (#26545) @siriwatknp
 
-  The `color` prop has no longer any effect in dark mode. The app bar uses the background color required by the elevation to follow the [Material Design guidelines](https://material.io/design/color/dark-theme.html). Use `enableColorOnDark` to restore the behavior of v4.
+  The `color` prop has no longer any effect in dark mode. The app bar uses the background color required by the elevation to follow the [Material Design guidelines](https://m2.material.io/design/color/dark-theme.html). Use `enableColorOnDark` to restore the behavior of v4.
 
   ```jsx
   <AppBar enableColorOnDark />
@@ -5105,8 +5105,8 @@ A big thanks to the 14 contributors who made this release possible. Here are som
 
   Update the implementation to better match Material Design:
 
-  - Tab `minWidth` changed from `72px` => `90px` (without media-query) according to [material-design spec](https://material.io/components/tabs#specs)
-  - Tab `maxWidth` changed from `264px` => `360px` according to [material-design spec](https://material.io/components/tabs#specs)
+  - Tab `minWidth` changed from `72px` => `90px` (without media-query) according to [material-design spec](https://m2.material.io/components/tabs#specs)
+  - Tab `maxWidth` changed from `264px` => `360px` according to [material-design spec](https://m2.material.io/components/tabs#specs)
 
 #### Changes
 
@@ -6450,7 +6450,7 @@ A big thanks to the 26 contributors who made this release possible. Here are som
 
 - &#8203;<!-- 087 -->[icons] Synchronize icons (#25055) @eps1lon
 
-  The icons were synchronized with https://material.io/resources/icons/. This change increases the number of supported icons from 1,349 to 1,781 per theme (we support 5 themes). The breaking changes:
+  The icons were synchronized with https://m2.material.io/resources/icons/. This change increases the number of supported icons from 1,349 to 1,781 per theme (we support 5 themes). The breaking changes:
 
   ```diff
    // AmpStories -> Download

CHANGELOG.old.md

@@ -6875,7 +6875,7 @@ Here are some highlights ✨:
 
 - After many iterations, we are happy to announce `@material-ui/icons` v2.0.0 💃.
   With this version, you can take advantage of all the icons recently released by Google:
-  https://material.io/tools/icons/. There are more than 5,000 icons.
+  https://m2.material.io/tools/icons/. There are more than 5,000 icons.
   (#12016, #12036, #12170, #12111, #12225)
 
 - The 1.4.0 release of Material UI has introduced a new implementation of the Tooltip and Popper component.
@@ -8464,7 +8464,7 @@ The `inputType` property was renamed `type`.
 
 - [Checkbox, Radio, Switch] Change default color, add color prop (#10138) @mbrookes
 
-The Material Design specification says that selection controls elements should [use the application's secondary color](https://material.io/guidelines/components/selection-controls.html).
+The Material Design specification says that selection controls elements should [use the application's secondary color](https://m2.material.io/guidelines/components/selection-controls.html).
 
 ```diff
 -<Checkbox />
@@ -9002,7 +9002,7 @@ Here are some highlights ✨:
 
 - [core] Revise the theme.palette.primary & secondary approach (#9794) @mbrookes
 
-It's an important simplification of the palette system. You can now directly use the "official" Color Tool](https://material.io/color/).
+It's an important simplification of the palette system. You can now directly use the "official" Color Tool](https://m2.material.io/color/).
 
 - Instead of using a rich color object of 14 different keys, we rely on an object of 4 different keys: `light`, `main`, `dark` and `contrastText`.
 - Providing the full-color object used to be required. Now, we will provide a nice default to the different values using the `main` value.

README.md

@@ -7,7 +7,7 @@
 
 **MUI Core** contains foundational React UI component libraries for shipping new features faster.
 
-- [_Material UI_](https://mui.com/material-ui/getting-started/overview/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://material.io/design/introduction/) system.
+- [_Material UI_](https://mui.com/material-ui/getting-started/overview/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system.
 
 - [_Joy UI_](https://mui.com/joy-ui/getting-started/overview/) is a beautifully designed library of React UI components.
 

docs/data/base/components/focus-trap/focus-trap.md

@@ -5,7 +5,7 @@ components: FocusTrap
 githubLabel: 'component: FocusTrap'
 ---
 
-# Focus trap
+# Focus Trap
 
 <p class="description">The FocusTrap component prevents the user's focus from escaping its children components.</p>
 

docs/data/base/components/textarea-autosize/textarea-autosize.md

@@ -5,7 +5,7 @@ components: TextareaAutosize
 githubLabel: 'component: TextareaAutosize'
 ---
 
-# Textarea autosize
+# Textarea Autosize
 
 <p class="description">The TextareaAutosize component gives you a textarea HTML element that automatically adjusts its height to match the length of the content within.</p>
 

docs/data/base/pages.ts

@@ -60,14 +60,14 @@ const pages = [
         pathname: '/base/components/utils',
         subheader: 'utils',
         children: [
-          { pathname: '/base/react-click-away-listener', title: 'Click-away listener' },
+          { pathname: '/base/react-click-away-listener', title: 'Click-Away Listener' },
           { pathname: '/base/react-focus-trap', title: 'Focus Trap' },
           { pathname: '/base/react-form-control', title: 'Form control' },
           { pathname: '/base/react-modal', title: 'Modal' },
           { pathname: '/base/react-no-ssr', title: 'No SSR' },
           { pathname: '/base/react-popper', title: 'Popper' },
           { pathname: '/base/react-portal', title: 'Portal' },
-          { pathname: '/base/react-textarea-autosize', title: 'Textarea autosize' },
+          { pathname: '/base/react-textarea-autosize', title: 'Textarea Autosize' },
         ],
       },
     ],

docs/data/joy/components/aspect-ratio/aspect-ratio.md

@@ -3,9 +3,9 @@ product: joy-ui
 title: React Aspect Ratio component
 ---
 
-# Aspect ratio
+# Aspect Ratio
 
-<p class="description">The aspect ratio component shapes the content with the specified ratio.</p>
+<p class="description">The Aspect Ratio component shapes the content with the specified ratio.</p>
 
 ## Introduction
 

docs/data/joy/pages.ts

@@ -33,7 +33,7 @@ const pages = [
           { pathname: '/joy-ui/react-text-field', title: 'Text Field' },
           { pathname: '/joy-ui/react-textarea' },
           { pathname: '/joy-ui/react-checkbox' },
-          { pathname: '/joy-ui/react-radio-button' },
+          { pathname: '/joy-ui/react-radio-button', title: 'Radio Group' },
           { pathname: '/joy-ui/react-select' },
           { pathname: '/joy-ui/react-slider' },
           { pathname: '/joy-ui/react-switch' },
@@ -43,7 +43,7 @@ const pages = [
         pathname: '/joy-ui/components/data-display',
         subheader: 'data-display',
         children: [
-          { pathname: '/joy-ui/react-aspect-ratio' },
+          { pathname: '/joy-ui/react-aspect-ratio', title: 'Aspect Ratio' },
           { pathname: '/joy-ui/react-avatar' },
           { pathname: '/joy-ui/react-badge' },
           { pathname: '/joy-ui/react-chip' },

docs/data/material/components/accordion/accordion-pt.md

@@ -3,7 +3,7 @@ product: material-ui
 title: Componente de Acordeão React
 components: Accordion, AccordionActions, AccordionDetails, AccordionSummary
 githubLabel: 'component: Accordion'
-materialDesign: https://material.io/archive/guidelines/components/expansion-panels.html
+materialDesign: https://m1.material.io/components/expansion-panels.html
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
 ---
 
@@ -16,7 +16,7 @@ Um acordeão é um contêiner leve que pode estar sozinho ou conectado em uma su
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
 :::info
-**Note:** Accordions are no longer documented in the [Material Design guidelines](https://material.io/), but MUI will continue to support them. It was formerly known as the "expansion panel".
+**Note:** Accordions are no longer documented in the [Material Design guidelines](https://m2.material.io/), but MUI will continue to support them. It was formerly known as the "expansion panel".
 :::
 
 ## Acordeão básico

docs/data/material/components/accordion/accordion-zh.md

@@ -3,7 +3,7 @@ product: material-ui
 title: React Accordion （扩展面板）组件
 components: Accordion, AccordionActions, AccordionDetails, AccordionSummary
 githubLabel: 'component: accordion'
-materialDesign: https://material.io/archive/guidelines/components/expansion-panels.html
+materialDesign: https://m1.material.io/components/expansion-panels.html
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
 ---
 
@@ -15,7 +15,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
-**注意：** 此版本的扩展面板将不再记录在 [Material Design 指南中](https://material.io/)，但 Material-UI 将继续支持它。 它之前被称为“expansion panel”。
+**注意：** 此版本的扩展面板将不再记录在 [Material Design 指南中](https://m2.material.io/)，但 Material-UI 将继续支持它。 它之前被称为“expansion panel”。
 :::
 
 ## 简单的扩展面板

docs/data/material/components/accordion/accordion.md

@@ -3,7 +3,7 @@ product: material-ui
 title: React Accordion component
 components: Accordion, AccordionActions, AccordionDetails, AccordionSummary
 githubLabel: 'component: accordion'
-materialDesign: https://material.io/archive/guidelines/components/expansion-panels.html
+materialDesign: https://m1.material.io/components/expansion-panels.html
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
 ---
 
@@ -17,7 +17,7 @@ An accordion is a lightweight container that may either be used standalone, or b
 
 :::info
 **Note:**
-Accordions are no longer documented in the [Material Design guidelines](https://material.io/), but MUI will continue to support them. It was formerly known as the "expansion panel".
+Accordions are no longer documented in the [Material Design guidelines](https://m2.material.io/), but MUI will continue to support them. It was formerly known as the "expansion panel".
 :::
 
 ## Basic accordion

docs/data/material/components/alert/alert-pt.md

@@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/alert/
 
 <p class="description">Um alerta exibe uma mensagem curta e importante de uma forma que atrai a atenção do usuário sem interromper o que ele estiver fazendo.</p>
 
-**Nota:** Este componente não está documentado nas [diretrizes do Material Design](https://material.io/), mas MUI o suporta.
+**Nota:** Este componente não está documentado nas [diretrizes do Material Design](https://m2.material.io/), mas MUI o suporta.
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 

docs/data/material/components/alert/alert-zh.md

@@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/alert/
 
 <p class="description">一个警告提示组件展示了一段简短且重要的信息，在不影响用户操作的同时能够吸引用户的注意力。</p>
 
-**注意：** 警告提示不属于 [Material Design 指南](https://material.io/) 中的一部分，但是 MUI 仍然会继续支持该组件。
+**注意：** 警告提示不属于 [Material Design 指南](https://m2.material.io/) 中的一部分，但是 MUI 仍然会继续支持该组件。
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 

docs/data/material/components/alert/alert.md

@@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/alert/
 
 <p class="description">An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.</p>
 
-**Note:** This component is not documented in the [Material Design guidelines](https://material.io/), but MUI supports it.
+**Note:** This component is not documented in the [Material Design guidelines](https://m2.material.io/), but MUI supports it.
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 

docs/data/material/components/app-bar/app-bar-pt.md

@@ -3,7 +3,7 @@ product: material-ui
 title: App bar React component
 components: AppBar, Toolbar, Menu
 githubLabel: 'component: app bar'
-materialDesign: https://material.io/components/app-bars-top
+materialDesign: https://m2.material.io/components/app-bars-top
 ---
 
 # App bar
@@ -148,6 +148,6 @@ function HideOnScroll(props) {
 
 ## Enable color on dark
 
-Following the [Material Design guidelines](https://material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the app bar in dark mode. You can override this behavior by setting the `enableColorOnDark` prop to `true`.
+Following the [Material Design guidelines](https://m2.material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the app bar in dark mode. You can override this behavior by setting the `enableColorOnDark` prop to `true`.
 
 {{"demo": "EnableColorOnDarkAppBar.js", "bg": true}}

docs/data/material/components/app-bar/app-bar-zh.md

@@ -3,7 +3,7 @@ product: material-ui
 title: 应用栏（App bar）React组件
 components: AppBar, Toolbar, Menu
 githubLabel: 'component: app bar'
-materialDesign: https://material.io/components/app-bars-top
+materialDesign: https://m2.material.io/components/app-bars-top
 ---
 
 # 应用栏（App bar）
@@ -148,6 +148,6 @@ function HideOnScroll(props) {
 
 ## 启用深色模式颜色
 
-按照[Material Design设计准则](https://material.io/design/color/dark-theme.html)，`color`属性对深色模式下的应用栏外观没有影响。 你可以通过将`enableColorOnDark`属性设置为`true`覆盖这一行为。
+按照[Material Design设计准则](https://m2.material.io/design/color/dark-theme.html)，`color`属性对深色模式下的应用栏外观没有影响。 你可以通过将`enableColorOnDark`属性设置为`true`覆盖这一行为。
 
 {{"demo": "EnableColorOnDarkAppBar.js", "bg": true}}

docs/data/material/components/app-bar/app-bar.md

@@ -1,14 +1,14 @@
 ---
 product: material-ui
-title: App bar React component
+title: App Bar React component
 components: AppBar, Toolbar, Menu
 githubLabel: 'component: app bar'
-materialDesign: https://material.io/components/app-bars-top
+materialDesign: https://m2.material.io/components/app-bars-top
 ---
 
-# App bar
+# App Bar
 
-<p class="description">The App bar displays information and actions relating to the current screen.</p>
+<p class="description">The App Bar displays information and actions relating to the current screen.</p>
 
 The top App bar provides content and actions related to the current screen. It's used for branding, screen titles, navigation, and actions.
 
@@ -148,7 +148,7 @@ function HideOnScroll(props) {
 
 ## Enable color on dark
 
-Following the [Material Design guidelines](https://material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the app bar in dark mode.
+Following the [Material Design guidelines](https://m2.material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the app bar in dark mode.
 You can override this behavior by setting the `enableColorOnDark` prop to `true`.
 
 {{"demo": "EnableColorOnDarkAppBar.js", "bg": true}}

docs/data/material/components/bottom-navigation/bottom-navigation-pt.md

@@ -3,14 +3,14 @@ product: material-ui
 title: Bottom navigation React component
 components: BottomNavigation, BottomNavigationAction
 githubLabel: 'component: bottom navigation'
-materialDesign: https://material.io/components/bottom-navigation
+materialDesign: https://m2.material.io/components/bottom-navigation
 ---
 
 # Bottom navigation
 
 <p class="description">A barra de navegação inferior permite navegar entre os principais destinos em um aplicativo.</p>
 
-Barras de [navegação inferior](https://material.io/design/components/bottom-navigation.html) apresentam de três a cinco destinos na parte inferior da tela. Cada destino é apresentado por um ícone e opcionalmente um rótulo de texto. Quando um ícone de navegação inferior é pressionado, o usuário é levado ao destino associado com ícone.
+Barras de [navegação inferior](https://m2.material.io/components/bottom-navigation) apresentam de três a cinco destinos na parte inferior da tela. Cada destino é apresentado por um ícone e opcionalmente um rótulo de texto. Quando um ícone de navegação inferior é pressionado, o usuário é levado ao destino associado com ícone.
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 

docs/data/material/components/bottom-navigation/bottom-navigation-zh.md

@@ -3,7 +3,7 @@ product: material-ui
 title: Bottom navigation React component
 components: BottomNavigation, BottomNavigationAction
 githubLabel: 'component: bottom navigation'
-materialDesign: https://material.io/components/bottom-navigation
+materialDesign: https://m2.material.io/components/bottom-navigation
 ---
 
 # Bottom navigation

docs/data/material/components/bottom-navigation/bottom-navigation.md

@@ -1,14 +1,14 @@
 ---
 product: material-ui
-title: Bottom navigation React component
+title: Bottom Navigation React component
 components: BottomNavigation, BottomNavigationAction
 githubLabel: 'component: bottom navigation'
-materialDesign: https://material.io/components/bottom-navigation
+materialDesign: https://m2.material.io/components/bottom-navigation
 ---
 
-# Bottom navigation
+# Bottom Navigation
 
-<p class="description">Bottom navigation bars allow movement between primary destinations in an app.</p>
+<p class="description">The Bottom Bavigation bar allows movement between primary destinations in an app.</p>
 
 Bottom navigation bars display three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon.