From c461cbbd24bbf2aed9d4df17eb9cc5e985959091 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Thu, 31 Oct 2024 12:43:49 +0530 Subject: [PATCH 1/3] removed hasText condition from getIconWidthAndHeightStyle --- src/components/Button/index.tsx | 1 - src/components/Icon/index.tsx | 6 +----- src/styles/utils/index.ts | 8 ++++---- 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 1b1f7fbdcf15..3cbb8e683389 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -293,7 +293,6 @@ function Button( ; @@ -59,7 +56,6 @@ function Icon({ height = variables.iconSizeNormal, fill = undefined, small = false, - hasText = false, large = false, medium = false, inline = false, @@ -71,7 +67,7 @@ function Icon({ }: 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); 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 index e1e9d99334e7..c2f9100f3423 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -490,14 +490,14 @@ function getWidthAndHeightStyle(width: number, height?: number): Pick { +function getIconWidthAndHeightStyle(small: boolean, medium: boolean, large: boolean, width: number, height: number): Pick { switch (true) { case small: - return {width: hasText ? variables.iconSizeExtraSmall : variables.iconSizeSmall, height: hasText ? variables.iconSizeExtraSmall : variables?.iconSizeSmall}; + return {width: variables.iconSizeExtraSmall, height: variables.iconSizeExtraSmall}; case medium: - return {width: hasText ? variables.iconSizeSmall : variables.iconSizeNormal, height: hasText ? variables.iconSizeSmall : variables.iconSizeNormal}; + return {width: variables.iconSizeSmall, height: variables.iconSizeSmall}; case large: - return {width: hasText ? variables.iconSizeNormal : variables.iconSizeLarge, height: hasText ? variables.iconSizeNormal : variables.iconSizeLarge}; + return {width: variables.iconSizeNormal, height: variables.iconSizeNormal}; default: { return {width, height}; } From bf716a96a5a128e343ef5d589505b8bafe914de9 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Tue, 5 Nov 2024 12:49:21 +0530 Subject: [PATCH 2/3] update mini context menu icon size --- src/components/ContextMenuItem.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/ContextMenuItem.tsx b/src/components/ContextMenuItem.tsx index c57c10e2c2b9..2d66c1cc1068 100644 --- a/src/components/ContextMenuItem.tsx +++ b/src/components/ContextMenuItem.tsx @@ -6,6 +6,7 @@ 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'; @@ -122,7 +123,8 @@ function ContextMenuItem( > {({hovered, pressed}) => ( From 708a503b8976bd1b62be9281157581f1713839f3 Mon Sep 17 00:00:00 2001 From: jayeshmangwani Date: Tue, 5 Nov 2024 19:04:57 +0530 Subject: [PATCH 3/3] using isButtonIcon new prop to determine width and height for the Icon component --- src/components/Button/index.tsx | 3 +++ src/components/ContextMenuItem.tsx | 4 +--- src/components/Icon/index.tsx | 6 +++++- src/styles/utils/index.ts | 8 ++++---- 4 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 3cbb8e683389..e9021ec11c03 100644 --- 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 /> )} @@ -311,6 +312,7 @@ function Button( small={small} medium={medium} large={large} + isButtonIcon /> ) : ( )} diff --git a/src/components/ContextMenuItem.tsx b/src/components/ContextMenuItem.tsx index 2d66c1cc1068..c57c10e2c2b9 100644 --- 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}) => ( diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index e4484980fff1..4ec4556e1c86 100644 --- 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 index 526faed8107c..abbf46ceb686 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -490,14 +490,14 @@ function getWidthAndHeightStyle(width: number, height?: number): Pick { +function getIconWidthAndHeightStyle(small: boolean, medium: boolean, large: boolean, width: number, height: number, isButtonIcon: boolean): Pick { 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}; }