diff --git a/suite-native/atoms/src/Button/Button.tsx b/suite-native/atoms/src/Button/Button.tsx index ac352bc7624..cd48ea7fd68 100644 --- a/suite-native/atoms/src/Button/Button.tsx +++ b/suite-native/atoms/src/Button/Button.tsx @@ -74,6 +74,12 @@ export type ButtonStyleProps = { hasTitle?: boolean; }; +export type ButtonTextStyleProps = { + additionalSpacing: number; + hasLeftView: boolean; + hasRightView: boolean; +}; + const LOADER_FADE_IN_DURATION = 500; const baseDisabledScheme: BaseButtonColorScheme = { @@ -186,20 +192,27 @@ const sizeToDimensionsMap = { small: { minHeight: 40, paddingVertical: 10, - paddingHorizontal: nativeSpacings.sp16, + paddingHorizontal: nativeSpacings.sp12, }, medium: { minHeight: 48, paddingVertical: nativeSpacings.sp12, - paddingHorizontal: nativeSpacings.sp20, + paddingHorizontal: nativeSpacings.sp16, }, large: { minHeight: 56, paddingVertical: nativeSpacings.sp16, - paddingHorizontal: nativeSpacings.sp24, + paddingHorizontal: nativeSpacings.sp20, }, } as const satisfies Record; +const sizeToAdditionalSpacingMap = { + extraSmall: 0, + small: nativeSpacings.sp1, + medium: nativeSpacings.sp2, + large: nativeSpacings.sp4, +} as const satisfies Record; + export const buttonToTextSizeMap = { extraSmall: 'hint', small: 'hint', @@ -237,6 +250,15 @@ export const buttonStyle = prepareNativeStyle( }, ); +const buttonTextStyle = prepareNativeStyle( + (_, { additionalSpacing, hasLeftView, hasRightView }) => { + return { + marginLeft: !hasLeftView ? additionalSpacing : undefined, + marginRight: !hasRightView ? additionalSpacing : undefined, + }; + }, +); + export const ButtonIcon = ({ iconName, color = 'iconDefault', @@ -321,7 +343,16 @@ export const Button = ({ iconSize={size} /> )} - + {children} {viewRight && ( diff --git a/suite-native/module-dev-utils/src/screens/DemoScreen.tsx b/suite-native/module-dev-utils/src/screens/DemoScreen.tsx index 4ca227d46ed..e3e04ea3871 100644 --- a/suite-native/module-dev-utils/src/screens/DemoScreen.tsx +++ b/suite-native/module-dev-utils/src/screens/DemoScreen.tsx @@ -147,6 +147,23 @@ export const DemoScreen = () => { ))} + + {buttonSizes.map(buttonSize => ( + + ))} + ))} @@ -169,6 +186,42 @@ export const DemoScreen = () => { ))} + + {buttonSizes.map(buttonSize => ( + + ))} + + + {buttonSizes.map(buttonSize => ( + + ))} +