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

[cipherlogs]

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

[danilo-leal]

Hey @cipherlogs, thanks for opening up this issue and for the suggestion! It definitely resonates with me; I also have personally felt this need in many other projects I've worked on before, and it's quite common, I'd say, just given the fact you usually need beefier buttons, for example, on mobile than on desktop.

Given we're currently focused on the Material UI v6 development, we might take a while to return to iterating on this. In the meantime, I've added the "waiting for 👍" label to gauge further community interest! This could actually be something brought up to both Joy UI and Material UI — it'd be handy on both.