feat(FR-4129): add a form item label action slot by nowgnuesLee · Pull Request #10094 · lablup/backend.ai-webui

nowgnuesLee · 2026-10-01T15:39:38Z

Summary

BAIFormItem takes a new labelExtra prop for actions that belong to a field's label row. Since FR-4088 moved the form engine into @lablup/ui-common (and 0.2.0-alpha.17 has no such slot), BAIFormItem is now a thin BUI adapter (packages/backend.ai-ui/src/components/BAIFormItem.tsx) over the engine's FormItem; every other prop passes through.
The adapter renders [label][labelExtra] as the label node, so the slot sits inside ui-common's <label>. Horizontal / inline layout: the slot follows the label text and the colon still ends the row.
Vertical layout: BUI CSS (BAIFormItem.css, @layer components) stretches the label to the row width with :has() and pushes the slot to the far right; the label column stops clipping so the button's focus ring stays whole, and the label text (not the slot) ellipsizes in a narrow column.
Trade-off: the slot is inside <label>, so its button text joins the control's accessible name, the same as the existing copyable copy button in that label. Clicking the button does not activate the label (interactive descendant).
First adopter: the image filter dropdown on Environments / Version in the session launcher moves out of the BAIFlex label into labelExtra (that one item switches from Form.Item to BAIFormItem). Its menu aligns to the trigger's end (alignment="end").

Where to look

Open the session launcher and find the Environments / Version field. The image filter button (the up/down-arrow icon that toggles Show accelerator-dedicated images first) is the first adopter of labelExtra: it should sit at the far right end of the label row, vertically centred with the label text, with its menu opening aligned to the button's right edge. Toggle it to check the icon turns the accent colour and the image list reorders.

Verification

bash scripts/verify.sh → === ALL PASS === after merging main (Astryx token gate: 0 undeclared).
New BAIFormItem.test.tsx covers slot placement in the label row, the plain label for undefined / null / false, and no slot without a label; form-engine/index.test.ts asserts BAIFormItem is the adapter.
Not checked in a browser in this run; the vertical session launcher layout should be confirmed visually.

🔗 Dev server: http://fr-4129-pr10094.seungwon.10-82-0-159.sslip.io

Form.Item takes a labelExtra node for actions that belong to the field's label row. It renders outside the <label>, so it no longer joins the control's accessible name or triggers label activation: at the far end of the row in vertical layout, right after the label in horizontal and inline layout, where the colon moves to the end of the slot. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

The Environments / Version field passes its image filter dropdown through labelExtra instead of a hand-built BAIFlex label, so it sits at the right end of the label row in the vertical session launcher. The menu aligns to the trigger's end now that the trigger is at the right edge. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

github-actions · 2026-10-01T15:42:02Z

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR

GitHub Pages may take up to a minute to hydrate after the deploy.

🧩 Changed Components

1 component(s) changed, none of which has a *.stories.tsx — nothing to open in the preview.

⚠️ New component(s) without a *.stories.tsx: BAIFormItem. They cannot appear in the preview, and a story is the cheapest way to make a new component reviewable.

1 changed component(s) with no story to open

BAIFormItem — packages/backend.ai-ui/src/components/BAIFormItem.tsx

5 other changed file(s) in packages/backend.ai-ui/

packages/backend.ai-ui/src/components/BAIFormItem.css
packages/backend.ai-ui/src/components/BAIFormItem.doc.ts
packages/backend.ai-ui/src/components/BAIFormItem.test.tsx
packages/backend.ai-ui/src/form-engine/index.test.ts
packages/backend.ai-ui/src/form-engine/index.ts

📦 Bundle Size

File	Size	Gzip	Δ Gzip vs base
`backend.ai-ui.js`	1863.9 kB	441.7 kB	+0.2 kB

Total gzip: 441.7 kB (+0.2 kB vs origin/main)

_{Generated by the PR Preview workflow · Storybook · CI run}

github-actions · 2026-10-01T15:42:18Z

Coverage Report for backend-ai-ui-coverage (./packages/backend.ai-ui)

Status	Category	Percentage	Covered / Total
🔵	Lines	46.33%	3338 / 7204
🔵	Statements	40.62%	4126 / 10157
🔵	Functions	41.88%	619 / 1478
🔵	Branches	29.14%	2936 / 10075

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/backend.ai-ui/src/components/BAIFormItem.tsx	76.92%	66.66%	100%	87.5%	21, 46, 48
packages/backend.ai-ui/src/form-engine/index.ts	100%	100%	100%	100%

Generated in workflow #788 for commit d3ca452 by the Vitest Coverage Report Action

In vertical layout the label column no longer clips overflow when it holds a labelExtra slot, so the flush-right button's focus ring stays whole. In horizontal layout the label text clips at its own edge when the column is too narrow, instead of painting over the slot. Also adds tests for Form.Item forwarding labelExtra and for the default colon. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

github-actions · 2026-10-01T15:43:38Z

Coverage Report for react-coverage (./react)

