Repository navigation
feat(Form): add a labelExtra slot to Form.Item's label row - #60
Merged
Merged
Conversation
nowgnuesLee
force-pushed
the
feat/form-item-label-extra
branch
from
October 12, 2026 09:10
27ae1db to
9d7437c
Compare
nowgnuesLee
added this pull request to stack #65
October 12, 2026 09:10
Contributor
PR Analysis Report📚 Storybook PreviewGitHub Pages may take up to a minute to hydrate after the deploy. 🧩 Changed Components
3 other changed file(s) in
|
There was a problem hiding this comment.
🟢 Approval recommended
The focused API addition is consistently implemented, documented, and covered by relevant behavioral tests.
0 open findings
What changed in this PR
Adds a labelExtra action slot to Form label rows while preserving accessible names and layout behavior.
Changes:
- Adds and forwards the
labelExtraAPI. - Implements vertical, horizontal, and inline styling.
- Adds tests, Storybook coverage, documentation, and changelog notes.
| File | Description |
|---|---|
src/components/Form/FormItemVisual.tsx |
Renders the new slot outside the label. |
src/components/Form/FormItemVisual.labelExtra.test.tsx |
Tests rendering, accessibility, forwarding, and CSS contracts. |
src/components/Form/FormItemVisual.css |
Styles slot positioning, clipping, and colon placement. |
src/components/Form/FormItem.tsx |
Exposes and forwards labelExtra. |
src/components/Form/Form.stories.tsx |
Demonstrates an interactive label action. |
CHANGELOG.md |
Documents the new API. |
astryx/components/Form.doc.mjs |
Updates Form usage documentation. |
🧠 Review effort: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Form.Item and FormItemVisual take `labelExtra` for actions that belong to a field's label row (a filter or sort toggle). The slot renders beside the <label>, not inside it, so its buttons stay out of the control's accessible name and never trigger label activation. Vertical layout pushes it to the far end of the row and stops the label column clipping its focus ring; horizontal and inline layout put it right after the label, with the colon moved to the end of the slot. Requested by backend.ai-webui (lablup/backend.ai-webui#10094), whose session launcher hand-built a button inside its label to get this. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
nowgnuesLee
force-pushed
the
feat/form-item-label-extra
branch
from
October 12, 2026 09:28
9d7437c to
4e5005d
Compare
nowgnuesLee
marked this pull request as ready for review
October 12, 2026 09:44
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
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.
Summary
Form.ItemandFormItemVisualtake a newlabelExtraprop for actions that belong to a field's label row, such as a filter or sort toggle..uic-form-item__label-extra) renders beside the<label>, not inside it. Its buttons stay out of the control's accessible name and never trigger label activation, which a button hand-built intolabeldoes.justify-content: space-between, so the slot sits at the far end of the row. The column stops clipping overflow so the flush-right button's focus ring stays whole.labelAlign. The colon moves from the<label>to the end of the slot so it still ends the row.colon={false}keeps the non-breaking-space placeholder.label, or forundefined/null/false, nothing renders and the markup is unchanged.Docs:
Form.doc.mjsusage mentionslabelExtraand the new__label-extrastyle hook. Storybook: aLabelExtrastory under Components/Form. CHANGELOG has an Unreleased / Added entry. No version bump here.Why
backend.ai-webui wanted this for the session launcher's Environments / Version field (lablup/backend.ai-webui#10094), whose image filter button was hand-built inside the label. That PR first added the slot to the webui's own copy of the form engine. Since the engine moved here (webui FR-4088), the change belongs in ui-common. #10094 is closed in favour of this PR. Once this ships, the webui adopts it by bumping the catalog pin.
Verification
pnpm run verifypasses: typecheck, lint, format, boundary, theme, 1463 tests, build, check:pack, check:integration.src/components/Form/FormItemVisual.labelExtra.test.tsxcovers:<label>Form.Itemforwarding the propundefined/null/false@layer