fix(ComplexSelector): attached status shows the status icon on the trigger row by cixzhang · Pull Request #9731 · meta/astryx

cixzhang · 2026-11-03T09:53:36Z

User impact

A ComplexSelector with an error, warning or success status, in the default attached placement, now shows the status icon on its trigger in place of the chevron, as Selector and MultiSelector do.

Before: the field had only its colored edge and the message below, so color was the only cue on the field itself.
Already fixed on main: the tooltip placement's lost message (point 1 of the issue). The trigger row already shows a focusable info-tip that holds the message and describes the trigger. This PR records that and adds a test reference.

Spec

component:ComplexSelector FR7 adds that with attached status the trigger row shows the status icon in place of the chevron, and with tooltip status it shows, in place of the chevron, a focusable status button that holds the message and describes the trigger. The owner ruled that the glyph replaces the chevron, as in Selector and MultiSelector. The verification row names both tests.

Writing rubric results

ComplexSelector.spec.md: FR7 (one sentence added) and its verification row:

R1, narration: none.
R2, present tense: yes.
R3, evidence naming a change: none.
R4, one owner per fact: ComplexSelector owns its trigger row; Field owns the message box.
R5, exact ids: yes.
R6, verification names its case: yes.

Changes

ComplexSelector.tsx: useInputStatusIcon now gets the status for every placement. The hook renders a plain icon for attached, nothing for detached, and the info-tip for tooltip.
- The plain icon or the info-tip takes the chevron's place, as in Selector. detached keeps the chevron.
- A press on the icon opens the popup, as a press on the trigger does. The info-tip still stops the press, so it doesn't open the popup.
- Secondary and ghost still resolve attached to detached, so they show the icon in the message box.
Changeset: a [fix] patch, credited to @duytbp, who reported it.

Evidence

New and changed tests:
- attached shows the status icon in place of the chevron and adds no tab stop, and detached keeps the chevron (fails on main);
- the tooltip info-tip takes the chevron's place.
Suites: the ComplexSelector suites pass (68).
Checks: strict lint, tsc and check:knowledge are clean.
Real Chrome (Chromium 154): in the ComplexSelector "Audit matrix" story, against Storybooks Vercel built from main and from this head, at 1280 px and 390 px:

main this head

Built-in triggers showing a status glyph 0 of 10 3 of 10 (error, warning, success)

…that also show the chevron — 0

Triggers showing the chevron 10 of 10 7 of 10

The "Custom trigger selector" row is a caller-rendered control (renderTrigger) with its own icon, so ComplexSelector's chrome isn't involved and it isn't counted.

…igger row Fixes #8956. With the default attached placement the field got its error edge and message but no status icon, so colour was the only cue on the field itself; Selector, MultiSelector and the text and date inputs show one. The trigger row now shows useInputStatusIcon's plain icon for attached, beside the chevron, as the tooltip placement's info-tip already sits there; a press on the plain icon opens the popup like the chevron. Tooltip placement (already on main: a focusable info-tip that holds the message and describes the trigger) and detached are unchanged. Record: component:ComplexSelector FR7 states the attached icon and the tooltip button; its verification row names both tests. Test: attached shows the status icon on the trigger row and adds no tab stop; detached shows none (fails before).

vercel · 2026-11-03T09:53:41Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
astryx	Ready	Preview	Nov 5, 2026 9:00pm UTC

astracat-bot · 2026-11-03T09:53:46Z

AI review status for this pull request.

Review status	Updated
🟢 Reviewed (for maintainers only)	Nov 5, 2026, 9:07 PM UTC

github-actions · 2026-11-03T10:11:14Z

PR Analysis Report

🔎 Preview · `9d5d7c2`

Storybook · Sandbox · built from this PR's head

Modified components

Component	Size	LoC	Visual · A11y · RTL
ComplexSelector · Storybook	61.4 kB (+14 B) · 10.5 kB CSS (0)	702 (+7)	✓ · ✓ · ✓
lab/TransferListSelector	91.9 kB (+13 B) · 1.9 kB CSS (0)	—	— · — · —

Package size: @astryxdesign/core 6.62 MB packed (+98 B); no new dependencies.

API changes: none in this pull request

Committed API report behind this build: cli 19 rows, core 23 rows; run pnpm api:report.

Touched components checked; add ci:run-visual, ci:run-a11y or ci:run-rtl to run the full suites.

_{Generated by PR Enrichment workflow | View full report}

astracat-bot

Approval waits on one spec decision; the code change itself looks good: the trigger shows the status glyph for attached status, and the new test fails without the fix.

The pull request adds a requirement no current spec states yet, ComplexSelector FR7's "With attached status the trigger row MUST show the status icon", so an engineering owner needs to approve or amend it, including whether the glyph sits beside the chevron (as here) or replaces it (as Selector and MultiSelector do). An engineering owner records that decision by commenting /approve-spec <full head SHA> on this pull request, and the author may do so if they are an engineering owner.

