pass along variant name to restyled component

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

Hide file tree

Showing 3 changed files with 57 additions and 34 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -21,7 +21,7 @@
     "**/*.js": true
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.formatOnSave": true,
   "[typescriptreact]": {

diff --git a/src/hooks/useRestyle.ts b/src/hooks/useRestyle.ts
@@ -7,14 +7,15 @@ import useTheme from './useTheme';
 
 const filterRestyleProps = <
   TRestyleProps,
-  TProps extends {[key: string]: unknown} & TRestyleProps,
+  TProps extends {[key: string]: unknown} & TRestyleProps & {variant?: unknown},
 >(
   componentProps: TProps,
   omitPropertiesMap: {[key in keyof TProps]: boolean},
 ) => {
-  const cleanProps: TProps = {} as TProps;
-  const restyleProps: TProps & {variant?: unknown} = {} as TProps;
+  const cleanProps: Partial<TProps> = {};
+  const restyleProps: Partial<TProps> = {};
   let serializedRestyleProps = '';
+
   if (omitPropertiesMap.variant) {
     restyleProps.variant = componentProps.variant ?? 'defaults';
   }
@@ -27,6 +28,9 @@ const filterRestyleProps = <
     }
   }
 
+  if (restyleProps.variant) {
+    cleanProps.variant = restyleProps.variant;
+  }
   const keys = {cleanProps, restyleProps, serializedRestyleProps};
   return keys;
 };

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,
+            },
+          ],
+        });
+      });
+    });
   });
 });