fix: fixing an issue on the Button

Author: Hossein Pousti

example/src/ButtonExample/index.tsx

@@ -33,7 +33,7 @@ const ButtonExample: React.FC = () => {
           type="secondary"
           title="Pressable & Opacity Button"
         />
-        <Button size="xl" pressable color="gray-600">
+        <Button pressable color="gray-600">
           <Gap space={10} behavior="style">
             <Text color="gray-100" size="lg">
               It's a title!

src/components/Button/index.tsx

@@ -48,13 +48,13 @@ const Button = React.forwardRef<any, Partial<PropsWithLayout<ButtonProps>>>(
       loadingProps,
       loadingColor,
       opacityConfig,
-      radius = 'xs',
       mode = 'solid',
       dir: direction,
       pressableConfig,
       disabledTitleStyle,
       disabledTitleColor,
       disabledButtonColor,
+      radius = typeof children === 'string' || !!title ? 'xs' : 0,
       size = typeof children === 'string' || !!title ? 'md' : undefined,
       type = typeof children === 'string' || !!title ? 'primary' : undefined,
       onPress,
@@ -77,6 +77,10 @@ const Button = React.forwardRef<any, Partial<PropsWithLayout<ButtonProps>>>(
       },
     });
 
+    const hasTitle = React.useMemo(() => {
+      return typeof children === 'string' || !!title;
+    }, [children, title]);
+
     const textColor = React.useMemo(() => {
       const selectedColor = disabled
         ? disabledTitleColor ?? colors?.secondText
@@ -134,26 +138,32 @@ const Button = React.forwardRef<any, Partial<PropsWithLayout<ButtonProps>>>(
           paddingHorizontal: rs(DefaultSizes[size]) * 1.2,
         };
       }
+      if (hasTitle) {
+        appliedStyles = {
+          ...appliedStyles,
+          alignItems: 'center',
+        };
+      }
       return {
         ...appliedStyles,
         overflow: 'hidden',
-        alignItems: 'center',
         borderRadius: rs(
           typeof radius === 'number' ? radius : DefaultSizes[radius] / 2,
         ),
       };
     }, [
-      rs,
-      size,
+      disabled,
+      disabledButtonColor,
+      colors?.disabled,
+      color,
       type,
       mode,
-      color,
-      radius,
       shadow,
-      disabled,
+      size,
+      hasTitle,
+      rs,
       borderColor,
-      disabledButtonColor,
-      colors?.disabled,
+      radius,
     ]);
 
     const memorizedTitleStyle = useStyle<TextStyle>(() => {
@@ -268,7 +278,7 @@ const Button = React.forwardRef<any, Partial<PropsWithLayout<ButtonProps>>>(
               {...loadingProps}
               style={loadingLayoutStyle}
             />
-          ) : typeof children === 'string' || !!title ? (
+          ) : hasTitle ? (
             <Text
               testID="FAST_BASE_BUTTON_TITLE"
               style={textLayoutStyle}

src/core/types/index.ts

@@ -388,7 +388,10 @@ export interface ButtonProps extends PressableProps {
   titleColor: AllColorsType;
 
   titleProps: Omit<TextProps, 'style'>;
-
+  /**
+   * if the children of the button are not a string or it doesn't have a title,
+   * the default radius value will be zero.
+   */
   radius: SizeType | number;
   /**
    * only works on solid mode