Non-blocking:

The new comment above the useInputStatusIcon call restates what the hook already documents; keeping only the reason would read: "With tooltip placement, Field renders no message box. The info-tip holds the message and describes the trigger."
The description's browser tally counts a tooltip-placement field that the Audit matrix story does not have; the story goes from 0 to 3 of 10 triggers with a status glyph.

[Automated review]

astracat-bot · 2026-11-03T10:20:42Z

+  // The trigger row shows the status icon for `attached`, and for `tooltip`
+  // an info-tip button that holds the message, as Field renders no message
+  // box then. `detached` shows its icon in the message box instead.


Non-blocking: this repeats what useInputStatusIcon already documents, and the first sentence runs 26 words over three topics. Keeping only the reason:

// With `tooltip` placement, Field renders no message box. The info-tip // holds the message and describes the trigger.

… as in Selector Per the owner ruling (record stands: Selector and MultiSelector replace the chevron), the attached status icon and the tooltip info-tip take the chevron's place; detached keeps the chevron. FR7 says so and names the tests. Merges main (FR8 and its verification row from main). A shorter comment, per review.

astracat-bot

Approval waits on one spec decision, and one doc fix is needed if that decision keeps the change.

This pull request adds a requirement no current spec states: ComplexSelector FR7 now says the trigger row "MUST show the status icon in place of the chevron", and that the tooltip info-tip also takes the chevron's place. An engineering owner needs to approve or amend that sentence, including that the chevron and its open/closed turn disappear whenever a status shows. An engineering owner records the decision by commenting /approve-spec <full head SHA> on this pull request; the author may do so if they are an engineering owner.

Required change:

ComplexSelector.doc.mjs still documents the Indicator icon as required: true, "Trailing chevron that rotates to reflect whether the popup is open", but this change removes it whenever an attached or tooltip status shows; give it Selector's required: false wording ("Trailing chevron shown when status presentation does not replace it…").

Non-blocking:

With a status and isLoading, the glyph renders before the Spinner, the reverse of Selector, so the Spinner takes the chevron's former slot.
The description's Evidence section describes the earlier revision (icons beside the chevron, 4 of 10 triggers); at this head the glyph replaces the chevron on 3 of 10.

[Automated review]

astracat-bot · 2026-11-05T16:53:38Z

+  // The status icon (or the tooltip-placement info-tip) sits beside the
+  // chevron and keeps its size when the trigger text is long.


Non-blocking: the glyph no longer sits beside the chevron; it replaces it. Keeping only the constraint:

// The status glyph or info-tip keeps its size when the trigger text is long.

astracat-bot · 2026-11-05T16:53:38Z

+            // popup, as a press on the trigger does.
+            <span {...stylex.props(styles.statusTip)}>{statusTip}</span>
+          ))}
        {isBusy && <Spinner size="sm" aria-hidden="true" />}


Non-blocking: with a status and isLoading, this Spinner renders after the status glyph, so it takes the chevron's former slot. Selector renders the Spinner first and the status glyph last; moving this line above the status block matches it.

…er sits before the status glyph, as in Selector Per review: the Indicator icon anatomy row is required: false with Selector's wording, since a status glyph replaces it. With a status and isLoading, the Spinner renders before the glyph, so the glyph keeps the chevron's slot. A shorter style comment.

cixzhang · 2026-11-05T17:41:30Z

/approve-spec ebbd50c

astracat-bot

Approved pending CI: CI has not run on this head yet. The pull request is a draft, and CI runs once it is marked ready for review.

An engineering owner approved the new ComplexSelector FR7 sentence at this head, and the component doc now marks the Indicator icon optional. Nothing blocks.

Non-blocking:

Miss: with statusVariant="tooltip" and a status that has no message, the hook renders a plain glyph, but ComplexSelector.tsx still wraps it to stop presses. A press on that glyph, which now sits in the chevron's place, opens nothing; wrapping only when the info-tip renders (for example isTooltipStatus && status?.message) fixes it.
The description's Evidence section still describes the earlier revision (icons beside the chevron, 4 of 10 triggers); at this head the glyph replaces the chevron on 3 of 10.

[Automated review]

astracat-bot · 2026-11-05T18:00:20Z

