Skip to content

Dashboard: Add compact variant to EmptyState.Wrapper#109807

Open
StevenDufresne wants to merge 4 commits intotrunkfrom
add/empty-state-compact-wrapper
Open

Dashboard: Add compact variant to EmptyState.Wrapper#109807
StevenDufresne wants to merge 4 commits intotrunkfrom
add/empty-state-compact-wrapper

Conversation

@StevenDufresne
Copy link
Copy Markdown
Contributor

@StevenDufresne StevenDufresne commented Apr 3, 2026

Part of #109805

Proposed Changes

  • Add isCompact prop to EmptyState.Wrapper that sizes the wrapper to its content instead of filling the remaining viewport height.
  • Use compact EmptyState.Wrapper for the blocked sites empty state.
  • Add CompactWrapper Storybook story.
Header Header
Screenshot 2026-04-03 at 9 22 03 AM Screenshot 2026-04-03 at 9 22 13 AM

Why are these changes being made?

The existing EmptyState.Wrapper always expands to fill the viewport, which doesn't suit all contexts. For example, the blocked sites page just needs a simple card-sized empty state. The isCompact variant removes the min-height calculation and extra padding so the wrapper shrinks to fit its content.

This is an alternative approach to #109805, which addresses the same blocked sites empty state.

Testing Instructions

  • Visit the blocked sites page in the Dashboard with no blocked sites — the empty state should render as a compact card.
  • Check Storybook: client/dashboard/EmptyStateCompactWrapper story.
  • Verify existing EmptyState.Wrapper usage (e.g., empty sites state) is unaffected.

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests for your changes?
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • Have you checked for TypeScript, React or other console errors?
  • Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
  • Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
  • Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
    • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
  • For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Scope the compact padding reset to break-medium to match the base rule,
and use a flat selector instead of nesting.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@matticbot
Copy link
Copy Markdown
Contributor

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

  • agents-manager
  • blaze-dashboard
  • help-center
  • notifications
  • odyssey-stats
  • wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/empty-state-compact-wrapper on your sandbox.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@StevenDufresne StevenDufresne marked this pull request as ready for review April 3, 2026 00:23
@StevenDufresne StevenDufresne requested a review from a team as a code owner April 3, 2026 00:23
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Apr 3, 2026
Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants