[Storybook] Update stitches + conventions #1048
Conversation
| @@ -466,7 +455,7 @@ const itemClass = css({ | |||
| }); | |||
|
|
|||
| const subTriggerClass = css(itemClass, { | |||
| '&[data-state="open"]': { | |||
| '&:not(:focus)[data-state="open"]': { | |||
There was a problem hiding this comment.
This is the only meaningful change I had to make after checking every single story manually. It seems we were relying on some specificity bug from stitches before.
| @@ -521,7 +512,7 @@ const animatedOverlayClass = css(overlayClass, { | |||
|
|
|||
| const animatedContentClass = css(contentDefaultClass, { | |||
| '&[data-state="open"]': { | |||
| animation: `${fadeIn} ${scaleIn} 300ms ease-out`, | |||
| animation: `${fadeIn} 150ms ease-out, ${scaleIn} 200ms ease-out`, | |||
There was a problem hiding this comment.
This is another change I made, not sure if it ever worked, but I noticed it definitely didn't with this new version (ie. you need 2 separate animations, comma separated).
andy-hook
force-pushed
the
storybook-stitches-update
branch
from
05fc91d
to
bda4fe3
Compare
| @@ -73,138 +59,160 @@ export const Modality = () => { | |||
| <div | |||
| style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '110vh' }} | |||
| > | |||
| <div style={{ display: 'grid', gridGap: 50 }}> | |||
| <div style={{ display: 'grid', gap: 50 }}> | |||
There was a problem hiding this comment.
gripGap was deprecated long ago and no longer renders with that syntax in latest Stitches
| @@ -83,7 +83,7 @@ | |||
| "replace-in-files": "^3.0.0", | |||
| "start-server-and-test": "^1.12.5", | |||
| "ts-jest": "^26.2.0", | |||
| "typescript": "^3.9.7" | |||
| "typescript": "^4.6.3" | |||
There was a problem hiding this comment.
As suspected, this resolved the type issue.
package.json
Outdated
| "@stitches/core": "^1.2.7", | ||
| "@storybook/addon-storysource": "^6.4.21", | ||
| "@storybook/react": "^6.4.21", |
There was a problem hiding this comment.
| @@ -2,7 +2,6 @@ | |||
| "extends": "./tsconfig.base.json", | |||
| "compilerOptions": { | |||
| "paths": { | |||
| "*": ["node_modules/*"], | |||
There was a problem hiding this comment.
| @@ -549,7 +559,7 @@ const buttonClass = css({ | |||
| border: '1px solid black', | |||
| borderRadius: 4, | |||
| background: 'gainsboro', | |||
| font: 'inherit', | |||
There was a problem hiding this comment.
This is the cause of the chromatic diff prompt, for some reason font wasn't rendering in the previous Stitches version (we usually use fontFamily)
I've updated it to use fontFamily just for consistency with the other stories though it's functionally the same now anyway since it was seemingly fixed.
Co-authored-by: Benoît Grélard <benoit.grelard@gmail.com>
andy-hook
force-pushed
the
storybook-stitches-update
branch
from
1166e1a
to
763bd26
Compare
* Upgrade Stitches Co-authored-by: Benoît Grélard <benoit.grelard@gmail.com> * Upgrade TypeScript * Upgrade Storybook * Resolve type issue with Cypress * Update font consistency in story * Refresh yarn.lock * Upgrade dependencies to fix typedefs issues * Update paths in stories * Update paths in test files * Upgrade to storybook next to get React 18 support * Fix Dialog story and skip genuine test failure Co-authored-by: Andy Hook <hello@andyhook.dev>
🔥 NOTE: I have
--no-verify'ed this for now to put the PR up but, as discussed on Slack, the pre-push is not happy with the stitches types… However, everything is fine on CI, build, storybook build, chromatic, etcI've called out the meaningful changes I've made, but apart from those, it's mainly just a lot of replace which I explain below.
This PR does a few things:
stitchesto latest (also switch to@stitches/coreas we were only using the core for a while anyway)(), thankfully we were consistent with our naming so I was able to do this with a regex replace 😀$anymorekeyframesis a new exportboxShadowbut aren't mapped now, so had to update to$colors$…import * as …for all multi-part primitives consistently