Skip to content

fix(select): align trigger with input surfaces - #758

Open
geoquant wants to merge 2 commits into
cloudflare:mainfrom
geoquant:geoquant/select-bg-colors
Open

fix(select): align trigger with input surfaces#758
geoquant wants to merge 2 commits into
cloudflare:mainfrom
geoquant:geoquant/select-bg-colors

Conversation

@geoquant

Copy link
Copy Markdown
Collaborator

Summary

Align the Select trigger surface with the rest of Kumo's form-control family.

  • use bg-kumo-control for the default, open, and disabled trigger states
  • preserve bg-kumo-base for the floating popup surface
  • correct the Select styling metadata to match the rendered component
  • verify Select and Input share the same default surface token
  • preserve ordinary className overrides without requiring !important

Testing

  • pnpm --filter @cloudflare/kumo test -- src/components/select/select.test.tsx
  • pnpm --filter @cloudflare/kumo typecheck
  • pnpm --filter @cloudflare/kumo lint
  • pnpm exec vp fmt --check packages/kumo/src/components/select/select.tsx packages/kumo/src/components/select/select.test.tsx .changeset/green-selects-rest.md

  • Reviews
    • bonk has reviewed the change
    • automated review not possible because: this change was locally audited and verified before submission
  • Tests
    • Tests included/updated
    • Automated tests not possible - manual testing has been completed as follows:
    • Additional testing not necessary because:
@pkg-pr-new

pkg-pr-new Bot commented Aug 28, 2026

Copy link
Copy Markdown
npm i https://pkg.pr.new/@cloudflare/kumo@758

commit: 3480c4a

@github-actions

Copy link
Copy Markdown
Contributor

Docs Preview

View docs preview

Commit: 3480c4a

@github-actions

github-actions Bot commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

📐 Bundle Size

Consumer fixtures bundled against packages/kumo/dist (peers external, minified ESM).

Fixture Raw Gzip Brotli
Button (root) 177.6 KB 50.5 KB 43.6 KB
Button (components/button) 177.6 KB 50.5 KB 43.6 KB
Button + Dialog + Select (root) 300.5 KB 86.1 KB 72.0 KB
Button + Dialog + Select (component subpaths) 300.5 KB 86.1 KB 71.9 KB
Chart (root) 218.6 KB 63.0 KB 54.4 KB
Chart (components/chart) 218.6 KB 63.0 KB 54.4 KB
Badge (components/badge) 44.7 KB 11.7 KB 10.1 KB
Flow (components/flow) 208.9 KB 58.3 KB 50.6 KB
Button (primitives/button) 11.8 KB 4.3 KB 3.8 KB
Primitives barrel 650.8 KB 178.6 KB 139.9 KB
Code highlighting (code) 2.08 MB 468.3 KB 349.5 KB

npm tarball: 517 files, 1.44 MB packed, 6.75 MB unpacked.

⚠️ 22 flagged files in tarball (tests / raw scripts)
  • dist/blocks-source/resource-list/resource-list.test.tsx
  • scripts/component-registry/cache.ts
  • scripts/component-registry/discovery.ts
  • scripts/component-registry/example-cleanup.ts
  • scripts/component-registry/index.test.ts
  • scripts/component-registry/index.ts
  • scripts/component-registry/markdown-generator.ts
  • scripts/component-registry/metadata.ts
  • scripts/component-registry/props-filter.ts
  • scripts/component-registry/schema-generator.ts
  • scripts/component-registry/sub-components.ts
  • scripts/component-registry/types.ts
  • scripts/component-registry/utils.ts
  • scripts/component-registry/variant-parser.ts
  • scripts/css-build.ts
  • scripts/generate-primitives.ts
  • scripts/theme-generator/config.ts
  • scripts/theme-generator/generate-css.test.ts
  • scripts/theme-generator/generate-css.ts
  • scripts/theme-generator/index.ts
  • scripts/theme-generator/migrate.ts
  • scripts/theme-generator/types.ts

