fix(Card): correct isInteractive prop's related boxshadow animation #3226
Conversation
|
View your CI Pipeline Execution ↗ for commit dc129d4 ☁️ Nx Cloud last updated this comment at |
LinKCoding
changed the title
aresnik11
left a comment
aresnik11
left a comment
There was a problem hiding this comment.
Looks way less jumpy to me!!
dreamwasp
left a comment
dreamwasp
left a comment
There was a problem hiding this comment.
my tiniest nit is that the border radius doesn't look like it matches here for the configurable border radius - this is such a huge improvement i think its worth shipping as is and creating another ticket
packages/gamut/src/Card/styles.tsx
Outdated
| }, | ||
| }, | ||
| initialOutline: { | ||
| boxShadow: `-6px 6px 0 0px ${theme.colors['background-current']}, -6px 6px 0 1px ${theme.colors['border-primary']}`, |
There was a problem hiding this comment.
i think it might be worth is in this file to make 8 and 6 a named constant or add comments here to make it clear what those values are / where they come from mathematically
|
📬 Published Alpha Packages: |
|
🚀 Styleguide deploy preview ready! Preview URL: https://695bfdd42932d04a0d7b7035--gamut-preview.netlify.app |
Overview
Fixes Card
boxShadowstyling for theisInteractiveoutline variant by adding aninitialanimation and separate animations foroutlineInitialandoutlineAnimatePR Checklist
Testing Instructions
Here's how the non-animated, but isInteractive states look:
Here's how the animated states look:
isInteractivestoryoutlinevariant specifically and notice that there's no longer a jump from outline to boxshadowPR Links and Envs