diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 1b1f7fbdcf15..e9021ec11c03 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -293,11 +293,11 @@ function Button( )} @@ -312,6 +312,7 @@ function Button( small={small} medium={medium} large={large} + isButtonIcon /> ) : ( )} diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index b4da5c0b0fa2..4ec4556e1c86 100644 --- 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; @@ -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 index 070e78265ff2..02778b4ca351 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: 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}; }