fix: button styling for native (#604)

razorpay · Aug 3, 2022 · 17b2c71 · 17b2c71
1 parent bbb621b
commit 17b2c71
Show file tree

Hide file tree

Showing 7 changed files with 395 additions and 246 deletions.
diff --git a/.changeset/silly-spies-grin.md b/.changeset/silly-spies-grin.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix: button styling for native
diff --git a/packages/blade/src/components/Button/BaseButton/BaseButton.tsx b/packages/blade/src/components/Button/BaseButton/BaseButton.tsx
@@ -144,7 +144,7 @@ const getProps = ({
     fontSize: buttonTypographyTokens.fonts.size[size],
     lineHeight: buttonTypographyTokens.lineHeights[size],
     minHeight: makeSize(buttonMinHeight[size]),
-    iconPadding: hasIcon ? `spacing.${textPadding[size]}` : undefined,
+    iconPadding: hasIcon && children?.trim() ? `spacing.${textPadding[size]}` : undefined,
     iconColor: getColorToken({
       property: 'icon',
       variant,
@@ -354,7 +354,7 @@ const BaseButton = ({
         flexDirection="row"
         alignItems="center"
         justifyContent="center"
-        alignSelf="center"
+        flex={1}
         isHidden={isLoading}
       >
         {Icon && iconPosition == 'left' ? (

diff --git a/packages/blade/src/components/Button/BaseButton/StyledBaseButton.native.tsx b/packages/blade/src/components/Button/BaseButton/StyledBaseButton.native.tsx
@@ -8,7 +8,10 @@ import { useTheme } from '~components/BladeProvider';
 
 const StyledPressable = styled(Animated.createAnimatedComponent(Pressable))<
   Omit<StyledBaseButtonProps, 'onClick' | 'accessibilityProps'>
->((props) => getStyledBaseButtonStyles(props));
+>((props) => ({
+  ...getStyledBaseButtonStyles(props),
+  alignSelf: 'center',
+}));
 
 const StyledBaseButton = ({
   onClick,