From 14c4a7a625821ded11691a750221ca50ebe4e9bf Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 15 Jan 2024 17:04:53 -0600
Subject: [PATCH 01/11] first pass on system doc
---
docs/data/system/components/box/BoxBasic.js | 2 +-
docs/data/system/components/box/BoxBasic.tsx | 2 +-
.../components/box/BoxBasic.tsx.preview | 2 +-
.../system/components/box/BoxSystemProps.js | 19 +++++++++++
.../system/components/box/BoxSystemProps.tsx | 19 +++++++++++
.../components/box/BoxSystemProps.tsx.preview | 2 ++
docs/data/system/components/box/box.md | 32 +++++++++----------
7 files changed, 59 insertions(+), 19 deletions(-)
create mode 100644 docs/data/system/components/box/BoxSystemProps.js
create mode 100644 docs/data/system/components/box/BoxSystemProps.tsx
create mode 100644 docs/data/system/components/box/BoxSystemProps.tsx.preview
diff --git a/docs/data/system/components/box/BoxBasic.js b/docs/data/system/components/box/BoxBasic.js
index e05af05a8dce35..1ba8f5832c523b 100644
--- a/docs/data/system/components/box/BoxBasic.js
+++ b/docs/data/system/components/box/BoxBasic.js
@@ -4,7 +4,7 @@ import Box from '@mui/system/Box';
export default function BoxBasic() {
return (
- This is a section container
+ This Box renders as an HTML section element.
);
}
diff --git a/docs/data/system/components/box/BoxBasic.tsx b/docs/data/system/components/box/BoxBasic.tsx
index e05af05a8dce35..1ba8f5832c523b 100644
--- a/docs/data/system/components/box/BoxBasic.tsx
+++ b/docs/data/system/components/box/BoxBasic.tsx
@@ -4,7 +4,7 @@ import Box from '@mui/system/Box';
export default function BoxBasic() {
return (
- This is a section container
+ This Box renders as an HTML section element.
);
}
diff --git a/docs/data/system/components/box/BoxBasic.tsx.preview b/docs/data/system/components/box/BoxBasic.tsx.preview
index 3f47facef29add..d22b5b82187b80 100644
--- a/docs/data/system/components/box/BoxBasic.tsx.preview
+++ b/docs/data/system/components/box/BoxBasic.tsx.preview
@@ -1,2 +1,2 @@
- This is a section container
+ This Box renders as an HTML section element.
diff --git a/docs/data/system/components/box/BoxSystemProps.js b/docs/data/system/components/box/BoxSystemProps.js
new file mode 100644
index 00000000000000..966f9739d26db8
--- /dev/null
+++ b/docs/data/system/components/box/BoxSystemProps.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+
+export default function BoxSystemProps() {
+ return (
+
+ This Box uses MUI System props for quick customization.
+
+ );
+}
diff --git a/docs/data/system/components/box/BoxSystemProps.tsx b/docs/data/system/components/box/BoxSystemProps.tsx
new file mode 100644
index 00000000000000..966f9739d26db8
--- /dev/null
+++ b/docs/data/system/components/box/BoxSystemProps.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+
+export default function BoxSystemProps() {
+ return (
+
+ This Box uses MUI System props for quick customization.
+
+ );
+}
diff --git a/docs/data/system/components/box/BoxSystemProps.tsx.preview b/docs/data/system/components/box/BoxSystemProps.tsx.preview
new file mode 100644
index 00000000000000..b0decb0904b5a3
--- /dev/null
+++ b/docs/data/system/components/box/BoxSystemProps.tsx.preview
@@ -0,0 +1,2 @@
+
+ This Box uses MUI System props for quick customization.
diff --git a/docs/data/system/components/box/box.md b/docs/data/system/components/box/box.md
index 59b120eda8c622..a67f3b3adf6a46 100644
--- a/docs/data/system/components/box/box.md
+++ b/docs/data/system/components/box/box.md
@@ -14,7 +14,12 @@ githubLabel: 'component: Box'
## Introduction
The Box component is a generic container for grouping other components.
-It's a fundamental building block when building with MUI component libraries—you can think of it as a `
` with special features (like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/)).
+It's a fundamental building block when working with MUI component libraries—you can think of it as a `
` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
+
+### Usage
+
+The Box component differs from other containers available in Material UI because its usage is intended to be multipurpose and open-ended, just like a `
`.
+Components like [Stack](/material-ui/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases—Stack for one-dimensional layouts, and Paper for elevated surfaces.
## Basics
@@ -27,28 +32,23 @@ The demo below replaces the `
` with a `` element:
{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
-:::info
-The Box component differs from other containers available in Material UI and Joy UI because it's intended to be multipurpose—components like [Stack](/material-ui/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases.
-:::
-
-## Component
+## Customization
-### Using the sx prop
+### Using system props
-Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS with access to all the style functions and theme-aware properties exposed in the MUI System package.
+As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
+You can use them as props directly on the component.
-{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
+{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }}
-### System props
+### Using the sx prop
-As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
-You can use them as prop directly on the component.
+Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
+The demo below shows how to apply colors from the theme using this prop:
-```jsx
-
-```
+{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
-## Create your own Box component
+### Create your own Box
Use the `createBox()` utility to create your version of the Box component.
This is useful if you need to expose your container to a theme that's different from the default theme of the library you're working with:
From a0081ab59e1c131570ddaaab1d6e0e887b97b9e3 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Fri, 9 Feb 2024 16:44:04 -0600
Subject: [PATCH 02/11] restore all box pages and demos
---
docs/data/joy/components/box/BoxBasic.js | 10 +++
docs/data/joy/components/box/BoxBasic.tsx | 10 +++
.../joy/components/box/BoxBasic.tsx.preview | 2 +
docs/data/joy/components/box/BoxComponent.js | 11 +++
docs/data/joy/components/box/BoxComponent.tsx | 11 +++
.../components/box/BoxComponent.tsx.preview | 1 +
docs/data/joy/components/box/BoxSx.js | 29 ++++++++
docs/data/joy/components/box/BoxSx.tsx | 29 ++++++++
.../data/joy/components/box/BoxSystemProps.js | 19 ++++++
.../joy/components/box/BoxSystemProps.tsx | 19 ++++++
.../components/box/BoxSystemProps.tsx.preview | 2 +
docs/data/joy/components/box/box.md | 68 +++++++++++++++++--
docs/data/material/components/box/BoxBasic.js | 10 +++
.../data/material/components/box/BoxBasic.tsx | 10 +++
.../components/box/BoxBasic.tsx.preview | 2 +
.../material/components/box/BoxComponent.js | 2 +-
.../material/components/box/BoxComponent.tsx | 2 +-
docs/data/material/components/box/BoxSx.js | 31 ++++++---
docs/data/material/components/box/BoxSx.tsx | 31 ++++++---
.../material/components/box/BoxSx.tsx.preview | 11 ---
.../material/components/box/BoxSystemProps.js | 19 ++++++
.../components/box/BoxSystemProps.tsx | 19 ++++++
.../components/box/BoxSystemProps.tsx.preview | 2 +
docs/data/material/components/box/box.md | 68 +++++++++++++++++--
docs/data/system/components/box/box.md | 15 +++-
25 files changed, 387 insertions(+), 46 deletions(-)
create mode 100644 docs/data/joy/components/box/BoxBasic.js
create mode 100644 docs/data/joy/components/box/BoxBasic.tsx
create mode 100644 docs/data/joy/components/box/BoxBasic.tsx.preview
create mode 100644 docs/data/joy/components/box/BoxComponent.js
create mode 100644 docs/data/joy/components/box/BoxComponent.tsx
create mode 100644 docs/data/joy/components/box/BoxComponent.tsx.preview
create mode 100644 docs/data/joy/components/box/BoxSx.js
create mode 100644 docs/data/joy/components/box/BoxSx.tsx
create mode 100644 docs/data/joy/components/box/BoxSystemProps.js
create mode 100644 docs/data/joy/components/box/BoxSystemProps.tsx
create mode 100644 docs/data/joy/components/box/BoxSystemProps.tsx.preview
create mode 100644 docs/data/material/components/box/BoxBasic.js
create mode 100644 docs/data/material/components/box/BoxBasic.tsx
create mode 100644 docs/data/material/components/box/BoxBasic.tsx.preview
delete mode 100644 docs/data/material/components/box/BoxSx.tsx.preview
create mode 100644 docs/data/material/components/box/BoxSystemProps.js
create mode 100644 docs/data/material/components/box/BoxSystemProps.tsx
create mode 100644 docs/data/material/components/box/BoxSystemProps.tsx.preview
diff --git a/docs/data/joy/components/box/BoxBasic.js b/docs/data/joy/components/box/BoxBasic.js
new file mode 100644
index 00000000000000..1ba8f5832c523b
--- /dev/null
+++ b/docs/data/joy/components/box/BoxBasic.js
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+
+export default function BoxBasic() {
+ return (
+
+ This Box renders as an HTML section element.
+
+ );
+}
diff --git a/docs/data/joy/components/box/BoxBasic.tsx b/docs/data/joy/components/box/BoxBasic.tsx
new file mode 100644
index 00000000000000..1ba8f5832c523b
--- /dev/null
+++ b/docs/data/joy/components/box/BoxBasic.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+
+export default function BoxBasic() {
+ return (
+
+ This Box renders as an HTML section element.
+
+ );
+}
diff --git a/docs/data/joy/components/box/BoxBasic.tsx.preview b/docs/data/joy/components/box/BoxBasic.tsx.preview
new file mode 100644
index 00000000000000..d22b5b82187b80
--- /dev/null
+++ b/docs/data/joy/components/box/BoxBasic.tsx.preview
@@ -0,0 +1,2 @@
+
+ This Box renders as an HTML section element.
diff --git a/docs/data/joy/components/box/BoxComponent.js b/docs/data/joy/components/box/BoxComponent.js
new file mode 100644
index 00000000000000..28a050a35091af
--- /dev/null
+++ b/docs/data/joy/components/box/BoxComponent.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Box } from '@mui/system';
+import Button from '@mui/material/Button';
+
+export default function BoxComponent() {
+ return (
+
+
+
+ );
+}
diff --git a/docs/data/joy/components/box/BoxComponent.tsx b/docs/data/joy/components/box/BoxComponent.tsx
new file mode 100644
index 00000000000000..28a050a35091af
--- /dev/null
+++ b/docs/data/joy/components/box/BoxComponent.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Box } from '@mui/system';
+import Button from '@mui/material/Button';
+
+export default function BoxComponent() {
+ return (
+
+
+
+ );
+}
diff --git a/docs/data/joy/components/box/BoxComponent.tsx.preview b/docs/data/joy/components/box/BoxComponent.tsx.preview
new file mode 100644
index 00000000000000..43eef49d466ae8
--- /dev/null
+++ b/docs/data/joy/components/box/BoxComponent.tsx.preview
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/data/joy/components/box/BoxSx.js b/docs/data/joy/components/box/BoxSx.js
new file mode 100644
index 00000000000000..02588228006729
--- /dev/null
+++ b/docs/data/joy/components/box/BoxSx.js
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Box, ThemeProvider } from '@mui/system';
+
+export default function BoxSx() {
+ return (
+
+
+
+ );
+}
diff --git a/docs/data/joy/components/box/BoxSx.tsx b/docs/data/joy/components/box/BoxSx.tsx
new file mode 100644
index 00000000000000..02588228006729
--- /dev/null
+++ b/docs/data/joy/components/box/BoxSx.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Box, ThemeProvider } from '@mui/system';
+
+export default function BoxSx() {
+ return (
+
+
+
+ );
+}
diff --git a/docs/data/joy/components/box/BoxSystemProps.js b/docs/data/joy/components/box/BoxSystemProps.js
new file mode 100644
index 00000000000000..966f9739d26db8
--- /dev/null
+++ b/docs/data/joy/components/box/BoxSystemProps.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+
+export default function BoxSystemProps() {
+ return (
+
+ This Box uses MUI System props for quick customization.
+
+ );
+}
diff --git a/docs/data/joy/components/box/BoxSystemProps.tsx b/docs/data/joy/components/box/BoxSystemProps.tsx
new file mode 100644
index 00000000000000..966f9739d26db8
--- /dev/null
+++ b/docs/data/joy/components/box/BoxSystemProps.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+
+export default function BoxSystemProps() {
+ return (
+
+ This Box uses MUI System props for quick customization.
+
+ );
+}
diff --git a/docs/data/joy/components/box/BoxSystemProps.tsx.preview b/docs/data/joy/components/box/BoxSystemProps.tsx.preview
new file mode 100644
index 00000000000000..b0decb0904b5a3
--- /dev/null
+++ b/docs/data/joy/components/box/BoxSystemProps.tsx.preview
@@ -0,0 +1,2 @@
+
+ This Box uses MUI System props for quick customization.
diff --git a/docs/data/joy/components/box/box.md b/docs/data/joy/components/box/box.md
index 599fb5832322ce..4e23c8cfa7485b 100644
--- a/docs/data/joy/components/box/box.md
+++ b/docs/data/joy/components/box/box.md
@@ -9,9 +9,67 @@ githubLabel: 'component: Box'
The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.
-:::warning
-Please refer to the [Box](/system/react-box/) component page in the MUI System docs for demos and details on usage.
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-The Box component is a part of the standalone [MUI System](/system/getting-started/) utility library.
-It is re-exported from `@mui/joy` for your convenience.
-:::
+## Introduction
+
+The Box component is a generic container for grouping other components.
+It's a fundamental building block when working with MUI component libraries—you can think of it as a `
` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
+
+### Usage
+
+The Box component differs from other containers available in Material UI because its usage is intended to be multipurpose and open-ended, just like a `
`.
+Components like [Container](/system/react-container/), [Stack](/system/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for horizontal centering, Stack for one-dimensional layouts, and Paper for elevated surfaces.
+
+## Basics
+
+```jsx
+import Box from '@mui/system/Box';
+```
+
+The Box component renders as a `
` by default, but you can swap in any other valid HTML tag or React component using the `component` prop.
+The demo below replaces the `
` with a `` element:
+
+{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
+
+### Using system props
+
+As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
+You can use them as props directly on the component.
+
+{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }}
+
+### Using the sx prop
+
+Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
+The demo below shows how to apply colors from the theme using this prop:
+
+{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
+
+## Customization
+
+### Create your own Box
+
+Use the `createBox()` utility to create your version of the Box component.
+This is useful if you need to expose your container to a theme that's different from the default theme of the library you're working with:
+
+```js
+import { createBox, createTheme } from '@mui/system';
+
+const defaultTheme = createTheme({
+ // your custom theme values
+});
+
+const Box = createBox({ defaultTheme });
+
+export default Box;
+```
+## Anatomy
+
+The Box component is composed of a single root `
` element:
+
+```html
+
+
+
+```
\ No newline at end of file
diff --git a/docs/data/material/components/box/BoxBasic.js b/docs/data/material/components/box/BoxBasic.js
new file mode 100644
index 00000000000000..1ba8f5832c523b
--- /dev/null
+++ b/docs/data/material/components/box/BoxBasic.js
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+
+export default function BoxBasic() {
+ return (
+
+ This Box renders as an HTML section element.
+
+ );
+}
diff --git a/docs/data/material/components/box/BoxBasic.tsx b/docs/data/material/components/box/BoxBasic.tsx
new file mode 100644
index 00000000000000..1ba8f5832c523b
--- /dev/null
+++ b/docs/data/material/components/box/BoxBasic.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+
+export default function BoxBasic() {
+ return (
+
+ This Box renders as an HTML section element.
+
+ );
+}
diff --git a/docs/data/material/components/box/BoxBasic.tsx.preview b/docs/data/material/components/box/BoxBasic.tsx.preview
new file mode 100644
index 00000000000000..d22b5b82187b80
--- /dev/null
+++ b/docs/data/material/components/box/BoxBasic.tsx.preview
@@ -0,0 +1,2 @@
+
+ This Box renders as an HTML section element.
diff --git a/docs/data/material/components/box/BoxComponent.js b/docs/data/material/components/box/BoxComponent.js
index 5376e3c004a69a..28a050a35091af 100644
--- a/docs/data/material/components/box/BoxComponent.js
+++ b/docs/data/material/components/box/BoxComponent.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/system';
import Button from '@mui/material/Button';
export default function BoxComponent() {
diff --git a/docs/data/material/components/box/BoxComponent.tsx b/docs/data/material/components/box/BoxComponent.tsx
index 5376e3c004a69a..28a050a35091af 100644
--- a/docs/data/material/components/box/BoxComponent.tsx
+++ b/docs/data/material/components/box/BoxComponent.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/system';
import Button from '@mui/material/Button';
export default function BoxComponent() {
diff --git a/docs/data/material/components/box/BoxSx.js b/docs/data/material/components/box/BoxSx.js
index 66080ed99ef7d9..02588228006729 100644
--- a/docs/data/material/components/box/BoxSx.js
+++ b/docs/data/material/components/box/BoxSx.js
@@ -1,18 +1,29 @@
import * as React from 'react';
-import Box from '@mui/material/Box';
+import { Box, ThemeProvider } from '@mui/system';
export default function BoxSx() {
return (
-
+ >
+
+
);
}
diff --git a/docs/data/material/components/box/BoxSx.tsx b/docs/data/material/components/box/BoxSx.tsx
index 66080ed99ef7d9..02588228006729 100644
--- a/docs/data/material/components/box/BoxSx.tsx
+++ b/docs/data/material/components/box/BoxSx.tsx
@@ -1,18 +1,29 @@
import * as React from 'react';
-import Box from '@mui/material/Box';
+import { Box, ThemeProvider } from '@mui/system';
export default function BoxSx() {
return (
-
+ >
+
+
);
}
diff --git a/docs/data/material/components/box/BoxSx.tsx.preview b/docs/data/material/components/box/BoxSx.tsx.preview
deleted file mode 100644
index 88ed3ecbb91e7d..00000000000000
--- a/docs/data/material/components/box/BoxSx.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/box/BoxSystemProps.js b/docs/data/material/components/box/BoxSystemProps.js
new file mode 100644
index 00000000000000..966f9739d26db8
--- /dev/null
+++ b/docs/data/material/components/box/BoxSystemProps.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+
+export default function BoxSystemProps() {
+ return (
+
+ This Box uses MUI System props for quick customization.
+
+ );
+}
diff --git a/docs/data/material/components/box/BoxSystemProps.tsx b/docs/data/material/components/box/BoxSystemProps.tsx
new file mode 100644
index 00000000000000..966f9739d26db8
--- /dev/null
+++ b/docs/data/material/components/box/BoxSystemProps.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+
+export default function BoxSystemProps() {
+ return (
+
+ This Box uses MUI System props for quick customization.
+
+ );
+}
diff --git a/docs/data/material/components/box/BoxSystemProps.tsx.preview b/docs/data/material/components/box/BoxSystemProps.tsx.preview
new file mode 100644
index 00000000000000..b0decb0904b5a3
--- /dev/null
+++ b/docs/data/material/components/box/BoxSystemProps.tsx.preview
@@ -0,0 +1,2 @@
+
+ This Box uses MUI System props for quick customization.
diff --git a/docs/data/material/components/box/box.md b/docs/data/material/components/box/box.md
index 8a0d4906f7483a..ec157eb890b35b 100644
--- a/docs/data/material/components/box/box.md
+++ b/docs/data/material/components/box/box.md
@@ -9,9 +9,67 @@ githubLabel: 'component: Box'
The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.
-:::warning
-Please refer to the [Box](/system/react-box/) component page in the MUI System docs for demos and details on usage.
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-The Box component is a part of the standalone [MUI System](/system/getting-started/) utility library.
-It is re-exported from `@mui/material` for your convenience.
-:::
+## Introduction
+
+The Box component is a generic container for grouping other components.
+It's a fundamental building block when working with MUI component libraries—you can think of it as a `
` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
+
+### Usage
+
+The Box component differs from other containers available in Material UI because its usage is intended to be multipurpose and open-ended, just like a `
`.
+Components like [Container](/system/react-container/), [Stack](/system/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for horizontal centering, Stack for one-dimensional layouts, and Paper for elevated surfaces.
+
+## Basics
+
+```jsx
+import Box from '@mui/system/Box';
+```
+
+The Box component renders as a `
` by default, but you can swap in any other valid HTML tag or React component using the `component` prop.
+The demo below replaces the `
` with a `` element:
+
+{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
+
+### Using system props
+
+As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
+You can use them as props directly on the component.
+
+{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }}
+
+### Using the sx prop
+
+Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
+The demo below shows how to apply colors from the theme using this prop:
+
+{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
+
+## Customization
+
+### Create your own Box
+
+Use the `createBox()` utility to create your version of the Box component.
+This is useful if you need to expose your container to a theme that's different from the default theme of the library you're working with:
+
+```js
+import { createBox, createTheme } from '@mui/system';
+
+const defaultTheme = createTheme({
+ // your custom theme values
+});
+
+const Box = createBox({ defaultTheme });
+
+export default Box;
+```
+## Anatomy
+
+The Box component is composed of a single root `
` element:
+
+```html
+
+
+
+```
\ No newline at end of file
diff --git a/docs/data/system/components/box/box.md b/docs/data/system/components/box/box.md
index 8b2a42fe7a1f7e..67959c24503c76 100644
--- a/docs/data/system/components/box/box.md
+++ b/docs/data/system/components/box/box.md
@@ -19,7 +19,7 @@ It's a fundamental building block when working with MUI component libraries—yo
### Usage
The Box component differs from other containers available in Material UI because its usage is intended to be multipurpose and open-ended, just like a `
`.
-Components like [Stack](/material-ui/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases—Stack for one-dimensional layouts, and Paper for elevated surfaces.
+Components like [Container](/system/react-container/), [Stack](/system/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for horizontal centering, Stack for one-dimensional layouts, and Paper for elevated surfaces.
## Basics
@@ -32,8 +32,6 @@ The demo below replaces the `
` with a `` element:
{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
-## Customization
-
### Using system props
As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
@@ -48,6 +46,8 @@ The demo below shows how to apply colors from the theme using this prop:
{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
+## Customization
+
### Create your own Box
Use the `createBox()` utility to create your version of the Box component.
@@ -64,3 +64,12 @@ const Box = createBox({ defaultTheme });
export default Box;
```
+## Anatomy
+
+The Box component is composed of a single root `
` element:
+
+```html
+
+
+
+```
\ No newline at end of file
From 5152c181a5b4e201225a0a9b65629e7e0c3d880c Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Fri, 9 Feb 2024 16:50:15 -0600
Subject: [PATCH 03/11] duplication comment
---
docs/data/joy/components/box/box.md | 2 ++
docs/data/material/components/box/box.md | 4 +++-
docs/data/system/components/box/box.md | 4 +++-
3 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/docs/data/joy/components/box/box.md b/docs/data/joy/components/box/box.md
index 4e23c8cfa7485b..10ccbbb7f980c7 100644
--- a/docs/data/joy/components/box/box.md
+++ b/docs/data/joy/components/box/box.md
@@ -5,6 +5,8 @@ components: Box
githubLabel: 'component: Box'
---
+
+
# Box
The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.
The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.
@@ -14,7 +16,7 @@ githubLabel: 'component: Box'
## Introduction
The Box component is a generic container for grouping other components.
-It's a fundamental building block when working with MUI component libraries—you can think of it as a `
` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
+It's a fundamental building block when working with Material UI—you can think of it as a `
` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
### Usage
diff --git a/docs/data/system/components/box/box.md b/docs/data/system/components/box/box.md
index 67959c24503c76..2a44d4892b6b50 100644
--- a/docs/data/system/components/box/box.md
+++ b/docs/data/system/components/box/box.md
@@ -5,6 +5,8 @@ components: Box
githubLabel: 'component: Box'
---
+
+
# Box
The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.
@@ -14,7 +16,7 @@ githubLabel: 'component: Box'
## Introduction
The Box component is a generic container for grouping other components.
-It's a fundamental building block when working with MUI component libraries—you can think of it as a `
` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
+It's a fundamental building block when working with MUI System—you can think of it as a `
` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
### Usage
From 3e07e88c64e16a01728255ac4c9454d203cda2fc Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Fri, 9 Feb 2024 16:58:14 -0600
Subject: [PATCH 04/11] product specific content details
---
docs/data/joy/components/box/box.md | 10 +++++-----
docs/data/material/components/box/box.md | 6 +++---
docs/data/system/components/box/box.md | 6 +++---
3 files changed, 11 insertions(+), 11 deletions(-)
diff --git a/docs/data/joy/components/box/box.md b/docs/data/joy/components/box/box.md
index 10ccbbb7f980c7..def486b1624e35 100644
--- a/docs/data/joy/components/box/box.md
+++ b/docs/data/joy/components/box/box.md
@@ -16,17 +16,17 @@ githubLabel: 'component: Box'
## Introduction
The Box component is a generic container for grouping other components.
-It's a fundamental building block when working with MUI component libraries—you can think of it as a `
` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
+It's a fundamental building block when working with Joy UI—you can think of it as a `
` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
### Usage
-The Box component differs from other containers available in Material UI because its usage is intended to be multipurpose and open-ended, just like a `
`.
-Components like [Container](/system/react-container/), [Stack](/system/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for horizontal centering, Stack for one-dimensional layouts, and Paper for elevated surfaces.
+The Box component differs from other containers available in Joy UI because its usage is intended to be multipurpose and open-ended, just like a `
`.
+Components like [Container](/joy-ui/react-container/) and [Stack](/joy-ui/react-stack/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for horizontal centering, and Stack for one-dimensional layouts.
## Basics
```jsx
-import Box from '@mui/system/Box';
+import Box from '@mui/joy-ui/Box';
```
The Box component renders as a `
` by default, but you can swap in any other valid HTML tag or React component using the `component` prop.
@@ -34,7 +34,7 @@ The demo below replaces the `
` with a `` element:
{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
-### Using system props
+### Using System props
As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
You can use them as props directly on the component.
diff --git a/docs/data/material/components/box/box.md b/docs/data/material/components/box/box.md
index b7c35ac4e0668d..ae9bb08aafb0c0 100644
--- a/docs/data/material/components/box/box.md
+++ b/docs/data/material/components/box/box.md
@@ -21,12 +21,12 @@ It's a fundamental building block when working with Material UI—you can think
### Usage
The Box component differs from other containers available in Material UI because its usage is intended to be multipurpose and open-ended, just like a `
`.
-Components like [Container](/system/react-container/), [Stack](/system/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for horizontal centering, Stack for one-dimensional layouts, and Paper for elevated surfaces.
+Components like [Container](/material-ui/react-container/), [Stack](/material-ui/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for horizontal centering, Stack for one-dimensional layouts, and Paper for elevated surfaces.
## Basics
```jsx
-import Box from '@mui/system/Box';
+import Box from '@mui/material/Box';
```
The Box component renders as a `
` by default, but you can swap in any other valid HTML tag or React component using the `component` prop.
@@ -34,7 +34,7 @@ The demo below replaces the `
` with a `` element:
{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
-### Using system props
+### Using System props
As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
You can use them as props directly on the component.
diff --git a/docs/data/system/components/box/box.md b/docs/data/system/components/box/box.md
index 2a44d4892b6b50..8621cbde075d60 100644
--- a/docs/data/system/components/box/box.md
+++ b/docs/data/system/components/box/box.md
@@ -20,8 +20,8 @@ It's a fundamental building block when working with MUI System—you can think o
### Usage
-The Box component differs from other containers available in Material UI because its usage is intended to be multipurpose and open-ended, just like a `
`.
-Components like [Container](/system/react-container/), [Stack](/system/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for horizontal centering, Stack for one-dimensional layouts, and Paper for elevated surfaces.
+The Box component differs from other containers available in MUI System because its usage is intended to be multipurpose and open-ended, just like a `
`.
+Components like [Container](/system/react-container/) and [Stack](/system/react-stack/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for horizontal centering, and Stack for one-dimensional layouts.
## Basics
@@ -34,7 +34,7 @@ The demo below replaces the `
` with a `` element:
{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
-### Using system props
+### Using System props
As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
You can use them as props directly on the component.
From 7bdda729d03581c25ababb5c5c56973b914960c7 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Fri, 9 Feb 2024 17:18:07 -0600
Subject: [PATCH 05/11] demo cleanup first pass
---
docs/data/joy/components/box/BoxBasic.js | 2 +-
docs/data/joy/components/box/BoxBasic.tsx | 2 +-
docs/data/joy/components/box/BoxComponent.js | 4 ++--
docs/data/joy/components/box/BoxComponent.tsx | 4 ++--
docs/data/joy/components/box/BoxSx.js | 18 +++++++++++-------
docs/data/joy/components/box/BoxSx.tsx | 18 +++++++++++-------
docs/data/joy/components/box/BoxSystemProps.js | 2 +-
.../data/joy/components/box/BoxSystemProps.tsx | 2 +-
docs/data/joy/components/box/box.md | 5 +++--
docs/data/material/components/box/BoxBasic.js | 2 +-
docs/data/material/components/box/BoxBasic.tsx | 2 +-
.../material/components/box/BoxComponent.js | 2 +-
.../material/components/box/BoxComponent.tsx | 2 +-
docs/data/material/components/box/BoxSx.js | 2 +-
docs/data/material/components/box/BoxSx.tsx | 2 +-
.../material/components/box/BoxSystemProps.js | 2 +-
.../material/components/box/BoxSystemProps.tsx | 2 +-
docs/data/material/components/box/box.md | 3 ++-
docs/data/system/components/box/box.md | 3 ++-
19 files changed, 45 insertions(+), 34 deletions(-)
diff --git a/docs/data/joy/components/box/BoxBasic.js b/docs/data/joy/components/box/BoxBasic.js
index 1ba8f5832c523b..e51c2b8df68ab3 100644
--- a/docs/data/joy/components/box/BoxBasic.js
+++ b/docs/data/joy/components/box/BoxBasic.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Box from '@mui/system/Box';
+import Box from '@mui/joy/Box';
export default function BoxBasic() {
return (
diff --git a/docs/data/joy/components/box/BoxBasic.tsx b/docs/data/joy/components/box/BoxBasic.tsx
index 1ba8f5832c523b..e51c2b8df68ab3 100644
--- a/docs/data/joy/components/box/BoxBasic.tsx
+++ b/docs/data/joy/components/box/BoxBasic.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Box from '@mui/system/Box';
+import Box from '@mui/joy/Box';
export default function BoxBasic() {
return (
diff --git a/docs/data/joy/components/box/BoxComponent.js b/docs/data/joy/components/box/BoxComponent.js
index 28a050a35091af..db51f341e342f4 100644
--- a/docs/data/joy/components/box/BoxComponent.js
+++ b/docs/data/joy/components/box/BoxComponent.js
@@ -1,6 +1,6 @@
import * as React from 'react';
-import { Box } from '@mui/system';
-import Button from '@mui/material/Button';
+import { Box } from '@mui/joy';
+import Button from '@mui/joy/Button';
export default function BoxComponent() {
return (
diff --git a/docs/data/joy/components/box/BoxComponent.tsx b/docs/data/joy/components/box/BoxComponent.tsx
index 28a050a35091af..db51f341e342f4 100644
--- a/docs/data/joy/components/box/BoxComponent.tsx
+++ b/docs/data/joy/components/box/BoxComponent.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import { Box } from '@mui/system';
-import Button from '@mui/material/Button';
+import { Box } from '@mui/joy';
+import Button from '@mui/joy/Button';
export default function BoxComponent() {
return (
diff --git a/docs/data/joy/components/box/BoxSx.js b/docs/data/joy/components/box/BoxSx.js
index 02588228006729..cb9b66f14d6a7e 100644
--- a/docs/data/joy/components/box/BoxSx.js
+++ b/docs/data/joy/components/box/BoxSx.js
@@ -1,14 +1,18 @@
import * as React from 'react';
-import { Box, ThemeProvider } from '@mui/system';
+import { Box, ThemeProvider } from '@mui/joy';
export default function BoxSx() {
return (
diff --git a/docs/data/joy/components/box/BoxSx.tsx b/docs/data/joy/components/box/BoxSx.tsx
index 02588228006729..cb9b66f14d6a7e 100644
--- a/docs/data/joy/components/box/BoxSx.tsx
+++ b/docs/data/joy/components/box/BoxSx.tsx
@@ -1,14 +1,18 @@
import * as React from 'react';
-import { Box, ThemeProvider } from '@mui/system';
+import { Box, ThemeProvider } from '@mui/joy';
export default function BoxSx() {
return (
diff --git a/docs/data/joy/components/box/BoxSystemProps.js b/docs/data/joy/components/box/BoxSystemProps.js
index 966f9739d26db8..df4076cc72d285 100644
--- a/docs/data/joy/components/box/BoxSystemProps.js
+++ b/docs/data/joy/components/box/BoxSystemProps.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Box from '@mui/system/Box';
+import Box from '@mui/joy/Box';
export default function BoxSystemProps() {
return (
diff --git a/docs/data/joy/components/box/BoxSystemProps.tsx b/docs/data/joy/components/box/BoxSystemProps.tsx
index 966f9739d26db8..df4076cc72d285 100644
--- a/docs/data/joy/components/box/BoxSystemProps.tsx
+++ b/docs/data/joy/components/box/BoxSystemProps.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Box from '@mui/system/Box';
+import Box from '@mui/joy/Box';
export default function BoxSystemProps() {
return (
diff --git a/docs/data/joy/components/box/box.md b/docs/data/joy/components/box/box.md
index def486b1624e35..7b641cd80a24bd 100644
--- a/docs/data/joy/components/box/box.md
+++ b/docs/data/joy/components/box/box.md
@@ -21,7 +21,7 @@ It's a fundamental building block when working with Joy UI—you can think of it
### Usage
The Box component differs from other containers available in Joy UI because its usage is intended to be multipurpose and open-ended, just like a `
`.
-Components like [Container](/joy-ui/react-container/) and [Stack](/joy-ui/react-stack/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for horizontal centering, and Stack for one-dimensional layouts.
+[Stack](/joy-ui/react-stack/), by contrast, features usage-specific props that make it ideal for for one-dimensional layouts.
## Basics
@@ -66,6 +66,7 @@ const Box = createBox({ defaultTheme });
export default Box;
```
+
## Anatomy
The Box component is composed of a single root `
` element:
@@ -74,4 +75,4 @@ The Box component is composed of a single root `
` element:
-```
\ No newline at end of file
+```
diff --git a/docs/data/material/components/box/BoxBasic.js b/docs/data/material/components/box/BoxBasic.js
index 1ba8f5832c523b..6f93223d92cd53 100644
--- a/docs/data/material/components/box/BoxBasic.js
+++ b/docs/data/material/components/box/BoxBasic.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Box from '@mui/system/Box';
+import Box from '@mui/material/Box';
export default function BoxBasic() {
return (
diff --git a/docs/data/material/components/box/BoxBasic.tsx b/docs/data/material/components/box/BoxBasic.tsx
index 1ba8f5832c523b..6f93223d92cd53 100644
--- a/docs/data/material/components/box/BoxBasic.tsx
+++ b/docs/data/material/components/box/BoxBasic.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Box from '@mui/system/Box';
+import Box from '@mui/material/Box';
export default function BoxBasic() {
return (
diff --git a/docs/data/material/components/box/BoxComponent.js b/docs/data/material/components/box/BoxComponent.js
index 28a050a35091af..72cacf00f14c27 100644
--- a/docs/data/material/components/box/BoxComponent.js
+++ b/docs/data/material/components/box/BoxComponent.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
import Button from '@mui/material/Button';
export default function BoxComponent() {
diff --git a/docs/data/material/components/box/BoxComponent.tsx b/docs/data/material/components/box/BoxComponent.tsx
index 28a050a35091af..72cacf00f14c27 100644
--- a/docs/data/material/components/box/BoxComponent.tsx
+++ b/docs/data/material/components/box/BoxComponent.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
import Button from '@mui/material/Button';
export default function BoxComponent() {
diff --git a/docs/data/material/components/box/BoxSx.js b/docs/data/material/components/box/BoxSx.js
index 02588228006729..490d11833351b8 100644
--- a/docs/data/material/components/box/BoxSx.js
+++ b/docs/data/material/components/box/BoxSx.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Box, ThemeProvider } from '@mui/system';
+import { Box, ThemeProvider } from '@mui/material';
export default function BoxSx() {
return (
diff --git a/docs/data/material/components/box/BoxSx.tsx b/docs/data/material/components/box/BoxSx.tsx
index 02588228006729..490d11833351b8 100644
--- a/docs/data/material/components/box/BoxSx.tsx
+++ b/docs/data/material/components/box/BoxSx.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Box, ThemeProvider } from '@mui/system';
+import { Box, ThemeProvider } from '@mui/material';
export default function BoxSx() {
return (
diff --git a/docs/data/material/components/box/BoxSystemProps.js b/docs/data/material/components/box/BoxSystemProps.js
index 966f9739d26db8..73fcd2bcf4d596 100644
--- a/docs/data/material/components/box/BoxSystemProps.js
+++ b/docs/data/material/components/box/BoxSystemProps.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Box from '@mui/system/Box';
+import Box from '@mui/material/Box';
export default function BoxSystemProps() {
return (
diff --git a/docs/data/material/components/box/BoxSystemProps.tsx b/docs/data/material/components/box/BoxSystemProps.tsx
index 966f9739d26db8..73fcd2bcf4d596 100644
--- a/docs/data/material/components/box/BoxSystemProps.tsx
+++ b/docs/data/material/components/box/BoxSystemProps.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Box from '@mui/system/Box';
+import Box from '@mui/material/Box';
export default function BoxSystemProps() {
return (
diff --git a/docs/data/material/components/box/box.md b/docs/data/material/components/box/box.md
index ae9bb08aafb0c0..04c214f51a8505 100644
--- a/docs/data/material/components/box/box.md
+++ b/docs/data/material/components/box/box.md
@@ -66,6 +66,7 @@ const Box = createBox({ defaultTheme });
export default Box;
```
+
## Anatomy
The Box component is composed of a single root `
` element:
@@ -74,4 +75,4 @@ The Box component is composed of a single root `
` element:
-```
\ No newline at end of file
+```
diff --git a/docs/data/system/components/box/box.md b/docs/data/system/components/box/box.md
index 8621cbde075d60..766d3942490c35 100644
--- a/docs/data/system/components/box/box.md
+++ b/docs/data/system/components/box/box.md
@@ -66,6 +66,7 @@ const Box = createBox({ defaultTheme });
export default Box;
```
+
## Anatomy
The Box component is composed of a single root `
` element:
@@ -74,4 +75,4 @@ The Box component is composed of a single root `
` element:
-```
\ No newline at end of file
+```
From 518e656ccb86c7baa4b264aa9bd8991e837cc6ab Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Fri, 9 Feb 2024 17:23:04 -0600
Subject: [PATCH 06/11] joy usage
---
docs/data/joy/components/box/box.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/joy/components/box/box.md b/docs/data/joy/components/box/box.md
index 7b641cd80a24bd..cabdbff5dfca37 100644
--- a/docs/data/joy/components/box/box.md
+++ b/docs/data/joy/components/box/box.md
@@ -21,7 +21,7 @@ It's a fundamental building block when working with Joy UI—you can think of it
### Usage
The Box component differs from other containers available in Joy UI because its usage is intended to be multipurpose and open-ended, just like a `
`.
-[Stack](/joy-ui/react-stack/), by contrast, features usage-specific props that make it ideal for for one-dimensional layouts.
+Components like [Stack](/joy-ui/react-stack/) and [Sheet](/joy-ui/react-sheet/), by contrast, feature usage-specific props that make them ideal for certain use cases: Stack for one-dimensional layouts, and Sheet for surfaces that need access to Joy UI's global variants.
## Basics
From abce197c18a13769242c8dd40d0a4d4ce2fe9146 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Fri, 9 Feb 2024 17:24:35 -0600
Subject: [PATCH 07/11] copyedit
---
docs/data/joy/components/box/box.md | 2 +-
docs/data/material/components/box/box.md | 2 +-
docs/data/system/components/box/box.md | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/docs/data/joy/components/box/box.md b/docs/data/joy/components/box/box.md
index cabdbff5dfca37..993fa91a40753d 100644
--- a/docs/data/joy/components/box/box.md
+++ b/docs/data/joy/components/box/box.md
@@ -20,7 +20,7 @@ It's a fundamental building block when working with Joy UI—you can think of it
### Usage
-The Box component differs from other containers available in Joy UI because its usage is intended to be multipurpose and open-ended, just like a `
`.
+The Box component differs from other containers available in Joy UI in that its usage is intended to be multipurpose and open-ended, just like a `
`.
Components like [Stack](/joy-ui/react-stack/) and [Sheet](/joy-ui/react-sheet/), by contrast, feature usage-specific props that make them ideal for certain use cases: Stack for one-dimensional layouts, and Sheet for surfaces that need access to Joy UI's global variants.
## Basics
diff --git a/docs/data/material/components/box/box.md b/docs/data/material/components/box/box.md
index 04c214f51a8505..e2898aafdb91ee 100644
--- a/docs/data/material/components/box/box.md
+++ b/docs/data/material/components/box/box.md
@@ -20,7 +20,7 @@ It's a fundamental building block when working with Material UI—you can think
### Usage
-The Box component differs from other containers available in Material UI because its usage is intended to be multipurpose and open-ended, just like a `
`.
+The Box component differs from other containers available in Material UI in that its usage is intended to be multipurpose and open-ended, just like a `
`.
Components like [Container](/material-ui/react-container/), [Stack](/material-ui/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for horizontal centering, Stack for one-dimensional layouts, and Paper for elevated surfaces.
## Basics
diff --git a/docs/data/system/components/box/box.md b/docs/data/system/components/box/box.md
index 766d3942490c35..07c35173a5affb 100644
--- a/docs/data/system/components/box/box.md
+++ b/docs/data/system/components/box/box.md
@@ -20,7 +20,7 @@ It's a fundamental building block when working with MUI System—you can think o
### Usage
-The Box component differs from other containers available in MUI System because its usage is intended to be multipurpose and open-ended, just like a `
`.
+The Box component differs from other containers available in MUI System in that its usage is intended to be multipurpose and open-ended, just like a `
`.
Components like [Container](/system/react-container/) and [Stack](/system/react-stack/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for horizontal centering, and Stack for one-dimensional layouts.
## Basics
From 3b56d4e8a7f3cc7213135a33435f864506f7e82c Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Fri, 9 Feb 2024 17:30:45 -0600
Subject: [PATCH 08/11] remove unused demo
---
docs/data/joy/components/box/BoxComponent.js | 11 -----------
docs/data/joy/components/box/BoxComponent.tsx | 11 -----------
docs/data/joy/components/box/BoxComponent.tsx.preview | 1 -
docs/data/material/components/box/BoxComponent.js | 11 -----------
docs/data/material/components/box/BoxComponent.tsx | 11 -----------
.../material/components/box/BoxComponent.tsx.preview | 1 -
docs/data/system/components/box/BoxComponent.js | 11 -----------
docs/data/system/components/box/BoxComponent.tsx | 11 -----------
.../system/components/box/BoxComponent.tsx.preview | 1 -
9 files changed, 69 deletions(-)
delete mode 100644 docs/data/joy/components/box/BoxComponent.js
delete mode 100644 docs/data/joy/components/box/BoxComponent.tsx
delete mode 100644 docs/data/joy/components/box/BoxComponent.tsx.preview
delete mode 100644 docs/data/material/components/box/BoxComponent.js
delete mode 100644 docs/data/material/components/box/BoxComponent.tsx
delete mode 100644 docs/data/material/components/box/BoxComponent.tsx.preview
delete mode 100644 docs/data/system/components/box/BoxComponent.js
delete mode 100644 docs/data/system/components/box/BoxComponent.tsx
delete mode 100644 docs/data/system/components/box/BoxComponent.tsx.preview
diff --git a/docs/data/joy/components/box/BoxComponent.js b/docs/data/joy/components/box/BoxComponent.js
deleted file mode 100644
index db51f341e342f4..00000000000000
--- a/docs/data/joy/components/box/BoxComponent.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { Box } from '@mui/joy';
-import Button from '@mui/joy/Button';
-
-export default function BoxComponent() {
- return (
-
-
-
- );
-}
diff --git a/docs/data/joy/components/box/BoxComponent.tsx b/docs/data/joy/components/box/BoxComponent.tsx
deleted file mode 100644
index db51f341e342f4..00000000000000
--- a/docs/data/joy/components/box/BoxComponent.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { Box } from '@mui/joy';
-import Button from '@mui/joy/Button';
-
-export default function BoxComponent() {
- return (
-
-
-
- );
-}
diff --git a/docs/data/joy/components/box/BoxComponent.tsx.preview b/docs/data/joy/components/box/BoxComponent.tsx.preview
deleted file mode 100644
index 43eef49d466ae8..00000000000000
--- a/docs/data/joy/components/box/BoxComponent.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/box/BoxComponent.js b/docs/data/material/components/box/BoxComponent.js
deleted file mode 100644
index 72cacf00f14c27..00000000000000
--- a/docs/data/material/components/box/BoxComponent.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { Box } from '@mui/material';
-import Button from '@mui/material/Button';
-
-export default function BoxComponent() {
- return (
-
-
-
- );
-}
diff --git a/docs/data/material/components/box/BoxComponent.tsx b/docs/data/material/components/box/BoxComponent.tsx
deleted file mode 100644
index 72cacf00f14c27..00000000000000
--- a/docs/data/material/components/box/BoxComponent.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { Box } from '@mui/material';
-import Button from '@mui/material/Button';
-
-export default function BoxComponent() {
- return (
-
-
-
- );
-}
diff --git a/docs/data/material/components/box/BoxComponent.tsx.preview b/docs/data/material/components/box/BoxComponent.tsx.preview
deleted file mode 100644
index 43eef49d466ae8..00000000000000
--- a/docs/data/material/components/box/BoxComponent.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/system/components/box/BoxComponent.js b/docs/data/system/components/box/BoxComponent.js
deleted file mode 100644
index 28a050a35091af..00000000000000
--- a/docs/data/system/components/box/BoxComponent.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { Box } from '@mui/system';
-import Button from '@mui/material/Button';
-
-export default function BoxComponent() {
- return (
-
-
-
- );
-}
diff --git a/docs/data/system/components/box/BoxComponent.tsx b/docs/data/system/components/box/BoxComponent.tsx
deleted file mode 100644
index 28a050a35091af..00000000000000
--- a/docs/data/system/components/box/BoxComponent.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { Box } from '@mui/system';
-import Button from '@mui/material/Button';
-
-export default function BoxComponent() {
- return (
-
-
-
- );
-}
diff --git a/docs/data/system/components/box/BoxComponent.tsx.preview b/docs/data/system/components/box/BoxComponent.tsx.preview
deleted file mode 100644
index 43eef49d466ae8..00000000000000
--- a/docs/data/system/components/box/BoxComponent.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
From 1a4b41ac58aa737848018eac54d6b88902361798 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 12 Feb 2024 08:40:25 -0600
Subject: [PATCH 09/11] clarify purpose of container
---
docs/data/material/components/box/box.md | 2 +-
docs/data/system/components/box/box.md | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/data/material/components/box/box.md b/docs/data/material/components/box/box.md
index e2898aafdb91ee..81b0eafe0b3def 100644
--- a/docs/data/material/components/box/box.md
+++ b/docs/data/material/components/box/box.md
@@ -21,7 +21,7 @@ It's a fundamental building block when working with Material UI—you can think
### Usage
The Box component differs from other containers available in Material UI in that its usage is intended to be multipurpose and open-ended, just like a `
`.
-Components like [Container](/material-ui/react-container/), [Stack](/material-ui/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for horizontal centering, Stack for one-dimensional layouts, and Paper for elevated surfaces.
+Components like [Container](/material-ui/react-container/), [Stack](/material-ui/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for main layout orientation, Stack for one-dimensional layouts, and Paper for elevated surfaces.
## Basics
diff --git a/docs/data/system/components/box/box.md b/docs/data/system/components/box/box.md
index 07c35173a5affb..1351615316e45a 100644
--- a/docs/data/system/components/box/box.md
+++ b/docs/data/system/components/box/box.md
@@ -21,7 +21,7 @@ It's a fundamental building block when working with MUI System—you can think o
### Usage
The Box component differs from other containers available in MUI System in that its usage is intended to be multipurpose and open-ended, just like a `
`.
-Components like [Container](/system/react-container/) and [Stack](/system/react-stack/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for horizontal centering, and Stack for one-dimensional layouts.
+Components like [Container](/system/react-container/) and [Stack](/system/react-stack/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for main layout orientation, and Stack for one-dimensional layouts.
## Basics
From a70f0e6af4ca6b34800caf3467523de7aabaf614 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 12 Feb 2024 11:08:38 -0600
Subject: [PATCH 10/11] fix joy import
---
docs/data/joy/components/box/box.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/joy/components/box/box.md b/docs/data/joy/components/box/box.md
index 993fa91a40753d..bf202127c85af0 100644
--- a/docs/data/joy/components/box/box.md
+++ b/docs/data/joy/components/box/box.md
@@ -26,7 +26,7 @@ Components like [Stack](/joy-ui/react-stack/) and [Sheet](/joy-ui/react-sheet/),
## Basics
```jsx
-import Box from '@mui/joy-ui/Box';
+import Box from '@mui/joy/Box';
```
The Box component renders as a `
` by default, but you can swap in any other valid HTML tag or React component using the `component` prop.
From c657f62d1b7a328c8da6c20238e30c10cddecde7 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 12 Feb 2024 14:23:29 -0600
Subject: [PATCH 11/11] remove createBox from Material and Joy, header edits
---
docs/data/joy/components/box/box.md | 25 ++++--------------------
docs/data/material/components/box/box.md | 25 ++++--------------------
docs/data/system/components/box/box.md | 8 ++++----
3 files changed, 12 insertions(+), 46 deletions(-)
diff --git a/docs/data/joy/components/box/box.md b/docs/data/joy/components/box/box.md
index bf202127c85af0..e281f352664b17 100644
--- a/docs/data/joy/components/box/box.md
+++ b/docs/data/joy/components/box/box.md
@@ -34,39 +34,22 @@ The demo below replaces the `
` with a `` element:
{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
-### Using System props
+## Customization
+
+### With MUI System props
As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
You can use them as props directly on the component.
{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }}
-### Using the sx prop
+### With the sx prop
Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
The demo below shows how to apply colors from the theme using this prop:
{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
-## Customization
-
-### Create your own Box
-
-Use the `createBox()` utility to create your version of the Box component.
-This is useful if you need to expose your container to a theme that's different from the default theme of the library you're working with:
-
-```js
-import { createBox, createTheme } from '@mui/system';
-
-const defaultTheme = createTheme({
- // your custom theme values
-});
-
-const Box = createBox({ defaultTheme });
-
-export default Box;
-```
-
## Anatomy
The Box component is composed of a single root `
` element:
diff --git a/docs/data/material/components/box/box.md b/docs/data/material/components/box/box.md
index 81b0eafe0b3def..804cfb93235248 100644
--- a/docs/data/material/components/box/box.md
+++ b/docs/data/material/components/box/box.md
@@ -34,39 +34,22 @@ The demo below replaces the `
` with a `` element:
{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
-### Using System props
+## Customization
+
+### With MUI System props
As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
You can use them as props directly on the component.
{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }}
-### Using the sx prop
+### With the sx prop
Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
The demo below shows how to apply colors from the theme using this prop:
{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
-## Customization
-
-### Create your own Box
-
-Use the `createBox()` utility to create your version of the Box component.
-This is useful if you need to expose your container to a theme that's different from the default theme of the library you're working with:
-
-```js
-import { createBox, createTheme } from '@mui/system';
-
-const defaultTheme = createTheme({
- // your custom theme values
-});
-
-const Box = createBox({ defaultTheme });
-
-export default Box;
-```
-
## Anatomy
The Box component is composed of a single root `
` element:
diff --git a/docs/data/system/components/box/box.md b/docs/data/system/components/box/box.md
index 1351615316e45a..366d46505396bc 100644
--- a/docs/data/system/components/box/box.md
+++ b/docs/data/system/components/box/box.md
@@ -34,22 +34,22 @@ The demo below replaces the `
` with a `` element:
{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
-### Using System props
+## Customization
+
+### With MUI System props
As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
You can use them as props directly on the component.
{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }}
-### Using the sx prop
+### With the sx prop
Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
The demo below shows how to apply colors from the theme using this prop:
{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
-## Customization
-
### Create your own Box
Use the `createBox()` utility to create your version of the Box component.