Status	Category	Percentage	Covered / Total
🔵	Lines	19.68%	7611 / 38664
🔵	Statements	16.83%	9575 / 56872
🔵	Functions	17.89%	1228 / 6864
🔵	Branches	12.39%	6683 / 53936

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
react/src/components/BAIFormItem.tsx	100%	100%	100%	100%
react/src/components/ImageEnvironmentSelectFormItems.tsx	1.57%	0%	0%	1.57%	76-80, 104-1006
react/src/form-engine/index.ts	100%	100%	100%	100%

Generated in workflow #1673 for commit d3ca452 by the Vitest Coverage Report Action

Copilot

Copilot review overview

🟢 Approval recommended

The implementation matches the requested behavior and includes focused automated coverage.

Review effort: Balanced
Findings: None

What changed in this PR

Adds a reusable labelExtra action slot to form labels and adopts it for the session launcher’s image filter.

Changes:

Places label actions outside the native <label>.
Supports layout-aware positioning and colon handling.
Adds forwarding and rendering tests.

File	Description
`react/src/components/ImageEnvironmentSelectFormItems.tsx`	Moves the image filter into `labelExtra`.
`packages/backend.ai-ui/src/form-engine/FormItemVisual.tsx`	Renders the new label action slot.
`packages/backend.ai-ui/src/form-engine/FormItemVisual.labelExtra.test.tsx`	Tests placement, forwarding, and colon behavior.
`packages/backend.ai-ui/src/form-engine/FormItemVisual.css`	Implements layout, clipping, and colon styles.
`packages/backend.ai-ui/src/form-engine/FormItem.tsx`	Exposes and forwards `labelExtra`.

💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.

…dapter main moved the form engine into @lablup/ui-common (FR-4088), deleting the BUI FormItem/FormItemVisual files this PR extended. ui-common 0.2.0-alpha.17 has no labelExtra, so BUI's BAIFormItem becomes a thin adapter over the engine's FormItem that renders labelExtra next to the label text inside ui-common's label node, with BUI CSS spreading the row in vertical layout. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

nowgnuesLee · 2026-10-07T08:14:20Z

Dev server on box seungwon: http://fr-4129-pr10094-add-form-item.seungwon.10-82-0-159.sslip.io

nowgnuesLee · 2026-10-08T08:23:45Z

Closing this PR. We decided to make the change in @lablup/ui-common instead.

Since FR-4088 (#10023), the form engine (Form.Item / FormItemVisual) lives in @lablup/ui-common, so the labelExtra slot belongs there rather than in a BUI-side adapter. The upstream change is lablup/ui-common#60. It keeps this PR's original design: the slot renders outside the <label>, so its buttons stay out of the control's accessible name.

Once a ui-common release ships it, a follow-up webui PR will bump the catalog pin and move the session launcher's image filter on Environments / Version into labelExtra.

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>

* feat(Form): add a labelExtra slot to Form.Item's label row 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> * docs(Form): add a labelExtra story Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

nowgnuesLee and others added 2 commits October 1, 2026 15:38

github-actions Bot assigned nowgnuesLee Oct 1, 2026

github-actions Bot added size:L 100~500 LoC quick-capture labels Oct 1, 2026

github-actions Bot added a commit that referenced this pull request Oct 1, 2026

Deploy PR #10094 preview (storybook)

ff3d447

nowgnuesLee requested a balanced review from Copilot October 1, 2026 15:45

Copilot started reviewing on behalf of nowgnuesLee October 1, 2026 15:45

View session

github-actions Bot added a commit that referenced this pull request Oct 1, 2026

Deploy PR #10094 preview (storybook)

c6d4754

Copilot AI reviewed Oct 1, 2026

View reviewed changes

github-actions Bot added a commit that referenced this pull request Oct 7, 2026

Deploy PR #10094 preview (storybook)

38450da

nowgnuesLee mentioned this pull request Oct 8, 2026

feat(Form): add a labelExtra slot to Form.Item's label row lablup/ui-common#60

Merged

nowgnuesLee closed this Oct 8, 2026

Navigation Menu

Repository navigation

feat(FR-4129): add a form item label action slot - #10094

feat(FR-4129): add a form item label action slot#10094
nowgnuesLee wants to merge 4 commits into
mainfrom
feature/issue-10071-FR-4129-form-label-extra

nowgnuesLee commented Oct 1, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 1, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 1, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 1, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

nowgnuesLee commented Oct 7, 2026

Uh oh!

nowgnuesLee commented Oct 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

nowgnuesLee commented Oct 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Where to look

Verification

Uh oh!

github-actions Bot commented Oct 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Analysis Report

📚 Storybook Preview

🧩 Changed Components

📦 Bundle Size

Uh oh!

github-actions Bot commented Oct 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report for backend-ai-ui-coverage (./packages/backend.ai-ui)

Uh oh!

github-actions Bot commented Oct 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report for react-coverage (./react)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟢 Approval recommended

Uh oh!

nowgnuesLee commented Oct 7, 2026

Uh oh!

nowgnuesLee commented Oct 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nowgnuesLee commented Oct 1, 2026 •

edited

Loading

github-actions Bot commented Oct 1, 2026 •

edited

Loading

github-actions Bot commented Oct 1, 2026 •

edited

Loading

github-actions Bot commented Oct 1, 2026 •

edited

Loading