feat(fuselage): Add LabelReset and FieldLabelReset components - #2171
feat(fuselage): Add LabelReset and FieldLabelReset components#2171ebmuniz wants to merge 1 commit into
Conversation
Add LabelReset, a label affordance that renders a mini (20px) IconButton with the undo icon to reset a field to its default value, composed alongside Label the same way LabelInfo is. Also add FieldLabelReset, the Field-aware wrapper mirroring FieldLabelInfo. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: c56e491 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
|
1 similar comment
|
|
Summary
Adds
LabelResetandFieldLabelReset— a standardized "reset to default" affordance for form fields.LabelReset: a fixed 20px, neutralIconButtonwith theundoicon.FieldLabelReset: theField-aware wrapper (dev-mode error boundary), mirroringFieldLabelInfo.Composition
Unlike
LabelInfo, the reset is composed as a sibling of the label, not nested inside it — because it's interactive, nesting it in the<label>would forward hover/click to the field's control. It sits in the field row next to the control (8px gap), or alone at the right for stacked inputs. Therefis forwarded to the underlying button so consumers can move focus to it or anchor a tooltip.API decisions
mini) — the icon and size props areOmited from the type and set internally, enforcing the standard rather than just defaulting it.title→aria-label.Intended follow-up (Rocket.Chat core)
This is designed to replace core's custom
ResetSettingButton(currently a 28pxdanger/redIconButton). AdoptingFieldLabelResetis a deliberate design change: the reset becomes 20px and neutral. The composition already matches core's usage (sibling ofFieldLabelin aFieldRow, conditionally rendered onhasResetButton), so the swap is mechanical:Stories
Reset,Info Required ResetTesting
jest-axea11y tests pass (auto-generated per story viacomposeStories)🤖 Generated with Claude Code