[docs] Sync <Stack> between projects (#36785)

mui · Apr 14, 2023 · 0046053 · 0046053
1 parent a0c1b25
commit 0046053
Show file tree

Hide file tree

Showing 69 changed files with 594 additions and 333 deletions.
diff --git a/docs/data/joy/components/grid/AutoGrid.js b/docs/data/joy/components/grid/AutoGrid.js
@@ -4,10 +4,13 @@ import Sheet from '@mui/joy/Sheet';
 import Grid from '@mui/joy/Grid';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function AutoGrid() {

diff --git a/docs/data/joy/components/grid/AutoGrid.tsx b/docs/data/joy/components/grid/AutoGrid.tsx
@@ -4,10 +4,13 @@ import Sheet from '@mui/joy/Sheet';
 import Grid from '@mui/joy/Grid';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function AutoGrid() {

diff --git a/docs/data/joy/components/grid/BasicGrid.js b/docs/data/joy/components/grid/BasicGrid.js
@@ -4,10 +4,13 @@ import Sheet from '@mui/joy/Sheet';
 import Grid from '@mui/joy/Grid';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function BasicGrid() {

diff --git a/docs/data/joy/components/grid/BasicGrid.tsx b/docs/data/joy/components/grid/BasicGrid.tsx
@@ -4,10 +4,13 @@ import Sheet from '@mui/joy/Sheet';
 import Grid from '@mui/joy/Grid';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function BasicGrid() {

diff --git a/docs/data/joy/components/grid/CSSGrid.js b/docs/data/joy/components/grid/CSSGrid.js
@@ -4,10 +4,13 @@ import Box from '@mui/joy/Box';
 import Sheet from '@mui/joy/Sheet';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function CSSGrid() {

diff --git a/docs/data/joy/components/grid/CSSGrid.tsx b/docs/data/joy/components/grid/CSSGrid.tsx
@@ -4,10 +4,13 @@ import Box from '@mui/joy/Box';
 import Sheet from '@mui/joy/Sheet';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function CSSGrid() {

diff --git a/docs/data/joy/components/grid/ColumnsGrid.js b/docs/data/joy/components/grid/ColumnsGrid.js
@@ -4,10 +4,13 @@ import Sheet from '@mui/joy/Sheet';
 import Grid from '@mui/joy/Grid';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function ColumnsGrid() {

diff --git a/docs/data/joy/components/grid/ColumnsGrid.tsx b/docs/data/joy/components/grid/ColumnsGrid.tsx
@@ -4,10 +4,13 @@ import Sheet from '@mui/joy/Sheet';
 import Grid from '@mui/joy/Grid';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function ColumnsGrid() {

diff --git a/docs/data/joy/components/grid/FullWidthGrid.js b/docs/data/joy/components/grid/FullWidthGrid.js
@@ -4,10 +4,13 @@ import Sheet from '@mui/joy/Sheet';
 import Grid from '@mui/joy/Grid';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function FullWidthGrid() {

diff --git a/docs/data/joy/components/grid/FullWidthGrid.tsx b/docs/data/joy/components/grid/FullWidthGrid.tsx
@@ -4,10 +4,13 @@ import Sheet from '@mui/joy/Sheet';
 import Grid from '@mui/joy/Grid';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function FullWidthGrid() {

diff --git a/docs/data/joy/components/grid/ResponsiveGrid.js b/docs/data/joy/components/grid/ResponsiveGrid.js
@@ -4,10 +4,13 @@ import Sheet from '@mui/joy/Sheet';
 import Grid from '@mui/joy/Grid';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function ResponsiveGrid() {

diff --git a/docs/data/joy/components/grid/ResponsiveGrid.tsx b/docs/data/joy/components/grid/ResponsiveGrid.tsx
@@ -4,10 +4,13 @@ import Sheet from '@mui/joy/Sheet';
 import Grid from '@mui/joy/Grid';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function ResponsiveGrid() {

diff --git a/docs/data/joy/components/grid/RowAndColumnSpacing.js b/docs/data/joy/components/grid/RowAndColumnSpacing.js
@@ -4,10 +4,13 @@ import Grid from '@mui/joy/Grid';
 import Sheet from '@mui/joy/Sheet';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function RowAndColumnSpacing() {

diff --git a/docs/data/joy/components/grid/RowAndColumnSpacing.tsx b/docs/data/joy/components/grid/RowAndColumnSpacing.tsx
@@ -4,10 +4,13 @@ import Grid from '@mui/joy/Grid';
 import Sheet from '@mui/joy/Sheet';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function RowAndColumnSpacing() {

diff --git a/docs/data/joy/components/grid/VariableWidthGrid.js b/docs/data/joy/components/grid/VariableWidthGrid.js
@@ -4,10 +4,13 @@ import Sheet from '@mui/joy/Sheet';
 import Grid from '@mui/joy/Grid';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function VariableWidthGrid() {

diff --git a/docs/data/joy/components/grid/VariableWidthGrid.tsx b/docs/data/joy/components/grid/VariableWidthGrid.tsx
@@ -4,10 +4,13 @@ import Sheet from '@mui/joy/Sheet';
 import Grid from '@mui/joy/Grid';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function VariableWidthGrid() {

diff --git a/docs/data/joy/components/stack/BasicStack.js b/docs/data/joy/components/stack/BasicStack.js
@@ -1,21 +1,27 @@
 import * as React from 'react';
 import Sheet from '@mui/joy/Sheet';
 import Stack from '@mui/joy/Stack';
+import Box from '@mui/joy/Box';
 import { styled } from '@mui/joy/styles';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function BasicStack() {
   return (
-    <Stack spacing={2} sx={{ width: '100%' }}>
-      <Item>Item 1</Item>
-      <Item>Item 2</Item>
-      <Item>Item 3</Item>
-    </Stack>
+    <Box sx={{ width: '100%' }}>
+      <Stack spacing={2}>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Stack>
+    </Box>
   );
 }
diff --git a/docs/data/joy/components/stack/BasicStack.tsx b/docs/data/joy/components/stack/BasicStack.tsx
@@ -1,21 +1,27 @@
 import * as React from 'react';
 import Sheet from '@mui/joy/Sheet';
 import Stack from '@mui/joy/Stack';
+import Box from '@mui/joy/Box';
 import { styled } from '@mui/joy/styles';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function BasicStack() {
   return (
-    <Stack spacing={2} sx={{ width: '100%' }}>
-      <Item>Item 1</Item>
-      <Item>Item 2</Item>
-      <Item>Item 3</Item>
-    </Stack>
+    <Box sx={{ width: '100%' }}>
+      <Stack spacing={2}>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Stack>
+    </Box>
   );
 }
diff --git a/docs/data/joy/components/stack/BasicStack.tsx.preview b/docs/data/joy/components/stack/BasicStack.tsx.preview
@@ -1,3 +1,5 @@
-<Item>Item 1</Item>
-<Item>Item 2</Item>
-<Item>Item 3</Item>
+<Stack spacing={2}>
+  <Item>Item 1</Item>
+  <Item>Item 2</Item>
+  <Item>Item 3</Item>
+</Stack>
diff --git a/docs/data/joy/components/stack/DirectionStack.js b/docs/data/joy/components/stack/DirectionStack.js
@@ -4,23 +4,23 @@ import Stack from '@mui/joy/Stack';
 import { styled } from '@mui/joy/styles';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function DirectionStack() {
   return (
-    <Stack
-      direction="row"
-      spacing={2}
-      justifyContent="center"
-      sx={{ width: '100%' }}
-    >
-      <Item>Item 1</Item>
-      <Item>Item 2</Item>
-      <Item>Item 3</Item>
-    </Stack>
+    <div>
+      <Stack direction="row" spacing={2}>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Stack>
+    </div>
   );
 }
diff --git a/docs/data/joy/components/stack/DirectionStack.tsx b/docs/data/joy/components/stack/DirectionStack.tsx
@@ -4,23 +4,23 @@ import Stack from '@mui/joy/Stack';
 import { styled } from '@mui/joy/styles';
 
 const Item = styled(Sheet)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography.body2,
   padding: theme.spacing(1),
   textAlign: 'center',
-  color: theme.vars.palette.text.tertiary,
+  borderRadius: 4,
+  color: theme.vars.palette.text.secondary,
 }));
 
 export default function DirectionStack() {
   return (
-    <Stack
-      direction="row"
-      spacing={2}
-      justifyContent="center"
-      sx={{ width: '100%' }}
-    >
-      <Item>Item 1</Item>
-      <Item>Item 2</Item>
-      <Item>Item 3</Item>
-    </Stack>
+    <div>
+      <Stack direction="row" spacing={2}>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Stack>
+    </div>
   );
 }
diff --git a/docs/data/joy/components/stack/DirectionStack.tsx.preview b/docs/data/joy/components/stack/DirectionStack.tsx.preview
@@ -1,3 +1,5 @@
-<Item>Item 1</Item>
-<Item>Item 2</Item>
-<Item>Item 3</Item>
+<Stack direction="row" spacing={2}>
+  <Item>Item 1</Item>
+  <Item>Item 2</Item>
+  <Item>Item 3</Item>
+</Stack>