feat(components): add medium and small sizes to EmptyState - #2019
Open
ShreyasGit51283 wants to merge 1 commit into
Open
feat(components): add medium and small sizes to EmptyState#2019ShreyasGit51283 wants to merge 1 commit into
ShreyasGit51283 wants to merge 1 commit into
Conversation
EmptyState only had a large size, so empty states inside cards, panels, and table bodies had to be hand-built. It now scales its BadgeIcon, heading, description, and buttons together from a single size prop. Spacing is uniform across the sizes, so only the type scale and the control sizes change. Medium and small use the medium heading weight rather than semibold. BadgeIcon gains a BadgeIconContext, mirroring the existing IconContext, so a composing component can drive its size and the badge cannot drift out of scale with its container. Only large carries padding; medium and small leave it to the surrounding container, which is what controls density at those sizes. Co-authored-by: Cursor <cursoragent@cursor.com>
🦋 Changeset detectedLatest commit: f0c67c3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 10 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
commit: |
cmwinters
reviewed
Sep 2, 2026
cmwinters
left a comment
cmwinters
left a comment
Contributor
There was a problem hiding this comment.
Looking good, just a few nits on spacing:
| Before | After |
|---|---|
 |
 |
 |
 |
- We want to adjust the space between the
HeadingandTextfor the medium and small variants - Add
grid-template-rows: min-content min-content var(--lp-spacing-200) min-content min-content;to your selectors for the medium and small sizes. - Loom https://www.loom.com/share/ca3e3ad09521407ebb6a68738ab18a8e
Also, this PR in on LaunchPad UI which is being deprecated because LaunchPad has moved to Gonfalon. We shouldn't merge this. Let's open a similar PR on gonfalon.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replaces #2018, which was built against an earlier revision of the Figma component. That component set was rebuilt, so this is a clean PR against the current design rather than a series of corrections.
Summary
EmptyStateonly had alargesize, so empty states inside cards, panels, and table bodies had to be hand-built. This addsmediumandsmallfrom the current Figma component set.EmptyStatenow scales itsBadgeIcon, heading, description, and buttons together from a singlesizeprop, so you setsizeonEmptyStaterather than on each child. To make that work,BadgeIcongains aBadgeIconContextthat mirrors the existingIconContext— the context value wins over the prop, so the badge cannot drift out of scale with its container. Existing<BadgeIcon size="large">calls inside anEmptyStatekeep working; the prop is just redundant now, and it has been dropped from the stories and tests.Spacing is uniform across all three sizes in the design (24px between blocks, 8px between heading and description), so only the type scale and the control sizes vary. That keeps the CSS small:
.mediumand.smalleach override just two custom properties for the heading and description type.Only
largecarries padding.mediumandsmallleave it to the surrounding card, panel, or table body, since that is what controls density at those sizes.Screenshots (if appropriate)
Rendered in Storybook and asserted against the Figma spec. All 21 measurements match:
See
Recipes/EmptyStatein Storybook for the newLarge,Medium, andSmallstories.Testing approaches
packages/components/__tests__/EmptyState.spec.tsx: a parameterised check that each size applies the right root, badge, and button classes, plus one asserting thatEmptyStateoverrides asizeset directly onBadgeIcon. Fullpackages/componentsandpackages/iconssuites pass (123 tests).tsc --noEmit,stylelint,oxlint, andoxfmt --checkall pass.Notes for the reviewer
Code Connect is narrower than before, deliberately. The rebuilt component set only exposes
Heading,Description, and the variant property. Three properties the old mapping used —Border?,Icon, andButton label— no longer exist on it; the latter two moved down into the nested Badge Icon and Button instances. Reaching them again needsfigma.nestedProps, which has no precedent in this repo, andfigma connect publishonly runs on push tomain, so a bad mapping would not surface until after merge. I mapped only the properties I could verify and left the icon and button label as literals in the example. Restoring them viafigma.nestedPropsis a good follow-up once someone can validate against Figma with a token.Two things worth raising with the designer. The variant property is unnamed, so it reads as
Property 1with aDefaultoption instead ofSize/Large; the mapping handles it but would be less brittle if renamed. Separately, the Figma component has zero padding on every variant includingDefault, whilelargeships 28px today — that predates this PR, and removing it would visibly change every existingEmptyState, so I left it alone.Not included: the per-variant widths (400 for Default, 320 for the others) and the 560px max-width. Fixed widths felt like the container's job, but happy to add them if you disagree.
Made with Cursor