-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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: Convert component to TypeScript #41923
Conversation
Size Change: 0 B Total Size: 1.25 MB ℹ️ View Unchanged
|
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.
Thanks for working on this one @walbo 👍
Everything tests as advertised for me. I left a couple of minor suggestions but am happy to approve if we decide the prop descriptions are ok as they are.
✅ No typing errors
✅ Unit tests pass
✅ Code changes make sense
✅ Has changelog
✅ Component functions correctly in both Storybook and editors
✅ Storybook example has appropriate controls
❔ README matches type props and descriptions
❔ Auto-generated docs in Storybook are meaningful
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.
Looks good in general!
TypeScript is telling me that gridColumnGap
/gridRowGap
are deprecated 😮 Apparently they were renamed in CSS3? Let's just fix that up for spec compliance.
/**
- * Adjusts the `grid-column-gap`.
+ * Adjusts the `column-gap`.
*/
- columnGap?: CSSProperties[ 'gridColumnGap' ];
+ columnGap?: CSSProperties[ 'columnGap' ];
I have a question about this. The This is assuming we're trying to strictly follow the guidelines in not making runtime changes during TypeScript refactors. It's only a very minor change of course, hence this just being a question 🙂 |
Ah you're right, I was just thinking about types but it makes sense to change the CSS code as well. Let's move it to a follow-up then 👍 |
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.
Thanks for the refinements to this @walbo 👍
This is looking pretty good.
✅ No typing errors
✅ Unit tests pass
✅ Component functions well in editor and storybook
I'm happy to give this a tentative approval. My only remaining suggestion is in relation to the displayed type in the component's storybook docs.
In the meantime, could we maybe just pretend, for the casual docs reader, that it only takes a number?
This PR currently does pretend in the README that columns
and rows
only take number
values. In the auto-generated storybook docs however it still shows as ResponsiveCSSValue< number >
.
Would it avoid some confusion and further the efforts to obfuscate the responsive values type if we updated the storybook controls table to only list number
as the type as well?
Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
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.
Not much to add to the very comprehensive reviews from @aaronrobertshaw and @mirka !
Let's move it to a follow-up then 👍
Agreed, let's follow-up with those changes to the gridRowGap
and gridColumnGap
props
Thanks for the feedback and reviews 👍 |
What?
Converts the
Grid
component to TypeScript.Why?
Part of the @wordpress/components's TypeScript migration (#35744).
How?
Grid
to TypeScript.Testing Instructions
Grid
continues to function as expected