core: implement wells, slabs and floating sheets primitive #40
+413
−60
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.
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 theLayer
components, and nest it under a doc entry.Alternative doc and file naming I've thought of was
Elevation
, with an exportElevation.Slab
,Elevation.Well
orElevation.FloatingSheet
, however those might not be used together, so I opted not to.Elevation
vsLayer
doc and file name entry does seem to make more sense though, but I'd love some opinions hereCopied from getsentry#101055
Original PR: getsentry#101055