using isButtonIcon new prop to determine width and height for the Ico…

…n component
software-mansion-labs · Nov 5, 2024 · 708a503 · 708a503
1 parent 2b2d503
commit 708a503
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -297,6 +297,7 @@ function Button(
                                     small={small}
                                     medium={medium}
                                     large={large}
+                                    isButtonIcon
                                 />
                             </View>
                         )}
@@ -311,6 +312,7 @@ function Button(
                                     small={small}
                                     medium={medium}
                                     large={large}
+                                    isButtonIcon
                                 />
                             ) : (
                                 <Icon
@@ -319,6 +321,7 @@ function Button(
                                     small={small}
                                     medium={medium}
                                     large={large}
+                                    isButtonIcon
                                 />
                             )}
                         </View>

diff --git a/src/components/ContextMenuItem.tsx b/src/components/ContextMenuItem.tsx
@@ -6,7 +6,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import getButtonState from '@libs/getButtonState';
-import variables from '@styles/variables';
 import type IconAsset from '@src/types/utils/IconAsset';
 import BaseMiniContextMenuItem from './BaseMiniContextMenuItem';
 import FocusableMenuItem from './FocusableMenuItem';
@@ -123,8 +122,7 @@ function ContextMenuItem(
         >
             {({hovered, pressed}) => (
                 <Icon
-                    height={variables.iconSizeSmall}
-                    width={variables.iconSizeSmall}
+                    small
                     src={itemIcon}
                     fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, !isThrottledButtonActive))}
                 />

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -48,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({
@@ -64,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);
+    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): 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: variables.iconSizeExtraSmall, height: variables.iconSizeExtraSmall};
+            return {width: isButtonIcon ? variables.iconSizeExtraSmall : variables.iconSizeSmall, height: isButtonIcon ? variables.iconSizeExtraSmall : variables?.iconSizeSmall};
         case medium:
-            return {width: variables.iconSizeSmall, height: variables.iconSizeSmall};
+            return {width: isButtonIcon ? variables.iconSizeSmall : variables.iconSizeNormal, height: isButtonIcon ? variables.iconSizeSmall : variables.iconSizeNormal};
         case large:
-            return {width: variables.iconSizeNormal, height: variables.iconSizeNormal};
+            return {width: isButtonIcon ? variables.iconSizeNormal : variables.iconSizeLarge, height: isButtonIcon ? variables.iconSizeNormal : variables.iconSizeLarge};
         default: {
             return {width, height};
         }