[docs][joy-ui] Polish the Stack page (#38623)

Co-authored-by: zanivan <[email protected]>
mui · Aug 31, 2023 · 104b3c0 · 104b3c0
1 parent ad99cf5
commit 104b3c0
Show file tree

Hide file tree

Showing 17 changed files with 133 additions and 91 deletions.
diff --git 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
@@ -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
@@ -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 (
     <div>
-      <Stack direction="row" spacing={2}>
+      <Stack direction="row" spacing={1}>
         <Item>Item 1</Item>
         <Item>Item 2</Item>
         <Item>Item 3</Item>

diff --git 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 (
     <div>
-      <Stack direction="row" spacing={2}>
+      <Stack direction="row" spacing={1}>
         <Item>Item 1</Item>
         <Item>Item 2</Item>
         <Item>Item 3</Item>

diff --git a/docs/data/joy/components/stack/DirectionStack.tsx.preview b/docs/data/joy/components/stack/DirectionStack.tsx.preview
@@ -1,4 +1,4 @@
-<Stack direction="row" spacing={2}>
+<Stack direction="row" spacing={1}>
   <Item>Item 1</Item>
   <Item>Item 2</Item>
   <Item>Item 3</Item>

diff --git 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
@@ -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
@@ -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 (
     <Box sx={{ width: 200 }}>
-      <Stack spacing={{ xs: 1, sm: 2 }} direction="row" useFlexGap flexWrap="wrap">
+      <Stack spacing={1} direction="row" flexWrap="wrap" useFlexGap>
         <Item>Item 1</Item>
         <Item>Item 2</Item>
         <Item>Long content</Item>

diff --git 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 (
     <Box sx={{ width: 200 }}>
-      <Stack spacing={{ xs: 1, sm: 2 }} direction="row" useFlexGap flexWrap="wrap">
+      <Stack spacing={1} direction="row" flexWrap="wrap" useFlexGap>
         <Item>Item 1</Item>
         <Item>Item 2</Item>
         <Item>Long content</Item>

diff --git a/docs/data/joy/components/stack/FlexboxGapStack.tsx.preview b/docs/data/joy/components/stack/FlexboxGapStack.tsx.preview
@@ -1,4 +1,4 @@
-<Stack spacing={{ xs: 1, sm: 2 }} direction="row" useFlexGap flexWrap="wrap">
+<Stack spacing={1} direction="row" flexWrap="wrap" useFlexGap>
   <Item>Item 1</Item>
   <Item>Item 2</Item>
   <Item>Long content</Item>

diff --git 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 (
-    <Stack sx={{ flexGrow: 1 }}>
+    <Stack sx={{ flexGrow: 1, '* pre': { mb: 0 } }}>
       <Stack
         direction={direction}
         justifyContent={justifyContent}
         alignItems={alignItems}
         spacing={spacing}
-        sx={{ height: 300, pt: 2, pb: 2 }}
+        sx={{ minHeight: 200, pb: 3 }}
       >
         {[0, 1, 2].map((value) => (
           <Item
@@ -57,12 +57,25 @@ export default function InteractiveStack() {
           </Item>
         ))}
       </Stack>
-      <Sheet sx={{ p: 2, backgroundColor: 'background.level1' }}>
+      <Sheet
+        variant="outlined"
+        sx={(theme) => ({
+          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],
+          },
+        })}
+      >
         <Grid container spacing={3}>
           <Grid xs={12}>
             <FormControl>
-              <FormLabel sx={{ mb: 1.5 }}>direction</FormLabel>
+              <FormLabel sx={{ mb: 0.5 }}>direction</FormLabel>
               <RadioGroup
+                size="sm"
                 orientation="horizontal"
                 name="direction"
                 aria-label="direction"
@@ -81,8 +94,9 @@ export default function InteractiveStack() {
           </Grid>
           <Grid xs={12}>
             <FormControl>
-              <FormLabel sx={{ mb: 1.5 }}>alignItems</FormLabel>
+              <FormLabel sx={{ mb: 0.5 }}>alignItems</FormLabel>
               <RadioGroup
+                size="sm"
                 orientation="horizontal"
                 name="alignItems"
                 aria-label="align items"
@@ -102,8 +116,9 @@ export default function InteractiveStack() {
           </Grid>
           <Grid xs={12}>
             <FormControl>
-              <FormLabel sx={{ mb: 1.5 }}>justifyContent</FormLabel>
+              <FormLabel sx={{ mb: 0.5 }}>justifyContent</FormLabel>
               <RadioGroup
+                size="sm"
                 orientation="horizontal"
                 name="justifyContent"
                 aria-label="justifyContent"
@@ -124,8 +139,9 @@ export default function InteractiveStack() {
           </Grid>
           <Grid xs={12}>
             <FormControl>
-              <FormLabel sx={{ mb: 1.5 }}>spacing</FormLabel>
+              <FormLabel sx={{ mb: 0.5 }}>spacing</FormLabel>
               <RadioGroup
+                size="sm"
                 orientation="horizontal"
                 name="spacing"
                 aria-label="spacing"

diff --git a/docs/data/joy/components/stack/InteractiveStack.tsx b/docs/data/joy/components/stack/InteractiveStack.tsx
@@ -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 (
-    <Stack sx={{ flexGrow: 1 }}>
+    <Stack sx={{ flexGrow: 1, '* pre': { mb: 0 } }}>
       <Stack
         direction={direction}
         justifyContent={justifyContent}
         alignItems={alignItems}
         spacing={spacing}
-        sx={{ height: 300, pt: 2, pb: 2 }}
+        sx={{ minHeight: 200, pb: 3 }}
       >
         {[0, 1, 2].map((value) => (
           <Item
@@ -57,12 +57,25 @@ export default function InteractiveStack() {
           </Item>
         ))}
       </Stack>
-      <Sheet sx={{ p: 2, backgroundColor: 'background.level1' }}>
+      <Sheet
+        variant="outlined"
+        sx={(theme) => ({
+          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],
+          },
+        })}
+      >
         <Grid container spacing={3}>
           <Grid xs={12}>
             <FormControl>
-              <FormLabel sx={{ mb: 1.5 }}>direction</FormLabel>
+              <FormLabel sx={{ mb: 0.5 }}>direction</FormLabel>
               <RadioGroup
+                size="sm"
                 orientation="horizontal"
                 name="direction"
                 aria-label="direction"
@@ -81,8 +94,9 @@ export default function InteractiveStack() {
           </Grid>
           <Grid xs={12}>
             <FormControl>
-              <FormLabel sx={{ mb: 1.5 }}>alignItems</FormLabel>
+              <FormLabel sx={{ mb: 0.5 }}>alignItems</FormLabel>
               <RadioGroup
+                size="sm"
                 orientation="horizontal"
                 name="alignItems"
                 aria-label="align items"
@@ -102,8 +116,9 @@ export default function InteractiveStack() {
           </Grid>
           <Grid xs={12}>
             <FormControl>
-              <FormLabel sx={{ mb: 1.5 }}>justifyContent</FormLabel>
+              <FormLabel sx={{ mb: 0.5 }}>justifyContent</FormLabel>
               <RadioGroup
+                size="sm"
                 orientation="horizontal"
                 name="justifyContent"
                 aria-label="justifyContent"
@@ -124,8 +139,9 @@ export default function InteractiveStack() {
           </Grid>
           <Grid xs={12}>
             <FormControl>
-              <FormLabel sx={{ mb: 1.5 }}>spacing</FormLabel>
+              <FormLabel sx={{ mb: 0.5 }}>spacing</FormLabel>
               <RadioGroup
+                size="sm"
                 orientation="horizontal"
                 name="spacing"
                 aria-label="spacing"