DataForm: document decision criteria when to use it or not#74770
DataForm: document decision criteria when to use it or not#74770
Conversation
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
Here are descriptions for each of the examples, if useful: Login form Search form Post editor Media editing Simple settings page Complex settings page |
| Does your form need validation (required fields, format validation, custom validation rules)? | ||
|
|
||
| - If **yes** → use the `validated` family of components from `@wordpress/components` (like `ValidatedInputControl`, `ValidatedTextControl`, `ValidatedSelectControl`, etc.). These components extend WordPress components with HTML5 Constraint Validation API support. | ||
| - If **no** → use components from `@wordpress/ui` (like `Field`, `Input`, `Button`, etc.). These provide a clean, accessible form structure without validation overhead. |
There was a problem hiding this comment.
Let's remove this, the package is not ready for this kind of use yet.
There was a problem hiding this comment.
At this moment, is the right answer to use InputControl, TextControl, the versions without the Validated prefix? For the "don't need validation" scenario?
There was a problem hiding this comment.
Right, something like this:
| - If **no** → use components from `@wordpress/ui` (like `Field`, `Input`, `Button`, etc.). These provide a clean, accessible form structure without validation overhead. | |
| - If **no** → use components from `@wordpress/components` (like `InputControl`, `SelectControl`, etc.). These provide a clean, accessible form structure without validation overhead. |
I've attempted to make it clearer to not use @wordpress/ui yet.
|
|
||
| **Quick reference:** | ||
|
|
||
| - **No data object + No validation** → `@wordpress/ui` components (`Field`, `Input`, `Button`) |
| ### Login form | ||
|
|
||
| - **Path**: Path A (action/flow) | ||
| - **Complexity**: Simple (2-3 fields) | ||
| - **Layout**: Simple vertical | ||
| - **Validation**: Required (username/email and password validation) | ||
| - **Decision**: Use `validated` family of components from `@wordpress/components` | ||
|
|
||
| Don't use `DataForm` when the goal is to authenticate a user (collect credentials and submit once). Instead, use more primitive components like `InputControl` and `RadioControl`. | ||
|
|
||
| ### Search form | ||
|
|
||
| - **Path**: Path A (action/flow) | ||
| - **Complexity**: Simple (1-2 fields) | ||
| - **Layout**: Simple horizontal or vertical | ||
| - **Validation**: Not required (search can accept any input) | ||
| - **Decision**: Use components from `@wordpress/ui` (like `Field`, `Input`, `Button`) | ||
|
|
||
| Let users define search criteria to find items in a dataset, from simple keyword search to advanced filters (status, author, date ranges, taxonomy, etc.). Instead, use `SearchControl` and other components related to the search features, along with the data the search is searching. |
There was a problem hiding this comment.
I would move these two sections into a new one above the "When in doubt…" that says "Do not use in…".
| ### Login form | ||
|
|
||
| - **Path**: Path A (action/flow) | ||
| - **Complexity**: Simple (2-3 fields) | ||
| - **Layout**: Simple vertical | ||
| - **Validation**: Required (username/email and password validation) | ||
| - **Decision**: Use `validated` family of components from `@wordpress/components` | ||
|
|
||
| Don't use `DataForm` when the goal is to authenticate a user (collect credentials and submit once). Instead, use more primitive components like `InputControl` and `RadioControl`. | ||
|
|
||
| ### Search form | ||
|
|
||
| - **Path**: Path A (action/flow) | ||
| - **Complexity**: Simple (1-2 fields) | ||
| - **Layout**: Simple horizontal or vertical | ||
| - **Validation**: Not required (search can accept any input) | ||
| - **Decision**: Use components from `@wordpress/ui` (like `Field`, `Input`, `Button`) | ||
|
|
||
| Let users define search criteria to find items in a dataset, from simple keyword search to advanced filters (status, author, date ranges, taxonomy, etc.). Instead, use `SearchControl` and other components related to the search features, along with the data the search is searching. |
There was a problem hiding this comment.
I would replace the "Let users define search criteria…" with "Don't use DataForm when the goal is…"
fcoveram
left a comment
There was a problem hiding this comment.
I added two comments, but the rest looks correct to me.
Decision criteria for AI agents for whether to use
DataFormin a given situation. Here for a potential "login form" component.