Merge pull request #2164 from gluestack/fix/components-with-icons

fix: components-with-icons
gluestack · May 18, 2024 · 4436613 · 4436613
2 parents 32f98ff + 57c2376
commit 4436613
Show file tree

Hide file tree

Showing 4 changed files with 5,806 additions and 7,718 deletions.
diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json
@@ -27,6 +27,7 @@
     "@expo/html-elements": "^0.4.2",
     "@expo/webpack-config": "^0.17.2",
     "@geometricpanda/storybook-addon-iframe": "^0.2.2",
+    "@gluestack-style/animation-resolver": "^1.0.4",
     "@gluestack-style/react": "^1.0.56",
     "@gluestack-ui/config": "^1.1.18",
     "@gluestack-ui/themed": "^1.1.26",
@@ -51,7 +52,7 @@
     "expo-linear-gradient": "^12.3.0",
     "expo-status-bar": "~1.4.2",
     "fs": "^0.0.1-security",
-    "lucide-react-native": "^0.236.0",
+    "lucide-react-native": "^0.378.0",
     "nativewind": "^4.0.36",
     "next": "^13.5.3",
     "prism-react-renderer": "^1.3.5",

diff --git a/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { createAlert } from '@gluestack-ui/alert';
-import { View, Text } from 'react-native';
+import { View, Text, Platform } from 'react-native';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import {
   withStyleContext,
@@ -10,6 +10,7 @@ import React, { useMemo } from 'react';
 import { Svg } from 'react-native-svg';
 import { cssInterop } from 'nativewind';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
 
 const SCOPE = 'ALERT';
 
@@ -79,6 +80,7 @@ const alertTextStyle = tva({
 });
 
 const alertIconStyle = tva({
+  base: 'fill-none',
   variants: {
     size: {
       '2xs': 'h-3 w-3',
@@ -89,20 +91,38 @@ const alertIconStyle = tva({
       'xl': 'h-6 w-6',
     },
   },
+  parentVariants: {
+    action: {
+      error: 'stroke-error-500',
+      warning: 'stroke-warning-500',
+      success: 'stroke-success-500',
+      info: 'stroke-info-500',
+      muted: 'stroke-secondary-500',
+    },
+  },
 });
 
 const PrimitiveIcon = React.forwardRef(
   (
-    { height, width, fill = 'none', color, size, as: AsComp, ...props }: any,
+    { height, width, fill, color, size, stroke, as: AsComp, ...props }: any,
     ref?: any
   ) => {
     const sizeProps = useMemo(() => {
       return size ? { size } : { height, width };
     }, [size, height, width]);
 
+    let colorProps =
+      stroke === 'currentColor' && color !== undefined ? color : stroke;
+
     if (AsComp) {
       return (
-        <AsComp ref={ref} fill={fill} color={color} {...props} {...sizeProps} />
+        <AsComp
+          ref={ref}
+          fill={fill}
+          {...props}
+          {...sizeProps}
+          stroke={colorProps}
+        />
       );
     }
     return (
@@ -111,7 +131,7 @@ const PrimitiveIcon = React.forwardRef(
         height={height}
         width={width}
         fill={fill}
-        color={color}
+        stroke={colorProps}
         {...props}
       />
     );
@@ -121,7 +141,7 @@ const PrimitiveIcon = React.forwardRef(
 export const UIAlert = createAlert({
   Root: withStyleContext(View, SCOPE),
   Text: Text,
-  Icon: PrimitiveIcon,
+  Icon: Platform.OS === 'web' ? PrimitiveIcon : withStates(PrimitiveIcon),
 });
 
 cssInterop(UIAlert, { className: 'style' });
@@ -202,20 +222,6 @@ const AlertText = React.forwardRef(
   }
 );
 
-interface DefaultColors {
-  info: string;
-  success: string;
-  error: string;
-  warning: string;
-  muted: string;
-}
-const defaultColors: DefaultColors = {
-  info: '#0DA6F2',
-  success: '#38A169',
-  error: '#D32F2F',
-  warning: '#FFC107',
-  muted: '#999999',
-};
 type IAlertIconProps = React.ComponentProps<typeof UIAlert.Icon> &
   VariantProps<typeof alertIconStyle>;
 const AlertIcon = React.forwardRef(
@@ -226,20 +232,16 @@ const AlertIcon = React.forwardRef(
       ...props
     }: {
       className?: string;
-      color?: string;
     } & IAlertIconProps,
     ref?: any
   ) => {
     const { action: parentAction } = useStyleContext(SCOPE);
-    const { color = defaultColors[parentAction as keyof DefaultColors] } =
-      props;
 
     if (typeof size === 'number') {
       return (
         <UIAlert.Icon
           ref={ref}
           {...props}
-          color={color}
           className={alertIconStyle({ class: className })}
           size={size}
         />
@@ -252,18 +254,19 @@ const AlertIcon = React.forwardRef(
         <UIAlert.Icon
           ref={ref}
           {...props}
-          color={color}
           className={alertIconStyle({ class: className })}
         />
       );
     }
     return (
       <UIAlert.Icon
         className={alertIconStyle({
+          parentVariants: {
+            action: parentAction,
+          },
           size,
           class: className,
         })}
-        color={color}
         {...props}
         ref={ref}
       />

diff --git a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
@@ -9,6 +9,7 @@ import {
 } from '@gluestack-ui/nativewind-utils/withStyleContext';
 import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
 import { cssInterop } from 'nativewind';
+import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
 import {
@@ -21,16 +22,25 @@ import {
 
 const PrimitiveIcon = React.forwardRef(
   (
-    { height, width, fill = 'none', color, size, as: AsComp, ...props }: any,
+    { height, width, fill, color, size, stroke, as: AsComp, ...props }: any,
     ref?: any
   ) => {
     const sizeProps = useMemo(() => {
       return size ? { size } : { height, width };
     }, [size, height, width]);
 
+    const colorProps =
+      stroke === 'currentColor' && color !== undefined ? color : stroke;
+
     if (AsComp) {
       return (
-        <AsComp ref={ref} fill={fill} color={color} {...props} {...sizeProps} />
+        <AsComp
+          ref={ref}
+          fill={fill}
+          {...props}
+          {...sizeProps}
+          stroke={colorProps}
+        />
       );
     }
     return (
@@ -39,7 +49,7 @@ const PrimitiveIcon = React.forwardRef(
         height={height}
         width={width}
         fill={fill}
-        color={color}
+        stroke={colorProps}
         {...props}
       />
     );
@@ -57,7 +67,7 @@ const UIButton = createButton({
   Text,
   Group: View,
   Spinner: ActivityIndicator,
-  Icon: PrimitiveIcon,
+  Icon: Platform.OS === 'web' ? PrimitiveIcon : withStates(PrimitiveIcon),
 });
 
 cssInterop(UIButton, { className: 'style' });
@@ -204,11 +214,13 @@ const buttonTextStyle = tva({
 });
 
 const buttonIconStyle = tva({
+  base: 'fill-none',
   parentVariants: {
     variant: {
       link: 'group-hover/button:underline group-active/button:underline',
       outline: '',
-      solid: '',
+      solid:
+        'stroke-typography-0 group-hover/button:stroke-typography-0 group-active/button:stroke-typography-0',
     },
     size: {
       '2xs': 'h-3 w-3',
@@ -218,7 +230,44 @@ const buttonIconStyle = tva({
       'lg': 'h-5 w-5',
       'xl': 'h-6 w-6',
     },
+    action: {
+      primary:
+        'stroke-primary-600 group-hover/button:stroke-primary-600 group-active/button:stroke-primary-700',
+      secondary:
+        'stroke-secondary-600 group-hover/button:stroke-secondary-600 group-active/button:stroke-secondary-700',
+      positive:
+        'stroke-success-600 group-hover/button:stroke-success-600 group-active/button:stroke-success-700',
+
+      negative:
+        'stroke-error-600 group-hover/button:stroke-error-600 group-active/button:stroke-error-700',
+    },
   },
+  parentCompoundVariants: [
+    {
+      variant: 'solid',
+      action: 'primary',
+      class:
+        'stroke-typography-0 group-hover/button:stroke-typography-0 group-active/button:stroke-typography-0',
+    },
+    {
+      variant: 'solid',
+      action: 'secondary',
+      class:
+        'stroke-typography-0 group-hover/button:stroke-typography-0 group-active/button:stroke-typography-0',
+    },
+    {
+      variant: 'solid',
+      action: 'positive',
+      class:
+        'stroke-typography-0 group-hover/button:stroke-typography-0 group-active/button:stroke-typography-0',
+    },
+    {
+      variant: 'solid',
+      action: 'negative',
+      class:
+        'stroke-typography-0 group-hover/button:stroke-typography-0 group-active/button:stroke-typography-0',
+    },
+  ],
 });
 
 const buttonGroupStyle = tva({
@@ -306,18 +355,6 @@ const ButtonText = React.forwardRef(
 
 const ButtonSpinner = UIButton.Spinner;
 
-interface DefaultColors {
-  primary: string;
-  secondary: string;
-  positive: string;
-  negative: string;
-}
-const defaultColors: DefaultColors = {
-  primary: '#292929',
-  secondary: '#515252',
-  positive: '#2A7948',
-  negative: '#DC2626',
-};
 type IButtonIcon = React.ComponentProps<typeof UIButton.Icon> &
   VariantProps<typeof buttonIconStyle>;
 const ButtonIcon = React.forwardRef(
@@ -328,8 +365,6 @@ const ButtonIcon = React.forwardRef(
       ...props
     }: IButtonIcon & {
       className?: any;
-      fill?: string;
-      color?: string;
       as?: any;
     },
     ref?: any
@@ -340,20 +375,11 @@ const ButtonIcon = React.forwardRef(
       action: parentAction,
     } = useStyleContext(SCOPE);
 
-    let localColor;
-    if (parentVariant !== 'solid') {
-      localColor = defaultColors[parentAction as keyof DefaultColors];
-    } else {
-      localColor = 'gray';
-    }
-    const { color = localColor } = props;
-
     if (typeof size === 'number') {
       return (
         <UIButton.Icon
           ref={ref}
           {...props}
-          color={color}
           className={buttonIconStyle({ class: className })}
           size={size}
         />
@@ -366,7 +392,6 @@ const ButtonIcon = React.forwardRef(
         <UIButton.Icon
           ref={ref}
           {...props}
-          color={color}
           className={buttonIconStyle({ class: className })}
         />
       );
@@ -379,11 +404,11 @@ const ButtonIcon = React.forwardRef(
           parentVariants: {
             size: parentSize,
             variant: parentVariant,
+            action: parentAction,
           },
           size,
           class: className,
         })}
-        color={color}
         ref={ref}
       />
     );