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}; }