Skip to content

style(layer-dialog): refine dialog surfaces - #796

Merged
mattrothenberg merged 2 commits into
cloudflare:feat/strict-layer-dialogfrom
hkfoster:kfoster/layer-dialog-visual-polish
Sep 10, 2026
Merged

style(layer-dialog): refine dialog surfaces#796
mattrothenberg merged 2 commits into
cloudflare:feat/strict-layer-dialogfrom
hkfoster:kfoster/layer-dialog-visual-polish

Conversation

@hkfoster

Copy link
Copy Markdown
Contributor

Summary

  • rely on the scroll mask instead of a conditional title divider
  • refine dialog spacing, typography, close-button sizing, and surface radii
  • soften the dismiss-button hover treatment and emphasize destructive confirmation copy

Follow-up to #793.

Validation

  • pnpm --filter @cloudflare/kumo build

  • pnpm --filter @cloudflare/kumo typecheck

  • pnpm --filter @cloudflare/kumo exec vp test run --project=unit src/components/layer-dialog/layer-dialog.test.tsx

  • pnpm --filter @cloudflare/kumo-docs-astro typecheck

  • pnpm --filter @cloudflare/kumo lint

  • Reviews

  • bonk has reviewed the change

  • automated review not possible because: final visual judgment requires human design review

  • Tests

  • Tests included/updated

  • Automated tests not possible - manual testing has been completed as follows: reviewed all LayerDialog demos locally

  • Additional testing not necessary because: behavior is unchanged and existing LayerDialog tests pass

@pkg-pr-new

pkg-pr-new Bot commented Sep 10, 2026

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

commit: 4e84ab4

@github-actions

github-actions Bot commented Sep 10, 2026

Copy link
Copy Markdown
Contributor

Docs Preview

View docs preview

Commit: 4e84ab4

@github-actions

github-actions Bot commented Sep 10, 2026

Copy link
Copy Markdown
Contributor
Visual Regression Report — 17 changed, 28 unchanged

17 screenshot(s) with visual changes:

Button / Loading State

36 px (0.04%) changed

Before After Diff
Before After Diff

Dialog / Dialog Basic

316 px (0.36%) changed

Before After Diff
Before After Diff

Dialog / Dialog Confirmation

1,228 px (1.39%) changed

Before After Diff
Before After Diff

Dialog / Custom Max Width

951 px (1.07%) changed

Before After Diff
Before After Diff

Dialog (Open)

0 px (0%) changed

Before After Diff
Before After Diff

Select / Select Basic

914 px (1.03%) changed

Before After Diff
Before After Diff

Select / Select Sizes

2,926 px (1.8%) changed

Before After Diff
Before After Diff

Select / Select Dynamic Placement

3,376 px (3.24%) 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,199 px (2.11%) changed

Before After Diff
Before After Diff

Select / Select With Tooltip

1,022 px (1.15%) changed

Before After Diff
Before After Diff

Select / Select Loading

2,110 px (1.2%) changed

Before After Diff
Before After Diff

Select / Select Complex

1,796 px (1.73%) changed

Before After Diff
Before After Diff

Select / Select Disabled Options

1,217 px (1.37%) changed

Before After Diff
Before After Diff

Select / Select Grouped With Disabled

1,478 px (1.67%) changed

Before After Diff
Before After Diff

Select / Select Long List

2,023 px (1.94%) changed

Before After Diff
Before After Diff

Select (Open)

1,183 px (0%) changed

Before After Diff
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
  • Button / Link with Tooltip
  • Button / Disabled Link
  • Dialog / Dialog With Actions
  • Dialog / Dialog Sizes
  • Dialog / Dialog Alert
  • Dialog / Dialog With Select
  • Dialog / Dialog With Combobox
  • Dialog / Dialog With Dropdown
  • Select / Select Placement
  • Select / Select With Error
  • Select / Select Placeholder
  • Select / Select Custom Rendering
  • Select / Select Multiple
  • Select / Select Disabled Items
  • Select / Select Grouped

Generated by Kumo Visual Regression

@github-actions

Copy link
Copy Markdown
Contributor

📐 Bundle Size

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

Fixture Raw Gzip Brotli
Button (root) 174.6 KB 49.9 KB 43.1 KB
Button (components/button) 174.5 KB 49.9 KB 43.0 KB
Button + Dialog + Select (root) 299.5 KB 85.8 KB 71.8 KB
Button + Dialog + Select (component subpaths) 299.5 KB 85.9 KB 71.8 KB
Chart (root) 218.6 KB 63.4 KB 54.7 KB
Chart (components/chart) 218.5 KB 63.3 KB 54.7 KB
Badge (components/badge) 44.7 KB 11.7 KB 10.0 KB
Flow (components/flow) 208.9 KB 58.3 KB 50.5 KB
Button (primitives/button) 12.2 KB 4.4 KB 3.9 KB
Primitives barrel 635.8 KB 176.9 KB 139.3 KB
Code highlighting (code) 2.08 MB 467.9 KB 349.2 KB

npm tarball: 535 files, 1.47 MB packed, 6.84 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: 4e84ab4c

@mattrothenberg
mattrothenberg merged commit f4d2141 into cloudflare:feat/strict-layer-dialog Sep 10, 2026
12 of 14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants