diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index e69de29bb2d1d6..4402756f5ae112 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -0,0 +1,195 @@ +/scripts/ @michaldudak @m4theushw + +# Packages + +/packages/mui-base/ @michaldudak @mnajdova +/packages/mui-icons-material/ @michaldudak @siriwatknp +/packages/mui-joy/ @siriwatknp @danilo-leal +/packages/mui-material/ @mnajdova @danilo-leal +/packages/mui-system/ @mnajdova @siriwatknp + +# Components - Inputs + +/packages/mui-base/src/AutocompleteUnstyled/ @michaldudak @mnajdova +/packages/mui-base/src/ButtonUnstyled/ @michaldudak @mnajdova +/packages/mui-base/src/FormControlUnstyled/ @michaldudak @mnajdova +/packages/mui-base/src/InputUnstyled/ @michaldudak @mnajdova +/packages/mui-base/src/MultiSelectUnstyled/ @michaldudak @mnajdova +/packages/mui-base/src/OptionGroupUnstyled/ @michaldudak @mnajdova +/packages/mui-base/src/OptionUnstyled/ @michaldudak @mnajdova +/packages/mui-base/src/SelectUnstyled/ @michaldudak @mnajdova +/packages/mui-base/src/SliderUnstyled/ @michaldudak @mnajdova +/packages/mui-base/src/SwitchUnstyled/ @michaldudak @mnajdova + +/packages/mui-material/src/Autocomplete/ @michaldudak @mnajdova +/packages/mui-material/src/Button/ @michaldudak @mnajdova +/packages/mui-material/src/ButtonBase/ @michaldudak @mnajdova +/packages/mui-material/src/ButtonGroup/ @michaldudak @mnajdova +/packages/mui-material/src/Checkbox/ @michaldudak @mnajdova +/packages/mui-material/src/Fab/ @michaldudak @mnajdova +/packages/mui-material/src/FilledInput/ @michaldudak @mnajdova +/packages/mui-material/src/FormControl/ @michaldudak @mnajdova +/packages/mui-material/src/FormControlLabel/ @michaldudak @mnajdova +/packages/mui-material/src/FormGroup/ @michaldudak @mnajdova +/packages/mui-material/src/FormHelperText/ @michaldudak @mnajdova +/packages/mui-material/src/FormLabel/ @michaldudak @mnajdova +/packages/mui-material/src/IconButton/ @michaldudak @mnajdova +/packages/mui-material/src/Input/ @michaldudak @mnajdova +/packages/mui-material/src/InputAdornment/ @michaldudak @mnajdova +/packages/mui-material/src/InputBase/ @michaldudak @mnajdova +/packages/mui-material/src/InputLabel/ @michaldudak @mnajdova +/packages/mui-material/src/NativeSelect/ @michaldudak @mnajdova +/packages/mui-material/src/OutlinedInput/ @michaldudak @mnajdova +/packages/mui-material/src/Radio/ @michaldudak @mnajdova +/packages/mui-material/src/RadioGroup/ @michaldudak @mnajdova +/packages/mui-material/src/Rating/ @michaldudak @mnajdova +/packages/mui-material/src/Select/ @michaldudak @mnajdova +/packages/mui-material/src/Slider/ @michaldudak @mnajdova +/packages/mui-material/src/Switch/ @michaldudak @mnajdova +/packages/mui-material/src/TextField/ @michaldudak @mnajdova +/packages/mui-material/src/ToggleButton/ @michaldudak @mnajdova +/packages/mui-material/src/ToggleButtonGroup/ @michaldudak @mnajdova +/packages/mui-material/src/useAutocomplete/ @michaldudak @mnajdova +/packages/mui-material/src/useTouchRipple/ @michaldudak @mnajdova + +# Components - Data display + +/packages/mui-base/src/BadgeUnstyled/ @hbjORbj @siriwatknp @michaldudak + +/packages/mui-material/src/Avatar/ @hbjORbj @siriwatknp +/packages/mui-material/src/AvatarGroup/ @hbjORbj @siriwatknp +/packages/mui-material/src/Badge/ @hbjORbj @siriwatknp +/packages/mui-material/src/Chip/ @hbjORbj @siriwatknp +/packages/mui-material/src/Divider/ @hbjORbj @siriwatknp +/packages/mui-material/src/Icon/ @hbjORbj @siriwatknp +/packages/mui-material/src/List/ @hbjORbj @siriwatknp +/packages/mui-material/src/ListItem/ @hbjORbj @siriwatknp +/packages/mui-material/src/ListItemAvatar/ @hbjORbj @siriwatknp +/packages/mui-material/src/ListItemButton/ @hbjORbj @siriwatknp +/packages/mui-material/src/ListItemIcon/ @hbjORbj @siriwatknp +/packages/mui-material/src/ListItemSecondaryAction/ @hbjORbj @siriwatknp +/packages/mui-material/src/ListItemText/ @hbjORbj @siriwatknp +/packages/mui-material/src/ListSubheader/ @hbjORbj @siriwatknp +/packages/mui-material/src/SvgIcon/ @hbjORbj @siriwatknp +/packages/mui-material/src/Table/ @hbjORbj @siriwatknp +/packages/mui-material/src/TableBody/ @hbjORbj @siriwatknp +/packages/mui-material/src/TableCell/ @hbjORbj @siriwatknp +/packages/mui-material/src/TableContainer/ @hbjORbj @siriwatknp +/packages/mui-material/src/TableFooter/ @hbjORbj @siriwatknp +/packages/mui-material/src/TableHead/ @hbjORbj @siriwatknp +/packages/mui-material/src/TablePagination/ @hbjORbj @siriwatknp +/packages/mui-material/src/TableRow/ @hbjORbj @siriwatknp +/packages/mui-material/src/TableSortLabel/ @hbjORbj @siriwatknp +/packages/mui-material/src/Tooltip/ @hbjORbj @siriwatknp +/packages/mui-material/src/Typography/ @hbjORbj @siriwatknp + +# Components - Feedback + +/packages/mui-material/src/Alert/ @siriwatknp @hbjORbj +/packages/mui-material/src/AlertTitle/ @siriwatknp @hbjORbj +/packages/mui-material/src/Backdrop/ @siriwatknp @hbjORbj +/packages/mui-material/src/CircularProgress/ @siriwatknp @hbjORbj +/packages/mui-material/src/Dialog/ @siriwatknp @hbjORbj +/packages/mui-material/src/DialogActions/ @siriwatknp @hbjORbj +/packages/mui-material/src/DialogContent/ @siriwatknp @hbjORbj +/packages/mui-material/src/DialogContentText/ @siriwatknp @hbjORbj +/packages/mui-material/src/DialogTitle/ @siriwatknp @hbjORbj +/packages/mui-material/src/LinearProgress/ @siriwatknp @hbjORbj +/packages/mui-material/src/Snackbar/ @siriwatknp @hbjORbj +/packages/mui-material/src/SnackbarContent/ @siriwatknp @hbjORbj +/packages/mui-material/src/Skeleton/ @siriwatknp @hbjORbj + +# Components - Surfaces + +/packages/mui-material/src/Accordion/ @siriwatknp @hbjORbj +/packages/mui-material/src/AccordionActions/ @siriwatknp @hbjORbj +/packages/mui-material/src/AccordionDetails/ @siriwatknp @hbjORbj +/packages/mui-material/src/AccordionSummary/ @siriwatknp @hbjORbj +/packages/mui-material/src/AppBar/ @siriwatknp @hbjORbj +/packages/mui-material/src/Card/ @siriwatknp @hbjORbj +/packages/mui-material/src/CardActionArea/ @siriwatknp @hbjORbj +/packages/mui-material/src/CardActions/ @siriwatknp @hbjORbj +/packages/mui-material/src/CardContent/ @siriwatknp @hbjORbj +/packages/mui-material/src/CardHeader/ @siriwatknp @hbjORbj +/packages/mui-material/src/CardMedia/ @siriwatknp @hbjORbj +/packages/mui-material/src/Paper/ @siriwatknp @hbjORbj +/packages/mui-material/src/Toolbar/ @siriwatknp @hbjORbj +/packages/mui-material/src/useScrollTrigger/ @siriwatknp @hbjORbj + +# Components - Navigation + +/packages/mui-base/src/MenuItemUnstyled/ @hbjORbj @mnajdova @michaldudak +/packages/mui-base/src/MenuUnstyled/ @hbjORbj @mnajdova @michaldudak +/packages/mui-base/src/TabPanelUnstyled/ @hbjORbj @mnajdova @michaldudak +/packages/mui-base/src/TabsListUnstyled/ @hbjORbj @mnajdova @michaldudak +/packages/mui-base/src/TabsUnstyled/ @hbjORbj @mnajdova @michaldudak +/packages/mui-base/src/TabUnstyled/ @hbjORbj @mnajdova @michaldudak +/packages/mui-base/src/TablePaginationUnstyled/ @hbjORbj @mnajdova @michaldudak + +/packages/mui-material/src/BottomNavigation/ @hbjORbj @mnajdova +/packages/mui-material/src/BottomNavigationAction/ @hbjORbj @mnajdova +/packages/mui-material/src/Breadcrumbs/ @hbjORbj @mnajdova +/packages/mui-material/src/Drawer/ @hbjORbj @mnajdova +/packages/mui-material/src/Link/ @hbjORbj @mnajdova +/packages/mui-material/src/Menu/ @hbjORbj @mnajdova +/packages/mui-material/src/MenuItem/ @hbjORbj @mnajdova +/packages/mui-material/src/MenuList/ @hbjORbj @mnajdova +/packages/mui-material/src/MobileStepper/ @hbjORbj @mnajdova +/packages/mui-material/src/Pagination/ @hbjORbj @mnajdova +/packages/mui-material/src/PaginationItem/ @hbjORbj @mnajdova +/packages/mui-material/src/SpeedDial/ @hbjORbj @mnajdova +/packages/mui-material/src/SpeedDialAction/ @hbjORbj @mnajdova +/packages/mui-material/src/SpeedDialIcon/ @hbjORbj @mnajdova +/packages/mui-material/src/Step/ @hbjORbj @mnajdova +/packages/mui-material/src/StepButton/ @hbjORbj @mnajdova +/packages/mui-material/src/StepConnector/ @hbjORbj @mnajdova +/packages/mui-material/src/StepContent/ @hbjORbj @mnajdova +/packages/mui-material/src/StepIcon/ @hbjORbj @mnajdova +/packages/mui-material/src/StepLabel/ @hbjORbj @mnajdova +/packages/mui-material/src/Stepper/ @hbjORbj @mnajdova +/packages/mui-material/src/SwipeableDrawer/ @hbjORbj @mnajdova +/packages/mui-material/src/Tab/ @hbjORbj @mnajdova +/packages/mui-material/src/Tabs/ @hbjORbj @mnajdova +/packages/mui-material/src/TabScrollButton/ @hbjORbj @mnajdova +/packages/mui-material/src/usePagination/ @hbjORbj @mnajdova + +# Components - Layout + +/packages/mui-material/src/Box/ @siriwatknp @hbjORbj +/packages/mui-material/src/Container/ @siriwatknp @hbjORbj +/packages/mui-material/src/Grid/ @siriwatknp @hbjORbj +/packages/mui-material/src/Hidden/ @siriwatknp @hbjORbj +/packages/mui-material/src/ImageList/ @siriwatknp @hbjORbj +/packages/mui-material/src/ImageListItem/ @siriwatknp @hbjORbj +/packages/mui-material/src/ImageListItemBar/ @siriwatknp @hbjORbj +/packages/mui-material/src/Stack/ @siriwatknp @hbjORbj +/packages/mui-material/src/Unstable_Grid2/ @siriwatknp @hbjORbj + +# Components - Utils + +/packages/mui-base/src/ClickAwayListener/ @mnajdova @michaldudak +/packages/mui-base/src/ModalUnstyled/ @mnajdova @michaldudak +/packages/mui-base/src/NoSsr/ @mnajdova @michaldudak +/packages/mui-base/src/PopperUnstyled/ @mnajdova @michaldudak +/packages/mui-base/src/Portal/ @mnajdova @michaldudak +/packages/mui-base/src/TextareaAutosize/ @mnajdova @michaldudak +/packages/mui-base/src/TrapFocus/ @mnajdova @michaldudak + +/packages/mui-material/src/ClickAwayListener/ @mnajdova @michaldudak +/packages/mui-material/src/Collapse/ @mnajdova @michaldudak +/packages/mui-material/src/CssBaseline/ @mnajdova @michaldudak +/packages/mui-material/src/Fade/ @mnajdova @michaldudak +/packages/mui-material/src/GlobalStyles/ @mnajdova @michaldudak +/packages/mui-material/src/Grow/ @mnajdova @michaldudak +/packages/mui-material/src/Modal/ @mnajdova @michaldudak +/packages/mui-material/src/NoSsr/ @mnajdova @michaldudak +/packages/mui-material/src/Popover/ @mnajdova @michaldudak +/packages/mui-material/src/Popper/ @mnajdova @michaldudak +/packages/mui-material/src/Portal/ @mnajdova @michaldudak +/packages/mui-material/src/ScopedCssBaseline/ @mnajdova @michaldudak +/packages/mui-material/src/Slide/ @mnajdova @michaldudak +/packages/mui-material/src/TextareaAutosize/ @mnajdova @michaldudak +/packages/mui-material/src/transitions/ @mnajdova @michaldudak +/packages/mui-material/src/Unstable_TrapFocus/ @mnajdova @michaldudak +/packages/mui-material/src/useMediaQuery/ @mnajdova @michaldudak +/packages/mui-material/src/Zoom/ @mnajdova @michaldudak diff --git a/docs/data/base/components/trap-focus/BasicTrapFocus.js b/docs/data/base/components/trap-focus/BasicTrapFocus.js index b05f0efd1c310a..3b3a173f989d7a 100644 --- a/docs/data/base/components/trap-focus/BasicTrapFocus.js +++ b/docs/data/base/components/trap-focus/BasicTrapFocus.js @@ -1,18 +1,12 @@ import * as React from 'react'; -import Box from '@mui/material/Box'; +import Box from '@mui/system/Box'; import TrapFocus from '@mui/base/TrapFocus'; export default function BasicTrapFocus() { const [open, setOpen] = React.useState(false); return ( - + diff --git a/docs/data/base/components/trap-focus/BasicTrapFocus.tsx b/docs/data/base/components/trap-focus/BasicTrapFocus.tsx index b05f0efd1c310a..3b3a173f989d7a 100644 --- a/docs/data/base/components/trap-focus/BasicTrapFocus.tsx +++ b/docs/data/base/components/trap-focus/BasicTrapFocus.tsx @@ -1,18 +1,12 @@ import * as React from 'react'; -import Box from '@mui/material/Box'; +import Box from '@mui/system/Box'; import TrapFocus from '@mui/base/TrapFocus'; export default function BasicTrapFocus() { const [open, setOpen] = React.useState(false); return ( - + diff --git a/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.js b/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.js index 0fb77c38f0aeac..39e3bdc084cb07 100644 --- a/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.js +++ b/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.js @@ -1,26 +1,17 @@ import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; +import Stack from '@mui/system/Stack'; import TrapFocus from '@mui/base/TrapFocus'; -export default function BasicTrapFocus() { +export default function ContainedToggleTrappedFocus() { const [open, setOpen] = React.useState(false); return ( - + - - - - + + {open && ( - + ); } diff --git a/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.tsx b/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.tsx index 0fb77c38f0aeac..39e3bdc084cb07 100644 --- a/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.tsx +++ b/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.tsx @@ -1,26 +1,17 @@ import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; +import Stack from '@mui/system/Stack'; import TrapFocus from '@mui/base/TrapFocus'; -export default function BasicTrapFocus() { +export default function ContainedToggleTrappedFocus() { const [open, setOpen] = React.useState(false); return ( - + - - - - + + {open && ( - + ); } diff --git a/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.tsx.preview b/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.tsx.preview index d748ddf123628c..f1a9366d736753 100644 --- a/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.tsx.preview +++ b/docs/data/base/components/trap-focus/ContainedToggleTrappedFocus.tsx.preview @@ -1,14 +1,14 @@ - - - + + + + {open && ( + + )} - {open && ( - - )} - - \ No newline at end of file + + \ No newline at end of file diff --git a/docs/data/base/components/trap-focus/DisableEnforceFocus.js b/docs/data/base/components/trap-focus/DisableEnforceFocus.js index b0da4058dba400..376657865fe7ec 100644 --- a/docs/data/base/components/trap-focus/DisableEnforceFocus.js +++ b/docs/data/base/components/trap-focus/DisableEnforceFocus.js @@ -1,18 +1,12 @@ import * as React from 'react'; -import Box from '@mui/material/Box'; +import Box from '@mui/system/Box'; import TrapFocus from '@mui/base/TrapFocus'; export default function DisableEnforceFocus() { const [open, setOpen] = React.useState(false); return ( - + diff --git a/docs/data/base/components/trap-focus/DisableEnforceFocus.tsx b/docs/data/base/components/trap-focus/DisableEnforceFocus.tsx index b0da4058dba400..376657865fe7ec 100644 --- a/docs/data/base/components/trap-focus/DisableEnforceFocus.tsx +++ b/docs/data/base/components/trap-focus/DisableEnforceFocus.tsx @@ -1,18 +1,12 @@ import * as React from 'react'; -import Box from '@mui/material/Box'; +import Box from '@mui/system/Box'; import TrapFocus from '@mui/base/TrapFocus'; export default function DisableEnforceFocus() { const [open, setOpen] = React.useState(false); return ( - + diff --git a/docs/data/base/components/trap-focus/LazyTrapFocus.js b/docs/data/base/components/trap-focus/LazyTrapFocus.js index 9cf8bfc814bd4d..0a2fce258772f1 100644 --- a/docs/data/base/components/trap-focus/LazyTrapFocus.js +++ b/docs/data/base/components/trap-focus/LazyTrapFocus.js @@ -1,18 +1,12 @@ import * as React from 'react'; -import Box from '@mui/material/Box'; +import Box from '@mui/system/Box'; import TrapFocus from '@mui/base/TrapFocus'; export default function LazyTrapFocus() { const [open, setOpen] = React.useState(false); return ( - + diff --git a/docs/data/base/components/trap-focus/LazyTrapFocus.tsx b/docs/data/base/components/trap-focus/LazyTrapFocus.tsx index 9cf8bfc814bd4d..0a2fce258772f1 100644 --- a/docs/data/base/components/trap-focus/LazyTrapFocus.tsx +++ b/docs/data/base/components/trap-focus/LazyTrapFocus.tsx @@ -1,18 +1,12 @@ import * as React from 'react'; -import Box from '@mui/material/Box'; +import Box from '@mui/system/Box'; import TrapFocus from '@mui/base/TrapFocus'; export default function LazyTrapFocus() { const [open, setOpen] = React.useState(false); return ( - + diff --git a/docs/data/base/components/trap-focus/PortalTrapFocus.js b/docs/data/base/components/trap-focus/PortalTrapFocus.js index 7535f8ea5a6bb7..0c0e05bc6226f0 100644 --- a/docs/data/base/components/trap-focus/PortalTrapFocus.js +++ b/docs/data/base/components/trap-focus/PortalTrapFocus.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Box } from '@mui/system'; +import Box from '@mui/system/Box'; import Portal from '@mui/base/Portal'; import TrapFocus from '@mui/base/TrapFocus'; @@ -8,13 +8,7 @@ export default function PortalTrapFocus() { const [container, setContainer] = React.useState(null); return ( - + diff --git a/docs/data/base/components/trap-focus/PortalTrapFocus.tsx b/docs/data/base/components/trap-focus/PortalTrapFocus.tsx index df12988df2ec9d..316b679a9a8d98 100644 --- a/docs/data/base/components/trap-focus/PortalTrapFocus.tsx +++ b/docs/data/base/components/trap-focus/PortalTrapFocus.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Box } from '@mui/system'; +import Box from '@mui/system/Box'; import Portal from '@mui/base/Portal'; import TrapFocus from '@mui/base/TrapFocus'; @@ -8,13 +8,7 @@ export default function PortalTrapFocus() { const [container, setContainer] = React.useState(null); return ( - + diff --git a/docs/data/joy/components/radio/ExampleAlignmentButtons.js b/docs/data/joy/components/radio/ExampleAlignmentButtons.js index 2b12fa8c0dcc76..0131269dc28b43 100644 --- a/docs/data/joy/components/radio/ExampleAlignmentButtons.js +++ b/docs/data/joy/components/radio/ExampleAlignmentButtons.js @@ -56,10 +56,10 @@ export default function RadioButtonsGroup() { variant={alignment === item ? 'solid' : 'plain'} componentsProps={{ input: { 'aria-label': item }, - }} - sx={{ - [`& .${radioClasses.action}`]: { borderRadius: 0, transition: 'none' }, - [`& .${radioClasses.label}`]: { lineHeight: 0 }, + action: { + sx: { borderRadius: 0, transition: 'none' }, + }, + label: { sx: { lineHeight: 0 } }, }} /> diff --git a/docs/data/joy/components/radio/ExampleProductAttributes.js b/docs/data/joy/components/radio/ExampleProductAttributes.js index f6c56ee02514c6..ded950eb3c1ae6 100644 --- a/docs/data/joy/components/radio/ExampleProductAttributes.js +++ b/docs/data/joy/components/radio/ExampleProductAttributes.js @@ -48,15 +48,19 @@ export default function ExampleProductAttributes() { color={color} checkedIcon={} value={color} - componentsProps={{ input: { 'aria-label': color } }} + componentsProps={{ + input: { 'aria-label': color }, + radio: { + sx: { + display: 'contents', + '--variant-borderWidth': '2px', + }, + }, + }} sx={{ '--joy-focus-outlineOffset': '4px', '--joy-palette-focusVisible': (theme) => theme.vars.palette[color][500], - [`& .${radioClasses.radio}`]: { - display: 'contents', - '--variant-borderWidth': '2px', - }, [`& .${radioClasses.action}.${radioClasses.focusVisible}`]: { outlineWidth: '2px', }, diff --git a/docs/data/joy/components/radio/ExampleSegmentedControls.js b/docs/data/joy/components/radio/ExampleSegmentedControls.js new file mode 100644 index 00000000000000..b373c572f91d6b --- /dev/null +++ b/docs/data/joy/components/radio/ExampleSegmentedControls.js @@ -0,0 +1,58 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Radio from '@mui/joy/Radio'; +import RadioGroup from '@mui/joy/RadioGroup'; +import Typography from '@mui/joy/Typography'; + +export default function RadioButtonsGroup() { + const [justify, setJustify] = React.useState('flex-start'); + return ( + + + Justify: + + setJustify(event.target.value)} + sx={{ + minHeight: 48, + padding: '4px', + borderRadius: 'md', + bgcolor: 'neutral.softBg', + '--RadioGroup-gap': '4px', + '--Radio-action-radius': '8px', + }} + > + {['flex-start', 'center', 'flex-end'].map((item) => ( + ({ + sx: { + ...(checked && { + bgcolor: 'background.surface', + boxShadow: 'md', + '&:hover': { + bgcolor: 'background.surface', + }, + }), + }, + }), + }} + /> + ))} + + + ); +} diff --git a/docs/data/joy/components/radio/IconlessRadio.js b/docs/data/joy/components/radio/IconlessRadio.js index c31676a4c6b59b..9071be7e837884 100644 --- a/docs/data/joy/components/radio/IconlessRadio.js +++ b/docs/data/joy/components/radio/IconlessRadio.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/joy/Box'; import FormLabel from '@mui/joy/FormLabel'; -import Radio, { radioClasses } from '@mui/joy/Radio'; +import Radio from '@mui/joy/Radio'; import RadioGroup from '@mui/joy/RadioGroup'; import Sheet from '@mui/joy/Sheet'; @@ -33,23 +33,26 @@ export default function IconlessRadio() { overlay disableIcon value={value} - sx={(theme) => ({ - '& label': { - fontWeight: 'lg', - fontSize: 'md', - color: 'text.secondary', - }, - [`&.${radioClasses.checked}`]: { - '& label': { color: 'text.primary' }, - '--joy-palette-primary-outlinedBorder': - theme.vars.palette.primary[500], - '--joy-palette-primary-outlinedHoverBorder': - theme.vars.palette.primary[500], - [`& .${radioClasses.action}`]: { - '--variant-borderWidth': '2px', + componentsProps={{ + label: ({ checked }) => ({ + sx: { + fontWeight: 'lg', + fontSize: 'md', + color: checked ? 'text.primary' : 'text.secondary', }, - }, - })} + }), + action: ({ checked }) => ({ + sx: (theme) => ({ + ...(checked && { + '--variant-borderWidth': '2px', + '&&': { + // && to increase the specificity to win the base :hover styles + borderColor: theme.vars.palette.primary[500], + }, + }), + }), + }), + }} /> ))} diff --git a/docs/data/joy/components/radio/RadioPositionEnd.js b/docs/data/joy/components/radio/RadioPositionEnd.js index 03b087942570f6..f31136efea668f 100644 --- a/docs/data/joy/components/radio/RadioPositionEnd.js +++ b/docs/data/joy/components/radio/RadioPositionEnd.js @@ -2,7 +2,7 @@ import * as React from 'react'; import List from '@mui/joy/List'; import ListItem from '@mui/joy/ListItem'; import ListItemDecorator from '@mui/joy/ListItemDecorator'; -import Radio, { radioClasses } from '@mui/joy/Radio'; +import Radio from '@mui/joy/Radio'; import RadioGroup from '@mui/joy/RadioGroup'; import Person from '@mui/icons-material/Person'; import People from '@mui/icons-material/People'; @@ -10,45 +10,40 @@ import Apartment from '@mui/icons-material/Apartment'; export default function RadioPositionEnd() { return ( - + ({ + sx={{ minWidth: 240, '--List-gap': '0.5rem', '--List-item-paddingY': '1rem', '--List-item-radius': '8px', '--List-decorator-size': '32px', - [`& .${radioClasses.root}`]: { - flexGrow: 1, - flexDirection: 'row-reverse', - [`&.${radioClasses.checked}`]: { - [`& .${radioClasses.action}`]: { - inset: -1, - border: '2px solid', - borderColor: theme.vars.palette.primary[500], - }, - }, - }, - })} + }} > - - - - - - - - - - - - - - - - - - + {['Individual', 'Team', 'Interprise'].map((item, index) => ( + + + {[, , ][index]} + + ({ + sx: (theme) => ({ + ...(checked && { + inset: -1, + border: '2px solid', + borderColor: theme.vars.palette.primary[500], + }), + }), + }), + }} + /> + + ))} ); diff --git a/docs/data/joy/components/radio/radio.md b/docs/data/joy/components/radio/radio.md index 2a4e0b353547e6..24947ce95bb46e 100644 --- a/docs/data/joy/components/radio/radio.md +++ b/docs/data/joy/components/radio/radio.md @@ -117,9 +117,13 @@ Visit the [WAI-ARIA documentation](https://www.w3.org/WAI/ARIA/apg/patterns/radi ## Common examples +### Segmented controls + +{{"demo": "ExampleSegmentedControls.js"}} + ### Alignment buttons -Simply provide an icon as a label to the `Radio` to make the radio buttons concise. You need to provide `aria-label` to the input slot for users who rely on screen readers. +Provide an icon as a label to the `Radio` to make the radio buttons concise. You need to provide `aria-label` to the input slot for users who rely on screen readers. {{"demo": "ExampleAlignmentButtons.js"}} diff --git a/docs/data/joy/components/textarea/ExampleTextareaComment.js b/docs/data/joy/components/textarea/ExampleTextareaComment.js new file mode 100644 index 00000000000000..8fe408aaea358a --- /dev/null +++ b/docs/data/joy/components/textarea/ExampleTextareaComment.js @@ -0,0 +1,88 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Button from '@mui/joy/Button'; +import FormLabel from '@mui/joy/FormLabel'; +import Textarea from '@mui/joy/Textarea'; +import IconButton from '@mui/joy/IconButton'; +import Menu from '@mui/joy/Menu'; +import MenuItem from '@mui/joy/MenuItem'; +import ListItemDecorator from '@mui/joy/ListItemDecorator'; +import FormatBold from '@mui/icons-material/FormatBold'; +import FormatItalic from '@mui/icons-material/FormatItalic'; +import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; +import Check from '@mui/icons-material/Check'; + +export default function TextareaValidator() { + const [italic, setItalic] = React.useState(false); + const [fontWeight, setFontWeight] = React.useState('normal'); + const [anchorEl, setAnchorEl] = React.useState(null); + return ( + + Your comment +