[Grid] Difference between prop type of the size prop and the typescript definition for string values

[ablagoev]

Steps to reproduce

Link to live example: https://github.com/ablagoev/pigment-css-grid-size-prop

Steps:

1. Use a Grid component with the size prop equal to "grow" or "auto"
2. Open the developer console

Current behavior

An error message is displayed in the error console about an invalid value used for the size prop of the Grid

Expected behavior

No errors in the dev console

Context

The js prop type does not allow strings, which are needed to support the "grow" and "auto" values, which are present in the typescript typings.

The prop type in the javascript typings is as follows (source):

// https://github.com/mui/pigment-css/blob/master/packages/pigment-css-react/src/Grid.jsx
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
  PropTypes.arrayOf(PropTypes.number),
  PropTypes.number,
  PropTypes.object,
]),

while the typescript types are (source):

// https://github.com/mui/pigment-css/blob/master/packages/pigment-css-react/src/Grid.d.ts
size?: CssProperty<number | 'grow' | 'auto'>;

The error displayed in the browser console is as follows:

Warning: Failed prop type: Invalid prop `size` supplied to `Grid`, expected one of type [number, object].

Your environment

npx @mui/envinfo

  Chrome Version 131.0.6778.69 (Official Build) (64-bit)
  System:
    OS: Linux 6.10 Arch Linux
  Binaries:
    Node: 21.2.0 - ~/.nvm/versions/node/v21.2.0/bin/node
    npm: 10.4.0 - ~/.nvm/versions/node/v21.2.0/bin/npm
    pnpm: 9.13.2 - ~/.nvm/versions/node/v21.2.0/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react:  11.13.3 
    @emotion/styled:  11.13.0 
    @mui/private-theming:  6.1.7 
    @mui/styled-engine:  6.1.7 
    @mui/system:  6.1.7 
    @mui/types:  7.2.19 
    @mui/utils:  6.1.7 
    @pigment-css/react: latest => 0.0.27 
    @pigment-css/vite-plugin: latest => 0.0.27 
    @types/react: latest => 18.3.12 
    react: latest => 18.3.1 
    react-dom: latest => 18.3.1 
    typescript: latest => 5.6.3

Search keywords: grid size prop grow auto

[ablagoev]

Sample code that triggers the error:

<Grid container>
  <Grid size="grow">Error</Grid>
</Grid>

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@ablagoev How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.