[system] Fix breakpoints typescript types

[Kujawadl]

Changes

Box prop types previously didn't allow for responsive values (e.g. arrays/objects) and also did not account for variables in fontWeight.

fontWeight is now a string | number value to accept variable names without compiler errors, as opposed to the union type defined in React.CSSProperties.

Necessity

Without these changes, the following uses in typescript would have compile errors:

{/* "fontWeightBold" is not a valid value of React.CSSProperties["fontWeight"] */}
<Box fontWeight="fontWeightBold">
  ...
</Box>

{/* Type { ... } is not assignable to type string | number */}
<Box m={{ xs: 1, sm: 2, md: 3 }}>
...
</Box>

There are probably other props that need updating, but fontWeight was the only one that I found that seems to have variables that would actually be used. The others are:

flexDirection
flexGrow
flexShrink
flexWrap
overflowX
overflowY
position
textAlign
zIndex

All of these have union types, e.g. "column" | "column-reverse" | "row" | "row-reverse" | ..., and I can't think of any variables that would be used, so it's probably better to keep the union types than lose them for the sake of variables that aren't likely to be used.

Alternative Options

I would have just created a new union type for fontWeight, something like:

fontWeight?:
  | React.CSSProperties['fontWeight']
  | 'fontWeightLight'
  | 'fontWeightRegular' 
  | ...

Except that would prevent users from using custom variables, e.g. in our codebase we have a fontWeightExtraBold. The solution to that would be to create and export a named type, e.g. FontWeightValue and set it to the above. I think that's the most complete solution, but starts to get tedious to maintain, so I opted for simple here.

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

No bundle size changes comparing d533b46...fa1bed2

Generated by 🚫 dangerJS against fa1bed2

[eps1lon]

This looks nice so far but is missing tests.

Could you link to a docs section that explains this API? Otherwise it would be nice to add a demo that also has a TypeScript version (which would act as a test).

[Kujawadl]

Okay, a few more changes here, that was quite the rabbit hole to go down. I started converting docs demos to typescript (for testing) and found that there were some more type changes that needed to be made and that weren't being tested.

Some notes about the recent changes:

• My eslint plugin was throwing errors about jsx in typescript, so I added .tsx files to the acceptable files list. This doesn't affect anything practically, but silences IDE warnings for anybody who's using an IDE with eslint integration. I can revert this if you'd prefer, I just figured it's useful for anybody else in my situation.
• The breakpoints function in material-ui-system was typed to accept a style function whose props already has the breakpoints, and then return the same type of style function. It should be that it takes a non-breakpoint-related style function (e.g. typography) and returns a style function with the breakpoints added in. I had to fix this to get the collocation doc demo working without tslint errors.
• I added a link in the ResponsiveValue type's jsdoc annotation to the responsive page that shows demos of these responsive props in action. If you don't want jsdoc annotations, I can revert this commit.

[oliviertassinari]

Nice!

updated

[Kujawadl]

Concerning #15548: I don't think that PR addresses the same issues as this one, but if @merceyz doesn't have time to continue working on it I can take a look later today or tomorrow as it's also something my team would find useful. Just let me know.

[eps1lon]

I'm sorry I forgot this was here. Could you rebase this with master without changing types implementation and see if the demos work? #15884 might've fixed this already.

[oliviertassinari]

@eps1lon I have rebased the pull request maintaining the failing case:

import React from 'react';
import { typography, breakpoints } from '@material-ui/system';
import styled from 'styled-components';

const Box = styled.div`
  ${breakpoints(typography)}
`;

/**
 * Outputs:
 *
 * font-size: 12px;
 * @media (min-width: 600px) {
 *   font-size: 18px;
 * }
 * @media (min-width: 960px) {
 *   font-size: 24px;
 * }
 */
export default function CollocationApi() {
  return (
    <Box xs={{ fontSize: 12 }} sm={{ fontSize: 18 }} md={{ fontSize: 24 }}>
      Collocation API
    </Box>
  );
}

$ tslint -p docs/tsconfig.json

ERROR: /tmp/material-ui/docs/src/pages/system/basics/CollocationApi.tsx:2:35 - TypeScript@next compile error:
Module '"../../../../../packages/material-ui-system/src"' has no exported member 'BreakpointsProps'.
ERROR: /tmp/material-ui/docs/src/pages/system/basics/CollocationApi.tsx:6:17 - TypeScript@next compile error:
Argument of type 'StyleFunction<Partial<Record<"fontFamily" | "fontSize" | "fontWeight" | "textAlign", any>>>' is not assignable to parameter of type 'StyleFunction<{ theme: { breakpoints?: unknown; }; }>'.
Types of parameters 'props' and 'props' are incompatible.
Type '{ theme: { breakpoints?: unknown; }; }' has no properties in common with type 'Partial<Record<"fontFamily" | "fontSize" | "fontWeight" | "textAlign", any>>'.