Merge pull request #37966 from narefyev91/add-icon-with-button-standa…

…rt-with-design Updated button specification with Icon
Expensify · Mar 13, 2024 · 2d32f2f · 2d32f2f
2 parents cc3a905 + 11cb857
commit 2d32f2f
Show file tree

Hide file tree

Showing 54 changed files with 145 additions and 48 deletions.
diff --git a/assets/images/qrcode.svg b/assets/images/qrcode.svg
diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx
@@ -569,6 +569,7 @@ function AttachmentModal({
                                 <Animated.View style={[StyleUtils.fade(confirmButtonFadeAnimation), safeAreaPaddingBottomStyle]}>
                                     <Button
                                         success
+                                        large
                                         style={[styles.buttonConfirm, isSmallScreenWidth ? {} : styles.attachmentButtonBigScreen]}
                                         textStyles={[styles.buttonConfirmText]}
                                         text={translate('common.send')}

diff --git a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js b/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}

diff --git a/src/components/AvatarCropModal/AvatarCropModal.tsx b/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>
@@ -421,6 +420,7 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose
                     style={[styles.m5]}
                     onPress={cropAndSaveImage}
                     pressOnEnter
+                    large
                     text={translate('common.save')}
                 />
             </ScreenWrapper>

diff --git a/src/components/Button/index.tsx b/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,22 +238,26 @@ 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>
                         )}
                         {textComponent}
                     </View>
                     {shouldShowRightIcon && (
-                        <View style={[styles.justifyContentCenter, styles.ml1, iconRightStyles]}>
+                        <View style={[styles.justifyContentCenter, large ? styles.ml2 : styles.ml1, iconRightStyles]}>
                             <Icon
                                 src={iconRight}
                                 fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
                                 small={small}
+                                medium={medium}
+                                large={large}
                             />
                         </View>
                     )}