Report-only: no size thresholds are enforced yet.

Commit: 838707c4

@github-actions

Copy link
Copy Markdown
Contributor
Visual Regression Report — 33 changed, 12 unchanged

33 screenshot(s) with visual changes:

Button / Basic

342 px (0.39%) changed

Before After Diff
Before After Diff

Button / Variant: Ghost

194 px (0.22%) changed

Before After Diff
Before After Diff

Button / Loading State

21 px (0.02%) changed

Before After Diff
Before After Diff

Button / Link as Button

371 px (0.42%) changed

Before After Diff
Before After Diff

Button / Link with Tooltip

579 px (0.65%) changed

Before After Diff
Before After Diff

Dialog / Dialog With Actions

298 px (0.34%) changed

Before After Diff
Before After Diff

Dialog / Dialog Basic

316 px (0.36%) changed

Before After Diff
Before After Diff

Dialog / Dialog Sizes

2,864 px (3.23%) changed

Before After Diff
Before After Diff

Dialog / Dialog Alert

480 px (0.54%) changed

Before After Diff
Before After Diff

Dialog / Dialog Confirmation

1,226 px (1.38%) changed

Before After Diff
Before After Diff

Dialog / Custom Max Width

1,013 px (1.14%) changed

Before After Diff
Before After Diff

Dialog / Dialog With Select

130 px (0.15%) changed

Before After Diff
Before After Diff

Dialog / Dialog With Combobox

500 px (0.56%) changed

Before After Diff
Before After Diff

Dialog / Dialog With Dropdown

523 px (0.59%) changed

Before After Diff
Before After Diff

Dialog (Open)

0 px (0%) changed

Before After Diff
Before After Diff

Select / Select Basic

1,165 px (1.32%) changed

Before After Diff
Before After Diff

Select / Select Sizes

170 px (0.1%) changed

Before After Diff
Before After Diff

Select / Select Placement

3,198 px (2.21%) changed

Before After Diff
Before After Diff

Select / Select Dynamic Placement

3,619 px (3.48%) changed

Before After Diff
Before After Diff

Select / Select Without Label

758 px (0.86%) changed

Before After Diff
Before After Diff

Select / Select With Description

2,015 px (1.94%) changed

Before After Diff
Before After Diff

Select / Select With Error

1,730 px (1.66%) changed

Before After Diff
Before After Diff

Select / Select Placeholder

1,118 px (1.26%) changed

Before After Diff
Before After Diff

Select / Select With Tooltip

853 px (0.96%) changed

Before After Diff
Before After Diff

Select / Select Custom Rendering

1,071 px (1.21%) changed

Before After Diff
Before After Diff

Select / Select Loading

2,125 px (1.2%) changed

Before After Diff
Before After Diff

Select / Select Multiple

1,695 px (1.91%) changed

Before After Diff
Before After Diff

Select / Select Disabled Options

1,017 px (1.15%) changed

Before After Diff
Before After Diff

Select / Select Disabled Items

785 px (0.89%) changed

Before After Diff
Before After Diff

Select / Select Grouped

912 px (1.03%) changed

Before After Diff
Before After Diff

Select / Select Grouped With Disabled

1,189 px (1.34%) changed

Before After Diff
Before After Diff

Select / Select Long List

2,050 px (1.97%) changed

Before After Diff
Before After Diff

Select (Open)

2,444 px (0.01%) changed

Before After Diff
Before After Diff
12 screenshot(s) unchanged
  • Button / Variant: Primary
  • Button / Variant: Secondary
  • Button / Variant: Destructive
  • Button / Variant: Outline
  • Button / Variant: Secondary Destructive
  • Button / Sizes
  • Button / With Icon
  • Button / Icon Only
  • Button / Disabled State
  • Button / Title
  • Button / Disabled Link
  • Select / Select Complex

Generated by Kumo Visual Regression

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

Labels

None yet

1 participant