TextareaControl: Convert component to TypeScript #41215
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
walbo
added
[Type] Enhancement
|
Size Change: -13 B (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
aaronrobertshaw
approved these changes
May 24, 2022
There was a problem hiding this comment.
Thanks for putting this together @walbo. It's great to see the momentum in converting components to TS being maintained 🙇
✅ No typing errors
✅ Works in both Storybook and editor
I have a few minor nitpicks but all in all this is looking pretty good. Nice work.
In case it helps, here's a diff of the tweaks I mentioned via inline comments.
Click to expand diff for suggested tweaks
diff --git a/packages/components/src/textarea-control/README.md b/packages/components/src/textarea-control/README.md
index 45293758d2..1da2617ef6 100644
--- a/packages/components/src/textarea-control/README.md
+++ b/packages/components/src/textarea-control/README.md
@@ -100,9 +100,9 @@ The set of props accepted by the component will be specified below.
Props not included in this set will be applied to the textarea element.
-#### `label`: `string`
+#### `help`: `string | WPElement`
-If this property is added, a label will be generated using label property as the content.
+If this property is added, a help text will be generated using help property as the content.
- Required: No
@@ -112,12 +112,18 @@ If true, the label will only be visible to screen readers.
- Required: No
-#### `help`: `string | WPElement`
+#### `label`: `string`
-If this property is added, a help text will be generated using help property as the content.
+If this property is added, a label will be generated using label property as the content.
- Required: No
+#### `onChange`: `( value: string ) => void`
+
+A function that receives the new value of the textarea each time it changes.
+
+- Required: Yes
+
#### `rows`: `number`
The number of rows the textarea should contain.
@@ -131,12 +137,6 @@ The current value of the textarea.
- Required: Yes
-#### `onChange`: `( value: string ) => void`
-
-A function that receives the new value of the textarea each time it changes.
-
-- Required: Yes
-
## Related components
- For a field where users only enter one line of text, use the `TextControl` component.
diff --git a/packages/components/src/textarea-control/stories/index.tsx b/packages/components/src/textarea-control/stories/index.tsx
index 6988d1ae9c..b4cb1bcf48 100644
--- a/packages/components/src/textarea-control/stories/index.tsx
+++ b/packages/components/src/textarea-control/stories/index.tsx
@@ -53,12 +53,3 @@ export const Default: ComponentStory< typeof TextareaControl > = Template.bind(
{}
);
Default.args = {};
-
-export const WithLabelAndHelpText: ComponentStory<
- typeof TextareaControl
-> = Template.bind( {} );
-WithLabelAndHelpText.args = {
- ...Default.args,
- label: 'Label Text',
- help: 'Help text to explain the textarea.',
-};
diff --git a/packages/components/src/textarea-control/types.ts b/packages/components/src/textarea-control/types.ts
index 16b6823ea0..9a66164577 100644
--- a/packages/components/src/textarea-control/types.ts
+++ b/packages/components/src/textarea-control/types.ts
@@ -13,7 +13,8 @@ export type TextareaControlProps = Pick<
'hideLabelFromVision' | 'help' | 'label'
> & {
/**
- * A function that receives the value of the textarea.
+ * A function that receives the new value of the textarea each time it
+ * changes.
*/
onChange: ( value: string ) => void;
/**
Comment on lines
56
to
58
|
|
||
| export const WithLabelAndHelpText: ComponentStory< | ||
| typeof TextareaControl | ||
| > = Template.bind( {} ); | ||
| WithLabelAndHelpText.args = { | ||
| ...Default.args, | ||
| label: 'Label Text', | ||
| help: 'Help text to explain the textarea.', | ||
| }; |
There was a problem hiding this comment.
Suggested change
| export const WithLabelAndHelpText: ComponentStory< | |
| typeof TextareaControl | |
| > = Template.bind( {} ); | |
| WithLabelAndHelpText.args = { | |
| ...Default.args, | |
| label: 'Label Text', | |
| help: 'Help text to explain the textarea.', | |
| }; |
Given the default story is fully interactive, I don't believe we need the overly simple example adding help and label text.
There was a problem hiding this comment.
Applied. I wounder if the default template should set a label and a help prop to make the default template align with the usage example?
There was a problem hiding this comment.
Sounds like a good idea to me 👍
There was a problem hiding this comment.
Hope you don't mind, I took the liberty to add this via f88fc21
There was a problem hiding this comment.
Don't mind at all. Thanks for the help @aaronrobertshaw 👍
- Alphabetize the props in the readme - Ensure the comments in the component's types match the readme - Remove storybook story Co-Authored-By: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
aaronrobertshaw
force-pushed
the
refactor/textarea-control-to-typescript
branch
from
543b096
to
f88fc21
Compare
|
@walbo in the hope of saving you a little time, I've tweaked the default template and rebased this to resolve the pending changelog conflict. Once the e2es pass this should be right to go 🚢 |
youknowriad
pushed a commit
that referenced
this pull request
May 26, 2022
* TextareaControl: Convert component to TypeScript * Update CHANGELOG.md * Update README.md * Apply feedback from code review - Alphabetize the props in the readme - Ensure the comments in the component's types match the readme - Remove storybook story Co-Authored-By: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> * Make default story template match usage example Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
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.
What?
Converts the
TextareaControlcomponent to TypeScript.Why?
Part of the @wordpress/components's TypeScript migration (#35744).
How?
Refactors the current
TextareaControlto TypeScript.Testing Instructions
TextareaControlcontinues to function as expected