[docs] Migrate button demos to base (#31395)

.eslintrc.js

@@ -250,6 +250,8 @@ module.exports = {
         // This is safe to do and helps readability of the demo code since the data is mostly irrelevant.
         '@typescript-eslint/no-use-before-define': 'off',
         'react/prop-types': 'off',
+        'no-alert': 'off',
+        'no-console': 'off',
       },
     },
     {

docs/data/base/components/button/button.md

@@ -1,17 +1,49 @@
 ---
 product: base
-title: React button unstyled
+title: Unstyled React button
+components: ButtonUnstyled
 githubLabel: 'component: button'
+waiAria: https://www.w3.org/TR/wai-aria-practices/#button
 ---
 
-# Button unstyled
+# Unstyled button
 
-<p class="description">Buttons allow users to take actions, and make choices, with a single tap.</p>
+<p class="description">Buttons allow users to take actions and make choices with a single tap.</p>
 
 ## Basic usage
 
+```js
+import ButtonUnstyled from '@mui/base/ButtonUnstyled';
+```
+
+{{"demo": "UnstyledButtonsSimple.js"}}
+
 ## Customizing the root element
 
+By default, the `ButtonUnstyled` component renders a native `button` HTML element.
+You can override this by setting the `component` or `components.Root` prop.
+If you provide a non-interactive element, such as a `span`, the `ButtonUnstyled` component will automatically add the necessary accessibility attributes.
+
+{{"demo": "UnstyledButtonsSpan.js"}}
+
+Compare the attributes on the `span` with the `button` from the previous demo.
+
 ## Complex customization
 
-## `useButton` hook
+In addition to HTML elements, you can also use SVGs with the `ButtonUnstyled` component.
+
+{{"demo": "UnstyledButtonCustom.js"}}
+
+## useButton hook
+
+```js
+import { useButton } from '@mui/base/ButtonUnstyled';
+```
+
+The `useButton` hook lets you use the functionality of `ButtonUnstyled` in other components.
+It returns props to be placed on a custom button element, along with fields representing the internal state of the button.
+
+The `useButton` hook requires the `ref` of the element it's used on.
+Additionally, you need to provide the `component` prop (unless you intend to use the plain `button`).
+
+{{"demo": "UseButton.js"}}

docs/data/base/components/menu/MenuSimple.js

@@ -140,7 +140,6 @@ export default function UnstyledMenuSimple() {
 
   const createHandleMenuClick = (menuItem) => {
     return () => {
-      // eslint-disable-next-line no-console
       console.log(`Clicked on ${menuItem}`);
       close();
     };

docs/data/base/components/menu/MenuSimple.tsx

@@ -140,7 +140,6 @@ export default function UnstyledMenuSimple() {
 
   const createHandleMenuClick = (menuItem: string) => {
     return () => {
-      // eslint-disable-next-line no-console
       console.log(`Clicked on ${menuItem}`);
       close();
     };

docs/data/base/components/menu/WrappedMenuItems.js

@@ -177,7 +177,6 @@ export default function WrappedMenuItems() {
 
   const createHandleMenuClick = (menuItem) => {
     return () => {
-      // eslint-disable-next-line no-console
       console.log(`Clicked on ${menuItem}`);
       close();
     };

docs/data/base/components/menu/WrappedMenuItems.tsx

@@ -176,7 +176,6 @@ export default function WrappedMenuItems() {
 
   const createHandleMenuClick = (menuItem: string) => {
     return () => {
-      // eslint-disable-next-line no-console
       console.log(`Clicked on ${menuItem}`);
       close();
     };

docs/data/base/components/menu/menu.md

@@ -1,7 +1,7 @@
 ---
 product: base
 title: React Menu unstyled component and hook
-components: ''
+components: MenuUnstyled, MenuItemUnstyled
 githubLabel: 'component: menu'
 waiAria: https://www.w3.org/TR/wai-aria-practices/#menu
 ---

docs/data/material/components/buttons/buttons.md

@@ -1,10 +1,11 @@
 ---
 product: material-ui
 title: React Button component
-components: Button, IconButton, ButtonBase, LoadingButton, ButtonUnstyled
+components: Button, IconButton, ButtonBase, LoadingButton
 materialDesign: https://material.io/components/buttons
 githubLabel: 'component: button'
 waiAria: https://www.w3.org/TR/wai-aria-practices/#button
+unstyled: /base/react-button/
 ---
 
 # Button
@@ -180,46 +181,3 @@ However:
 ```
 
 This has the advantage of supporting any element, for instance, a link `<a>` element.
-
-## Unstyled
-
-The button also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.
-
-### Unstyled component
-
-```js
-import ButtonUnstyled from '@mui/base/ButtonUnstyled';
-```
-
-{{"demo": "UnstyledButtonsSimple.js"}}
-
-#### Customizing the root element
-
-By default, the `ButtonUnstyled` renders a native `button` element.
-You are free to override this by setting the `component` or `components.Root` prop.
-If a non-interactive element (such as a span) is provided this way, the `ButtonUnstyled` will take care of adding accessibility attributes.
-
-{{"demo": "UnstyledButtonsSpan.js"}}
-
-Compare the attributes on the span with the button from the previous demo.
-
-#### Complex customization
-
-You are not limited to using HTML elements for the button structure.
-SVG elements, even with complex structure, are equally acceptable.
-
-{{"demo": "UnstyledButtonCustom.js"}}
-
-### useButton hook
-
-```js
-import { useButton } from '@mui/base/ButtonUnstyled';
-```
-
-If you need to use Button's functionality in another component, you can use the `useButton` hook.
-It returns props to be placed on a custom button element and fields representing the internal state of the button.
-
-The `useButton` hook requires the ref of the element it'll be used on.
-Additionally, you need to provide the `component` prop (unless you intend to use the plain `button`).
-
-{{"demo": "UseButton.js"}}

docs/data/material/components/menus/menus.md

@@ -1,10 +1,11 @@
 ---
 product: material-ui
 title: React Menu component
-components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper, MenuUnstyled, MenuItemUnstyled
+components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper
 githubLabel: 'component: menu'
 materialDesign: https://material.io/components/menus
 waiAria: https://www.w3.org/TR/wai-aria-practices/#menubutton
+unstyled: /base/react-menu/
 ---
 
 # Menu
@@ -105,13 +106,6 @@ Here is an example of a context menu. (Right click to open.)
 
 {{"demo": "ContextMenu.js"}}
 
-## Unstyled
-
-The Menu also comes with an unstyled version.
-It's ideal for doing heavy customizations and minimizing bundle size.
-
-See its docs on the [MUI Base section](/base/react-menu).
-
 ## Complementary projects
 
 For more advanced use cases you might be able to take advantage of:

docs/data/material/getting-started/templates/sign-in-side/SignInSide.js

@@ -32,7 +32,6 @@ export default function SignInSide() {
   const handleSubmit = (event) => {
     event.preventDefault();
     const data = new FormData(event.currentTarget);
-    // eslint-disable-next-line no-console
     console.log({
       email: data.get('email'),
       password: data.get('password'),

docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx

@@ -32,7 +32,6 @@ export default function SignInSide() {
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const data = new FormData(event.currentTarget);
-    // eslint-disable-next-line no-console
     console.log({
       email: data.get('email'),
       password: data.get('password'),

docs/data/material/getting-started/templates/sign-in/SignIn.js

@@ -32,7 +32,6 @@ export default function SignIn() {
   const handleSubmit = (event) => {
     event.preventDefault();
     const data = new FormData(event.currentTarget);
-    // eslint-disable-next-line no-console
     console.log({
       email: data.get('email'),
       password: data.get('password'),

docs/data/material/getting-started/templates/sign-in/SignIn.tsx

@@ -32,7 +32,6 @@ export default function SignIn() {
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const data = new FormData(event.currentTarget);
-    // eslint-disable-next-line no-console
     console.log({
       email: data.get('email'),
       password: data.get('password'),

docs/data/material/getting-started/templates/sign-up/SignUp.js

@@ -32,7 +32,6 @@ export default function SignUp() {
   const handleSubmit = (event) => {
     event.preventDefault();
     const data = new FormData(event.currentTarget);
-    // eslint-disable-next-line no-console
     console.log({
       email: data.get('email'),
       password: data.get('password'),

docs/data/material/getting-started/templates/sign-up/SignUp.tsx

@@ -32,7 +32,6 @@ export default function SignUp() {
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const data = new FormData(event.currentTarget);
-    // eslint-disable-next-line no-console
     console.log({
       email: data.get('email'),
       password: data.get('password'),

docs/packages/markdown/parseMarkdown.js

@@ -291,6 +291,14 @@ function prepareMarkdown(config) {
       const description = headers.description || getDescription(markdown);
       const contents = getContents(markdown);
 
+      if (headers.unstyled) {
+        contents.push(`
+## Unstyled
+
+The component also comes with an [unstyled version](${headers.unstyled}). It's ideal for doing heavy customizations and minimizing bundle size.
+        `);
+      }
+
       if (headers.components.length > 0) {
         contents.push(`
 ## API

docs/pages/base/api/button-unstyled.json

@@ -23,6 +23,6 @@
   "forwardsRefTo": "HTMLButtonElement",
   "filename": "/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/material-ui/react-button/\">Buttons</a></li></ul>",
+  "demos": "<ul><li><a href=\"/base/react-button/\">Button</a></li></ul>",
   "cssComponent": false
 }