Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Removed the hasText condition from getIconWidthAndHeightStyle utils #51775

Merged
4 changes: 3 additions & 1 deletion src/components/Button/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand All @@ -312,6 +312,7 @@ function Button(
small={small}
medium={medium}
large={large}
isButtonIcon
/>
) : (
<Icon
Expand All @@ -320,6 +321,7 @@ function Button(
small={small}
medium={medium}
large={large}
isButtonIcon
/>
)}
</View>
Expand Down
10 changes: 5 additions & 5 deletions src/components/Icon/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>;

Expand All @@ -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({
Expand All @@ -59,7 +59,6 @@ function Icon({
height = variables.iconSizeNormal,
fill = undefined,
small = false,
hasText = false,
large = false,
medium = false,
inline = false,
Expand All @@ -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) {
Expand Down
8 changes: 4 additions & 4 deletions src/styles/utils/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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};
}
Expand Down
Loading