Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ablagoev opened this issue Nov 16, 2024 · 1 comment
Assignees
Labels
component: Grid The React component. status: waiting for maintainer These issues haven't been looked at yet by a maintainer

Comments

@ablagoev
Copy link

ablagoev commented Nov 16, 2024

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].

Screenshot from 2024-11-17 00-30-33

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 ablagoev added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 16, 2024
@ablagoev
Copy link
Author

Sample code that triggers the error:

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

@zannager zannager added the component: Grid The React component. label Nov 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: Grid The React component. status: waiting for maintainer These issues haven't been looked at yet by a maintainer
Projects
None yet
Development

No branches or pull requests

3 participants