Skip to content

Conversation

jasonyuezhang
Copy link
Owner

This PR adds the wells, slabs and sheets as a first class primitive to our design system.

I would like to use this primitive to build cards, implement the tooltip via floating sheet, and even use it for buttons at some point.

There are a few things that are somewhat tricky with the Slab component, the first one being the fact that we need to wrap a it in a container element if we want to avoid artifacts during translation. This later makes styling and dealing with props a bit tricky, as we would need to forward some props to the container element, but not all (width vs border as an example). I am punting this a bit down the line, in hopes that a pattern emerges that is good and suitable for reuse. For now, I have been able to reuse this component to rebuild what was essentially a custom styled LinkButton in our stories.

See deploy preview on the usage. Documentation is currently under a Layer entry, however I'm not even sure we want to expose this component directly for use, and may keep it internal to the design system. Alternatively, we might want to create entries for each of the Layer components, and nest it under a doc entry.

Alternative doc and file naming I've thought of was Elevation, with an export Elevation.Slab, Elevation.Well or Elevation.FloatingSheet, however those might not be used together, so I opted not to. Elevation vs Layer doc and file name entry does seem to make more sense though, but I'd love some opinions here


Copied from getsentry#101055
Original PR: getsentry#101055

Copy link

Add Elevation Primitives (Slab, Well, FloatingSheet) to Design System

This PR introduces new first-class elevation primitives-Slab, Well, and FloatingSheet-to the design system. These components are intended to standardize elevation patterns across the UI, providing reusable styling for cards, overlays, tooltips, and other interactive or layered elements. The implementation includes supporting TypeScript, example usages within documentation, and integration into story navigation via a refactor of the storyFooter. Documentation has been updated to describe use cases, variants, and prop API, with cross-linking in design guidelines.

Key Changes

• Added new elevation primitives in static/app/components/core/layout/elevation.tsx (Slab, Well, FloatingSheet) with support for variants and responsive sizes.
• Provided corresponding documentation and API references in static/app/components/core/layout/elevation.mdx and updated design guidelines in static/app/components/core/principles/layering-and-elevation/layering-and-elevation.mdx.
• Refactored static/app/stories/view/storyFooter.tsx to use the new Slab component for navigation cards instead of a custom Card implementation.
• Adjusted static/app/components/core/link/link.tsx to add the aria-disabled attribute for disabled links, improving accessibility and integration with elevation primitives.
• Minor cleanup in static/app/components/core/button/styles.chonk.tsx to streamline opacity logic.

Affected Areas

static/app/components/core/layout/elevation.tsx
static/app/components/core/layout/elevation.mdx
static/app/stories/view/storyFooter.tsx
static/app/components/core/link/link.tsx
static/app/components/core/principles/layering-and-elevation/layering-and-elevation.mdx
static/app/components/core/button/styles.chonk.tsx

This summary was automatically generated by @propel-code-bot

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