pass along variant name to restyled component

Shopify · Jun 5, 2024 · b2d78dc · b2d78dc
1 parent 5fbb3f4
commit b2d78dc
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 30 deletions.
diff --git a/src/hooks/useRestyle.ts b/src/hooks/useRestyle.ts
@@ -93,6 +93,9 @@ const useRestyle = <
   ]);
 
   cleanProps.style = calculatedStyle;
+  if (restyleProps.variant) {
+    (cleanProps as TProps & {variant?: unknown}).variant = restyleProps.variant;
+  }
   return cleanProps;
 };
 

diff --git a/src/test/createRestyleComponent.test.tsx b/src/test/createRestyleComponent.test.tsx
@@ -179,36 +179,6 @@ describe('createRestyleComponent', () => {
       );
     });
 
-    it('passes styles from default variant when no variant prop is defined', () => {
-      const {root} = render(
-        <ThemeProvider theme={themeWithVariant}>
-          <ComponentWithVariant margin="s" />
-        </ThemeProvider>,
-      );
-      expect(root.findByType(View).props.style).toStrictEqual([
-        {
-          alignItems: 'flex-start',
-          backgroundColor: '#FFB6C1',
-          margin: 8,
-        },
-      ]);
-    });
-
-    it('passes styles from the defined variant', () => {
-      const {root} = render(
-        <ThemeProvider theme={themeWithVariant}>
-          <ComponentWithVariant variant="regular" margin="s" />
-        </ThemeProvider>,
-      );
-      expect(root.findByType(View).props.style).toStrictEqual([
-        {
-          alignItems: 'center',
-          backgroundColor: '#E0FFFF',
-          margin: 8,
-        },
-      ]);
-    });
-
     it('uses gap values from the theme', () => {
       const {root} = render(
         <ThemeProvider theme={theme}>
@@ -230,5 +200,54 @@ describe('createRestyleComponent', () => {
         style: [{gap: 8, columnGap: 8, rowGap: 8}],
       });
     });
+
+    describe('variant', () => {
+      it('does not pass variant prop if no variant is created', () => {
+        const {root} = render(
+          <ThemeProvider theme={theme}>
+            <Component opacity={0.5} />
+          </ThemeProvider>,
+        );
+        expect(root.findByType(View).props).toStrictEqual({
+          style: [{opacity: 0.5}],
+        });
+      });
+
+      it('passes styles from default variant when no variant prop is defined', () => {
+        const {root} = render(
+          <ThemeProvider theme={themeWithVariant}>
+            <ComponentWithVariant margin="s" />
+          </ThemeProvider>,
+        );
+        expect(root.findByType(View).props).toStrictEqual({
+          variant: 'defaults',
+          style: [
+            {
+              alignItems: 'flex-start',
+              backgroundColor: '#FFB6C1',
+              margin: 8,
+            },
+          ],
+        });
+      });
+
+      it('passes styles from the defined variant', () => {
+        const {root} = render(
+          <ThemeProvider theme={themeWithVariant}>
+            <ComponentWithVariant variant="regular" margin="s" />
+          </ThemeProvider>,
+        );
+        expect(root.findByType(View).props).toStrictEqual({
+          variant: 'regular',
+          style: [
+            {
+              alignItems: 'center',
+              backgroundColor: '#E0FFFF',
+              margin: 8,
+            },
+          ],
+        });
+      });
+    });
   });
 });