[joy-ui] Make the size prop breakpoint-aware

Summary

Take a look at this code snippet:

<IconButton size="lg">{icon}</IconButton>

If you want to change the size prop on certain screen sizes with Material UI, you can use hooks:

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up('sm'));

  return <IconButton size={matches ? "sm" : "lg"}>{icon}</IconButton>;
}

Often it might be too complicated for a simple task. However, it helps us reuse the predefined settings in Material UI's design system. The size prop not only changes the font size but could also affects other properties like margin, padding, height, and width etc ...

With Joy UI, we have to redefine each property separately, which can lead to inconsistencies:

<IconButton
  sx={{
    "--Icon-fontSize": {xs: "new val", md: "new val"},
    "--IconButton-size": {xs: "new val", md: "new val"},
    and other vars ...
  }}
>

It would be better to stay within the design system and respect the predefined settings that were already set up.

One suggestion is to add support for props to handle breakpoint changes, similar to how ButtonGroup already supports this:

<ButtonGroup spacing={{ xs: 0, sm: 1, md: '2rem' }}>...</ButtonGroup>

This approach would allow you to write something like:

<IconButton size={{xs: "lg", md: "lg"}}>{icon}</IconButton>;

This way, we can easily change the size prop based on different screen sizes while still using the predefined settings in the design system.

Examples

No response

Motivation

No response

Search keywords: breakpoint