[system] Official support for unstable_breakpoints-related functions

[Nicktho]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Hello!

We've decided to go ahead and use @mui/system as a base to build our custom component library.

One feature in particular we love is the responsive features of system props, for example:

<Box sx={{ width: [100, 200] }} />
<Box sx={{ width: { xs: 100, sm: 200 } }} />

We would love to bring this functionality in our custom components built on top of the system, using breakpoints defined in the theme as well as the same API.

Upon investigation on how some @mui/material components are built, I can see some functions are imported from @mui/system to help accomplish this.

For example, to support the responsive direction prop on the Stack component, utilities such as handleBreakpoints and unstable_resolveBreakpointValues are used: https://github.com/mui-org/material-ui/blob/master/packages/mui-material/src/Stack/Stack.js#L47

Documentation and official support of using these exported utils from @mui/system would help us greatly, instead of building our own solution. The unstable_ prefix also worries me if we were to start using some of these utils now.

Examples 🌈

It would allow us to build custom components with responsive props that respect the breakpoints in the theme with ease.

<CoolGraph variant={{ mobile: 'bar', desktop: 'line' }} />

Motivation 🔦

Without official support of these utils and documentation, we would either:

1. Need to dig into the typing and source to figure out how to use the exported utils.
2. Risk depending on a potential future breaking change with any unstable_ prefixed exports.
3. Build our own solution

[olee]

I totally agree with this one and this is a major letdown that there's no way to use these utilities properly yet for building custom components.
If the functions were at least exported with their current "unstable_" prefix that would be one thing, however right now they are completely invisible to any typescript project which makes this even more cumbersome.