Updated button specification with Icon

src/components/Attachments/AttachmentCarousel/CarouselButtons.js

@@ -54,7 +54,6 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
                             innerStyles={[styles.arrowIcon]}
                             icon={Expensicons.BackArrow}
                             iconFill={theme.text}
-                            iconStyles={[styles.mr0]}
                             onPress={onBack}
                             onPressIn={cancelAutoHideArrow}
                             onPressOut={autoHideArrow}
@@ -70,7 +69,6 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
                             innerStyles={[styles.arrowIcon]}
                             icon={Expensicons.ArrowRight}
                             iconFill={theme.text}
-                            iconStyles={[styles.mr0]}
                             onPress={onForward}
                             onPressIn={cancelAutoHideArrow}
                             onPressOut={autoHideArrow}

src/components/AvatarCropModal/AvatarCropModal.tsx

@@ -407,7 +407,6 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose
                                             medium
                                             icon={Expensicons.Rotate}
                                             iconFill={theme.inverse}
-                                            iconStyles={[styles.mr0]}
                                             onPress={rotateImage}
                                         />
                                     </View>

src/components/Button/index.tsx

@@ -10,6 +10,7 @@ import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
 import useActiveElementRole from '@hooks/useActiveElementRole';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import HapticFeedback from '@libs/HapticFeedback';
@@ -18,18 +19,7 @@ import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type IconAsset from '@src/types/utils/IconAsset';
 import validateSubmitShortcut from './validateSubmitShortcut';
 
