[docs] Add BackdropUnstyled docs

docs/data/base/components/backdrop/SimpleBackdrop.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import BackdropUnstyled from '@mui/base/BackdropUnstyled';
+import { styled } from '@mui/system';
+
+const Backdrop = styled(BackdropUnstyled)`
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1201;
+`;
+
+export default function SimpleBackdrop() {
+  const [open, setOpen] = React.useState(false);
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  return (
+    <div>
+      <button type="button" onClick={handleOpen}>
+        Show backdrop
+      </button>
+      {open && <Backdrop onClick={handleClose} />}
+    </div>
+  );
+}

docs/data/base/components/backdrop/SimpleBackdrop.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import BackdropUnstyled from '@mui/base/BackdropUnstyled';
+import { styled } from '@mui/system';
+
+const Backdrop = styled(BackdropUnstyled)`
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1201;
+`;
+
+export default function SimpleBackdrop() {
+  const [open, setOpen] = React.useState(false);
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  return (
+    <div>
+      <button type="button" onClick={handleOpen}>
+        Show backdrop
+      </button>
+      {open && <Backdrop onClick={handleClose} />}
+    </div>
+  );
+}

docs/data/base/components/backdrop/SimpleBackdrop.tsx.preview

@@ -0,0 +1,4 @@
+<button type="button" onClick={handleOpen}>
+  Show backdrop
+</button>
+{open && <Backdrop onClick={handleClose} />}

docs/data/base/components/backdrop/backdrop.md

@@ -0,0 +1,24 @@
+---
+product: base
+title: Unstyled React backdrop
+components: BackdropUnstyled
+githubLabel: 'component: backdrop'
+packageName: '@mui/base'
+---
+
+# Unstyled backdrop
+
+<p class="description">The backdrop component is used to provide emphasis on a particular element or parts of it.</p>
+
+```js
+import BackdropUnstyled from '@mui/base/BackdropUnstyled';
+```
+
+The backdrop signals to the user of a state change within the application and can be used for creating loaders, dialogs, and more.
+In its simplest form, the backdrop component will add a dimmed layer over your application.
+
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+## Example
+
+{{"demo": "SimpleBackdrop.js", "defaultCodeOpen": false}}

docs/data/base/pages.ts

@@ -16,6 +16,11 @@ const pages = [
         subheader: 'inputs',
         children: [{ pathname: '/base/react-button', title: 'Button' }],
       },
+      {
+        pathname: '/base/components/feedback',
+        subheader: 'feedback',
+        children: [{ pathname: '/base/react-backdrop', title: 'Backdrop' }],
+      },
       {
         pathname: '/base/components/navigation',
         subheader: 'navigation',

docs/data/material/components/backdrop/backdrop.md

@@ -1,8 +1,9 @@
 ---
 product: material-ui
 title: Backdrop React Component
-components: Backdrop, BackdropUnstyled
+components: Backdrop
 githubLabel: 'component: backdrop'
+unstyled: /base/react-backdrop
 ---
 
 # Backdrop
@@ -17,12 +18,3 @@ In its simplest form, the backdrop component will add a dimmed layer over your a
 ## Example
 
 {{"demo": "SimpleBackdrop.js"}}
-
-## Unstyled
-
-The backdrop also comes with the Base package.
-It's ideal for doing heavy customizations and minimizing bundle size.
-
-```js
-import BackdropUnstyled from '@mui/base/BackdropUnstyled';
-```

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

@@ -23,6 +23,6 @@
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/mui-base/src/BackdropUnstyled/BackdropUnstyled.js",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/material-ui/react-backdrop/\">Backdrop</a></li></ul>",
+  "demos": "<ul><li><a href=\"/base/react-backdrop/\">Backdrop</a></li>\n<li><a href=\"/material/react-backdrop/\">Backdrop</a></li></ul>",
   "cssComponent": false
 }

docs/pages/base/react-backdrop.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+  demos,
+  docs,
+  demoComponents,
+} from 'docs/data/base/components/backdrop/backdrop.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+}

docs/scripts/buildApiUtils.ts

@@ -102,7 +102,12 @@ export type ComponentInfo = {
   skipApiGeneration?: boolean;
 };
 
-const migratedBaseComponents = ['ButtonUnstyled', 'MenuUnstyled', 'MenuItemUnstyled'];
+const migratedBaseComponents = [
+  'BackdropUnstyled',
+  'ButtonUnstyled',
+  'MenuUnstyled',
+  'MenuItemUnstyled',
+];
 
 export const getGenericComponentInfo = (filename: string): ComponentInfo => {
   const { name } = extractPackageFile(filename);

docs/src/pagesApi.js

@@ -10,7 +10,6 @@ module.exports = [
   { pathname: '/api-docs/avatar' },
   { pathname: '/api-docs/avatar-group' },
   { pathname: '/api-docs/backdrop' },
-  { pathname: '/api-docs/backdrop-unstyled' },
   { pathname: '/api-docs/badge' },
   { pathname: '/api-docs/badge-unstyled' },
   { pathname: '/api-docs/bottom-navigation' },

packages/mui-base/src/BackdropUnstyled/BackdropUnstyled.d.ts

@@ -55,11 +55,12 @@ export type ExtendBackdropUnstyled<M extends OverridableTypeMap> = OverridableCo
  *
  * Demos:
  *
- * - [Backdrop](https://mui.com/components/backdrop/)
+ * - [Backdrop](https://mui.com/base/react-backdrop/)
+ * - [Backdrop](https://mui.com/material/react-backdrop/)
  *
  * API:
  *
- * - [BackdropUnstyled API](https://mui.com/api/backdrop-unstyled/)
+ * - [BackdropUnstyled API](https://mui.com/base/api/backdrop-unstyled/)
  */
 declare const BackdropUnstyled: OverridableComponent<BackdropUnstyledTypeMap>;