Merge pull request #2165 from gluestack/fix/icon-components

fix: icons in components
gluestack · May 18, 2024 · 98b81cb · 98b81cb
2 parents 4436613 + af132fa
commit 98b81cb
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 109 deletions.
diff --git a/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx
@@ -48,7 +48,7 @@ const accordionTitleTextStyle = tva({
   },
 });
 const accordionIconStyle = tva({
-  base: '',
+  base: 'stroke-typography-900 fill-none',
   parentVariants: {
     size: {
       '2xs': 'h-3 w-3',
@@ -82,16 +82,25 @@ const accordionTriggerStyle = tva({
 
 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 (
@@ -100,7 +109,7 @@ const PrimitiveIcon = React.forwardRef(
         height={height}
         width={width}
         fill={fill}
-        color={color}
+        stroke={colorProps}
         {...props}
       />
     );
@@ -264,13 +273,10 @@ const AccordionIcon = React.forwardRef(
     {
       size,
       className,
-      color = 'gray',
       ...props
     }: IAccordionIconProps & {
       className?: any;
-      fill?: string;
       as?: any;
-      color?: string;
     },
     ref?: any
   ) => {
@@ -281,7 +287,6 @@ const AccordionIcon = React.forwardRef(
         <UIAccordion.Icon
           ref={ref}
           {...props}
-          color={color}
           className={accordionIconStyle({ class: className })}
           size={size}
         />
@@ -294,15 +299,13 @@ const AccordionIcon = React.forwardRef(
         <UIAccordion.Icon
           ref={ref}
           {...props}
-          color={color}
           className={accordionIconStyle({ class: className })}
         />
       );
     }
     return (
       <UIAccordion.Icon
         ref={ref}
-        color={color}
         {...props}
         className={accordionIconStyle({
           size,

diff --git a/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx
@@ -27,24 +27,25 @@ import {
 
 const PrimitiveIcon = React.forwardRef(
   (
-    {
-      height,
-      width,
-      fill = 'none',
-      color = 'gray',
-      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 (
@@ -53,7 +54,7 @@ const PrimitiveIcon = React.forwardRef(
         height={height}
         width={width}
         fill={fill}
-        color={color}
+        stroke={colorProps}
         {...props}
       />
     );
@@ -221,7 +222,7 @@ const actionsheetSectionHeaderTextStyle = tva({
 });
 
 const actionsheetIconStyle = tva({
-  base: '',
+  base: 'stroke-background-500',
   variants: {
     size: {
       '2xs': 'h-3 w-3',
@@ -514,12 +515,9 @@ const ActionsheetIcon = React.forwardRef(
     {
       className,
       size = 'sm',
-      color = 'gray',
       ...props
     }: IActionsheetIconProps & {
       as?: any;
-      fill?: string;
-      color?: string;
       className?: any;
     },
     ref?: any
@@ -529,7 +527,6 @@ const ActionsheetIcon = React.forwardRef(
         <UIActionsheet.Icon
           ref={ref}
           {...props}
-          color={color}
           className={actionsheetIconStyle({ class: className })}
           size={size}
         />
@@ -542,7 +539,6 @@ const ActionsheetIcon = React.forwardRef(
         <UIActionsheet.Icon
           ref={ref}
           {...props}
-          color={color}
           className={actionsheetIconStyle({ class: className })}
         />
       );
@@ -553,7 +549,6 @@ const ActionsheetIcon = React.forwardRef(
           class: className,
           size,
         })}
-        color={color}
         ref={ref}
         {...props}
       />

diff --git a/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx
@@ -77,7 +77,15 @@ const badgeTextStyle = tva({
 });
 
 const badgeIconStyle = tva({
+  base: 'fill-none',
   parentVariants: {
+    action: {
+      error: 'stroke-error-600',
+      warning: 'stroke-warning-600',
+      success: 'stroke-success-600',
+      info: 'stroke-info-600',
+      muted: 'stroke-secondary-600',
+    },
     size: {
       sm: 'h-3 w-3',
       md: 'h-3.5 w-3.5',
@@ -88,16 +96,25 @@ const badgeIconStyle = tva({
 
 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 (
@@ -106,7 +123,7 @@ const PrimitiveIcon = React.forwardRef(
         height={height}
         width={width}
         fill={fill}
-        color={color}
+        stroke={colorProps}
         {...props}
       />
     );
@@ -179,20 +196,6 @@ const BadgeText = ({
   );
 };
 
-interface DefaultColors {
-  info: string;
-  success: string;
-  error: string;
-  warning: string;
-  muted: string;
-}
-const defaultColors: DefaultColors = {
-  info: '#0B8DCD',
-  success: '#2A7948',
-  error: '#DC2626',
-  warning: '#D76C1F',
-  muted: '#515252',
-};
 type IBadgeIconProps = React.ComponentProps<typeof View> &
   VariantProps<typeof badgeIconStyle>;
 const BadgeIcon = React.forwardRef(
@@ -205,28 +208,24 @@ const BadgeIcon = React.forwardRef(
     ref?: any
   ) => {
     const { size: parentSize, action: parentAction } = useStyleContext(SCOPE);
-    const { color = defaultColors[parentAction as keyof DefaultColors] } =
-      props;
 
     if (typeof size === 'number') {
       return (
         <PrimitiveIcon
           ref={ref}
           {...props}
-          color={color}
           className={badgeIconStyle({ class: className })}
           size={size}
         />
       );
     } else if (
-      (props?.height !== undefined || props?.width !== undefined) &&
+      (props.height !== undefined || props.width !== undefined) &&
       size === undefined
     ) {
       return (
         <PrimitiveIcon
           ref={ref}
           {...props}
-          color={color}
           className={badgeIconStyle({ class: className })}
         />
       );
@@ -236,12 +235,12 @@ const BadgeIcon = React.forwardRef(
         className={badgeIconStyle({
           parentVariants: {
             size: parentSize,
+            action: parentAction,
           },
           size,
           class: className,
         })}
         {...props}
-        color={color}
         ref={ref}
       />
     );

diff --git a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
@@ -9,23 +9,32 @@ import {
   useStyleContext,
 } from '@gluestack-ui/nativewind-utils/withStyleContext';
 import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
-import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
+import { cssInterop } from 'nativewind';
 import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 import { Platform } from 'react-native';
 
 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 (
@@ -34,7 +43,7 @@ const PrimitiveIcon = React.forwardRef(
         height={height}
         width={width}
         fill={fill}
-        color={color}
+        stroke={colorProps}
         {...props}
       />
     );
@@ -98,7 +107,7 @@ const checkboxLabelStyle = tva({
 });
 
 const checkboxIconStyle = tva({
-  base: 'data-[disabled=true]:opacity-40',
+  base: 'data-[disabled=true]:opacity-40 stroke-typography-50 fill-none',
 
   parentVariants: {
     size: {
@@ -194,12 +203,9 @@ const CheckboxIcon = React.forwardRef(
     {
       className,
       size,
-      color = 'gray',
       ...props
     }: ICheckboxIconProps & {
       className?: any;
-      fill?: string;
-      color?: string;
       as?: any;
     },
     ref?: any
@@ -211,7 +217,6 @@ const CheckboxIcon = React.forwardRef(
         <UICheckbox.Icon
           ref={ref}
           {...props}
-          color={color}
           className={checkboxIconStyle({ class: className })}
           size={size}
         />
@@ -224,7 +229,6 @@ const CheckboxIcon = React.forwardRef(
         <UICheckbox.Icon
           ref={ref}
           {...props}
-          color={color}
           className={checkboxIconStyle({ class: className })}
         />
       );
@@ -240,7 +244,6 @@ const CheckboxIcon = React.forwardRef(
           size,
         })}
         {...props}
-        color={color}
         ref={ref}
       />
     );