Skip to content

Improve Empty component responsiveness - #721

Open
pedromenezes1 wants to merge 6 commits into
mainfrom
pmenezes/responsive-empty-component
Open

Improve Empty component responsiveness#721
pedromenezes1 wants to merge 6 commits into
mainfrom
pmenezes/responsive-empty-component

Conversation

@pedromenezes1

@pedromenezes1 pedromenezes1 commented Aug 9, 2026

Copy link
Copy Markdown
Collaborator
  • Improve Empty spacing and typography across viewport sizes
  • Support React nodes in title and description
  • Stack and center example actions on mobile
  • Balance titles and improve description wrapping

Screenshots

Desktop

Before After
desktop 1 before desktop 1 after
desktop 2 before desktop 2 after
desktop 3 before desktop 3 after

Mobile

Before After
mobile 1 before mobile 1 after
mobile 2 before mobile 2 after
mobile 3 before mobile 3 after

  • Reviews
  • bonk has reviewed the change
  • automated review not possible because: local reviewer completed the review
  • Tests
  • Tests included/updated
  • Automated tests not possible - manual testing has been completed as follows: not run
  • Additional testing not necessary because: changes are styling and type-only
@pkg-pr-new

pkg-pr-new Bot commented Aug 9, 2026

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

commit: 3353415

@github-actions

github-actions Bot commented Aug 9, 2026

Copy link
Copy Markdown
Contributor

Docs Preview

View docs preview

Commit: 3af5ee6

@github-actions

github-actions Bot commented Aug 9, 2026

Copy link
Copy Markdown
Contributor
Visual Regression Report — 6 changed, 0 unchanged

6 screenshot(s) with visual changes:

Empty / Empty

18,043 px (5.42%) changed

Before After Diff
Before After Diff

Empty / Empty Basic

10,732 px (5.68%) changed

Before After Diff
Before After Diff

Empty / Empty Sizes

33,139 px (4.55%) changed

Before After Diff
Before After Diff

Empty / Empty With Command

11,536 px (3.99%) changed

Before After Diff
Before After Diff

Empty / Empty With Actions

9,948 px (3.3%) changed

Before After Diff
Before After Diff

Empty / Empty Minimal

0 px (0%) changed

Before After Diff
Before After Diff

Generated by Kumo Visual Regression

@pedromenezes1 pedromenezes1 self-assigned this Aug 9, 2026
@pedromenezes1
pedromenezes1 marked this pull request as ready for review August 9, 2026 02:10
<p className="max-w-140 text-center text-kumo-subtle">{description}</p>
)}
{description && (
<p className="max-w-140 text-center text-base text-pretty text-kumo-subtle sm:text-lg">

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i'm still not convinced we should force max-w-140...

@pedromenezes1

Copy link
Copy Markdown
Collaborator Author

/bonk

@ask-bonk

ask-bonk Bot commented Aug 9, 2026

Copy link
Copy Markdown
Contributor

Here is a summary of the activity on PR #721: Improve Empty component responsiveness.

###What changed
The PR improves the Empty component across viewport sizes with three main updates:

  • Responsive layout: Adjusts spacing and typography for desktop and mobile.
  • Flexible content: Changes title and description prop types from string to ReactNode to support richer content.
  • Demo polish: Stacks and centers example actions on mobile, balances titles, and improves description wrapping.

Files changed: 3 (+29 / −13)

  • Added a changeset (.changeset/empty-responsive-content.md)
  • Updated the component source (packages/kumo/src/components/empty/empty.tsx)
  • Updated the Astro demo (packages/kumo-docs-astro/src/components/demos/EmptyDemo.tsx)

###CI / automation feedback

  • Preview links: A preview package (pkg-pr-new) and docs preview were generated.
  • Visual regression: 6 Empty component screenshots showed changes (ranging from 0% to ~5.7% pixel delta). Only the "Empty Minimal" variant remained unchanged.

###Review activity

  • Self-review: Author pedromenezes1 left a review comment on empty.tsx:111 questioning the decision to force max-w-140.
  • PR checklist: Marked as "automated review not possible" (local reviewer completed) and "additional testing not necessary" (styling and type-only changes).

github run

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

Labels

None yet

1 participant