Merge pull request #386 from gluestack/release/@gluestack-style/react…

…@0.2.22 Release/@gluestack style/[email protected]
gluestack · Sep 4, 2023 · 4d7277f · 4d7277f
2 parents 5272a1e + 0b68513
commit 4d7277f
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 18 deletions.
diff --git a/example/storybook/src/getting-started/Styled/index.stories.mdx b/example/storybook/src/getting-started/Styled/index.stories.mdx
@@ -32,7 +32,7 @@ const StyledButton = styled(
     },
   },
   componentConfig,
-  extenedBaseConfig
+  extendedBaseConfig
 );
 ```
 
@@ -47,7 +47,7 @@ To configure **`styled`**, create a **`gluestack-style.config.ts`** file (**`.j
 - Component
 - componentStyleConfig
 - componentConfig
-- extenedBaseConfig
+- extendedBaseConfig
 
 ### componentConfig
 
@@ -79,11 +79,11 @@ To configure **`styled`**, create a **`gluestack-style.config.ts`** file (**`.j
    }
    ```
 
-   Note: For this to work you also need to add the prop in `propertyTokenMap`, that can be defined in the next parameter of styled function i.e. **extenedBaseConfig**.
+   Note: For this to work you also need to add the prop in `propertyTokenMap`, that can be defined in the next parameter of styled function i.e. **extendedBaseConfig**.
 
-### extenedBaseConfig
+### extendedBaseConfig
 
-**`extenedBaseConfig`** is a object that lets you extend the base config for the component. This is useful when you want to define some aliases, tokens, propertyTokenMap,
+**`extendedBaseConfig`** is a object that lets you extend the base config for the component. This is useful when you want to define some aliases, tokens, propertyTokenMap,
 and propertyResolver that is specific to the component.
 
 ```tsx

diff --git a/example/storybook/src/overview/API/index.stories.mdx b/example/storybook/src/overview/API/index.stories.mdx
@@ -25,7 +25,7 @@ const StyledButton = styled(
     },
   },
   {}, // componentConfig,
-  {} // extenedBaseConfig,
+  {} // extendedBaseConfig,
 );
 ```
 
@@ -63,9 +63,9 @@ const StyledButton = styled(
    }
    ```
 
-   Note: For this to work you also need to add the prop in `propertyTokenMap`, that can be defined in the next parameter of styled function i.e. **extenedBaseConfig**.
+   Note: For this to work you also need to add the prop in `propertyTokenMap`, that can be defined in the next parameter of styled function i.e. **extendedBaseConfig**.
 
-## extenedBaseConfig
+## extendedBaseConfig
 
 extendedBaseConfig is an object that let’s you extend the base config for the component. This is useful when you want to define some aliases, tokens, propertyTokenMap,
 and propertyResolver that is specific to the component.
@@ -244,7 +244,7 @@ const StyledInput = styled(
     },
   },
   componentConfig,
-  extenedBaseConfig
+  extendedBaseConfig
 );
 ```
 
@@ -267,7 +267,7 @@ const StyledInput = styled(
     },
   },
   componentConfig,
-  extenedBaseConfig
+  extendedBaseConfig
 );
 ```
 
@@ -296,7 +296,7 @@ const StyledInput = styled(
     },
   },
   componentConfig,
-  extenedBaseConfig
+  extendedBaseConfig
 );
 ```
 
@@ -321,7 +321,7 @@ const StyledInput = styled(
     borderRadius: '$2',
   },
   componentConfig,
-  extenedBaseConfig
+  extendedBaseConfig
 );
 
 <StyledInput sx={{ py: '$4' }} />;
@@ -342,7 +342,7 @@ const StyledInput = styled(
     borderRadius: '$2',
   },
   componentConfig,
-  extenedBaseConfig
+  extendedBaseConfig
 );
 
 <StyledInput py="$4" bg="$gray800" />;

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "keywords": [
     "React Native",
     "Next.js",

diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx
@@ -707,9 +707,15 @@ export function getVariantProps(
 
   if (restProps) {
     variantTypes?.forEach((variant) => {
-      if (props.hasOwnProperty(variant)) {
+      if (
+        props.hasOwnProperty(variant) &&
+        theme.variants[variant]?.[props[variant]]
+      ) {
         variantProps[variant] = props[variant];
-        if (shouldDeleteVariants) delete restProps[variant];
+
+        if (shouldDeleteVariants) {
+          delete restProps[variant];
+        }
       }
     });
   }
@@ -1119,7 +1125,8 @@ export function verboseStyled<P, Variants, ComCon>(
 
     Object.assign(themeDefaultProps, incomingComponentProps);
 
-    const { variantProps } = getVariantProps(themeDefaultProps, theme);
+    const { variantProps, restProps: componentPropsWithoutVariants } =
+      getVariantProps(themeDefaultProps, theme);
 
     const {
       baseStyleCSSIds: applyBaseStyleCSSIds,
@@ -1143,7 +1150,7 @@ export function verboseStyled<P, Variants, ComCon>(
 
     const { sx: filteredComponentSx, rest: filteredComponentRemainingProps } =
       convertUtiltiyToSXFromProps(
-        componentProps,
+        componentPropsWithoutVariants,
         styledSystemProps,
         componentStyleConfig
       );