Merge pull request #51775 from jayeshmangwani/icon_margin_to_same_as_…

…button_with_text Removed the hasText condition from getIconWidthAndHeightStyle utils
Expensify · Nov 7, 2024 · 633c99c · 633c99c
2 parents ef76462 + 0825bb6
commit 633c99c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -293,11 +293,11 @@ function Button(
                             <View style={[large ? styles.mr2 : styles.mr1, !text && styles.mr0, iconStyles]}>
                                 <Icon
                                     src={icon}
-                                    hasText={!!text}
                                     fill={isHovered ? iconHoverFill ?? defaultFill : iconFill ?? defaultFill}
                                     small={small}
                                     medium={medium}
                                     large={large}
+                                    isButtonIcon
                                 />
                             </View>
                         )}
@@ -312,6 +312,7 @@ function Button(
                                     small={small}
                                     medium={medium}
                                     large={large}
+                                    isButtonIcon
                                 />
                             ) : (
                                 <Icon
@@ -320,6 +321,7 @@ function Button(
                                     small={small}
                                     medium={medium}
                                     large={large}
+                                    isButtonIcon
                                 />
                             )}
                         </View>

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -40,9 +40,6 @@ type IconProps = {
     /** Is icon pressed */
     pressed?: boolean;
 
-    /** Is icon will be used with text */
-    hasText?: boolean;
-
     /** Additional styles to add to the Icon */
     additionalStyles?: StyleProp<ViewStyle>;
 
@@ -51,6 +48,9 @@ type IconProps = {
 
     /** Determines how the image should be resized to fit its container */
     contentFit?: ImageContentFit;
+
+    /** Determines whether the icon is being used within a button. The icon size will remain the same for both icon-only buttons and buttons with text. */
+    isButtonIcon?: boolean;
 };
 
 function Icon({
@@ -59,7 +59,6 @@ function Icon({
     height = variables.iconSizeNormal,
     fill = undefined,
     small = false,
-    hasText = false,
     large = false,
     medium = false,
     inline = false,
@@ -68,10 +67,11 @@ function Icon({
     pressed = false,
     testID = '',
     contentFit = 'cover',
+    isButtonIcon = false,
 }: IconProps) {
     const StyleUtils = useStyleUtils();
     const styles = useThemeStyles();
-    const {width: iconWidth, height: iconHeight} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height, hasText);
+    const {width: iconWidth, height: iconHeight} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height, isButtonIcon);
     const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, styles.pAbsolute, additionalStyles];
 
     if (inline) {

diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
@@ -490,14 +490,14 @@ function getWidthAndHeightStyle(width: number, height?: number): Pick<ViewStyle,
     };
 }
 
-function getIconWidthAndHeightStyle(small: boolean, medium: boolean, large: boolean, width: number, height: number, hasText?: boolean): Pick<ImageSVGProps, 'width' | 'height'> {
+function getIconWidthAndHeightStyle(small: boolean, medium: boolean, large: boolean, width: number, height: number, isButtonIcon: boolean): Pick<ImageSVGProps, 'width' | 'height'> {
     switch (true) {
         case small:
-            return {width: hasText ? variables.iconSizeExtraSmall : variables.iconSizeSmall, height: hasText ? variables.iconSizeExtraSmall : variables?.iconSizeSmall};
+            return {width: isButtonIcon ? variables.iconSizeExtraSmall : variables.iconSizeSmall, height: isButtonIcon ? variables.iconSizeExtraSmall : variables?.iconSizeSmall};
         case medium:
-            return {width: hasText ? variables.iconSizeSmall : variables.iconSizeNormal, height: hasText ? variables.iconSizeSmall : variables.iconSizeNormal};
+            return {width: isButtonIcon ? variables.iconSizeSmall : variables.iconSizeNormal, height: isButtonIcon ? variables.iconSizeSmall : variables.iconSizeNormal};
         case large:
-            return {width: hasText ? variables.iconSizeNormal : variables.iconSizeLarge, height: hasText ? variables.iconSizeNormal : variables.iconSizeLarge};
+            return {width: isButtonIcon ? variables.iconSizeNormal : variables.iconSizeLarge, height: isButtonIcon ? variables.iconSizeNormal : variables.iconSizeLarge};
         default: {
             return {width, height};
         }