@@ -310,17 +315,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), shouldShowRightIcon),
                     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={[

diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx
@@ -145,13 +145,15 @@ function ConfirmContent({
                             style={[styles.mt4]}
                             onPress={onConfirm}
                             pressOnEnter
+                            large
                             text={confirmText || translate('common.yes')}
                             isDisabled={isOffline && shouldDisableConfirmButtonWhenOffline}
                         />
                         {shouldShowCancelButton && (
                             <Button
                                 style={[styles.mt3, styles.noSelect]}
                                 onPress={onCancel}
+                                large
                                 text={cancelText || translate('common.no')}
                             />
                         )}

diff --git a/src/components/ConfirmationPage.tsx b/src/components/ConfirmationPage.tsx
@@ -47,6 +47,7 @@ function ConfirmationPage({animation = LottieAnimations.Fireworks, heading, desc
                 <FixedFooter>
                     <Button
                         success
+                        large
                         text={buttonText}
                         style={styles.mt6}
                         pressOnEnter

diff --git a/src/components/ConnectBankAccountButton.tsx b/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

diff --git a/src/components/DistanceRequest/index.tsx b/src/components/DistanceRequest/index.tsx
@@ -275,6 +275,7 @@ function DistanceRequest({transactionID = '', report, transaction, route, isEdit
                 <Button
                     success
                     allowBubble
+                    large
                     pressOnEnter
                     style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
                     onPress={submitWaypoints}

diff --git a/src/components/FeatureList.tsx b/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]}
@@ -96,6 +95,7 @@ function FeatureList({
                     accessibilityLabel={ctaAccessibilityLabel}
                     style={styles.w100}
                     success
+                    large
                 />
             </View>
         </Section>

diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx
@@ -96,6 +96,7 @@ function FormAlertWithSubmitButton({
                             style={style}
                             danger={isSubmitActionDangerous}
                             medium={useSmallerSubmitButtonSize}
+                            large={!useSmallerSubmitButtonSize}
                         />
                     ) : (
                         <Button
@@ -108,6 +109,7 @@ function FormAlertWithSubmitButton({
                             isLoading={isLoading}
                             danger={isSubmitActionDangerous}
                             medium={useSmallerSubmitButtonSize}
+                            large={!useSmallerSubmitButtonSize}
                         />
                     )}
                     {footerContent}

diff --git a/src/components/Icon/index.tsx b/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) {

diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -665,6 +665,7 @@ class BaseOptionsSelector extends Component {
                         {shouldShowDefaultConfirmButton && (
                             <Button
                                 success
+                                large
                                 style={[this.props.themeStyles.w100]}
                                 text={defaultConfirmButtonText}
                                 onPress={this.props.onConfirmSelection}

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
@@ -150,6 +150,7 @@ function PDFPasswordForm({isFocused, isPasswordInvalid, shouldShowLoadingIndicat
                 style={styles.mt4}
                 isLoading={shouldShowLoadingIndicator}
                 pressOnEnter
+                large
             />
         </ScrollView>
     ) : (

diff --git a/src/components/ProcessMoneyRequestHoldMenu.tsx b/src/components/ProcessMoneyRequestHoldMenu.tsx
@@ -53,6 +53,7 @@ function ProcessMoneyRequestHoldMenu({isVisible, onClose, onConfirm, anchorPosit
                     style={[styles.mt5]}
                     text={translate('common.buttonConfirm')}
                     onPress={onConfirm}
+                    large
                 />
             </View>
         </Popover>

diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -555,6 +555,7 @@ function BaseSelectionList<TItem extends ListItem>(
                             <FixedFooter style={[styles.mtAuto]}>
                                 <Button
                                     success
+                                    large
                                     style={[styles.w100]}
                                     text={confirmButtonText || translate('common.confirm')}
                                     onPress={onConfirm}

diff --git a/src/components/TimePicker/TimePicker.js b/src/components/TimePicker/TimePicker.js
@@ -511,6 +511,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
                         shouldEnableHapticFeedback
                         innerStyles={styleForAM}
                         medium={isExtraSmallScreenHeight}
+                        large={!isExtraSmallScreenHeight}
                         text={translate('common.am')}
                         onLongPress={() => {}}
                         onPress={() => {
@@ -523,6 +524,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
                         shouldEnableHapticFeedback
                         innerStyles={[...styleForPM, styles.ml1]}
                         medium={isExtraSmallScreenHeight}
+                        large={!isExtraSmallScreenHeight}
                         text={translate('common.pm')}
                         onLongPress={() => {}}
                         onPress={() => {
@@ -551,6 +553,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
             <Button
                 success
                 medium={isExtraSmallScreenHeight}
+                large={!isExtraSmallScreenHeight}
                 style={[styles.mb5, styles.mh5]}
                 onPress={handleSubmit}
                 pressOnEnter

diff --git a/src/pages/OnboardEngagement/ExpensifyClassicPage.tsx b/src/pages/OnboardEngagement/ExpensifyClassicPage.tsx
@@ -49,6 +49,7 @@ function ExpensifyClassicModal() {
                     success
                     pressOnEnter
                     medium={isExtraSmallScreenHeight}
+                    large={!isExtraSmallScreenHeight}
                     style={[styles.w100, styles.mtAuto]}
                     text={translate('expensifyClassic.buttonText')}
                     onPress={navigateToOldDot}

diff --git a/src/pages/OnboardEngagement/ManageTeamsExpensesPage.tsx b/src/pages/OnboardEngagement/ManageTeamsExpensesPage.tsx
@@ -97,13 +97,15 @@ function ManageTeamsExpensesModal() {
                     <View style={styles.flexRow}>
                         <Button
                             medium={isExtraSmallScreenHeight}
+                            large={!isExtraSmallScreenHeight}
                             style={[styles.flexGrow1, styles.mr1, styles.mtAuto]}
                             text={translate('common.no')}
                             onPress={completeEngagement}
                         />
                         <Button
                             pressOnEnter
                             medium={isExtraSmallScreenHeight}
+                            large={!isExtraSmallScreenHeight}
                             style={[styles.flexGrow1, styles.ml1, styles.mtAuto]}
                             text={translate('common.yes')}
                             onPress={navigateToExpensifyClassicPage}

diff --git a/src/pages/ProcessMoneyRequestHoldPage.tsx b/src/pages/ProcessMoneyRequestHoldPage.tsx
@@ -25,6 +25,7 @@ function ProcessMoneyRequestHoldPage() {
                 success
                 text={translate('common.buttonConfirm')}
                 onPress={onConfirm}
+                large
             />
         ),
         [onConfirm, translate],