fix(ui): render DateTime label as <label> instead of <span> #12949
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.
What / Why
Date & Time fields were rendering their field label as a
<span>
while every other field type uses a proper<label>
with a matchinghtmlFor
.Because the element was a span it broke styles and made 'field-label' have different styles from the rest of 'field-label's.
Root cause: DateTimeField failed to pass its
path
(or an explicithtmlFor
) toFieldLabel
. WhenFieldLabel
receives nohtmlFor
, it intentionally downgrades to a<span>
.Screenshots
Before
DateTime label rendered as
<span>
, causing style inconsistenciesAfter
DateTime label now rendered as proper
<label>
elementChanges introduced
packages/ui/src/fields/DateTime/index.tsx
path={path}
prop toFieldLabel
componentBehavior after the fix
<label>
elements withfor="field-…"
How to test manually
pnpm dev fields
<label>