Add red border in error state to Combobox, Select, Autocomplete, and SensitiveInput

[pedromenezes1]

The error prop on Combobox, Select, Autocomplete, and SensitiveInput would show the error message text but not turn the border red, unlike Input which correctly applies ring-kumo-danger. This fixes all four components to match Input's behavior.

What changed

• SensitiveInput — Auto-applies variant: "error" when error prop is truthy, matching Input's existing pattern
• Combobox — Renamed ComboboxSizeContext → ComboboxContext to carry { size, hasError }, propagated to TriggerValue, TriggerInput, and TriggerMultipleWithInput
• Select — Added conditional !ring-kumo-danger error classes to the trigger element
• Autocomplete — Created AutocompleteContext to propagate hasError from Root to InputGroup

Tests

Added unit tests for all four components verifying ring-kumo-danger is applied on error. Also added baseline test coverage for Combobox and Autocomplete (rendering, variants, displayName, field wrapper, error states, aria attributes).

Screenshots

Before	After

---

• Reviews
  • bonk has reviewed the change
  • automated review not possible because: visual styling fix requires human review
• Tests
  • Tests included/updated
  • Automated tests not possible - manual testing has been completed as follows:
  • Additional testing not necessary because:

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@528

commit: 0b3ff89

[github-actions]

Docs Preview

View docs preview

Commit: b04513b

[github-actions]

Visual Regression Report — 19 changed, 18 unchanged

19 screenshot(s) with visual changes:

Button / Variant: Secondary

271 px (0.27%) changed

Before	After	Diff

Button / Variant: Ghost

175 px (0.17%) changed

Before	After	Diff

Button / Sizes

702 px (0.69%) changed

Before	After	Diff

Button / Loading State

3 px (0%) changed

Before	After	Diff

Button / Disabled State

232 px (0.23%) changed

Before	After	Diff

Dialog / Dialog With Select

244 px (0.24%) changed

Before	After	Diff

Dialog / Dialog With Combobox

298 px (0.29%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

244 px (0.24%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Basic

486 px (0.48%) changed

Before	After	Diff

Select / Select Sizes

855 px (0.46%) changed

Before	After	Diff

Select / Select Without Label

161 px (0.16%) changed

Before	After	Diff

Select / Select Placeholder

418 px (0.41%) changed

Before	After	Diff

Select / Select With Tooltip

294 px (0.29%) changed

Before	After	Diff

Select / Select Custom Rendering

0 px (0%) changed

Before	After	Diff

Select / Select Loading

1,429 px (0.71%) changed

Before	After	Diff

Select / Select Disabled Options

829 px (0.82%) changed

Before	After	Diff

Select / Select Long List

844 px (0.71%) changed

Before	After	Diff

Select (Open)

1,678,255 px (6.42%) changed

Before	After	Diff

18 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Variant: Secondary Destructive
• Button / With Icon
• Button / Icon Only
• Button / Title
• Button / Link as Button
• Dialog / Dialog With Actions
• Dialog / Dialog Basic
• Dialog / Dialog Alert
• Dialog / Dialog Confirmation
• Select / Select Multiple
• Select / Select Complex
• Select / Select Disabled Items
• Select / Select Grouped
• Select / Select Grouped With Disabled

---

Generated by Kumo Visual Regression

[pedromenezes1]

/bonk

[ask-bonk]

Summary of PR #528 Thread

Purpose: Fix missing red border (ring-kumo-danger) on Combobox, Select, Autocomplete, and SensitiveInput when the error prop is set, matching Input's existing behavior.

Discussion Flow:

1. PR opened — Author (pedromenezes1) describes the fix across 4 components:

   • SensitiveInput: Auto-applies variant: "error" when error prop is truthy
   • Combobox: Expanded context to carry hasError state to trigger elements
   • Select: Added conditional error ring classes to trigger
   • Autocomplete: Created context to propagate error state to InputGroup
   • Includes new unit tests and baseline test coverage for Combobox/Autocomplete

2. pkg-pr-new — Posted install link for testing: npm i https://pkg.pr.new/@cloudflare/kumo@528

3. Docs Preview — Deployed at https://4c05bda7-kumo-docs.design-engineering.workers.dev

4. Visual Regression Report — 19 screenshots changed (mostly minor pixel shifts in Button variants, Dialog with Select/Combobox, and Select states). 18 screenshots unchanged. The Button changes appear to be baseline noise unrelated to this PR's changes.

github run