Merge pull request #292 from Shopify/cg/readme

correct types / patterns in variants.md
Shopify · Mar 11, 2024 · f0ee28f · f0ee28f
2 parents 5c58f85 + fb97c37
commit f0ee28f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 9 deletions.
diff --git a/documentation/docs/fundamentals/variants.md b/documentation/docs/fundamentals/variants.md
@@ -15,7 +15,7 @@ const theme = createTheme({
     l: 24,
   },
   colors: {
-    cardRegularBackground: '#EEEEEE',
+    cardPrimaryBackground: '#EEEEEE',
   },
   breakpoints: {
     phone: 0,
@@ -49,17 +49,45 @@ const theme = createTheme({
 
 import {createVariant, createRestyleComponent, VariantProps} from '@shopify/restyle'
 import {Theme} from './theme';
-const variant = createVariant<Theme>({themeKey: 'cardVariants', defaults: {
-  margin: {
-    phone: 's',
-    tablet: 'm',
+
+const variant = createVariant<Theme, 'cardVariants'>({
+  themeKey: 'cardVariants',
+  defaults: {
+    margin: {
+      phone: 's',
+      tablet: 'm',
+    },
+    backgroundColor: 'cardPrimaryBackground',
   },
-  backgroundColor: 'cardRegularBackground',
-}})
+})
 
-const Card = createRestyleComponent<VariantProps<Theme, 'cardVariants'>, Theme>([variant])
+const Card = createRestyleComponent<
+  VariantProps<Theme, 'cardVariants'> & BoxProps<Theme>,
+  Theme,
+>([variant], Box)
 
 <Card variant="elevated" />
+
+// createVariant and createRestyleComponent are often combined into a single
+// call, which improves the type hinting as well:
+const Card = createRestyleComponent<
+  VariantProps<Theme, 'cardVariants'> & React.ComponentProps<typeof Box>,
+  Theme
+>(
+  [
+    createVariant({
+      themeKey: 'cardVariants',
+      defaults: {
+        margin: {
+          phone: 's',
+          tablet: 'm',
+        },
+        backgroundColor: 'cardPrimaryBackground',
+      },
+    }),
+  ],
+  Box,
+);
 ```
 
 Arguments:

diff --git a/fixture/App.tsx b/fixture/App.tsx
@@ -17,7 +17,21 @@ const Text = createText<Theme>();
 const Card = createRestyleComponent<
   VariantProps<Theme, 'cardVariants'> & React.ComponentProps<typeof Box>,
   Theme
->([createVariant({themeKey: 'cardVariants'})], Box);
+>(
+  [
+    createVariant({
+      themeKey: 'cardVariants',
+      defaults: {
+        margin: {
+          phone: 's',
+          tablet: 'm',
+        },
+        backgroundColor: 'cardPrimaryBackground',
+      },
+    }),
+  ],
+  Box,
+);
 
 const App = () => {
   const [darkMode, setDarkMode] = useState(false);