Components: Add ValidateControls components #70620
Merged
+2,123
−1
Conversation
This file contains hidden or 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: +602 B (+0.03%) Total Size: 1.89 MB
ℹ️ View Unchanged
|
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
@mirka is the best person to take a look at this, but she's currently AFK — she should be back tomorrow 🙏 |
mirka
reviewed
Jul 10, 2025
Comment on lines
+1
to
+2
| export * from './components'; | ||
| export * from './control-with-error'; |
There was a problem hiding this comment.
We're considering this a stopgap until we have a more integrated set of components. Would it be possible to export only the components that are absolutely needed for the product requirements at hand? I'm assuming this is specifically for binding validated components to DataForm — do you know which specific form components are needed?
Related: It would be great if you could note this in the "Why" section of the PR description so everyone can see why we need these components now.
There was a problem hiding this comment.
Good point! Honestly, I’m not sure yet. If you’re on board, I’d suggest not exporting any components, not even as a private API, until we actually need them. Would that work for you?
There was a problem hiding this comment.
Sounds good 👍 We can add any private exports as needed.
packages/components/CHANGELOG.md
Outdated
|
|
||
| ### Enhancement | ||
|
|
||
| - Add new validated form controls: `ValidatedCheckboxControl`, `ValidatedInputControl`, `ValidatedNumberControl`, `ValidatedRadioControl`, `ValidatedRangeControl`, `ValidatedSelectControl`, `ValidatedTextControl`, `ValidatedTextareaControl`, `ValidatedToggleControl`, `ValidatedCustomSelectControl`, `ValidatedComboboxControl`, `ValidatedToggleGroupControl`, and `ControlWithError` for enhanced form validation capabilities ([#70620](https://github.com/WordPress/gutenberg/pull/70620)). |
There was a problem hiding this comment.
We might want to note that these components are private, especially since there's a good chance we won't ever be exposing them publicly.
There was a problem hiding this comment.
I updated the changelog with 31c0ab2. You raised a good point. We need to update the changelog if we decide not to export any component in this PR.
packages/components/src/validated-form-controls/components/stories/overview.mdx
Outdated
Show resolved
Hide resolved
packages/components/src/validated-form-controls/components/stories/checkbox-control.story.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/validated-form-controls/components/checkbox-control.tsx
Outdated
Show resolved
Hide resolved
|
Apologies @mirka I clicked on the "request review" button by mistake while tabbing through the UI 😅 |
…ries/overview.mdx Co-authored-by: Lena Morita <lena@jaguchi.com>
…o fix/add-controls
mirka
approved these changes
Jul 14, 2025
78ce34a to
714adc3
Compare
Thanks for the review! I removed the export and updated the changelog with 714adc3. |
|
Flaky tests detected in 714adc3. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/16271085835
|
|
@mirka Let me know if you prefer to take another look at my last commits, or I can merge the PR. Thanks! 🙇 |
|
Yes, no issues! Let's merge 👍 |
USERSATOSHI
pushed a commit
to USERSATOSHI/gutenberg
that referenced
this pull request
Jul 23, 2025
* import components from calypso * fix folder structure * export as private API * fix build * rename stories file * fix storybook * update stories title * add changelog * Update packages/components/src/validated-form-controls/components/stories/overview.mdx Co-authored-by: Lena Morita <lena@jaguchi.com> * use variable for font-family * add status-private tag to stories * update changelog * improve props type definition * remove export validated form controls --------- Co-authored-by: gigitux <gigitux@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>
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.
Related PR: Automattic/wp-calypso#100771
What?
This PR adds the
ValidateControlscomponents as private APIs. These components wrap the WordPress components adding the validation controls too.This PR imports Automattic/wp-calypso#100771 changes with small changes:
a8cwithcomponentsThe first commit contains the raw copy from Calypso repo (6ac9b6f)
Why?
We’re exploring how to introduce validation in the DataViews library (Automattic/wp-calypso#104145 to be migrated to Gutenberg soon). As part of this effort, we need components that support validation to build and test the integration effectively.
How?
Testing Instructions
npm run storybook:dev.Validated Form Controlsstories.Testing Instructions for Keyboard
Screenshots or screencast