feat(badge): added dot style variant by najlaskr · Pull Request #514 · cloudflare/kumo

najlaskr · 2026-05-14T17:03:18Z

Added dot style variant for Badges that need a subtle visual cue (i.e. on Tables)

Reviews
- bonk has reviewed the change
- automated review not possible because: visual updates, no access to bonk
Tests
- Tests included/updated
- Automated tests not possible - manual testing has been completed as follows: ran pnpm lint, pnpm typecheck and visual changes
- Additional testing not necessary because:

pkg-pr-new · 2026-05-14T17:09:21Z

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

commit: c4bd68e

github-actions · 2026-05-14T17:10:21Z

Docs Preview

View docs preview

Commit: c4bd68e

github-actions · 2026-05-14T17:12:44Z

Visual Regression Report — 24 changed, 14 unchanged

24 screenshot(s) with visual changes:

Button / Variant: Primary

468 px (0.46%) changed

Before	After	Diff

Button / Variant: Secondary

161 px (0.16%) changed

Before	After	Diff

Button / Variant: Destructive

278 px (0.27%) changed

Before	After	Diff

Button / Variant: Secondary Destructive

693 px (0.68%) changed

Before	After	Diff

Button / Sizes

702 px (0.69%) changed

Before	After	Diff

Button / Icon Only

32 px (0.03%) changed

Before	After	Diff

Button / Loading State

197 px (0.19%) changed

Before	After	Diff

Button / Disabled State

117 px (0.12%) changed

Before	After	Diff

Dialog / Dialog With Actions

200 px (0.2%) changed

Before	After	Diff

Dialog / Dialog Basic

241 px (0.24%) changed

Before	After	Diff

Dialog / Dialog With Select

130 px (0.13%) changed

Before	After	Diff

Dialog / Dialog With Combobox

130 px (0.13%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

298 px (0.29%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Without Label

160 px (0.16%) changed

Before	After	Diff

Select / Select With Field

635 px (0.54%) changed

Before	After	Diff

Select / Select Placeholder

418 px (0.41%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select / Select Multiple

556 px (0.55%) changed

Before	After	Diff

Select / Select Complex

1,305 px (1.1%) changed

Before	After	Diff

Select / Select Disabled Items

251 px (0.25%) changed

Before	After	Diff

Select / Select Grouped

347 px (0.34%) changed

Before	After	Diff

Select / Select Long List

1,428 px (1.21%) changed

Before	After	Diff

Select (Open)

0 px (0%) changed

Before	After	Diff

14 screenshot(s) unchanged

Button / Basic
Button / Variant: Ghost
Button / Variant: Outline
Button / With Icon
Button / Title
Button / Link as Button
Dialog / Dialog Alert
Dialog / Dialog Confirmation
Select / Select Basic
Select / Select Sizes
Select / Select With Tooltip
Select / Select Custom Rendering
Select / Select Disabled Options
Select / Select Grouped With Disabled

Generated by Kumo Visual Regression

mattrothenberg · 2026-05-20T17:42:01Z

/bonk please review

- Move dot colors into KUMO_BADGE_VARIANTS as a proper dimension with descriptions, matching the Button component's variant access pattern - Rename `style` prop to `appearance` to avoid collision with React's built-in `style` prop (CSSProperties) - Use resolveVariant for dotColor lookups from KUMO_BADGE_VARIANTS - Add badge.test.tsx with coverage for rendering, dot appearance, dot colors per variant, and unknown variant safety - Update variant-safety.test.ts to cover the new appearance dimension - Add descriptive text to dot badges docs section

mattrothenberg · 2026-05-20T18:00:06Z

/bonk what do you think?

ask-bonk · 2026-05-20T18:27:42Z

@mattrothenberg Bonk workflow failed. Check the logs for details.

View workflow run · To retry, trigger Bonk again.

feat(badge): added dot style variant

cf9dd1a

geoquant approved these changes May 14, 2026

View reviewed changes

mattrothenberg reviewed May 14, 2026

View reviewed changes

Comment thread packages/kumo/src/components/badge/badge.tsx Outdated

mattrothenberg reviewed May 14, 2026

View reviewed changes

Comment thread packages/kumo/src/components/badge/badge.tsx Outdated

najlaskr added 4 commits May 15, 2026 07:47

fix(buttons): added shrink-0 and variant access pattern

ca39c16

Merge branch 'main' into najla/dot-badges

ea66d42

fix(badges): color + styling updates

d8e8dbe

Merge branch 'main' into najla/dot-badges

154994d

mattrothenberg force-pushed the najla/dot-badges branch from 2a31eb8 to 76f0d5f Compare May 20, 2026 17:47

chore(changeset): bump to minor for new appearance prop

c4bd68e

mattrothenberg merged commit b68caba into cloudflare:main May 20, 2026
13 checks passed

Conversation

najlaskr commented May 14, 2026

Uh oh!

pkg-pr-new Bot commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Docs Preview

Uh oh!

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

Uh oh!

Button / Variant: Primary

Button / Variant: Secondary

Button / Variant: Destructive

Button / Variant: Secondary Destructive

Button / Sizes

Button / Icon Only

Button / Loading State

Button / Disabled State

Dialog / Dialog With Actions

Dialog / Dialog Basic

Dialog / Dialog With Select

Dialog / Dialog With Combobox

Dialog / Dialog With Dropdown

Dialog (Open)

Select / Select Without Label

Select / Select With Field

Select / Select Placeholder

Select / Select Loading

Select / Select Multiple

Select / Select Complex

Select / Select Disabled Items

Select / Select Grouped

Select / Select Long List

Select (Open)

Uh oh!

Uh oh!

Uh oh!

mattrothenberg commented May 20, 2026

Uh oh!

mattrothenberg commented May 20, 2026

Uh oh!

Uh oh!

ask-bonk Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pkg-pr-new Bot commented May 14, 2026 •

edited

Loading

github-actions Bot commented May 14, 2026 •

edited

Loading

github-actions Bot commented May 14, 2026 •

edited

Loading

ask-bonk Bot commented May 20, 2026 •

edited

Loading