refactor(sensitive-input): rewrite on InputGroup + anchored toast by mattrothenberg · Pull Request #501 · cloudflare/kumo

mattrothenberg · 2026-05-08T15:38:17Z

Summary

Rewrites SensitiveInput as a thin wrapper around InputGroup, replacing 500+ lines of hand-rolled layout (manual mask overlay, absolute positioning, per-size padding duplication, role="button" container, execCommand fallback) with composable primitives
Copy confirmation now uses an anchored Base UI Toast positioned above the copy button instead of icon-swapping with a timeout
Action button tooltips use a scoped inverted dark style (bg-kumo-contrast/text-kumo-base) that adapts to light/dark mode
Toast dismisses immediately on blur (e.g. tabbing to reveal button) for snappy feedback
Consumer onBlur is properly forwarded before masking logic (verified against stratus Formik usage)
No public API changes — all existing props (onChange, onValueChange, onBlur, error, onCopy, etc.) continue to work

Audited against real-world usage in cloudflare/stratus (CustomHeaders.tsx, ImportVariablesSecretsDialog.tsx) — no breaking changes.

Reviews
bonk has reviewed the change
automated review not possible because: UX refactor needs visual review
Tests
Additional testing not necessary because: existing unit tests pass, no API changes, verified against stratus consumers

Replace 500+ lines of hand-rolled layout with InputGroup composition. Copy confirmation now uses an anchored Base UI Toast positioned above the copy button instead of icon-swapping with a timeout. Action button tooltips use an inverted dark style (bg-kumo-contrast/text-kumo-base) that adapts to light/dark mode. - 503 → ~396 lines, drastically simpler logic - Removes: manual mask overlay, role="button" container, execCommand fallback, per-size padding duplication, custom focus management - Adds: anchored toast for copy feedback, inverted tooltips - Keeps: mask-on-blur, Escape to re-mask, all sizes, Field wrapper - No public API changes

Formik usage in stratus passes onBlur for field touch tracking. Previously onBlur fell into ...inputProps but was overridden by our internal handleBlur. Now explicitly destructured and called before the mask-on-blur logic.

pkg-pr-new · 2026-05-08T15:40:42Z

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

commit: 032ab8a

github-actions · 2026-05-08T15:41:49Z

Docs Preview

View docs preview

Commit: f553597

github-actions · 2026-05-08T15:44:20Z

Visual Regression Report — 10 changed, 28 unchanged

10 screenshot(s) with visual changes:

Button / Loading State

5 px (0%) changed

Before	After	Diff

Select / Select Sizes

429 px (0.23%) changed

Before	After	Diff

Select / Select With Field

635 px (0.54%) changed

Before	After	Diff

Select / Select With Tooltip

461 px (0.45%) 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 Disabled Items

176 px (0.17%) changed

Before	After	Diff

Select / Select Grouped With Disabled

736 px (0.72%) changed

Before	After	Diff

Select / Select Long List

898 px (0.76%) changed

Before	After	Diff

Select (Open)

1,942 px (0.01%) changed

Before	After	Diff

28 screenshot(s) unchanged

Button / Basic
Button / Variant: Primary
Button / Variant: Secondary
Button / Variant: Ghost
Button / Variant: Destructive
Button / Variant: Outline
Button / Variant: Secondary Destructive
Button / Sizes
Button / With Icon
Button / Icon Only
Button / Disabled State
Button / Title
Button / Link as Button
Dialog / Dialog With Actions
Dialog / Dialog Basic
Dialog / Dialog Alert
Dialog / Dialog Confirmation
Dialog / Dialog With Select
Dialog / Dialog With Combobox
Dialog / Dialog With Dropdown
Dialog (Open)
Select / Select Basic
Select / Select Without Label
Select / Select Placeholder
Select / Select Custom Rendering
Select / Select Complex
Select / Select Disabled Options
Select / Select Grouped

Generated by Kumo Visual Regression

- Copy button only renders when onCopy is provided (backwards-compatible) - Add labels prop (SensitiveInputLabels) for i18n following the Pagination/ClipboardText pattern — all 7 strings customizable - Export SensitiveInputLabels type - Update docs: Basic, With Copy Button, i18n, and all existing sections - Hero demo shows full experience with copy + anchored toast

mattrothenberg · 2026-05-08T16:15:12Z

/bonk what do you think about these changes

…undant type

ask-bonk · 2026-05-08T16:21:03Z

UnknownError: ProviderInitError

github run

ask-bonk · 2026-05-08T16:21:04Z

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

View workflow run · To retry, trigger Bonk again.

mattrothenberg · 2026-05-08T16:21:55Z

/bonk

pedromenezes1 · 2026-05-08T16:25:57Z

good addition with the labels prop

ask-bonk · 2026-05-08T16:27:47Z

UnknownError: ProviderInitError

github run

pedromenezes1 · 2026-05-08T16:28:26Z

I don't think I planned how it would look with two buttons in a single InputGroup.Addon. it might be a good opportunity to tweak it if you think gap-1.5 leaves them too close together.

mattrothenberg · 2026-05-08T16:29:19Z

@pedromenezes1 Yep, I think the double button will be controversial, so I wanted to put this up and get feedback :)

mattrothenberg added 3 commits May 8, 2026 11:10

polish(sensitive-input): dismiss toast on blur, update docs description

0d02254

fix(sensitive-input): forward onBlur to consumer before masking

97214d1

Formik usage in stratus passes onBlur for field touch tracking. Previously onBlur fell into ...inputProps but was overridden by our internal handleBlur. Now explicitly destructured and called before the mask-on-blur logic.

fix: lint errors — unused variant param, text-kumo-inverse token, red…

da47195

…undant type

pedromenezes1 reviewed May 8, 2026

View reviewed changes

Comment thread packages/kumo/src/components/sensitive-input/sensitive-input.tsx Outdated

fix: use Icon suffix for phosphor imports

9659ad9

fix: match Base UI tooltip animation properties exactly

032ab8a

Conversation

mattrothenberg commented May 8, 2026

Summary

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented May 8, 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 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Button / Loading State

Select / Select Sizes

Select / Select With Field

Select / Select With Tooltip

Select / Select Loading

Select / Select Multiple

Select / Select Disabled Items

Select / Select Grouped With Disabled

Select / Select Long List

Select (Open)

Uh oh!

mattrothenberg commented May 8, 2026

Uh oh!

ask-bonk Bot commented May 8, 2026

Uh oh!

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

Uh oh!

Uh oh!

mattrothenberg commented May 8, 2026

Uh oh!

Uh oh!

pedromenezes1 commented May 8, 2026

Uh oh!

ask-bonk Bot commented May 8, 2026

Uh oh!

pedromenezes1 commented May 8, 2026

Uh oh!

mattrothenberg commented May 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

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

edited

Loading

github-actions Bot commented May 8, 2026 •

edited

Loading

github-actions Bot commented May 8, 2026 •

edited

Loading

ask-bonk Bot commented May 8, 2026 •

edited

Loading