-          })}
-        />
+        {isRenderable(statusTip) &&
+          (isTooltipStatus ? (


Non-blocking (Miss): with statusVariant="tooltip" and a status that has no message, useInputStatusIcon returns the plain glyph, not the info-tip button, but this branch still wraps it to stop the press. Now that the glyph sits in the chevron's place, a press at the trigger's end opens nothing. Keying the wrapper on the info-tip rendering fixes it:

(isTooltipStatus && status?.message ? (

astracat-bot

Approved pending CI: the required build, test and docsite-test suites are deferred on this head and run before merge.

The new ComplexSelector FR7 sentence is approved by an engineering owner at this head, and the attached status glyph and the tooltip info-tip now take the chevron's place, as in Selector and MultiSelector. Nothing blocks.

Non-blocking:

Miss (non-blocking): with statusVariant="tooltip" and a status that has no message, useInputStatusIcon returns the plain glyph, but ComplexSelector.tsx:930 still wraps it to stop the press, so a press at the trigger's end opens nothing; wrapping only when the info-tip renders (for example isTooltipStatus && status?.message) fixes it.

[Automated review]

cixzhang · 2026-11-05T20:36:44Z

/approve-spec 7b85bef

cixzhang · 2026-11-05T20:52:35Z

/approve-spec 9d5d7c2

astracat-bot

Approved pending CI: the full CI suites are still running on this head.

The new ComplexSelector FR7 sentence is approved by an engineering owner at this head, and the attached status glyph and the tooltip info-tip now take the chevron's place, as in Selector and MultiSelector. Nothing blocks.

Non-blocking:

Miss (non-blocking): with statusVariant="tooltip" and a status that has no message, useInputStatusIcon returns the plain glyph, but ComplexSelector.tsx:930 still wraps it to stop the press, so a press at the trigger's end opens nothing; wrapping only when the info-tip renders (for example isTooltipStatus && status?.message) fixes it.

[Automated review]

cixzhang requested review from imdreamrunner and josephfarina as code owners November 3, 2026 09:53

meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Nov 3, 2026

github-actions Bot added the needs:design-review Affects visuals — Design should review label Nov 3, 2026

github-actions Bot requested review from cvkxx, ernestt, kentonquatman and rubyycheung November 3, 2026 09:53

github-actions Bot added the needs:spec-owner-review Current knowledge records await owner approval label Nov 3, 2026

astracat-bot Bot reviewed Nov 3, 2026

View reviewed changes

cixzhang marked this pull request as draft November 3, 2026 10:51

vercel Bot deployed to Preview November 5, 2026 16:41

View deployment

astracat-bot Bot reviewed Nov 5, 2026

View reviewed changes

github-actions Bot removed the needs:spec-owner-review Current knowledge records await owner approval label Nov 5, 2026

vercel Bot deployed to Preview November 5, 2026 17:48

View deployment

astracat-bot Bot approved these changes Nov 5, 2026

View reviewed changes

cixzhang marked this pull request as ready for review November 5, 2026 18:09

Merge branch 'main' into fix/complexselector-status-icon

7b85bef

astracat-bot Bot approved these changes Nov 5, 2026

View reviewed changes

vercel Bot deployed to Preview November 5, 2026 18:50

View deployment

Merge branch 'main' into fix/complexselector-status-icon

9d5d7c2

vercel Bot deployed to Preview November 5, 2026 21:00

View deployment

astracat-bot Bot approved these changes Nov 5, 2026

View reviewed changes

ernestt approved these changes Nov 5, 2026

View reviewed changes

cixzhang merged commit 95aa62d into main Nov 5, 2026
105 of 108 checks passed

github-actions Bot deleted the fix/complexselector-status-icon branch November 6, 2026 06:04

	main	this head
Built-in triggers showing a status glyph	0 of 10	3 of 10 (error, warning, success)
…that also show the chevron	—	0
Triggers showing the chevron	10 of 10	7 of 10

		// The status icon (or the tooltip-placement info-tip) sits beside the
		// chevron and keeps its size when the trigger text is long.

Conversation

cixzhang commented Nov 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User impact

Spec

Writing rubric results

Changes

Evidence

Uh oh!

vercel Bot commented Nov 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

astracat-bot Bot commented Nov 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

PR Analysis Report

🔎 Preview · 9d5d7c2

Modified components

Uh oh!

astracat-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

astracat-bot Bot Nov 3, 2026

Choose a reason for hiding this comment

Uh oh!

astracat-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

astracat-bot Bot Nov 5, 2026

Choose a reason for hiding this comment

Uh oh!

astracat-bot Bot Nov 5, 2026

Choose a reason for hiding this comment

Uh oh!

cixzhang commented Nov 5, 2026

Uh oh!

astracat-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

astracat-bot Bot Nov 5, 2026

Choose a reason for hiding this comment

Uh oh!

astracat-bot Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cixzhang commented Nov 5, 2026

Uh oh!

cixzhang commented Nov 5, 2026

Uh oh!

astracat-bot Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cixzhang commented Nov 3, 2026 •

edited

Loading

vercel Bot commented Nov 3, 2026 •

edited

Loading

astracat-bot Bot commented Nov 3, 2026 •

edited

Loading

github-actions Bot commented Nov 3, 2026 •

edited

Loading

🔎 Preview · `9d5d7c2`

astracat-bot Bot left a comment •

edited

Loading

astracat-bot Bot left a comment •

edited

Loading