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] Fix prop-type key regression #33123
[Grid] Fix prop-type key regression #33123
Conversation
e9de214
to
8965b84
Compare
8965b84
to
e0a53e5
Compare
// key is a reserved prop name in React | ||
// e.g. https://github.com/reactjs/rfcs/pull/107 | ||
// no need to add a prop-type if we won't generate the docs for it. | ||
if (data.prop.name === 'key' && data.prop.jsDoc === '@ignore') { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
data.prop.jsDoc === '@ignore'
is because we have a custom prop-type for the key in
material-ui/packages/mui-material/src/Snackbar/Snackbar.js
Lines 332 to 338 in d66f1b6
/** | |
* When displaying multiple consecutive Snackbars from a parent rendering a single | |
* <Snackbar/>, add the key prop to ensure independent treatment of each message. | |
* e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and | |
* features such as autoHideDuration may be canceled. | |
*/ | |
key: () => null, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ignore
is applied when there are no prop descriptions:
material-ui/scripts/generateProptypes.ts
Lines 209 to 213 in d66f1b6
!prop.jsDoc || | |
(ignoreExternalDocumentation[component.name] && | |
ignoreExternalDocumentation[component.name].includes(prop.name)) | |
) { | |
prop.jsDoc = '@ignore'; |
@@ -235,7 +235,7 @@ const GridRoot = styled('div', { | |||
breakpoints.forEach((breakpoint) => { | |||
const value = ownerState[breakpoint]; | |||
|
|||
if (value !== false) { | |||
if (value) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it's a boolean, so either true, false, null, or undefined.
|
||
breakpoints.keys.forEach((key) => { | ||
if (key in propsRest) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is why the key
prop was added. TypeScript has some dark magic that makes him think that a key prop might be present here. If you remove key in propsRest
then we are good. As a side note, we might have preferred using propsRest.hasOwnProperty(key)
over key in propsRest
systemically per https://masteringjs.io/tutorials/fundamentals/hasownproperty.
In our case, I could get away with only a nullish check.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hasOwnProperty
makes sense too, but the nullish check reads better to me 👍
Fix #31998 (comment), first commit at the surface, the second commit at the root.