From d62269cbe5cb6cd6a24c7c7774f52ed4953b2470 Mon Sep 17 00:00:00 2001
From: joaojramia <joao@holistic.foundation>
Date: Thu, 13 Feb 2025 11:33:50 +0100
Subject: [PATCH] feat(HoliBricks): introduce iconBefore and scaleIcon props
for Button
---
holi-bricks/components/button/Button.tsx | 12 ++++++++++--
1 file changed, 10 insertions(+), 2 deletions(-)
diff --git a/holi-bricks/components/button/Button.tsx b/holi-bricks/components/button/Button.tsx
index 34e5701ee0..5432b9168f 100644
--- a/holi-bricks/components/button/Button.tsx
+++ b/holi-bricks/components/button/Button.tsx
@@ -37,6 +37,8 @@ export type ButtonProps = AccessibilityProps & {
transparent?: boolean
selected?: boolean
icon?: HoliIconType
+ iconBefore?: HoliIconType
+ scaleIcon?: number
inline?: boolean
testID?: string
}
@@ -52,6 +54,8 @@ export const Button = ({
transparent = false,
selected = false,
icon,
+ iconBefore,
+ scaleIcon = 1,
inline = false,
testID,
...rest
@@ -67,6 +71,7 @@ export const Button = ({
const isSpinning = loading || isProcessing
const labelToShow = isSpinning && loadingLabel ? loadingLabel : label
+ const iconSize = 16 * scaleIcon
const handlePress = useCallback(
async (event: GestureResponderEvent) => {
@@ -103,6 +108,9 @@ export const Button = ({
{...accessibilityProps(rest)}
>
<View style={styles.content}>
+ {iconBefore && !isSpinning && (
+ <HoliIcon icon={iconBefore} size={iconSize} color={styles.text(disabled, selected, variant).color} />
+ )}
<View style={styles.textContainer(size)}>
<Text size={size === 'lg' ? 'md' : 'sm'} colorOveride={styles.text(disabled, selected, variant).color}>
{labelToShow}
@@ -111,12 +119,12 @@ export const Button = ({
{isSpinning && (
<View testID="spinner">
<SpinningIconContainer spinning={isSpinning}>
- <HoliIcon icon={Loader} size={16} color={styles.text(disabled, selected, variant).color} />
+ <HoliIcon icon={Loader} size={iconSize} color={styles.text(disabled, selected, variant).color} />
</SpinningIconContainer>
</View>
)}
{!isSpinning && icon && (
- <HoliIcon icon={icon} size={16} color={styles.text(disabled, selected, variant).color} />
+ <HoliIcon icon={icon} size={iconSize} color={styles.text(disabled, selected, variant).color} />
)}
</View>
</Pressable>
--
GitLab