Skip to content

feat(fuselage): Add LabelReset and FieldLabelReset components - #2171

Draft
ebmuniz wants to merge 1 commit into
RocketChat:mainfrom
ebmuniz:claude/label-reset-component-9d1f98
Draft

feat(fuselage): Add LabelReset and FieldLabelReset components#2171
ebmuniz wants to merge 1 commit into
RocketChat:mainfrom
ebmuniz:claude/label-reset-component-9d1f98

Conversation

@ebmuniz

@ebmuniz ebmuniz commented Aug 25, 2026

Copy link
Copy Markdown

Summary

Adds LabelReset and FieldLabelReset — a standardized "reset to default" affordance for form fields.

  • LabelReset: a fixed 20px, neutral IconButton with the undo icon.
  • FieldLabelReset: the Field-aware wrapper (dev-mode error boundary), mirroring FieldLabelInfo.

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. The ref is forwarded to the underlying button so consumers can move focus to it or anchor a tooltip.

API decisions

  • Size fixed at 20px (mini) — the icon and size props are Omited from the type and set internally, enforcing the standard rather than just defaulting it.
  • Neutral by default, variant still overridable.
  • Accessible name via titlearia-label.

Intended follow-up (Rocket.Chat core)

This is designed to replace core's custom ResetSettingButton (currently a 28px danger/red IconButton). Adopting FieldLabelReset is a deliberate design change: the reset becomes 20px and neutral. The composition already matches core's usage (sibling of FieldLabel in a FieldRow, conditionally rendered on hasResetButton), so the swap is mechanical:

- <IconButton icon='undo' danger small title={t('Reset')} {...props} />
+ <FieldLabelReset title={t('Reset')} onClick={onResetButtonClick} />

Stories

  • Inputs / Label: Reset, Info Required Reset
  • Inputs / Field: reset shown across all five field stories (text, textarea, radio, toggle, checkbox)

Testing

  • Snapshot + jest-axe a11y tests pass (auto-generated per story via composeStories)
  • Verified in Storybook: right-alignment, 8px gap to control, vertical centering, hover isolation (hovering the reset never highlights the control), and responsiveness

🤖 Generated with Claude Code

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-bot

changeset-bot Bot commented Aug 25, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: c56e491

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@rocket.chat/fuselage Minor

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

@CLAassistant

Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

1 similar comment
@CLAassistant

Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants