From 0046053887b8fe607a7d48739718c6486d1b54ae Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 14 Apr 2023 13:10:08 +0200 Subject: [PATCH] [docs] Sync between projects (#36785) --- docs/data/joy/components/grid/AutoGrid.js | 5 +- docs/data/joy/components/grid/AutoGrid.tsx | 5 +- docs/data/joy/components/grid/BasicGrid.js | 5 +- docs/data/joy/components/grid/BasicGrid.tsx | 5 +- docs/data/joy/components/grid/CSSGrid.js | 5 +- docs/data/joy/components/grid/CSSGrid.tsx | 5 +- docs/data/joy/components/grid/ColumnsGrid.js | 5 +- docs/data/joy/components/grid/ColumnsGrid.tsx | 5 +- .../data/joy/components/grid/FullWidthGrid.js | 5 +- .../joy/components/grid/FullWidthGrid.tsx | 5 +- .../joy/components/grid/ResponsiveGrid.js | 5 +- .../joy/components/grid/ResponsiveGrid.tsx | 5 +- .../components/grid/RowAndColumnSpacing.js | 5 +- .../components/grid/RowAndColumnSpacing.tsx | 5 +- .../joy/components/grid/VariableWidthGrid.js | 5 +- .../joy/components/grid/VariableWidthGrid.tsx | 5 +- docs/data/joy/components/stack/BasicStack.js | 18 ++-- docs/data/joy/components/stack/BasicStack.tsx | 18 ++-- .../components/stack/BasicStack.tsx.preview | 8 +- .../joy/components/stack/DirectionStack.js | 22 ++--- .../joy/components/stack/DirectionStack.tsx | 22 ++--- .../stack/DirectionStack.tsx.preview | 8 +- .../data/joy/components/stack/DividerStack.js | 29 +++--- .../joy/components/stack/DividerStack.tsx | 29 +++--- .../components/stack/DividerStack.tsx.preview | 13 ++- .../joy/components/stack/FlexboxGapStack.js | 27 +++--- .../joy/components/stack/FlexboxGapStack.tsx | 27 +++--- .../stack/FlexboxGapStack.tsx.preview | 8 +- .../joy/components/stack/InteractiveStack.js | 18 +++- .../joy/components/stack/InteractiveStack.tsx | 18 +++- .../joy/components/stack/ResponsiveStack.js | 25 ++--- .../joy/components/stack/ResponsiveStack.tsx | 25 ++--- .../stack/ResponsiveStack.tsx.preview | 11 ++- .../joy/components/stack/ZeroWidthStack.js | 5 +- .../joy/components/stack/ZeroWidthStack.tsx | 5 +- docs/data/joy/components/stack/stack.md | 35 +++---- .../components/stack/FlexboxGapStack.js | 20 ++-- .../components/stack/FlexboxGapStack.tsx | 20 ++-- .../stack/FlexboxGapStack.tsx.preview | 8 +- .../components/stack/ZeroWidthStack.js | 1 + .../components/stack/ZeroWidthStack.tsx | 1 + docs/data/material/components/stack/stack.md | 77 ++++++++++----- .../system/components/grid/AutoGridNoWrap.js | 2 +- .../system/components/grid/AutoGridNoWrap.tsx | 2 +- .../system/components/stack/BasicStack.js | 10 +- .../system/components/stack/BasicStack.tsx | 10 +- .../system/components/stack/DirectionStack.js | 9 +- .../components/stack/DirectionStack.tsx | 9 +- .../system/components/stack/DividerStack.js | 21 +++-- .../system/components/stack/DividerStack.tsx | 21 +++-- .../components/stack/DividerStack.tsx.preview | 9 -- .../components/stack/FlexboxGapStack.js | 29 +++--- .../components/stack/FlexboxGapStack.tsx | 29 +++--- .../stack/FlexboxGapStack.tsx.preview | 8 +- .../components/stack/InteractiveStack.js | 19 ++-- .../components/stack/InteractiveStack.tsx | 19 ++-- .../components/stack/ResponsiveStack.js | 9 +- .../components/stack/ResponsiveStack.tsx | 9 +- docs/data/system/components/stack/stack.md | 94 ++++++++++++++++--- docs/pages/system/api/stack.json | 2 +- .../api-docs-joy/stack/stack.json | 13 +++ docs/translations/api-docs/stack/stack.json | 2 +- .../ApiBuilders/ComponentApiBuilder.ts | 10 +- packages/mui-joy/src/Stack/Stack.tsx | 2 +- packages/mui-joy/src/Stack/StackProps.ts | 2 +- packages/mui-material/src/Stack/Stack.d.ts | 2 +- packages/mui-material/src/Stack/Stack.js | 2 +- packages/mui-system/src/Stack/Stack.tsx | 3 +- packages/mui-system/src/Stack/StackProps.ts | 2 +- 69 files changed, 594 insertions(+), 333 deletions(-) delete mode 100644 docs/data/system/components/stack/DividerStack.tsx.preview create mode 100644 docs/translations/api-docs-joy/stack/stack.json diff --git a/docs/data/joy/components/grid/AutoGrid.js b/docs/data/joy/components/grid/AutoGrid.js index 0db9ade871a0ab..41161bb6b237c7 100644 --- 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 index 0db9ade871a0ab..41161bb6b237c7 100644 --- 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 index 1c5b6f252678b4..489cf5a79bc8e3 100644 --- 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 index 1c5b6f252678b4..489cf5a79bc8e3 100644 --- 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 index a6529d787016fd..0e8313116230db 100644 --- 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 index a6529d787016fd..0e8313116230db 100644 --- 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 index bc6492d4861117..830f252b7bdbd3 100644 --- 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 index bc6492d4861117..830f252b7bdbd3 100644 --- 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 index 41e4f7a580d563..fce8825211aac3 100644 --- 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 index 41e4f7a580d563..fce8825211aac3 100644 --- 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 index c9f99603038b95..8fbcaffa566148 100644 --- 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 index c9f99603038b95..8fbcaffa566148 100644 --- 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 index 981af3cc734317..70452270927784 100644 --- 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 index 981af3cc734317..70452270927784 100644 --- 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 index 4b919baf56fad8..8602bdc1f3e172 100644 --- 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 index 4b919baf56fad8..8602bdc1f3e172 100644 --- 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 index 79bfd365e63e22..fe96a00bedc855 100644 --- 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 ( - - Item 1 - Item 2 - Item 3 - + + + Item 1 + Item 2 + Item 3 + + ); } diff --git a/docs/data/joy/components/stack/BasicStack.tsx b/docs/data/joy/components/stack/BasicStack.tsx index 79bfd365e63e22..fe96a00bedc855 100644 --- 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 ( - - Item 1 - Item 2 - Item 3 - + + + Item 1 + Item 2 + Item 3 + + ); } diff --git a/docs/data/joy/components/stack/BasicStack.tsx.preview b/docs/data/joy/components/stack/BasicStack.tsx.preview index 96582c035f7907..fc62473153d42e 100644 --- a/docs/data/joy/components/stack/BasicStack.tsx.preview +++ b/docs/data/joy/components/stack/BasicStack.tsx.preview @@ -1,3 +1,5 @@ -Item 1 -Item 2 -Item 3 \ No newline at end of file + + Item 1 + Item 2 + Item 3 + \ No newline at end of file diff --git a/docs/data/joy/components/stack/DirectionStack.js b/docs/data/joy/components/stack/DirectionStack.js index 1047c8feb3232a..fd9153fc286444 100644 --- 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 ( - - Item 1 - Item 2 - Item 3 - +
+ + Item 1 + Item 2 + Item 3 + +
); } diff --git a/docs/data/joy/components/stack/DirectionStack.tsx b/docs/data/joy/components/stack/DirectionStack.tsx index 1047c8feb3232a..fd9153fc286444 100644 --- 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 ( - - Item 1 - Item 2 - Item 3 - +
+ + Item 1 + Item 2 + Item 3 + +
); } diff --git a/docs/data/joy/components/stack/DirectionStack.tsx.preview b/docs/data/joy/components/stack/DirectionStack.tsx.preview index 96582c035f7907..0b432fbd09105e 100644 --- a/docs/data/joy/components/stack/DirectionStack.tsx.preview +++ b/docs/data/joy/components/stack/DirectionStack.tsx.preview @@ -1,3 +1,5 @@ -Item 1 -Item 2 -Item 3 \ No newline at end of file + + Item 1 + Item 2 + Item 3 + \ No newline at end of file diff --git a/docs/data/joy/components/stack/DividerStack.js b/docs/data/joy/components/stack/DividerStack.js index 296f371ebc7ff7..869db1e7d4517e 100644 --- a/docs/data/joy/components/stack/DividerStack.js +++ b/docs/data/joy/components/stack/DividerStack.js @@ -2,27 +2,32 @@ import * as React from 'react'; import Divider from '@mui/joy/Divider'; 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 DividerStack() { return ( - } - spacing={2} - justifyContent="center" - sx={{ width: '100%' }} - > - Item 1 - Item 2 - Item 3 - + + } + spacing={2} + justifyContent="center" + > + Item 1 + Item 2 + Item 3 + + ); } diff --git a/docs/data/joy/components/stack/DividerStack.tsx b/docs/data/joy/components/stack/DividerStack.tsx index 296f371ebc7ff7..869db1e7d4517e 100644 --- a/docs/data/joy/components/stack/DividerStack.tsx +++ b/docs/data/joy/components/stack/DividerStack.tsx @@ -2,27 +2,32 @@ import * as React from 'react'; import Divider from '@mui/joy/Divider'; 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 DividerStack() { return ( - } - spacing={2} - justifyContent="center" - sx={{ width: '100%' }} - > - Item 1 - Item 2 - Item 3 - + + } + spacing={2} + justifyContent="center" + > + Item 1 + Item 2 + Item 3 + + ); } diff --git a/docs/data/joy/components/stack/DividerStack.tsx.preview b/docs/data/joy/components/stack/DividerStack.tsx.preview index 96582c035f7907..4ca74a27f9dece 100644 --- a/docs/data/joy/components/stack/DividerStack.tsx.preview +++ b/docs/data/joy/components/stack/DividerStack.tsx.preview @@ -1,3 +1,10 @@ -Item 1 -Item 2 -Item 3 \ No newline at end of file +} + spacing={2} + justifyContent="center" +> + Item 1 + Item 2 + Item 3 + \ No newline at end of file diff --git a/docs/data/joy/components/stack/FlexboxGapStack.js b/docs/data/joy/components/stack/FlexboxGapStack.js index f50f609a81e5e6..3d8c09b36dc3ac 100644 --- a/docs/data/joy/components/stack/FlexboxGapStack.js +++ b/docs/data/joy/components/stack/FlexboxGapStack.js @@ -1,27 +1,28 @@ import * as React from 'react'; -import { styled } from '@mui/joy/styles'; +import Box from '@mui/joy/Box'; import Sheet from '@mui/joy/Sheet'; 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, + flexGrow: 1, })); export default function FlexboxGapStack() { return ( - *': { flexGrow: 1 } }} - > - Item 1 - Item 2 - Long content - + + + Item 1 + Item 2 + Long content + + ); } diff --git a/docs/data/joy/components/stack/FlexboxGapStack.tsx b/docs/data/joy/components/stack/FlexboxGapStack.tsx index f50f609a81e5e6..3d8c09b36dc3ac 100644 --- a/docs/data/joy/components/stack/FlexboxGapStack.tsx +++ b/docs/data/joy/components/stack/FlexboxGapStack.tsx @@ -1,27 +1,28 @@ import * as React from 'react'; -import { styled } from '@mui/joy/styles'; +import Box from '@mui/joy/Box'; import Sheet from '@mui/joy/Sheet'; 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, + flexGrow: 1, })); export default function FlexboxGapStack() { return ( - *': { flexGrow: 1 } }} - > - Item 1 - Item 2 - Long content - + + + Item 1 + Item 2 + Long content + + ); } diff --git a/docs/data/joy/components/stack/FlexboxGapStack.tsx.preview b/docs/data/joy/components/stack/FlexboxGapStack.tsx.preview index a5c49fcfb152e6..3fc7882b161bce 100644 --- a/docs/data/joy/components/stack/FlexboxGapStack.tsx.preview +++ b/docs/data/joy/components/stack/FlexboxGapStack.tsx.preview @@ -1,3 +1,5 @@ -Item 1 -Item 2 -Long content \ No newline at end of file + + Item 1 + Item 2 + Long content + \ No newline at end of file diff --git a/docs/data/joy/components/stack/InteractiveStack.js b/docs/data/joy/components/stack/InteractiveStack.js index f399aa19e6e85d..9d9db740baaa46 100644 --- a/docs/data/joy/components/stack/InteractiveStack.js +++ b/docs/data/joy/components/stack/InteractiveStack.js @@ -8,6 +8,17 @@ import Sheet from '@mui/joy/Sheet'; import RadioGroup from '@mui/joy/RadioGroup'; import Radio from '@mui/joy/Radio'; 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', + borderRadius: 4, + color: theme.vars.palette.text.secondary, +})); export default function InteractiveStack() { const [direction, setDirection] = React.useState('row'); @@ -34,20 +45,19 @@ export default function InteractiveStack() { sx={{ height: 300, pt: 2, pb: 2 }} > {[0, 1, 2].map((value) => ( - {`Item ${value + 1}`} - + ))} - + diff --git a/docs/data/joy/components/stack/InteractiveStack.tsx b/docs/data/joy/components/stack/InteractiveStack.tsx index 623315a9ad8e60..1643857e1e15c4 100644 --- a/docs/data/joy/components/stack/InteractiveStack.tsx +++ b/docs/data/joy/components/stack/InteractiveStack.tsx @@ -8,6 +8,17 @@ import Sheet from '@mui/joy/Sheet'; import RadioGroup from '@mui/joy/RadioGroup'; import Radio from '@mui/joy/Radio'; import Stack, { StackProps } 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', + borderRadius: 4, + color: theme.vars.palette.text.secondary, +})); export default function InteractiveStack() { const [direction, setDirection] = React.useState('row'); @@ -34,20 +45,19 @@ export default function InteractiveStack() { sx={{ height: 300, pt: 2, pb: 2 }} > {[0, 1, 2].map((value) => ( - {`Item ${value + 1}`} - + ))} - + diff --git a/docs/data/joy/components/stack/ResponsiveStack.js b/docs/data/joy/components/stack/ResponsiveStack.js index bf482399fdb22d..4949a0ea55fa29 100644 --- a/docs/data/joy/components/stack/ResponsiveStack.js +++ b/docs/data/joy/components/stack/ResponsiveStack.js @@ -4,23 +4,26 @@ 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 ResponsiveStack() { return ( - - Item 1 - Item 2 - Item 3 - +
+ + Item 1 + Item 2 + Item 3 + +
); } diff --git a/docs/data/joy/components/stack/ResponsiveStack.tsx b/docs/data/joy/components/stack/ResponsiveStack.tsx index bf482399fdb22d..4949a0ea55fa29 100644 --- a/docs/data/joy/components/stack/ResponsiveStack.tsx +++ b/docs/data/joy/components/stack/ResponsiveStack.tsx @@ -4,23 +4,26 @@ 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 ResponsiveStack() { return ( - - Item 1 - Item 2 - Item 3 - +
+ + Item 1 + Item 2 + Item 3 + +
); } diff --git a/docs/data/joy/components/stack/ResponsiveStack.tsx.preview b/docs/data/joy/components/stack/ResponsiveStack.tsx.preview index 96582c035f7907..86c8eaeab63109 100644 --- a/docs/data/joy/components/stack/ResponsiveStack.tsx.preview +++ b/docs/data/joy/components/stack/ResponsiveStack.tsx.preview @@ -1,3 +1,8 @@ -Item 1 -Item 2 -Item 3 \ No newline at end of file + + Item 1 + Item 2 + Item 3 + \ No newline at end of file diff --git a/docs/data/joy/components/stack/ZeroWidthStack.js b/docs/data/joy/components/stack/ZeroWidthStack.js index c932c44d0c7c4c..70c89d61f5ab3e 100644 --- a/docs/data/joy/components/stack/ZeroWidthStack.js +++ b/docs/data/joy/components/stack/ZeroWidthStack.js @@ -10,8 +10,9 @@ const Item = styled(Sheet)(({ theme }) => ({ ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', - color: theme.vars.palette.text.tertiary, - maxWidth: '400px', + borderRadius: 4, + color: theme.vars.palette.text.secondary, + maxWidth: 400, })); const message = `Truncation should be conditionally applicable on this long line of text diff --git a/docs/data/joy/components/stack/ZeroWidthStack.tsx b/docs/data/joy/components/stack/ZeroWidthStack.tsx index c932c44d0c7c4c..70c89d61f5ab3e 100644 --- a/docs/data/joy/components/stack/ZeroWidthStack.tsx +++ b/docs/data/joy/components/stack/ZeroWidthStack.tsx @@ -10,8 +10,9 @@ const Item = styled(Sheet)(({ theme }) => ({ ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', - color: theme.vars.palette.text.tertiary, - maxWidth: '400px', + borderRadius: 4, + color: theme.vars.palette.text.secondary, + maxWidth: 400, })); const message = `Truncation should be conditionally applicable on this long line of text diff --git a/docs/data/joy/components/stack/stack.md b/docs/data/joy/components/stack/stack.md index f517711cc5db73..2b5a611f376538 100644 --- a/docs/data/joy/components/stack/stack.md +++ b/docs/data/joy/components/stack/stack.md @@ -1,7 +1,8 @@ --- product: joy-ui title: React Stack component -githubLabel: 'component: stack' +components: Stack +githubLabel: 'component: Stack' --- # Stack @@ -32,41 +33,33 @@ The spacing value can be any number, including decimals, or a string. {{"demo": "BasicStack.js", "bg": true}} -## Customization +### Stack vs. Grid -### Direction +`Stack` is concerned with one-dimensional layouts, while [Grid](/joy-ui/react-grid/) handles two-dimensional layouts. The default direction is `column` which stacks children vertically. + +## Direction By default, Stack arranges items vertically in a column. Use the `direction` prop to position items horizontally in a row: {{"demo": "DirectionStack.js", "bg": true}} -### Dividers +## Dividers Use the `divider` prop to insert an element between each child. This works particularly well with the [Divider](/joy-ui/react-divider/) component, as shown below: {{"demo": "DividerStack.js", "bg": true}} -### Responsive values +## Responsive values You can switch the `direction` or `spacing` values based on the active breakpoint. {{"demo": "ResponsiveStack.js", "bg": true}} -### System props - -As a CSS utility component, Stack supports all [MUI System properties](/system/properties/). -You can use them as props directly on the component. -For instance, a margin-top: - -```jsx - -``` - ## Flexbox gap -To use [flexbox `gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for the spacing implementation, set `useFlexGap` prop to true. +To use [flexbox `gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for the spacing implementation, set the `useFlexGap` prop to true. It removes the [known limitations](#limitations) of the default implementation that uses CSS nested selector. However, CSS flexbox gap is not fully supported in some browsers. @@ -105,6 +98,16 @@ Below is an interactive demo that lets you explore the visual results of the dif {{"demo": "InteractiveStack.js", "hideToolbar": true, "bg": true}} +## System props + +As a CSS utility component, Stack supports all [MUI System properties](/system/properties/). +You can use them as props directly on the component. +For instance, a margin-top: + +```jsx + +``` + ## Limitations ### Margin on the children diff --git a/docs/data/material/components/stack/FlexboxGapStack.js b/docs/data/material/components/stack/FlexboxGapStack.js index d01bd9c85a60ca..51e3efcdcb3685 100644 --- a/docs/data/material/components/stack/FlexboxGapStack.js +++ b/docs/data/material/components/stack/FlexboxGapStack.js @@ -1,6 +1,7 @@ import * as React from 'react'; import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; +import Box from '@mui/material/Box'; import { styled } from '@mui/material/styles'; const Item = styled(Paper)(({ theme }) => ({ @@ -9,20 +10,17 @@ const Item = styled(Paper)(({ theme }) => ({ padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + flexGrow: 1, })); export default function FlexboxGapStack() { return ( - *': { flexGrow: 1 } }} - > - Item 1 - Item 2 - Long content - + + + Item 1 + Item 2 + Long content + + ); } diff --git a/docs/data/material/components/stack/FlexboxGapStack.tsx b/docs/data/material/components/stack/FlexboxGapStack.tsx index d01bd9c85a60ca..51e3efcdcb3685 100644 --- a/docs/data/material/components/stack/FlexboxGapStack.tsx +++ b/docs/data/material/components/stack/FlexboxGapStack.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; +import Box from '@mui/material/Box'; import { styled } from '@mui/material/styles'; const Item = styled(Paper)(({ theme }) => ({ @@ -9,20 +10,17 @@ const Item = styled(Paper)(({ theme }) => ({ padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + flexGrow: 1, })); export default function FlexboxGapStack() { return ( - *': { flexGrow: 1 } }} - > - Item 1 - Item 2 - Long content - + + + Item 1 + Item 2 + Long content + + ); } diff --git a/docs/data/material/components/stack/FlexboxGapStack.tsx.preview b/docs/data/material/components/stack/FlexboxGapStack.tsx.preview index a5c49fcfb152e6..3fc7882b161bce 100644 --- a/docs/data/material/components/stack/FlexboxGapStack.tsx.preview +++ b/docs/data/material/components/stack/FlexboxGapStack.tsx.preview @@ -1,3 +1,5 @@ -Item 1 -Item 2 -Long content \ No newline at end of file + + Item 1 + Item 2 + Long content + \ No newline at end of file diff --git a/docs/data/material/components/stack/ZeroWidthStack.js b/docs/data/material/components/stack/ZeroWidthStack.js index 45b5a1d4bbd678..8b0ed8a174de98 100644 --- a/docs/data/material/components/stack/ZeroWidthStack.js +++ b/docs/data/material/components/stack/ZeroWidthStack.js @@ -12,6 +12,7 @@ const Item = styled(Paper)(({ theme }) => ({ padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + maxWidth: 400, })); const message = `Truncation should be conditionally applicable on this long line of text diff --git a/docs/data/material/components/stack/ZeroWidthStack.tsx b/docs/data/material/components/stack/ZeroWidthStack.tsx index 45b5a1d4bbd678..8b0ed8a174de98 100644 --- a/docs/data/material/components/stack/ZeroWidthStack.tsx +++ b/docs/data/material/components/stack/ZeroWidthStack.tsx @@ -12,6 +12,7 @@ const Item = styled(Paper)(({ theme }) => ({ padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + maxWidth: 400, })); const message = `Truncation should be conditionally applicable on this long line of text diff --git a/docs/data/material/components/stack/stack.md b/docs/data/material/components/stack/stack.md index 09a8e252016d66..8604a8413e28c6 100644 --- a/docs/data/material/components/stack/stack.md +++ b/docs/data/material/components/stack/stack.md @@ -7,30 +7,47 @@ githubLabel: 'component: Stack' # Stack -

The Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing and/or dividers between each child.

+

Stack is a container component for arranging elements vertically or horizontally.

+ +## Introduction + +The Stack component manages the layout of its immediate children along the vertical or horizontal axis, with optional spacing and dividers between each child. + +:::info +Stack is ideal for one-dimensional layouts, while Grid is preferable when you need both vertical _and_ hortizontal arrangement. +::: {{"component": "modules/components/ComponentLinkHeader.js", "design": false}} -## Usage +## Basics -`Stack` is concerned with one-dimensional layouts, while [Grid](/material-ui/react-grid/) handles two-dimensional layouts. The default direction is `column` which stacks children vertically. +```jsx +import Stack from '@mui/joy/Stack'; +``` + +The Stack component acts as a generic container, wrapping around the elements to be arranged. + +Use the `spacing` prop to control the space between children. +The spacing value can be any number, including decimals, or a string. +(The prop is converted into a CSS property using the [`theme.spacing()`](/material-ui/customization/spacing/) helper.) {{"demo": "BasicStack.js", "bg": true}} -To control space between children, use the `spacing` prop. -The spacing value can be any number, including decimals and any string. -The prop is converted into a CSS property using the [`theme.spacing()`](/material-ui/customization/spacing/) helper. +### Stack vs. Grid + +`Stack` is concerned with one-dimensional layouts, while [Grid](/material-ui/react-grid/) handles two-dimensional layouts. The default direction is `column` which stacks children vertically. ## Direction -By default, `Stack` arranges items vertically in a `column`. -However, the `direction` prop can be used to position items horizontally in a `row` as well. +By default, Stack arranges items vertically in a column. +Use the `direction` prop to position items horizontally in a row: {{"demo": "DirectionStack.js", "bg": true}} ## Dividers -Use the `divider` prop to insert an element between each child. This works particularly well with the [Divider](/material-ui/react-divider/) component. +Use the `divider` prop to insert an element between each child. +This works particularly well with the [Divider](/material-ui/react-divider/) component, as shown below: {{"demo": "DividerStack.js", "bg": true}} @@ -40,24 +57,9 @@ You can switch the `direction` or `spacing` values based on the active breakpoin {{"demo": "ResponsiveStack.js", "bg": true}} -## Interactive - -Below is an interactive demo that lets you explore the visual results of the different settings: - -{{"demo": "InteractiveStack.js", "hideToolbar": true, "bg": true}} - -## System props - -As a CSS utility component, the `Stack` supports all [`system`](/system/properties/) properties. You can use them as props directly on the component. -For instance, a margin-top: - -```jsx - -``` - ## Flexbox gap -To use [flexbox `gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for the spacing implementation, set `useFlexGap` prop to true. +To use [flexbox `gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for the spacing implementation, set the `useFlexGap` prop to true. It removes the [known limitations](#limitations) of the default implementation that uses CSS nested selector. However, CSS flexbox gap is not fully supported in some browsers. @@ -90,6 +92,21 @@ function App() { } ``` +## Interactive demo + +Below is an interactive demo that lets you explore the visual results of the different settings: + +{{"demo": "InteractiveStack.js", "hideToolbar": true, "bg": true}} + +## System props + +As a CSS utility component, the `Stack` supports all [`system`](/system/properties/) properties. You can use them as props directly on the component. +For instance, a margin-top: + +```jsx + +``` + ## Limitations ### Margin on the children @@ -129,3 +146,13 @@ In order for the item to stay within the container you need to set `min-width: 0 ``` {{"demo": "ZeroWidthStack.js", "bg": true}} + +## Anatomy + +The Stack component is composed of a single root `
` element: + +```html +
+ +
+``` diff --git a/docs/data/system/components/grid/AutoGridNoWrap.js b/docs/data/system/components/grid/AutoGridNoWrap.js index 5eb04c9a6795c0..898a8bfff6b14e 100644 --- a/docs/data/system/components/grid/AutoGridNoWrap.js +++ b/docs/data/system/components/grid/AutoGridNoWrap.js @@ -8,7 +8,7 @@ import Typography from '@mui/material/Typography'; const Item = styled('div')(({ theme }) => ({ border: '1px solid', borderColor: theme.palette.mode === 'dark' ? '#444d58' : '#ced7e0', - borderRadius: '4px', + borderRadius: 4, })); const message = `Truncation should be conditionally applicable on this long line of text diff --git a/docs/data/system/components/grid/AutoGridNoWrap.tsx b/docs/data/system/components/grid/AutoGridNoWrap.tsx index 5eb04c9a6795c0..898a8bfff6b14e 100644 --- a/docs/data/system/components/grid/AutoGridNoWrap.tsx +++ b/docs/data/system/components/grid/AutoGridNoWrap.tsx @@ -8,7 +8,7 @@ import Typography from '@mui/material/Typography'; const Item = styled('div')(({ theme }) => ({ border: '1px solid', borderColor: theme.palette.mode === 'dark' ? '#444d58' : '#ced7e0', - borderRadius: '4px', + borderRadius: 4, })); const message = `Truncation should be conditionally applicable on this long line of text diff --git a/docs/data/system/components/stack/BasicStack.js b/docs/data/system/components/stack/BasicStack.js index 9dcd0ce6dc6491..3a7f572993eae3 100644 --- a/docs/data/system/components/stack/BasicStack.js +++ b/docs/data/system/components/stack/BasicStack.js @@ -1,11 +1,13 @@ import * as React from 'react'; -import Paper from '@mui/material/Paper'; -import { styled, Box, Stack } from '@mui/system'; +import Box from '@mui/system/Box'; +import Stack from '@mui/system/Stack'; +import { styled } from '@mui/system'; -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', +const Item = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff', padding: theme.spacing(1), textAlign: 'center', + borderRadius: 4, })); export default function BasicStack() { diff --git a/docs/data/system/components/stack/BasicStack.tsx b/docs/data/system/components/stack/BasicStack.tsx index 9dcd0ce6dc6491..3a7f572993eae3 100644 --- a/docs/data/system/components/stack/BasicStack.tsx +++ b/docs/data/system/components/stack/BasicStack.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; -import Paper from '@mui/material/Paper'; -import { styled, Box, Stack } from '@mui/system'; +import Box from '@mui/system/Box'; +import Stack from '@mui/system/Stack'; +import { styled } from '@mui/system'; -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', +const Item = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff', padding: theme.spacing(1), textAlign: 'center', + borderRadius: 4, })); export default function BasicStack() { diff --git a/docs/data/system/components/stack/DirectionStack.js b/docs/data/system/components/stack/DirectionStack.js index c7dffe7e0b7946..101c5991a117a1 100644 --- a/docs/data/system/components/stack/DirectionStack.js +++ b/docs/data/system/components/stack/DirectionStack.js @@ -1,11 +1,12 @@ import * as React from 'react'; -import Paper from '@mui/material/Paper'; -import { styled, Stack } from '@mui/system'; +import Stack from '@mui/system/Stack'; +import { styled } from '@mui/system'; -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', +const Item = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff', padding: theme.spacing(1), textAlign: 'center', + borderRadius: 4, })); export default function DirectionStack() { diff --git a/docs/data/system/components/stack/DirectionStack.tsx b/docs/data/system/components/stack/DirectionStack.tsx index c7dffe7e0b7946..101c5991a117a1 100644 --- a/docs/data/system/components/stack/DirectionStack.tsx +++ b/docs/data/system/components/stack/DirectionStack.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; -import Paper from '@mui/material/Paper'; -import { styled, Stack } from '@mui/system'; +import Stack from '@mui/system/Stack'; +import { styled } from '@mui/system'; -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', +const Item = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff', padding: theme.spacing(1), textAlign: 'center', + borderRadius: 4, })); export default function DirectionStack() { diff --git a/docs/data/system/components/stack/DividerStack.js b/docs/data/system/components/stack/DividerStack.js index 746419439250ef..8143bf973bea0a 100644 --- a/docs/data/system/components/stack/DividerStack.js +++ b/docs/data/system/components/stack/DividerStack.js @@ -1,12 +1,13 @@ import * as React from 'react'; -import Paper from '@mui/material/Paper'; -import Divider from '@mui/material/Divider'; -import { styled, Stack } from '@mui/system'; +import Box from '@mui/system/Box'; +import Stack from '@mui/system/Stack'; +import { styled } from '@mui/system'; -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', +const Item = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff', padding: theme.spacing(1), textAlign: 'center', + borderRadius: 4, })); export default function DividerStack() { @@ -14,7 +15,15 @@ export default function DividerStack() {
} + divider={ + + `1px solid ${theme.palette.mode === 'dark' ? '#262B32' : '#fff'}`, + }} + /> + } spacing={2} > Item 1 diff --git a/docs/data/system/components/stack/DividerStack.tsx b/docs/data/system/components/stack/DividerStack.tsx index 746419439250ef..8143bf973bea0a 100644 --- a/docs/data/system/components/stack/DividerStack.tsx +++ b/docs/data/system/components/stack/DividerStack.tsx @@ -1,12 +1,13 @@ import * as React from 'react'; -import Paper from '@mui/material/Paper'; -import Divider from '@mui/material/Divider'; -import { styled, Stack } from '@mui/system'; +import Box from '@mui/system/Box'; +import Stack from '@mui/system/Stack'; +import { styled } from '@mui/system'; -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', +const Item = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff', padding: theme.spacing(1), textAlign: 'center', + borderRadius: 4, })); export default function DividerStack() { @@ -14,7 +15,15 @@ export default function DividerStack() {
} + divider={ + + `1px solid ${theme.palette.mode === 'dark' ? '#262B32' : '#fff'}`, + }} + /> + } spacing={2} > Item 1 diff --git a/docs/data/system/components/stack/DividerStack.tsx.preview b/docs/data/system/components/stack/DividerStack.tsx.preview deleted file mode 100644 index 6dff777f9c51cf..00000000000000 --- a/docs/data/system/components/stack/DividerStack.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ -} - spacing={2} -> - Item 1 - Item 2 - Item 3 - \ No newline at end of file diff --git a/docs/data/system/components/stack/FlexboxGapStack.js b/docs/data/system/components/stack/FlexboxGapStack.js index 90e29c6212ac3e..fc70aa9dcf1d25 100644 --- a/docs/data/system/components/stack/FlexboxGapStack.js +++ b/docs/data/system/components/stack/FlexboxGapStack.js @@ -1,25 +1,24 @@ import * as React from 'react'; -import Paper from '@mui/material/Paper'; -import { styled, Stack } from '@mui/system'; +import Stack from '@mui/system/Stack'; +import Box from '@mui/system/Box'; +import { styled } from '@mui/system'; -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', +const Item = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff', padding: theme.spacing(1), textAlign: 'center', + borderRadius: 4, + flexGrow: 1, })); export default function FlexboxGapStack() { return ( - *': { flexGrow: 1 } }} - > - Item 1 - Item 2 - Long content - + + + Item 1 + Item 2 + Long content + + ); } diff --git a/docs/data/system/components/stack/FlexboxGapStack.tsx b/docs/data/system/components/stack/FlexboxGapStack.tsx index 90e29c6212ac3e..fc70aa9dcf1d25 100644 --- a/docs/data/system/components/stack/FlexboxGapStack.tsx +++ b/docs/data/system/components/stack/FlexboxGapStack.tsx @@ -1,25 +1,24 @@ import * as React from 'react'; -import Paper from '@mui/material/Paper'; -import { styled, Stack } from '@mui/system'; +import Stack from '@mui/system/Stack'; +import Box from '@mui/system/Box'; +import { styled } from '@mui/system'; -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', +const Item = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff', padding: theme.spacing(1), textAlign: 'center', + borderRadius: 4, + flexGrow: 1, })); export default function FlexboxGapStack() { return ( - *': { flexGrow: 1 } }} - > - Item 1 - Item 2 - Long content - + + + Item 1 + Item 2 + Long content + + ); } diff --git a/docs/data/system/components/stack/FlexboxGapStack.tsx.preview b/docs/data/system/components/stack/FlexboxGapStack.tsx.preview index a5c49fcfb152e6..3fc7882b161bce 100644 --- a/docs/data/system/components/stack/FlexboxGapStack.tsx.preview +++ b/docs/data/system/components/stack/FlexboxGapStack.tsx.preview @@ -1,3 +1,5 @@ -Item 1 -Item 2 -Long content \ No newline at end of file + + Item 1 + Item 2 + Long content + \ No newline at end of file diff --git a/docs/data/system/components/stack/InteractiveStack.js b/docs/data/system/components/stack/InteractiveStack.js index 8db420a1582d0c..2306a13563be50 100644 --- a/docs/data/system/components/stack/InteractiveStack.js +++ b/docs/data/system/components/stack/InteractiveStack.js @@ -6,7 +6,16 @@ import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; import Paper from '@mui/material/Paper'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; -import { Stack, Unstable_Grid as Grid } from '@mui/system'; +import Grid from '@mui/system/Unstable_Grid'; +import Stack from '@mui/system/Stack'; +import { styled } from '@mui/system'; + +const Item = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff', + padding: theme.spacing(1), + textAlign: 'center', + borderRadius: 4, +})); export default function InteractiveStack() { const [direction, setDirection] = React.useState('row'); @@ -33,20 +42,16 @@ export default function InteractiveStack() { sx={{ height: 240 }} > {[0, 1, 2].map((value) => ( - - theme.palette.mode === 'dark' ? '#1A2027' : '#fff', }} > {`Item ${value + 1}`} - + ))} diff --git a/docs/data/system/components/stack/InteractiveStack.tsx b/docs/data/system/components/stack/InteractiveStack.tsx index 0f792417c1d91e..9870165584c30c 100644 --- a/docs/data/system/components/stack/InteractiveStack.tsx +++ b/docs/data/system/components/stack/InteractiveStack.tsx @@ -6,7 +6,16 @@ import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; import Paper from '@mui/material/Paper'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; -import { Stack, Unstable_Grid as Grid, StackProps } from '@mui/system'; +import Grid from '@mui/system/Unstable_Grid'; +import Stack, { StackProps } from '@mui/system/Stack'; +import { styled } from '@mui/system'; + +const Item = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff', + padding: theme.spacing(1), + textAlign: 'center', + borderRadius: 4, +})); export default function InteractiveStack() { const [direction, setDirection] = React.useState('row'); @@ -33,20 +42,16 @@ export default function InteractiveStack() { sx={{ height: 240 }} > {[0, 1, 2].map((value) => ( - - theme.palette.mode === 'dark' ? '#1A2027' : '#fff', }} > {`Item ${value + 1}`} - + ))} diff --git a/docs/data/system/components/stack/ResponsiveStack.js b/docs/data/system/components/stack/ResponsiveStack.js index 406cbf6659e603..f97dcbd6d4e2ba 100644 --- a/docs/data/system/components/stack/ResponsiveStack.js +++ b/docs/data/system/components/stack/ResponsiveStack.js @@ -1,11 +1,12 @@ import * as React from 'react'; -import Paper from '@mui/material/Paper'; -import { styled, Stack } from '@mui/system'; +import Stack from '@mui/system/Stack'; +import { styled } from '@mui/system'; -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', +const Item = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff', padding: theme.spacing(1), textAlign: 'center', + borderRadius: 4, })); export default function ResponsiveStack() { diff --git a/docs/data/system/components/stack/ResponsiveStack.tsx b/docs/data/system/components/stack/ResponsiveStack.tsx index 406cbf6659e603..f97dcbd6d4e2ba 100644 --- a/docs/data/system/components/stack/ResponsiveStack.tsx +++ b/docs/data/system/components/stack/ResponsiveStack.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; -import Paper from '@mui/material/Paper'; -import { styled, Stack } from '@mui/system'; +import Stack from '@mui/system/Stack'; +import { styled } from '@mui/system'; -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', +const Item = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff', padding: theme.spacing(1), textAlign: 'center', + borderRadius: 4, })); export default function ResponsiveStack() { diff --git a/docs/data/system/components/stack/stack.md b/docs/data/system/components/stack/stack.md index a3ca62a02e188d..e65f1c3522060e 100644 --- a/docs/data/system/components/stack/stack.md +++ b/docs/data/system/components/stack/stack.md @@ -7,30 +7,46 @@ githubLabel: 'component: Stack' # Stack -

The Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing and/or dividers between each child.

+

Stack is a container component for arranging elements vertically or horizontally.

+ +## Introduction + +The Stack component manages the layout of its immediate children along the vertical or horizontal axis, with optional spacing and dividers between each child. + +:::info +Stack is ideal for one-dimensional layouts, while Grid is preferable when you need both vertical _and_ hortizontal arrangement. +::: {{"component": "modules/components/ComponentLinkHeader.js", "design": false}} -## Usage +## Basics -`Stack` is concerned with one-dimensional layouts, while [Grid](/system/react-grid/) handles two-dimensional layouts. The default direction is `column` which stacks children vertically. +```jsx +import Stack from '@mui/joy/Stack'; +``` + +The Stack component acts as a generic container, wrapping around the elements to be arranged. + +Use the `spacing` prop to control the space between children. +The spacing value can be any number, including decimals, or a string. +(The prop is converted into a CSS property using the [`theme.spacing()`](/material-ui/customization/spacing/) helper.) {{"demo": "BasicStack.js", "bg": true}} -To control space between children, use the `spacing` prop. -The spacing value can be any number, including decimals and any string. -The prop is converted into a CSS property using the [`theme.spacing()`](/material-ui/customization/spacing/) helper. +### Stack vs. Grid + +`Stack` is concerned with one-dimensional layouts, while [Grid](/system/react-grid/) handles two-dimensional layouts. The default direction is `column` which stacks children vertically. ## Direction -By default, `Stack` arranges items vertically in a `column`. -However, the `direction` prop can be used to position items horizontally in a `row` as well. +By default, Stack arranges items vertically in a column. +Use the `direction` prop to position items horizontally in a row: {{"demo": "DirectionStack.js", "bg": true}} ## Dividers -Use the `divider` prop to insert an element between each child. This works particularly well with the [Divider](/material-ui/react-divider/) component. +Use the `divider` prop to insert an element between each child, as shown below: {{"demo": "DividerStack.js", "bg": true}} @@ -40,7 +56,17 @@ You can switch the `direction` or `spacing` values based on the active breakpoin {{"demo": "ResponsiveStack.js", "bg": true}} -## Interactive +## Flexbox gap + +To use [flexbox `gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for the spacing implementation, set the `useFlexGap` prop to true. + +It removes the [known limitations](#limitations) of the default implementation that uses CSS nested selector. However, CSS flexbox gap is not fully supported in some browsers. + +We recommend checking the [support percentage](https://caniuse.com/?search=flex%20gap) before using it. + +{{"demo": "FlexboxGapStack.js", "bg": true}} + +## Interactive demo Below is an interactive demo that lets you explore the visual results of the different settings: @@ -55,8 +81,50 @@ For instance, a margin-top: ``` -## Flexbox gap +## Limitations -To use [flexbox `gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for the spacing implementation, set `useFlexGap` prop to true. +### Margin on the children -{{"demo": "FlexboxGapStack.js", "bg": true}} +Customizing the margin on the children is not supported by default. + +For instance, the top-margin on the `button` component below will be ignored. + +```jsx + + + +``` + +:::success +To overcome this limitation, set [`useFlexGap`](#flexbox-gap) prop to true to switch to CSS flexbox gap implementation. + +You can learn more about this limitation by visiting this [RFC](https://github.com/mui/material-ui/issues/33754). +::: + +### white-space: nowrap + +The initial setting on flex items is `min-width: auto`. +This causes a positioning conflict when children use `white-space: nowrap;`. +You can reproduce the issue with: + +```jsx + + +``` + +In order for the item to stay within the container you need to set `min-width: 0`. + +```jsx + + +``` + +## Anatomy + +The Stack component is composed of a single root `
` element: + +```html +
+ +
+``` diff --git a/docs/pages/system/api/stack.json b/docs/pages/system/api/stack.json index cd61fd2cc32f8d..f1449712cbe77b 100644 --- a/docs/pages/system/api/stack.json +++ b/docs/pages/system/api/stack.json @@ -31,6 +31,6 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-system/src/Stack/Stack.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": true } diff --git a/docs/translations/api-docs-joy/stack/stack.json b/docs/translations/api-docs-joy/stack/stack.json new file mode 100644 index 00000000000000..15025367e357e2 --- /dev/null +++ b/docs/translations/api-docs-joy/stack/stack.json @@ -0,0 +1,13 @@ +{ + "componentDescription": "", + "propDescriptions": { + "children": "The content of the component.", + "component": "The component used for the root node. Either a string to use a HTML element or a component.", + "direction": "Defines the flex-direction style property. It is applied for all screen sizes.", + "divider": "Add an element between each child.", + "spacing": "Defines the space between immediate children.", + "sx": "The system prop, which allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", + "useFlexGap": "If true, the CSS flexbox gap is used instead of applying margin to children.
While CSS gap removes the known limitations, it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
To enable this flag globally, follow the theme's default props configuration." + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/stack/stack.json b/docs/translations/api-docs/stack/stack.json index 1e721b81ef6f8c..9a21c1a4fe434f 100644 --- a/docs/translations/api-docs/stack/stack.json +++ b/docs/translations/api-docs/stack/stack.json @@ -7,7 +7,7 @@ "divider": "Add an element between each child.", "spacing": "Defines the space between immediate children.", "sx": "The system prop, which allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", - "useFlexGap": "If true, the CSS flexbox gap is used instead of applying margin to children.
While CSS gap removes the known limitations, it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
To enable this flag globally, follow the theme's default props configuration." + "useFlexGap": "If true, the CSS flexbox gap is used instead of applying margin to children.
While CSS gap removes the known limitations, it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
To enable this flag globally, follow the theme's default props configuration." }, "classDescriptions": {} } diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts index 60862200f11dd1..3e553eafa68240 100644 --- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts +++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts @@ -582,11 +582,15 @@ export default async function generateComponentApi( } definitions.forEach((definition) => { - if (definition.value?.callee) { - const definitionName = definition.value.callee.name; + // definition.value.expression is defined when the source is in TypeScript. + const expression = definition.value.expression + ? definition.get('expression') + : definition; + if (expression.value?.callee) { + const definitionName = expression.value.callee.name; if (definitionName === `create${name}`) { - node = definition; + node = expression; } } }); diff --git a/packages/mui-joy/src/Stack/Stack.tsx b/packages/mui-joy/src/Stack/Stack.tsx index 2d67cadfa4311e..dd9f27d4440991 100644 --- a/packages/mui-joy/src/Stack/Stack.tsx +++ b/packages/mui-joy/src/Stack/Stack.tsx @@ -73,7 +73,7 @@ Stack.propTypes /* remove-proptypes */ = { /** * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children. * - * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations), + * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations), * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag. * * To enable this flag globally, follow the [theme's default props](https://mui.com/joy-ui/customization/themed-components/#default-props) configuration. diff --git a/packages/mui-joy/src/Stack/StackProps.ts b/packages/mui-joy/src/Stack/StackProps.ts index cf05214e0730e7..370d86d5aa5ef9 100644 --- a/packages/mui-joy/src/Stack/StackProps.ts +++ b/packages/mui-joy/src/Stack/StackProps.ts @@ -45,7 +45,7 @@ export interface StackTypeMap

{ /** * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children. * - * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations), + * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations), * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag. * * To enable this flag globally, follow the [theme's default props](https://mui.com/joy-ui/customization/themed-components/#default-props) configuration. diff --git a/packages/mui-material/src/Stack/Stack.d.ts b/packages/mui-material/src/Stack/Stack.d.ts index 4fc7a3b183257e..b351fb2e5d7e76 100644 --- a/packages/mui-material/src/Stack/Stack.d.ts +++ b/packages/mui-material/src/Stack/Stack.d.ts @@ -28,7 +28,7 @@ export interface StackTypeMap

{ /** * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children. * - * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations), + * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations), * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag. * * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration. diff --git a/packages/mui-material/src/Stack/Stack.js b/packages/mui-material/src/Stack/Stack.js index 77722de2c65ae0..674a41ef0fa679 100644 --- a/packages/mui-material/src/Stack/Stack.js +++ b/packages/mui-material/src/Stack/Stack.js @@ -61,7 +61,7 @@ Stack.propTypes /* remove-proptypes */ = { /** * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children. * - * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations), + * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations), * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag. * * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration. diff --git a/packages/mui-system/src/Stack/Stack.tsx b/packages/mui-system/src/Stack/Stack.tsx index 1467201e9bb5b9..995f7e349cf864 100644 --- a/packages/mui-system/src/Stack/Stack.tsx +++ b/packages/mui-system/src/Stack/Stack.tsx @@ -4,6 +4,7 @@ import createStack from './createStack'; * * Demos: * + * - [Stack (Joy UI)](https://mui.com/joy/react-stack/) * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/) * - [Stack (MUI System)](https://mui.com/system/react-stack/) * @@ -62,7 +63,7 @@ Stack.propTypes /* remove-proptypes */ = { /** * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children. * - * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations), + * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations), * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag. * * To enable this flag globally, follow the theme's default props configuration. diff --git a/packages/mui-system/src/Stack/StackProps.ts b/packages/mui-system/src/Stack/StackProps.ts index 95eb364e28ae00..8c50c8ec97395b 100644 --- a/packages/mui-system/src/Stack/StackProps.ts +++ b/packages/mui-system/src/Stack/StackProps.ts @@ -27,7 +27,7 @@ export interface StackBaseProps { /** * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children. * - * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations), + * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations), * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag. * * To enable this flag globally, follow the theme's default props configuration.