From 9ed869215bb605aa968fe37e36018a914b0a5dfa Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 23 Aug 2023 18:10:11 -0300 Subject: [PATCH 1/2] polish the Stack page --- docs/data/joy/components/stack/BasicStack.js | 9 ++-- docs/data/joy/components/stack/BasicStack.tsx | 9 ++-- .../joy/components/stack/DirectionStack.js | 11 ++--- .../joy/components/stack/DirectionStack.tsx | 11 ++--- .../stack/DirectionStack.tsx.preview | 2 +- .../data/joy/components/stack/DividerStack.js | 9 ++-- .../joy/components/stack/DividerStack.tsx | 9 ++-- .../joy/components/stack/FlexboxGapStack.js | 11 ++--- .../joy/components/stack/FlexboxGapStack.tsx | 11 ++--- .../stack/FlexboxGapStack.tsx.preview | 2 +- .../joy/components/stack/InteractiveStack.js | 38 ++++++++++++----- .../joy/components/stack/InteractiveStack.tsx | 38 ++++++++++++----- .../joy/components/stack/ResponsiveStack.js | 9 ++-- .../joy/components/stack/ResponsiveStack.tsx | 9 ++-- docs/data/joy/components/stack/stack.md | 42 +++++++++---------- 15 files changed, 129 insertions(+), 91 deletions(-) diff --git a/docs/data/joy/components/stack/BasicStack.js b/docs/data/joy/components/stack/BasicStack.js index 1bb7416cec5f29..9bb260118559c2 100644 --- a/docs/data/joy/components/stack/BasicStack.js +++ b/docs/data/joy/components/stack/BasicStack.js @@ -5,13 +5,14 @@ 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['body-sm'], - padding: theme.spacing(1), textAlign: 'center', - borderRadius: 4, + fontWeight: theme.fontWeight.md, color: theme.vars.palette.text.secondary, + border: '1px solid', + borderColor: theme.palette.divider, + padding: theme.spacing(1), + borderRadius: theme.radius.md, })); export default function BasicStack() { diff --git a/docs/data/joy/components/stack/BasicStack.tsx b/docs/data/joy/components/stack/BasicStack.tsx index 1bb7416cec5f29..9bb260118559c2 100644 --- a/docs/data/joy/components/stack/BasicStack.tsx +++ b/docs/data/joy/components/stack/BasicStack.tsx @@ -5,13 +5,14 @@ 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['body-sm'], - padding: theme.spacing(1), textAlign: 'center', - borderRadius: 4, + fontWeight: theme.fontWeight.md, color: theme.vars.palette.text.secondary, + border: '1px solid', + borderColor: theme.palette.divider, + padding: theme.spacing(1), + borderRadius: theme.radius.md, })); export default function BasicStack() { diff --git a/docs/data/joy/components/stack/DirectionStack.js b/docs/data/joy/components/stack/DirectionStack.js index e4db4711d8c9a3..32bc369722d1dd 100644 --- a/docs/data/joy/components/stack/DirectionStack.js +++ b/docs/data/joy/components/stack/DirectionStack.js @@ -4,19 +4,20 @@ 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['body-sm'], - padding: theme.spacing(1), textAlign: 'center', - borderRadius: 4, + fontWeight: theme.fontWeight.md, color: theme.vars.palette.text.secondary, + border: '1px solid', + borderColor: theme.palette.divider, + padding: theme.spacing(1), + borderRadius: theme.radius.md, })); export default function DirectionStack() { return (
- + 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 e4db4711d8c9a3..32bc369722d1dd 100644 --- a/docs/data/joy/components/stack/DirectionStack.tsx +++ b/docs/data/joy/components/stack/DirectionStack.tsx @@ -4,19 +4,20 @@ 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['body-sm'], - padding: theme.spacing(1), textAlign: 'center', - borderRadius: 4, + fontWeight: theme.fontWeight.md, color: theme.vars.palette.text.secondary, + border: '1px solid', + borderColor: theme.palette.divider, + padding: theme.spacing(1), + borderRadius: theme.radius.md, })); export default function DirectionStack() { return (
- + 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 0b432fbd09105e..a4ee8ef47dbbc8 100644 --- a/docs/data/joy/components/stack/DirectionStack.tsx.preview +++ b/docs/data/joy/components/stack/DirectionStack.tsx.preview @@ -1,4 +1,4 @@ - + Item 1 Item 2 Item 3 diff --git a/docs/data/joy/components/stack/DividerStack.js b/docs/data/joy/components/stack/DividerStack.js index 3451afa7ca399f..c43b3586df70d3 100644 --- a/docs/data/joy/components/stack/DividerStack.js +++ b/docs/data/joy/components/stack/DividerStack.js @@ -6,13 +6,14 @@ 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['body-sm'], - padding: theme.spacing(1), textAlign: 'center', - borderRadius: 4, + fontWeight: theme.fontWeight.md, color: theme.vars.palette.text.secondary, + border: '1px solid', + borderColor: theme.palette.divider, + padding: theme.spacing(1), + borderRadius: theme.radius.md, })); export default function DividerStack() { diff --git a/docs/data/joy/components/stack/DividerStack.tsx b/docs/data/joy/components/stack/DividerStack.tsx index 3451afa7ca399f..c43b3586df70d3 100644 --- a/docs/data/joy/components/stack/DividerStack.tsx +++ b/docs/data/joy/components/stack/DividerStack.tsx @@ -6,13 +6,14 @@ 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['body-sm'], - padding: theme.spacing(1), textAlign: 'center', - borderRadius: 4, + fontWeight: theme.fontWeight.md, color: theme.vars.palette.text.secondary, + border: '1px solid', + borderColor: theme.palette.divider, + padding: theme.spacing(1), + borderRadius: theme.radius.md, })); export default function DividerStack() { diff --git a/docs/data/joy/components/stack/FlexboxGapStack.js b/docs/data/joy/components/stack/FlexboxGapStack.js index 33d144ca45a120..8a272533bfc5dd 100644 --- a/docs/data/joy/components/stack/FlexboxGapStack.js +++ b/docs/data/joy/components/stack/FlexboxGapStack.js @@ -5,20 +5,21 @@ 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['body-sm'], - padding: theme.spacing(1), textAlign: 'center', - borderRadius: 4, + fontWeight: theme.fontWeight.md, color: theme.vars.palette.text.secondary, + border: '1px solid', + borderColor: theme.palette.divider, + padding: theme.spacing(1), + borderRadius: theme.radius.md, flexGrow: 1, })); export default function FlexboxGapStack() { return ( - + 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 33d144ca45a120..8a272533bfc5dd 100644 --- a/docs/data/joy/components/stack/FlexboxGapStack.tsx +++ b/docs/data/joy/components/stack/FlexboxGapStack.tsx @@ -5,20 +5,21 @@ 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['body-sm'], - padding: theme.spacing(1), textAlign: 'center', - borderRadius: 4, + fontWeight: theme.fontWeight.md, color: theme.vars.palette.text.secondary, + border: '1px solid', + borderColor: theme.palette.divider, + padding: theme.spacing(1), + borderRadius: theme.radius.md, flexGrow: 1, })); export default function FlexboxGapStack() { return ( - + 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 3fc7882b161bce..5ef6dfa6a30719 100644 --- a/docs/data/joy/components/stack/FlexboxGapStack.tsx.preview +++ b/docs/data/joy/components/stack/FlexboxGapStack.tsx.preview @@ -1,4 +1,4 @@ - + Item 1 Item 2 Long content diff --git a/docs/data/joy/components/stack/InteractiveStack.js b/docs/data/joy/components/stack/InteractiveStack.js index c4b0904a9b2a82..0ec70fd492dc6c 100644 --- a/docs/data/joy/components/stack/InteractiveStack.js +++ b/docs/data/joy/components/stack/InteractiveStack.js @@ -11,13 +11,13 @@ import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; import BrandingProvider from 'docs/src/BrandingProvider'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', ...theme.typography['body-sm'], - padding: theme.spacing(1), textAlign: 'center', - borderRadius: 4, + fontWeight: theme.fontWeight.md, color: theme.vars.palette.text.secondary, + border: '1px solid', + borderColor: theme.palette.divider, + borderRadius: theme.radius.md, })); export default function InteractiveStack() { @@ -36,13 +36,13 @@ export default function InteractiveStack() { `; return ( - + {[0, 1, 2].map((value) => ( ))} - + ({ + p: 2, + borderRadius: 'md', + bgcolor: theme.palette.neutral[50], + borderColor: theme.palette.neutral[100], + [theme.getColorSchemeSelector('dark')]: { + borderColor: theme.palette.neutral[800], + backgroundColor: theme.palette.neutral[900], + }, + })} + > - direction + direction - alignItems + alignItems - justifyContent + justifyContent - spacing + spacing ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', ...theme.typography['body-sm'], - padding: theme.spacing(1), textAlign: 'center', - borderRadius: 4, + fontWeight: theme.fontWeight.md, color: theme.vars.palette.text.secondary, + border: '1px solid', + borderColor: theme.palette.divider, + borderRadius: theme.radius.md, })); export default function InteractiveStack() { @@ -36,13 +36,13 @@ export default function InteractiveStack() { `; return ( - + {[0, 1, 2].map((value) => ( ))} - + ({ + p: 2, + borderRadius: 'md', + bgcolor: theme.palette.neutral[50], + borderColor: theme.palette.neutral[100], + [theme.getColorSchemeSelector('dark')]: { + borderColor: theme.palette.neutral[800], + backgroundColor: theme.palette.neutral[900], + }, + })} + > - direction + direction - alignItems + alignItems - justifyContent + justifyContent - spacing + spacing ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', ...theme.typography['body-sm'], - padding: theme.spacing(1), textAlign: 'center', - borderRadius: 4, + fontWeight: theme.fontWeight.md, color: theme.vars.palette.text.secondary, + border: '1px solid', + borderColor: theme.palette.divider, + padding: theme.spacing(1), + borderRadius: theme.radius.md, })); export default function ResponsiveStack() { diff --git a/docs/data/joy/components/stack/ResponsiveStack.tsx b/docs/data/joy/components/stack/ResponsiveStack.tsx index acc2bb6c6ab7e9..08683d607a8f11 100644 --- a/docs/data/joy/components/stack/ResponsiveStack.tsx +++ b/docs/data/joy/components/stack/ResponsiveStack.tsx @@ -4,13 +4,14 @@ 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['body-sm'], - padding: theme.spacing(1), textAlign: 'center', - borderRadius: 4, + fontWeight: theme.fontWeight.md, color: theme.vars.palette.text.secondary, + border: '1px solid', + borderColor: theme.palette.divider, + padding: theme.spacing(1), + borderRadius: theme.radius.md, })); export default function ResponsiveStack() { diff --git a/docs/data/joy/components/stack/stack.md b/docs/data/joy/components/stack/stack.md index 3d5599ef5f355e..ea9fecbd6f4b16 100644 --- a/docs/data/joy/components/stack/stack.md +++ b/docs/data/joy/components/stack/stack.md @@ -15,9 +15,7 @@ githubLabel: 'component: Stack' 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_ horizontal arrangement. -::: +{{"demo": "InteractiveStack.js", "hideToolbar": true}} ## Basics @@ -31,41 +29,45 @@ 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}} +{{"demo": "BasicStack.js"}} ### Stack vs. Grid -`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. +Stack is ideal for one-dimensional layouts, while [Grid](/joy-ui/react-grid/) is preferable when you need both vertical _and_ horizontal arrangement. + +## Customization -## Direction +### 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}} +{{"demo": "DirectionStack.js"}} -## 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}} +{{"demo": "DividerStack.js"}} -## Responsive values +### Responsive values You can switch the `direction` or `spacing` values based on the active breakpoint. -{{"demo": "ResponsiveStack.js", "bg": true}} +{{"demo": "ResponsiveStack.js"}} -## Flexbox gap +### 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 a CSS nested selector. -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. - +:::info +The CSS flexbox gap property 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}} +{{"demo": "FlexboxGapStack.js"}} To set the prop to all stack instances, create a theme with default props: @@ -92,13 +94,7 @@ 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 +### 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. @@ -146,7 +142,7 @@ In order for the item to stay within the container you need to set `min-width: 0 ``` -{{"demo": "ZeroWidthStack.js", "bg": true}} +{{"demo": "ZeroWidthStack.js"}} ## Anatomy From ad1d0c0efc329ea40ae03587d906494fffcf56c5 Mon Sep 17 00:00:00 2001 From: zanivan Date: Thu, 31 Aug 2023 13:32:34 -0300 Subject: [PATCH 2/2] Changed item variant --- docs/data/joy/components/stack/ZeroWidthStack.js | 2 ++ docs/data/joy/components/stack/ZeroWidthStack.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/docs/data/joy/components/stack/ZeroWidthStack.js b/docs/data/joy/components/stack/ZeroWidthStack.js index fe6430db37ecac..0ebb724caeb29d 100644 --- a/docs/data/joy/components/stack/ZeroWidthStack.js +++ b/docs/data/joy/components/stack/ZeroWidthStack.js @@ -22,6 +22,7 @@ export default function ZeroWidthStack() { return (