Upgrade Stitches

Co-authored-by: Benoît Grélard <[email protected]>
radix-ui · Apr 13, 2022 · 365e379 · 365e379
1 parent 23261ba
commit 365e379
Show file tree

Hide file tree

Showing 35 changed files with 4,386 additions and 4,279 deletions.
diff --git a/.yarn/versions/c8114ce3.yml b/.yarn/versions/c8114ce3.yml
@@ -0,0 +1,2 @@
+declined:
+  - primitives
diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
     "@babel/template": "^7.12.13",
     "@parcel/babel-plugin-transform-runtime": "^2.0.0-nightly.1823",
     "@parcel/babel-preset-env": "^2.0.0-alpha.3",
-    "@stitches/react": "0.0.3-canary.4",
+    "@stitches/core": "^1.2.7",
     "@storybook/addon-storysource": "6.1.0-beta.4",
     "@storybook/react": "6.1.0-beta.4",
     "@testing-library/cypress": "^7.0.6",

diff --git a/packages/react/accordion/src/Accordion.stories.tsx b/packages/react/accordion/src/Accordion.stories.tsx
diff --git a/packages/react/alert-dialog/src/AlertDialog.stories.tsx b/packages/react/alert-dialog/src/AlertDialog.stories.tsx
diff --git a/packages/react/announce/src/Announce.stories.tsx b/packages/react/announce/src/Announce.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Announce } from './Announce';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { Announce } from './Announce';
 
 export default { title: 'Components/Announce' };
 

diff --git a/packages/react/aspect-ratio/src/AspectRatio.stories.tsx b/packages/react/aspect-ratio/src/AspectRatio.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { AspectRatio } from './AspectRatio';
 import { css } from '../../../../stitches.config';
+import { AspectRatio } from './AspectRatio';
 
 export default { title: 'Components/AspectRatio' };
 
@@ -14,7 +14,7 @@ const image = (
 
 export const Styled = () => (
   <div style={{ width: 500 }}>
-    <AspectRatio className={rootClass}>
+    <AspectRatio className={rootClass()}>
       <h1>Default ratio (1/1)</h1>
     </AspectRatio>
   </div>
@@ -43,7 +43,7 @@ export const Chromatic = () => (
   <>
     <h1>Default ratio</h1>
     <div style={{ width: 300 }}>
-      <AspectRatio className={rootClass}>
+      <AspectRatio className={rootClass()}>
         <p>Default ratio (1/1)</p>
       </AspectRatio>
     </div>

diff --git a/packages/react/avatar/src/Avatar.stories.tsx b/packages/react/avatar/src/Avatar.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Avatar, AvatarImage, AvatarFallback } from './Avatar';
 import { css } from '../../../../stitches.config';
+import * as Avatar from './Avatar';
 
 export default { title: 'Components/Avatar' };
 
@@ -10,55 +10,55 @@ const srcBroken = 'https://broken.link.com/broken-pic.jpg';
 export const Styled = () => (
   <>
     <h1>Without image & with fallback</h1>
-    <Avatar className={rootClass}>
-      <AvatarFallback className={fallbackClass}>JS</AvatarFallback>
-    </Avatar>
+    <Avatar.Root className={rootClass()}>
+      <Avatar.Fallback className={fallbackClass()}>JS</Avatar.Fallback>
+    </Avatar.Root>
 
     <h1>With image & with fallback</h1>
-    <Avatar className={rootClass}>
-      <AvatarImage className={imageClass} alt="John Smith" src={src} />
-      <AvatarFallback delayMs={300} className={fallbackClass}>
+    <Avatar.Root className={rootClass()}>
+      <Avatar.Image className={imageClass()} alt="John Smith" src={src} />
+      <Avatar.Fallback delayMs={300} className={fallbackClass()}>
         JS
-      </AvatarFallback>
-    </Avatar>
+      </Avatar.Fallback>
+    </Avatar.Root>
 
     <h1>With image & with fallback (but broken src)</h1>
-    <Avatar className={rootClass}>
-      <AvatarImage
-        className={imageClass}
+    <Avatar.Root className={rootClass()}>
+      <Avatar.Image
+        className={imageClass()}
         alt="John Smith"
         src={srcBroken}
         onLoadingStatusChange={console.log}
       />
-      <AvatarFallback className={fallbackClass}>
+      <Avatar.Fallback className={fallbackClass()}>
         <AvatarIcon />
-      </AvatarFallback>
-    </Avatar>
+      </Avatar.Fallback>
+    </Avatar.Root>
   </>
 );
 
 export const Chromatic = () => (
   <>
     <h1>Without image & with fallback</h1>
-    <Avatar className={rootClass}>
-      <AvatarFallback className={fallbackClass}>JS</AvatarFallback>
-    </Avatar>
+    <Avatar.Root className={rootClass()}>
+      <Avatar.Fallback className={fallbackClass()}>JS</Avatar.Fallback>
+    </Avatar.Root>
 
     <h1>With image & with fallback</h1>
-    <Avatar className={rootClass}>
-      <AvatarImage className={imageClass} alt="John Smith" src={src} />
-      <AvatarFallback delayMs={300} className={fallbackClass}>
+    <Avatar.Root className={rootClass()}>
+      <Avatar.Image className={imageClass()} alt="John Smith" src={src} />
+      <Avatar.Fallback delayMs={300} className={fallbackClass()}>
         JS
-      </AvatarFallback>
-    </Avatar>
+      </Avatar.Fallback>
+    </Avatar.Root>
 
     <h1>With image & with fallback (but broken src)</h1>
-    <Avatar className={rootClass}>
-      <AvatarImage className={imageClass} alt="John Smith" src={srcBroken} />
-      <AvatarFallback className={fallbackClass}>
+    <Avatar.Root className={rootClass()}>
+      <Avatar.Image className={imageClass()} alt="John Smith" src={srcBroken} />
+      <Avatar.Fallback className={fallbackClass()}>
         <AvatarIcon />
-      </AvatarFallback>
-    </Avatar>
+      </Avatar.Fallback>
+    </Avatar.Root>
   </>
 );
 Chromatic.parameters = { chromatic: { disable: false, delay: 1000 } };