[Joy] Miscellaneous fixes (mui#33750)

docs/data/joy/components/button/ButtonVariables.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
+import Button from '@mui/joy/Button';
+import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
+
+export default function ButtonVariables() {
+  return (
+    <JoyVariablesDemo
+      componentName="Button"
+      renderCode={(formattedSx) => `<Button
+  startIcon={<FavoriteBorder />}${formattedSx ? `${formattedSx}>` : '\n>'}`}
+      data={[
+        {
+          var: '--Button-gap',
+          defaultValue: '8px',
+        },
+      ]}
+      renderDemo={(sx) => (
+        <Button sx={sx} startIcon={<FavoriteBorder />}>
+          Favorite
+        </Button>
+      )}
+    />
+  );
+}

docs/data/joy/components/button/IconButtonVariables.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
+import IconButton from '@mui/joy/IconButton';
+import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
+
+export default function IconButtonVariables() {
+  return (
+    <JoyVariablesDemo
+      componentName="IconButton"
+      renderCode={(formattedSx) =>
+        `<IconButton${formattedSx ? `${formattedSx}>` : '\n>'}
+  <FavoriteBorder />
+</IconButton>`
+      }
+      data={[
+        {
+          var: '--IconButton-size',
+          defaultValue: '40px',
+        },
+      ]}
+      renderDemo={(sx) => (
+        <IconButton sx={sx}>
+          <FavoriteBorder />
+        </IconButton>
+      )}
+    />
+  );
+}

docs/data/joy/components/button/button.md

@@ -68,7 +68,7 @@ Use the `IconButton` component if you want width and height to be the same while
 Every prop previously covered are available for this component as well.
 
 ```jsx
-import Button from '@mui/joy/IconButton';
+import IconButton from '@mui/joy/IconButton';
 ```
 
 {{"demo": "IconButtons.js"}}
@@ -93,3 +93,9 @@ Since links are the most appropriate component for navigating through pages, tha
 Doing so will automatically change the rendered HTML tag from `<button>` to `<a>`.
 
 {{"demo": "ButtonLink.js"}}
+
+## CSS Variables
+
+{{"demo": "ButtonVariables.js", "hideToolbar": true}}
+
+{{"demo": "IconButtonVariables.js", "hideToolbar": true}}

docs/data/joy/components/checkbox/ExampleButtonCheckbox.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import Checkbox, { checkboxClasses } from '@mui/joy/Checkbox';
+import List from '@mui/joy/List';
+import ListItem from '@mui/joy/ListItem';
+import ListItemDecorator from '@mui/joy/ListItemDecorator';
+import LaptopIcon from '@mui/icons-material/Laptop';
+import TvIcon from '@mui/icons-material/Tv';
+import PhoneAndroidIcon from '@mui/icons-material/PhoneAndroid';
+
+export default function ExampleButtonCheckbox() {
+  const [value, setValue] = React.useState([]);
+  return (
+    <List
+      variant="soft"
+      aria-label="Screens"
+      role="group"
+      row
+      sx={{
+        flexGrow: 0,
+        '--List-gap': '8px',
+        '--List-padding': '8px',
+        '--List-radius': '8px',
+      }}
+    >
+      {['mobile', 'laptop', 'monitor'].map((item) => (
+        <ListItem key={item}>
+          <ListItemDecorator
+            sx={{
+              zIndex: 2,
+              pointerEvents: 'none',
+              ...(value.includes(item) && { color: 'text.primary' }),
+            }}
+          >
+            {
+              {
+                mobile: <PhoneAndroidIcon />,
+                laptop: <LaptopIcon />,
+                monitor: <TvIcon />,
+              }[item]
+            }
+          </ListItemDecorator>
+          <Checkbox
+            disableIcon
+            overlay
+            label={item}
+            checked={value.includes(item)}
+            color="neutral"
+            variant="plain"
+            onChange={(event) => {
+              if (event.target.checked) {
+                setValue((val) => [...val, item]);
+              } else {
+                setValue((val) => val.filter((text) => text !== item));
+              }
+            }}
+            sx={{
+              [`& .${checkboxClasses.action}`]: {
+                bgcolor: value.includes(item) ? 'background.surface' : 'transparent',
+                boxShadow: value.includes(item) ? 'sm' : 'none',
+                '&:hover': {
+                  bgcolor: value.includes(item)
+                    ? 'background.surface'
+                    : 'transparent',
+                },
+              },
+            }}
+          />
+        </ListItem>
+      ))}
+    </List>
+  );
+}

docs/data/joy/components/checkbox/ExampleFilterMemberCheckbox.js

@@ -83,6 +83,7 @@ export default function ExampleFilterMemberCheckbox() {
               }
               checked={members[1]}
               onChange={toggleMember(1)}
+              sx={{ color: 'inherit' }}
             />
           </ListItem>
           <ListItem {...(members[2] && { variant: 'soft', color: 'neutral' })}>

docs/data/joy/components/checkbox/ExampleFilterStatusCheckbox.js

@@ -39,6 +39,7 @@ export default function ExampleFilterStatusCheckbox() {
               onChange={(event) =>
                 setStatus({ ...status, declinedPayment: event.target.checked })
               }
+              sx={{ color: 'inherit' }}
             />
             <Typography textColor="inherit" sx={{ ml: 'auto' }}>
               8

docs/data/joy/components/checkbox/checkbox.md

@@ -119,3 +119,7 @@ Don't forget to use the `label` prop to ensure proper checkbox accessibility.
 You can use checkboxes to create a chip alike design, most often used to filter between different options.
 
 {{"demo": "ExampleChoiceChipCheckbox.js"}}
+
+### Viewport checklist
+
+{{"demo": "ExampleButtonCheckbox.js"}}

docs/data/joy/components/list/HorizontalDividedList.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import Avatar from '@mui/joy/Avatar';
+import List from '@mui/joy/List';
+import ListDivider from '@mui/joy/ListDivider';
+import ListItem from '@mui/joy/ListItem';
+import ListItemDecorator from '@mui/joy/ListItemDecorator';
+
+export default function HorizontalDividedList() {
+  return (
+    <List
+      row
+      variant="outlined"
+      sx={{
+        borderRadius: 'sm',
+        flexGrow: 0,
+        mx: 'auto',
+        '--List-decorator-width': '48px',
+        '--List-item-paddingY': '1rem',
+      }}
+    >
+      <ListItem>
+        <ListItemDecorator sx={{ alignSelf: 'flex-start' }}>
+          <Avatar size="sm" src="/static/images/avatar/1.jpg" />
+        </ListItemDecorator>
+        Mabel Boyle
+      </ListItem>
+      <ListDivider inset="gutter" />
+      <ListItem>
+        <ListItemDecorator sx={{ alignSelf: 'flex-start' }}>
+          <Avatar size="sm" src="/static/images/avatar/2.jpg" />
+        </ListItemDecorator>
+        Boyd Burt
+      </ListItem>
+      <ListDivider inset="gutter" />
+      <ListItem>
+        <ListItemDecorator sx={{ alignSelf: 'flex-start' }}>
+          <Avatar size="sm" src="/static/images/avatar/3.jpg" />
+        </ListItemDecorator>
+        Adam Tris
+      </ListItem>
+    </List>
+  );
+}

docs/data/joy/components/list/ListVariables.js

@@ -56,6 +56,7 @@ export default function ListVariables() {
                 fontWeight="md"
                 startDecorator={
                   <Sheet
+                    component="span"
                     sx={{
                       width: 8,
                       height: 8,

docs/data/joy/components/list/list.md

@@ -77,6 +77,10 @@ The `ListDivider` component comes with four `inset` patterns:
 
 {{"demo": "DividedList.js"}}
 
+For horizontal list, only `inset="gutter"` works on list divider.
+
+{{"demo": "HorizontalDividedList.js"}}
+
 ### Sticky item
 
 To have a sticky list item, use a `List` as a child of the `Sheet` component.

docs/data/joy/components/menu/GroupMenu.js

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import List from '@mui/joy/List';
+import ListItem from '@mui/joy/ListItem';
+import ListItemDecorator from '@mui/joy/ListItemDecorator';
+import ListDivider from '@mui/joy/ListDivider';
+import Menu from '@mui/joy/Menu';
+import MenuItem from '@mui/joy/MenuItem';
+import ArrowRight from '@mui/icons-material/ArrowRight';
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
+
+export default function BasicMenu() {
+  const SIZES = ['X-Small', 'Small', 'Medium', 'Large', 'X-Large'];
+  const [size, setSize] = React.useState('Medium');
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div>
+      <Button
+        id="group-demo-button"
+        aria-controls={open ? 'group-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        variant="outlined"
+        color="neutral"
+        onClick={handleClick}
+        endIcon={<ArrowDropDown />}
+      >
+        Size
+      </Button>
+      <Menu
+        id="group-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="group-demo-button"
+        sx={{ minWidth: 160, '--List-decorator-width': '24px' }}
+      >
+        <MenuItem
+          onClick={() => {
+            const nextIndex = SIZES.indexOf(size) - 1;
+            const value = nextIndex < 0 ? SIZES[SIZES.length - 1] : SIZES[nextIndex];
+            setSize(value);
+            handleClose();
+          }}
+        >
+          Smaller
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            const nextIndex = SIZES.indexOf(size) + 1;
+            const value = nextIndex > SIZES.length - 1 ? SIZES[0] : SIZES[nextIndex];
+            setSize(value);
+            handleClose();
+          }}
+        >
+          Larger
+        </MenuItem>
+        <ListDivider />
+        <ListItem nested>
+          <List aria-label="Font sizes">
+            {SIZES.map((item) => (
+              <MenuItem
+                key={item}
+                role="menuitemradio"
+                aria-checked={item === size ? 'true' : 'false'}
+                onClick={() => {
+                  setSize(item);
+                  handleClose();
+                }}
+              >
+                <ListItemDecorator>
+                  {item === size && <ArrowRight />}
+                </ListItemDecorator>{' '}
+                {item}
+              </MenuItem>
+            ))}
+          </List>
+        </ListItem>
+      </Menu>
+    </div>
+  );
+}

docs/data/joy/components/menu/MenuListComposition.js

@@ -1,10 +1,15 @@
 import * as React from 'react';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import ClickAwayListener from '@mui/base/ClickAwayListener';
+import { styled } from '@mui/joy/styles';
 import Button from '@mui/joy/Button';
 import MenuList from '@mui/joy/MenuList';
 import MenuItem from '@mui/joy/MenuItem';
 
+const Popup = styled(PopperUnstyled)({
+  zIndex: 1000,
+});
+
 export default function MenuListComposition() {
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
@@ -38,7 +43,7 @@ export default function MenuListComposition() {
       >
         Open menu
       </Button>
-      <PopperUnstyled
+      <Popup
         role={undefined}
         id="composition-menu"
         open={open}
@@ -65,7 +70,7 @@ export default function MenuListComposition() {
             <MenuItem onClick={handleClose}>Custom: 1.2</MenuItem>
           </MenuList>
         </ClickAwayListener>
-      </PopperUnstyled>
+      </Popup>
     </div>
   );
 }

docs/data/joy/components/menu/MenuListGroup.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import List from '@mui/joy/List';
+import ListItem from '@mui/joy/ListItem';
+import MenuList from '@mui/joy/MenuList';
+import MenuItem from '@mui/joy/MenuItem';
+import Typography from '@mui/joy/Typography';
+
+export default function MenuListGroup() {
+  return (
+    <MenuList
+      variant="outlined"
+      size="sm"
+      sx={{
+        boxShadow: 'sm',
+        flexGrow: 0,
+        minWidth: 200,
+        maxHeight: 240,
+        overflow: 'auto',
+      }}
+    >
+      {[...Array(5)].map((_, categoryIndex) => (
+        <List role="group" key={categoryIndex}>
+          <ListItem sticky>
+            <Typography
+              id={`sticky-list-demo-${categoryIndex}`}
+              level="body3"
+              textTransform="uppercase"
+              fontWeight="lg"
+            >
+              Category {categoryIndex + 1}
+            </Typography>
+          </ListItem>
+          {[...Array(10)].map((__, index) => (
+            <MenuItem key={index}>Action {index + 1}</MenuItem>
+          ))}
+        </List>
+      ))}
+    </MenuList>
+  );
+}