Add infoTooltip prop to FieldContainer and Field - #6262
Draft
VPS-thodax wants to merge 4 commits into
Draft
Conversation
Editors and developers repeatedly asked for a way to add explanatory text to form fields beyond the label. FormSection already supports an infoTooltip prop with an established pattern (Info icon + Tooltip), so FieldContainer now follows the same convention, and Field forwards it so every Field-based component (TextField, SelectField, ...) gets it for free.
|
Important Draft PR not reviewedDraft PRs are not automatically reviewed by default.
To automatically review draft PRs, update your CodeRabbit configuration: reviews:
auto_review:
drafts: trueComment |
The Label component in the Figma design system (COMET DXP Library, Input page) places the info icon inline with a 4px gap and a fixed 16px size, matching the label text's own 16px font-size and the existing 4px asterisk margin already themed on MuiFormLabel. Adjust FieldContainer's info tooltip icon accordingly instead of reusing FormSection's 10px/12px values, which were sized for a larger headline. Also add PR screenshots for COM-1646 for reviewers to compare against the Figma reference without needing to run Storybook locally.
Adds the Label component screenshot from the COMET DXP Library (Input page) for reviewers to compare the info tooltip's spacing and icon size against the design directly in the PR.
…xport The previous export was cropped exactly to the design file's own frame bounds, which has no left/right padding around the label, making it look clipped when embedded in the PR. Re-exported at 3x scale and added white padding around it so the content reads clearly.
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
2 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.
Motivation
Form fields sometimes need a short explanation beyond their label (e.g. what a value is used for, or a formatting requirement), but
Field/FieldContainerhave no way to show one.FormSectionalready solves this for section headlines with aninfoTooltipprop, so the same need exists one level down, at the individual field.Solution
FieldContainergets aninfoTooltipprop that renders an info icon with aTooltipnext to the field's label, following the same API shape asFormSection's existinginfoTooltipprop (a string, aReactNode, or{ title, description }).Fieldforwards the prop toFieldContainer, so everyField-based component (TextField,SelectField, …) gets it for free. The icon is overridable viaiconMapping.infoTooltip, consistent with howSectionHeadlineexposes its tooltip icon.Icon size (16px) and spacing (4px gap) are matched to the design system's
Labelcomponent (screenshot below), which places the info icon inline right after the label/asterisk with a 4px gap — the same 4px already themed onMuiFormLabel's asterisk — and the label's own 16px font-size.Screenshots/screencasts
Live in Storybook:
@dextinity/admin, storycomponents/form/FieldContainer): https://68e7b70f15b8f51dac492af6-iuyohzcxzx.chromatic.com/?path=/story/components-form--field-containerFurther information