Repository navigation
feat: Add field tips to AutoForm fields - #889
Conversation
Every built-in AutoForm field accepts `tip`, shown as a question-mark button beside the label that opens a popover on hover, click/tap or keyboard. Fields without `tip` render exactly as before. - AutoFormTip (Base UI Popover with openOnHover), localized accessible name - AutoFormLabel keeps the help button a sibling of the label, so it never focuses or toggles the control - Multi-language fields show one tip; AutoFormArray puts it in the legend - Failed submit never focuses a help button - Docs section and live example Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BLmESfGxr2efqTJwy3fPHX
- hasTipContent empty/non-empty table - no button without tip; click opens, Escape closes; no `tip` attribute leak - tip click neither submits nor toggles a checkbox or switch - failed submit focuses the control, never the help button - one tip per multi-language field; array and row tips, group named by label Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BLmESfGxr2efqTJwy3fPHX
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
React Doctor found no new issues. 🎉 Reviewed by React Doctor for commit |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1ea165175a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <PopoverContent | ||
| className="w-max max-w-[min(--spacing(72),var(--available-width))] gap-2 p-3 leading-relaxed text-pretty wrap-break-word" | ||
| side="top" | ||
| > | ||
| {children} |
There was a problem hiding this comment.
When a screen-reader user opens any field tip, this PopoverContent is exposed as a dialog, but it contains only anonymous body content and has no PopoverTitle, aria-label, or aria-labelledby. The trigger's accessible name does not name the popup, so assistive technology announces an unnamed dialog; give the popup an accessible name and associate the tip body as its description.
AGENTS.md reference: AGENTS.md:L59-L60
Useful? React with 👍 / 👎.
| render( | ||
| <AutoForm | ||
| fields={[ | ||
| { | ||
| id: "title", | ||
| component: props => ( | ||
| <AutoFormInput {...props} label="Title" tip={tip} /> |
There was a problem hiding this comment.
The newly added DOM suite renders AutoForm and built-in form fields throughout, starting with this case, even though the repository explicitly forbids UI component tests of AutoForm and form fields. Remove this suite rather than adding costly happy-dom coverage at the prohibited layer; the separate pure hasTipContent test can remain.
AGENTS.md reference: AGENTS.md:L114-L116
Useful? React with 👍 / 👎.
aXenDeveloper
changed the title
Description
What?
Added a
tipprop to AutoForm fields that displays a question-mark help button beside the label. Clicking, hovering, or keyboard interaction opens a popover with additional help text. This complements the existinglabelanddescriptionprops by providing optional, on-demand help content.Key changes:
AutoFormTipcomponent that renders a help button with popoverAutoFormLabelto support thetipprop and render the help buttontipprop to all built-in field components (input, textarea, checkbox, switch, select, etc.)AutoFormArrayto support tips on the array itselfWhy?
Help text can be verbose and distract from the main form. By separating it into optional tips, users can quickly scan the form and only read detailed help when needed. This improves UX for both simple and complex forms.
The implementation ensures:
tip={isAdmin && t("admin.tip")}Test Plan
Added comprehensive test coverage in
auto-form-tip.test.tsx:Unit tests for
hasTipContentutility verify correct detection of empty vs. populated tips.https://claude.ai/code/session_01BLmESfGxr2efqTJwy3fPHX