Add: Panel form layout validation#73700
Merged
Merged
Conversation
|
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. |
55f5246 to
f3b263e
Compare
Contributor
|
@jorgefilipecosta I get the following error when trying to build Storybook so I can't test: In any case, does the |
Member
Author
Looking for a fix. Locally the build was running on and it worked. |
f3b263e to
fb49062
Compare
|
Size Change: +734 B (+0.03%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 5cb1d3c. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/20195434307
|
Member
Author
|
Hi @jameskoster, the issue should be fixed. |
Contributor
|
Thanks, it's working now :) Could you add a field to the story where |
Member
Author
Glad the problem was fixed. Working on the additional story. |
Member
Author
|
Hi @jameskoster the story was updated to test label none, and I also implemented the functionality to have validation on this case which we were missing. It should look like this in the current version: |
ef1f78b to
ae3e74a
Compare
jameskoster
reviewed
Dec 4, 2025
| .dataforms-layouts-panel__field-label-content { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| cursor: help; |
Contributor
There was a problem hiding this comment.
This cursor doesn't seem to apply when labelPosition is none.
Member
Author
There was a problem hiding this comment.
Good catch, it was fixed.
| <HStack className="dataforms-layouts-panel__field dataforms-layouts-panel__field--label-position-none"> | ||
| { showError && ( | ||
| <Tooltip text={ errorMessage } placement="top"> | ||
| <span className="dataforms-layouts-panel__field-error-indicator"> |
Contributor
There was a problem hiding this comment.
I think we need flex-shrink: 0 on this class. Otherwise the icon can be squished when the button is really long:
Contributor
|
I left a couple of small notes. I'm not sure why we use the |
Member
Author
Thank you for the cacthes, all of them were fixed 👍 |
Member
Author
Yes it seems like something we could fix. As it is not related to the validation I can gladly work on it on another PR. I also found another issue while developing this. If we make the text field empty when label position is not, the field is not rendered anymore and we can not open the panel at all, the user gets no way to fix the issue, which I will also fix in a different PR. |
Member
Author
This one is being fixed at #73764. |
jameskoster
reviewed
Dec 5, 2025
oandregal
reviewed
Dec 5, 2025
| } ) ) | ||
| } | ||
| /> | ||
| <PanelValidationSection |
Member
There was a problem hiding this comment.
Instead of adding a panel, can we add a new control to the story that allows users to switch between regular and panel layouts? That way, we can test all existing component types in both scenarios.
Member
Author
There was a problem hiding this comment.
Hi @oandregal, I reimplemented the story now we have a control to change the layout between panel, card and regular on the validation story.
1f2d254 to
06e9061
Compare
Member
Author
|
Hi @jameskoster, @oandregal I think all the feedback was applied. Be ware that now to test the story we need to change the layout under the controls panel: |
jameskoster
reviewed
Dec 15, 2025
|
|
||
| const labelContent = showError ? ( | ||
| <Tooltip text={ errorMessage } placement="top"> | ||
| <span className="dataforms-layouts-panel__field-label-content"> |
Contributor
There was a problem hiding this comment.
Probably not a big deal but could this be an HStack?
jameskoster
reviewed
Dec 15, 2025
| const labelContent = showError ? ( | ||
| <Tooltip text={ errorMessage } placement="top"> | ||
| <span className="dataforms-layouts-panel__field-label-content"> | ||
| <span className="dataforms-layouts-panel__field-error-indicator"> |
Contributor
There was a problem hiding this comment.
Do we need the span? Could we just add the class to the Icon instance below instead?
Contributor
|
Thanks for making those changes @jorgefilipecosta, I think this is in a decent spot in terms of design. |
This reverts commit 1490580.
711aa0a to
5369bfb
Compare
Member
Author
|
Hi @oandregal, I just rebased this PR, I think it should be ready. |
oandregal
approved these changes
Dec 18, 2025
Member
oandregal
left a comment
There was a problem hiding this comment.
This is a great first step, thanks!
A follow-up we need to look at is when validation messages are displayed. I know we've discussed that input validation messages aren't displayed until it loses focus (the 1st time). But that pattern creates weird experiences with panel layout validation.
Note these situations in which the panel reports the error before the relevant input does:
Screen.Recording.2025-12-18.at.14.01.29.mov
Member
Author
|
Thank you for the reviews @oandregal and @jameskoster! |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
Summary
Adds validation indicators to the panel layout in DataForm. When a field has validation errors, a red warning icon with tooltip appears next to the field label.
Part of: #72321
Details
Screenshot
cc: @oandregal, @jameskoster
Test plan