[Joy] Miscellaneous fixes (mui#33796)

daniel-rabe · Nov 29, 2022 · 80a830f · 80a830f
1 parent faaac73
commit 80a830f
Show file tree

Hide file tree

Showing 36 changed files with 266 additions and 135 deletions.
diff --git a/docs/data/joy/components/link/LinkAndTypography.js b/docs/data/joy/components/link/LinkAndTypography.js
@@ -5,7 +5,7 @@ import Typography from '@mui/joy/Typography';
 import CallMade from '@mui/icons-material/CallMade';
 import LinkIcon from '@mui/icons-material/Link';
 
-export default function Links() {
+export default function LinkAndTypography() {
   return (
     <Box sx={{ maxWidth: 360 }}>
       <Typography
@@ -18,7 +18,6 @@ export default function Links() {
             aria-labelledby="heading-demo"
             href="#heading-demo"
             fontSize="md"
-            ml={0.5}
             borderRadius="sm"
           >
             <LinkIcon />

diff --git a/docs/data/joy/components/list/DecoratedList.js b/docs/data/joy/components/list/DecoratedList.js
@@ -18,7 +18,7 @@ export default function DecoratedList() {
       </Typography>
       <List
         aria-labelledby="decorated-list-demo"
-        sx={{ '--List-decorator-width': '32px' }}
+        sx={{ '--List-decorator-size': '32px' }}
       >
         <ListItem>
           <ListItemDecorator>🧅</ListItemDecorator> 1 red onion

diff --git a/docs/data/joy/components/list/DividedList.js b/docs/data/joy/components/list/DividedList.js
@@ -27,7 +27,7 @@ export default function DividedList() {
             sx={{
               minWidth: 240,
               borderRadius: 'sm',
-              '--List-decorator-width': '48px',
+              '--List-decorator-size': '48px',
               '--List-item-paddingLeft': '1.5rem',
               '--List-item-paddingRight': '1rem',
             }}

diff --git a/docs/data/joy/components/list/EllipsisList.js b/docs/data/joy/components/list/EllipsisList.js
@@ -22,7 +22,7 @@ export default function EllipsisList() {
       </Typography>
       <List
         aria-labelledby="ellipsis-list-demo"
-        sx={{ '--List-decorator-width': '56px' }}
+        sx={{ '--List-decorator-size': '56px' }}
       >
         <ListItem>
           <ListItemDecorator sx={{ alignSelf: 'flex-start' }}>

diff --git a/docs/data/joy/components/list/ExampleGmailList.js b/docs/data/joy/components/list/ExampleGmailList.js
@@ -24,7 +24,7 @@ export default function ExampleGmailList() {
         sx={{
           // ...applyRadiusOnEdges({ target: 'deepest' | 'nested' }),
           '--List-item-paddingLeft': '0px',
-          '--List-decorator-width': '64px',
+          '--List-decorator-size': '64px',
           '--List-decorator-color': (theme) => theme.vars.palette.text.secondary,
           '--List-item-minHeight': '32px',
           '--List-nestedInsetStart': '13px',

diff --git a/docs/data/joy/components/list/ExampleIOSList.js b/docs/data/joy/components/list/ExampleIOSList.js
@@ -59,7 +59,7 @@ export default function ExampleIOSList() {
         })}
       >
         <ListItem nested>
-          <List aria-label="Personal info" sx={{ '--List-decorator-width': '72px' }}>
+          <List aria-label="Personal info" sx={{ '--List-decorator-size': '72px' }}>
             <ListItem>
               <ListItemDecorator>
                 <Avatar size="lg" sx={{ '--Avatar-size': '60px' }}>

diff --git a/docs/data/joy/components/list/ExampleNavigationMenu.js b/docs/data/joy/components/list/ExampleNavigationMenu.js
@@ -147,7 +147,7 @@ const AboutMenu = React.forwardRef(({ focusNext, focusPrevious, ...props }, ref)
               '--List-radius': '8px',
               '--List-padding': '4px',
               '--List-divider-gap': '4px',
-              '--List-decorator-width': '32px',
+              '--List-decorator-size': '32px',
             }}
           >
             <ListItem role="none">

diff --git a/docs/data/joy/components/list/HorizontalDividedList.js b/docs/data/joy/components/list/HorizontalDividedList.js
@@ -14,7 +14,7 @@ export default function HorizontalDividedList() {
         borderRadius: 'sm',
         flexGrow: 0,
         mx: 'auto',
-        '--List-decorator-width': '48px',
+        '--List-decorator-size': '48px',
         '--List-item-paddingY': '1rem',
       }}
     >

diff --git a/docs/data/joy/components/list/ListVariables.js b/docs/data/joy/components/list/ListVariables.js
@@ -25,7 +25,7 @@ export default function ListVariables() {
         { var: '--List-item-minHeight', defaultValue: '40px' },
         { var: '--List-item-paddingY', defaultValue: '6px' },
         { var: '--List-item-paddingX', defaultValue: '12px' },
-        { var: '--List-decorator-width', defaultValue: '40px' },
+        { var: '--List-decorator-size', defaultValue: '40px' },
         { var: '--List-divider-gap', defaultValue: '6px' },
       ]}
       renderDemo={(sx) => (

diff --git a/docs/data/joy/components/list/list.md b/docs/data/joy/components/list/list.md
@@ -56,7 +56,7 @@ Use the `size` prop to control font-size and general list density.
 
 Use the `ListItemDecorator` component to add supporting icons or elements to the list item.
 
-It comes with a minimum set width that you can adjust via the `--List-decorator-width` CSS variable within the `List` component.
+It comes with a minimum set width that you can adjust via the `--List-decorator-size` CSS variable within the `List` component.
 
 {{"demo": "DecoratedList.js"}}
 

diff --git a/docs/data/joy/components/menu/GroupMenu.js b/docs/data/joy/components/menu/GroupMenu.js
@@ -41,7 +41,7 @@ export default function BasicMenu() {
         open={open}
         onClose={handleClose}
         aria-labelledby="group-demo-button"
-        sx={{ minWidth: 160, '--List-decorator-width': '24px' }}
+        sx={{ minWidth: 160, '--List-decorator-size': '24px' }}
       >
         <MenuItem
           onClick={() => {

diff --git a/docs/data/joy/components/radio/RadioPositionEnd.js b/docs/data/joy/components/radio/RadioPositionEnd.js
@@ -17,7 +17,7 @@ export default function RadioPositionEnd() {
           '--List-gap': '0.5rem',
           '--List-item-paddingY': '1rem',
           '--List-item-radius': '8px',
-          '--List-decorator-width': '32px',
+          '--List-decorator-size': '32px',
           [`& .${radioClasses.root}`]: {
             flexGrow: 1,
             flexDirection: 'row-reverse',

diff --git a/docs/data/joy/components/select/SelectCustomOption.js b/docs/data/joy/components/select/SelectCustomOption.js
@@ -12,12 +12,12 @@ export default function SelectCustomOption() {
       componentsProps={{
         listbox: {
           sx: {
-            '--List-decorator-width': '44px',
+            '--List-decorator-size': '44px',
           },
         },
       }}
       sx={{
-        '--List-decorator-width': '44px',
+        '--List-decorator-size': '44px',
         minWidth: 240,
       }}
     >

diff --git a/docs/data/joy/components/select/SelectCustomValueAppearance.js b/docs/data/joy/components/select/SelectCustomValueAppearance.js
@@ -24,7 +24,7 @@ export default function SelectCustomValueAppearance() {
       componentsProps={{
         listbox: {
           sx: {
-            '--List-decorator-width': '48px',
+            '--List-decorator-size': '48px',
           },
         },
       }}

diff --git a/docs/data/joy/components/select/SelectGroupedOptions.js b/docs/data/joy/components/select/SelectGroupedOptions.js
@@ -43,7 +43,7 @@ export default function SelectGroupedOptions() {
           <List
             role="group"
             aria-labelledby={`select-group-${name}`}
-            sx={{ '--List-decorator-width': '28px' }}
+            sx={{ '--List-decorator-size': '28px' }}
           >
             <ListItem role="presentation" id={`select-group-${name}`} sticky>
               <Typography level="body3" textTransform="uppercase" letterSpacing="md">

diff --git a/docs/data/joy/components/tabs/TabsBottomNavExample.js b/docs/data/joy/components/tabs/TabsBottomNavExample.js
@@ -9,7 +9,7 @@ import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
 import Search from '@mui/icons-material/Search';
 import Person from '@mui/icons-material/Person';
 
-export default function TabsBasic() {
+export default function TabsBottomNavExample() {
   const [index, setIndex] = React.useState(0);
   const colors = ['primary', 'info', 'danger', 'success'];
   return (
@@ -43,34 +43,45 @@ export default function TabsBasic() {
             transition: '0.3s',
             fontWeight: 'lg',
             flex: 1,
-            flexDirection: 'column',
             [`&:not(.${tabClasses.selected}):not(:hover)`]: {
               opacity: 0.72,
             },
           },
         })}
       >
-        <TabList variant="plain" sx={{ '--List-decorator-width': '24px' }}>
-          <Tab {...(index === 0 && { variant: 'soft', color: colors[0] })}>
-            <ListItemDecorator sx={{ mb: 0.5 }}>
+        <TabList variant="plain" sx={{ '--List-decorator-size': '28px' }}>
+          <Tab
+            orientation="vertical"
+            {...(index === 0 && { variant: 'soft', color: colors[0] })}
+          >
+            <ListItemDecorator>
               <HomeOutlined />
             </ListItemDecorator>
             Home
           </Tab>
-          <Tab {...(index === 1 && { variant: 'soft', color: colors[1] })}>
-            <ListItemDecorator sx={{ mb: 0.5 }}>
+          <Tab
+            orientation="vertical"
+            {...(index === 1 && { variant: 'soft', color: colors[1] })}
+          >
+            <ListItemDecorator>
               <FavoriteBorder />
             </ListItemDecorator>
             Likes
           </Tab>
-          <Tab {...(index === 2 && { variant: 'soft', color: colors[2] })}>
-            <ListItemDecorator sx={{ mb: 0.5 }}>
+          <Tab
+            orientation="vertical"
+            {...(index === 2 && { variant: 'soft', color: colors[2] })}
+          >
+            <ListItemDecorator>
               <Search />
             </ListItemDecorator>
             Search
           </Tab>
-          <Tab {...(index === 3 && { variant: 'soft', color: colors[3] })}>
-            <ListItemDecorator sx={{ mb: 0.5 }}>
+          <Tab
+            orientation="vertical"
+            {...(index === 3 && { variant: 'soft', color: colors[3] })}
+          >
+            <ListItemDecorator>
               <Person />
             </ListItemDecorator>
             Profile

diff --git a/docs/data/joy/components/tabs/TabsBottomNavExample.tsx b/docs/data/joy/components/tabs/TabsBottomNavExample.tsx
@@ -9,7 +9,7 @@ import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
 import Search from '@mui/icons-material/Search';
 import Person from '@mui/icons-material/Person';
 
-export default function TabsBasic() {
+export default function TabsBottomNavExample() {
   const [index, setIndex] = React.useState(0);
   const colors = ['primary', 'info', 'danger', 'success'] as const;
   return (
@@ -43,34 +43,45 @@ export default function TabsBasic() {
             transition: '0.3s',
             fontWeight: 'lg',
             flex: 1,
-            flexDirection: 'column',
             [`&:not(.${tabClasses.selected}):not(:hover)`]: {
               opacity: 0.72,
             },
           },
         })}
       >
-        <TabList variant="plain" sx={{ '--List-decorator-width': '24px' }}>
-          <Tab {...(index === 0 && { variant: 'soft', color: colors[0] })}>
-            <ListItemDecorator sx={{ mb: 0.5 }}>
+        <TabList variant="plain" sx={{ '--List-decorator-size': '28px' }}>
+          <Tab
+            orientation="vertical"
+            {...(index === 0 && { variant: 'soft', color: colors[0] })}
+          >
+            <ListItemDecorator>
               <HomeOutlined />
             </ListItemDecorator>
             Home
           </Tab>
-          <Tab {...(index === 1 && { variant: 'soft', color: colors[1] })}>
-            <ListItemDecorator sx={{ mb: 0.5 }}>
+          <Tab
+            orientation="vertical"
+            {...(index === 1 && { variant: 'soft', color: colors[1] })}
+          >
+            <ListItemDecorator>
               <FavoriteBorder />
             </ListItemDecorator>
             Likes
           </Tab>
-          <Tab {...(index === 2 && { variant: 'soft', color: colors[2] })}>
-            <ListItemDecorator sx={{ mb: 0.5 }}>
+          <Tab
+            orientation="vertical"
+            {...(index === 2 && { variant: 'soft', color: colors[2] })}
+          >
+            <ListItemDecorator>
               <Search />
             </ListItemDecorator>
             Search
           </Tab>
-          <Tab {...(index === 3 && { variant: 'soft', color: colors[3] })}>
-            <ListItemDecorator sx={{ mb: 0.5 }}>
+          <Tab
+            orientation="vertical"
+            {...(index === 3 && { variant: 'soft', color: colors[3] })}
+          >
+            <ListItemDecorator>
               <Person />
             </ListItemDecorator>
             Profile

diff --git a/docs/data/joy/components/tabs/TabsIconWithText.js b/docs/data/joy/components/tabs/TabsIconWithText.js
@@ -9,27 +9,51 @@ import PersonPinIcon from '@mui/icons-material/PersonPin';
 
 export default function TabsIconWithText() {
   return (
-    <Tabs aria-label="Icon tabs" defaultValue={0}>
-      <TabList>
-        <Tab>
-          <ListItemDecorator>
-            <PhoneIcon />
-          </ListItemDecorator>
-          Recents
-        </Tab>
-        <Tab>
-          <ListItemDecorator>
-            <FavoriteIcon />
-          </ListItemDecorator>
-          Favorite
-        </Tab>
-        <Tab>
-          <ListItemDecorator>
-            <PersonPinIcon />
-          </ListItemDecorator>
-          Nearby
-        </Tab>
-      </TabList>
-    </Tabs>
+    <div>
+      <Tabs aria-label="Icon tabs" defaultValue={0} sx={{ mb: 2 }}>
+        <TabList>
+          <Tab>
+            <ListItemDecorator>
+              <PhoneIcon />
+            </ListItemDecorator>
+            Recents
+          </Tab>
+          <Tab>
+            <ListItemDecorator>
+              <FavoriteIcon />
+            </ListItemDecorator>
+            Favorite
+          </Tab>
+          <Tab>
+            <ListItemDecorator>
+              <PersonPinIcon />
+            </ListItemDecorator>
+            Nearby
+          </Tab>
+        </TabList>
+      </Tabs>
+      <Tabs aria-label="Icon tabs" defaultValue={0}>
+        <TabList>
+          <Tab orientation="vertical">
+            <ListItemDecorator>
+              <PhoneIcon />
+            </ListItemDecorator>
+            Recents
+          </Tab>
+          <Tab orientation="vertical">
+            <ListItemDecorator>
+              <FavoriteIcon />
+            </ListItemDecorator>
+            Favorite
+          </Tab>
+          <Tab orientation="vertical">
+            <ListItemDecorator>
+              <PersonPinIcon />
+            </ListItemDecorator>
+            Nearby
+          </Tab>
+        </TabList>
+      </Tabs>
+    </div>
   );
 }