-type ButtonWithText = {
-    /** The text for the button label */
-    text?: string;
-
-    /** Boolean whether to display the right icon */
-    shouldShowRightIcon?: boolean;
-
-    /** The icon asset to display to the left of the text */
-    icon?: IconAsset | null;
-};
-
-type ButtonProps = (ButtonWithText | ChildrenProps) & {
+type ButtonProps = Partial<ChildrenProps> & {
     /** Should the press event bubble across multiple instances when Enter key triggers it. */
     allowBubble?: boolean;
 
@@ -116,6 +106,15 @@ type ButtonProps = (ButtonWithText | ChildrenProps) & {
 
     /** Accessibility label for the component */
     accessibilityLabel?: string;
+
+    /** The icon asset to display to the left of the text */
+    icon?: IconAsset | null;
+
+    /** The text for the button label */
+    text?: string;
+
+    /** Boolean whether to display the right icon */
+    shouldShowRightIcon?: boolean;
 };
 
 type KeyboardShortcutComponentProps = Pick<ButtonProps, 'isDisabled' | 'isLoading' | 'onPress' | 'pressOnEnter' | 'allowBubble' | 'enterKeyEventListenerPriority'>;
@@ -162,8 +161,10 @@ function Button(
 
         iconRight = Expensicons.ArrowRight,
         iconFill,
+        icon = null,
         iconStyles = [],
         iconRightStyles = [],
+        text = '',
 
         small = false,
         large = false,
@@ -193,6 +194,7 @@ function Button(
         shouldRemoveLeftBorderRadius = false,
         shouldEnableHapticFeedback = false,
         isLongPressDisabled = false,
+        shouldShowRightIcon = false,
 
         id = '',
         accessibilityLabel = '',
@@ -202,14 +204,13 @@ function Button(
 ) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
 
     const renderContent = () => {
         if ('children' in rest) {
             return rest.children;
         }
 
-        const {text = '', icon = null, shouldShowRightIcon = false} = rest;
-
         const textComponent = (
             <Text
                 numberOfLines={1}
@@ -237,11 +238,13 @@ function Button(
                 <View style={[styles.justifyContentBetween, styles.flexRow]}>
                     <View style={[styles.alignItemsCenter, styles.flexRow, styles.flexShrink1]}>
                         {icon && (
-                            <View style={[styles.mr1, iconStyles]}>
+                            <View style={[large ? styles.mr2 : styles.mr1, !text && styles.mr0, iconStyles]}>
                                 <Icon
                                     src={icon}
                                     fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
                                     small={small}
+                                    medium={medium}
+                                    large={large}
                                 />
                             </View>
                         )}
@@ -310,17 +313,15 @@ function Button(
                 ]}
                 style={[
                     styles.button,
-                    small ? styles.buttonSmall : undefined,
-                    medium ? styles.buttonMedium : undefined,
-                    large ? styles.buttonLarge : undefined,
+                    StyleUtils.getButtonStyleWithIcon(styles, small, medium, large, Boolean(icon), Boolean(text?.length > 0)),
                     success ? styles.buttonSuccess : undefined,
                     danger ? styles.buttonDanger : undefined,
                     isDisabled ? styles.buttonOpacityDisabled : undefined,
                     isDisabled && !danger && !success ? styles.buttonDisabled : undefined,
                     shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
                     shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
                     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                    'text' in rest && rest?.shouldShowRightIcon ? styles.alignItemsStretch : undefined,
+                    text && shouldShowRightIcon ? styles.alignItemsStretch : undefined,
                     innerStyles,
                 ]}
                 hoverStyle={[

src/components/ConnectBankAccountButton.tsx

@@ -3,7 +3,6 @@ import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReimbursementAccount from '@userActions/ReimbursementAccount';
 import Button from './Button';
@@ -19,7 +18,6 @@ type ConnectBankAccountButtonProps = {
 };
 
 function ConnectBankAccountButton({style, policyID}: ConnectBankAccountButtonProps) {
-    const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
     const activeRoute = Navigation.getActiveRouteWithoutParams();
@@ -34,7 +32,6 @@ function ConnectBankAccountButton({style, policyID}: ConnectBankAccountButtonPro
             onPress={() => ReimbursementAccount.navigateToBankAccountRoute(policyID, activeRoute)}
             icon={Expensicons.Bank}
             style={style}
-            iconStyles={styles.buttonCTAIcon}
             shouldShowRightIcon
             large
             success

src/components/FeatureList.tsx

@@ -81,7 +81,6 @@ function FeatureList({
                                 icon={icon}
                                 iconWidth={variables.avatarSizeMedium}
                                 iconHeight={variables.avatarSizeMedium}
-                                iconStyles={styles.mr2}
                                 interactive={false}
                                 displayInDefaultIconColor
                                 wrapperStyle={[styles.p0, styles.cursorAuto]}

src/components/Icon/index.tsx

@@ -25,6 +25,12 @@ type IconProps = {
     /** Is small icon */
     small?: boolean;
 
+    /** Is large icon */
+    large?: boolean;
+
+    /** Is medium icon */
+    medium?: boolean;
+
     /** Is inline icon */
     inline?: boolean;
 
@@ -50,6 +56,8 @@ function Icon({
     height = variables.iconSizeNormal,
     fill = undefined,
     small = false,
+    large = false,
+    medium = false,
     inline = false,
     additionalStyles = [],
     hovered = false,
@@ -59,8 +67,7 @@ function Icon({
 }: IconProps) {
     const StyleUtils = useStyleUtils();
     const styles = useThemeStyles();
-    const iconWidth = small ? variables.iconSizeSmall : width;
-    const iconHeight = small ? variables.iconSizeSmall : height;
+    const {width: iconWidth, height: iconHeight} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height);
     const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, styles.pAbsolute, additionalStyles];
 
     if (inline) {

src/pages/ReimbursementAccount/BankAccountStep.js

@@ -145,7 +145,6 @@ function BankAccountStep(props) {
                             }}
                             isDisabled={props.isPlaidDisabled || !props.user.validated}
                             style={[styles.mt4]}
-                            iconStyles={[styles.buttonCTAIcon]}
                             shouldShowRightIcon
                             success
                             large

src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx

@@ -42,7 +42,6 @@ function FinishChatCard({requiresTwoFactorAuth, reimbursementAccount}: FinishCha
                     text={translate('connectBankAccountStep.letsChatCTA')}
                     onPress={handleNavigateToConciergeChat}
                     icon={Expensicons.ChatBubble}
-                    iconStyles={[styles.buttonCTAIcon]}
                     shouldShowRightIcon
                     large
                     success

src/pages/ReimbursementAccount/ContinueBankAccountSetup.js

@@ -69,7 +69,6 @@ function ContinueBankAccountSetup(props) {
                             onPress={props.continue}
                             icon={Expensicons.Bank}
                             style={[styles.mv4]}
-                            iconStyles={[styles.buttonCTAIcon]}
                             shouldShowRightIcon
                             large
                             success

src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx

@@ -93,7 +93,6 @@ function EnableBankAccount({reimbursementAccount, user, onBackButtonPress}: Enab
                                 }}
                                 icon={Expensicons.Mail}
                                 style={[styles.mt4]}
-                                iconStyles={[styles.buttonCTAIcon]}
                                 shouldShowRightIcon
                                 large
                                 success

src/pages/settings/Wallet/PaymentMethodList.tsx

@@ -358,7 +358,6 @@ function PaymentMethodList({
                             // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                             isDisabled={isLoadingPaymentMethods || isFormOffline}
                             style={[styles.mh4, styles.buttonCTA]}
-                            iconStyles={[styles.buttonCTAIcon]}
                             key="addPaymentMethodButton"
                             success
                             shouldShowRightIcon

src/pages/workspace/WorkspaceMembersPage.tsx

@@ -483,7 +483,6 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
                         onPress={inviteUser}
                         text={translate('workspace.invite.member')}
                         icon={Expensicons.Plus}
-                        iconStyles={StyleUtils.getTransformScaleStyle(0.6)}
                         innerStyles={[isSmallScreenWidth && styles.alignItemsCenter]}
                         style={[isSmallScreenWidth && styles.flexGrow1]}
                     />

src/pages/workspace/WorkspaceProfilePage.tsx

@@ -193,13 +193,15 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi
                                         text={translate('common.share')}
                                         onPress={onPressShare}
                                         medium
+                                        icon={Expensicons.QrCode}
                                     />
                                     <Button
                                         accessibilityLabel={translate('common.delete')}
                                         text={translate('common.delete')}
                                         style={[styles.ml2]}
                                         onPress={() => setIsDeleteModalOpen(true)}
                                         medium
+                                        icon={Expensicons.Trashcan}
                                     />
                                 </View>
                             )}

src/pages/workspace/card/WorkspaceCardVBANoECardView.tsx

@@ -44,7 +44,6 @@ function WorkspaceCardVBANoECardView({user}: WorkspaceCardVBANoECardViewProps) {
                     }}
                     icon={Expensicons.Mail}
                     style={[styles.mt4]}
-                    iconStyles={[styles.buttonCTAIcon]}
                     shouldShowRightIcon
                     large
                     success

src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

@@ -143,7 +143,6 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
                 medium
                 onPress={navigateToCategoriesSettings}
                 icon={Expensicons.Gear}
-                iconStyles={[styles.mr2]}
                 text={translate('common.settings')}
                 style={[isSmallScreenWidth && styles.w50]}
             />

src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx

@@ -200,7 +200,6 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
                         onPress={addRate}
                         style={[styles.mr3, isSmallScreenWidth && styles.flexGrow1]}
                         icon={Expensicons.Plus}
-                        iconStyles={[styles.mr2]}
                         success
                     />
 
@@ -210,7 +209,6 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
                         onPress={openSettings}
                         style={[isSmallScreenWidth && styles.flexGrow1]}
                         icon={Expensicons.Gear}
-                        iconStyles={[styles.mr2]}
                     />
                 </>
             ) : (

src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx

@@ -14,7 +14,6 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as UserUtils from '@libs/UserUtils';
 import Navigation from '@navigation/Navigation';
@@ -41,7 +40,6 @@ type WorkspaceMemberDetailsPageProps = WithPolicyAndFullscreenLoadingProps & Wor
 function WorkspaceMemberDetailsPage({personalDetails, policyMembers, policy, route}: WorkspaceMemberDetailsPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const StyleUtils = useStyleUtils();
 
     const [isRemoveMemberConfirmModalVisible, setIsRemoveMemberConfirmModalVisible] = React.useState(false);
 
@@ -106,7 +104,6 @@ function WorkspaceMemberDetailsPage({personalDetails, policyMembers, policy, rou
                                 onPress={askForConfirmationToRemove}
                                 medium
                                 icon={Expensicons.RemoveMembers}
-                                iconStyles={StyleUtils.getTransformScaleStyle(0.8)}
                                 style={styles.mv5}
                             />
                             <ConfirmModal

src/styles/index.ts

@@ -534,7 +534,7 @@ const styles = (theme: ThemeColors) =>
         button: {
             backgroundColor: theme.buttonDefaultBG,
             borderRadius: variables.buttonBorderRadius,
-            minHeight: variables.componentSizeLarge,
+            minHeight: variables.componentSizeNormal,
             justifyContent: 'center',
             alignItems: 'center',
             ...spacing.ph3,
@@ -573,23 +573,21 @@ const styles = (theme: ThemeColors) =>
         buttonSmall: {
             borderRadius: variables.buttonBorderRadius,
             minHeight: variables.componentSizeSmall,
-            paddingHorizontal: 14,
+            paddingHorizontal: 12,
             backgroundColor: theme.buttonDefaultBG,
         },
 
         buttonMedium: {
             borderRadius: variables.buttonBorderRadius,
             minHeight: variables.componentSizeNormal,
-            paddingRight: 16,
-            paddingLeft: 16,
+            paddingHorizontal: 16,
             backgroundColor: theme.buttonDefaultBG,
         },
 
         buttonLarge: {
             borderRadius: variables.buttonBorderRadius,
             minHeight: variables.componentSizeLarge,
-            paddingRight: 10,
-            paddingLeft: 10,
+            paddingHorizontal: 20,
             backgroundColor: theme.buttonDefaultBG,
         },