feat(components): add medium and small sizes to EmptyState - #2019
feat(components): add medium and small sizes to EmptyState#2019ShreyasGit51283 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
left a comment
cmwinters
left a comment
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.
|
Closing in favour of launchdarkly/gonfalon#71171, which ports this change to gonfalon now that LaunchPad lives there under The commit was replayed as a patch, so the component change is identical to what was reviewed here. @cmwinters' spacing feedback is folded into that PR rather than left as a follow-up — the heading-to-description gap tightens to |
2 participants
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