Refactor Button component to TypeScript
#46997
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +66 B (0%) Total Size: 1.33 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in dfef117. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3999561501
|
This reverts commit 0b616c7.
kienstra
commented
Jan 15, 2023
| @@ -166,7 +166,7 @@ const BorderControlDropdown = ( | |||
| onClick={ onToggle } | |||
| variant="tertiary" | |||
| aria-label={ toggleAriaLabel } | |||
| position={ dropdownPosition } | |||
| tooltipPosition={ dropdownPosition } | |||
There was a problem hiding this comment.
<Button> has no position prop, so maybe this should be tooltipPosition.
This also has a showTooltip prop below.
kienstra
commented
Jan 15, 2023
kienstra
commented
Jan 15, 2023
kienstra
commented
Jan 15, 2023
kienstra
commented
Jan 15, 2023
kienstra
commented
Jan 15, 2023
kienstra
commented
Jan 15, 2023
As Lena mentioned, the intent of this test looks like ensuring that additional props are passed to the element.
kienstra
commented
Jan 23, 2023
| // @ts-expect-error | ||
| render( <Button type="invalidtype" /> ); | ||
| // @ts-expect-error - although the runtime behavior will allow this to be an anchor, this is probably a mistake. | ||
| render( <Button disabled __experimentalIsFocusable href="foo" /> ); |
There was a problem hiding this comment.
If it's alright, this is basically copy-pasted from your #46997 (review).
There's no expect() call, which is a little strange.
But it's not testing rendering, only typing.
There was a problem hiding this comment.
Right. Also it doesn't even need to be in a render() call 😄 I don't think there's an established convention for this kind of static TS test, so I'm just going freestyle (for example these).
To take it further, it doesn't even need to be in describe() or it() calls, but I'm trying to stay somewhat in the realm of normal unit tests to at least signal that it's some kind of test, just so other devs aren't overly confused.
There was a problem hiding this comment.
Yeah, it'd definitely be simpler to not wrap them in render() and it().
I can't get that to work, without getting 'JSX expressions must have one parent element':
describe( 'static typing', () => {
<Button href="foo" />
// @ts-expect-error - `target` requires `href`
<Button target="foo" />
// @ts-expect-error - `disabled` is only for buttons
<Button href="foo" disabled />
<Button href="foo" type="image/png" />
// @ts-expect-error - if button, type must be submit/reset/button
<Button type="image/png" />;
// @ts-expect-error
<Button type="invalidtype" />
// @ts-expect-error - although the runtime behavior will allow this to be an anchor, this is probably a mistake.
<Button disabled __experimentalIsFocusable href="foo" />
} );The examples you linked to work, though 😄
There was a problem hiding this comment.
Lol. We can use a Fragment, I guess?
describe( 'static typing', () => {
<>
<Button href="foo" />
{ /* @ts-expect-error - `target` requires `href` */ }
<Button target="foo" />
{ /* @ts-expect-error - `disabled` is only for buttons */ }
<Button href="foo" disabled />
<Button href="foo" type="image/png" />
{ /* @ts-expect-error - if button, type must be submit/reset/button */ }
<Button type="image/png" />
{ /* @ts-expect-error */ }
<Button type="invalidtype" />
{ /* @ts-expect-error - although the runtime behavior will allow this to be an anchor, this is probably a mistake. */ }
<Button disabled __experimentalIsFocusable href="foo" />
</>;
} );There was a problem hiding this comment.
Thanks, committed in dfef117
Good idea! I cherry-picked your 165ef21 with only a name change, and copy-pasted your static TypeScript tests. |
|
Hi @mirka, Thanks for all the care and code you put into this. |
mirka
approved these changes
Jan 23, 2023
| // @ts-expect-error | ||
| render( <Button type="invalidtype" /> ); | ||
| // @ts-expect-error - although the runtime behavior will allow this to be an anchor, this is probably a mistake. | ||
| render( <Button disabled __experimentalIsFocusable href="foo" /> ); |
There was a problem hiding this comment.
Right. Also it doesn't even need to be in a render() call 😄 I don't think there's an established convention for this kind of static TS test, so I'm just going freestyle (for example these).
To take it further, it doesn't even need to be in describe() or it() calls, but I'm trying to stay somewhat in the realm of normal unit tests to at least signal that it's some kind of test, just so other devs aren't overly confused.
…es/index.tsx Co-authored-by: Lena Morita <lena@jaguchi.com>
Thanks so much, Lena! Just responded to both of your comments. |
|
Going to merge this in 30 minutes. |
|
Just passing by to thank you, Ryan! We really appreciate your contributions to the project and the components library 🚀 |
|
Thanks so much, Marco! |
juanmaguitar
added
[Type] Developer Documentation
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
(Ready for review)
What?
Convert the
Buttoncomponent to TypeScriptWhy?
As part of an effort to convert
@wordpress/componentsto TypeScriptHow?
Mainly by adding types to the
ButtoncomponentTesting Instructions
npm run storybook:devScreenshots