Skip to content

Commit 0eb3725

Browse files
mikolajpochecmikolajpochec
committed
Migrate Button to ComposeButton (batch 3)
1 parent 112c806 commit 0eb3725

34 files changed

Lines changed: 238 additions & 193 deletions

‎src/pages/settings/ExitSurvey/DynamicExitSurveyReasonPage.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Button from '@components/Button';
1+
import Button from '@components/ButtonComposed';
22
import FixedFooter from '@components/FixedFooter';
33
import FormProvider from '@components/Form/FormProvider';
44
import InputWrapper from '@components/Form/InputWrapper';
@@ -151,20 +151,22 @@ function DynamicExitSurveyReasonPage() {
151151
</FormProvider>
152152
<FixedFooter>
153153
<Button
154-
large
155-
text={translate('exitSurvey.goToExpensifyClassic')}
154+
size={CONST.BUTTON_SIZE.LARGE}
156155
onPress={switchToClassic}
157156
isDisabled={isOffline}
158-
/>
157+
>
158+
<Button.Text>{translate('exitSurvey.goToExpensifyClassic')}</Button.Text>
159+
</Button>
159160
<Button
160-
success
161-
large
162-
pressOnEnter
163-
text={translate('exitSurvey.goBackJustOnce')}
161+
variant={CONST.BUTTON_VARIANT.SUCCESS}
162+
size={CONST.BUTTON_SIZE.LARGE}
164163
onPress={goBackJustOnce}
165164
isDisabled={isOffline}
166165
style={styles.mt3}
167-
/>
166+
>
167+
<Button.KeyboardShortcut />
168+
<Button.Text>{translate('exitSurvey.goBackJustOnce')}</Button.Text>
169+
</Button>
168170
</FixedFooter>
169171
</ScreenWrapper>
170172
);

‎src/pages/settings/Profile/CustomStatus/StatusPage.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Button from '@components/Button';
1+
import Button from '@components/ButtonComposed';
22
import DelegatorList from '@components/DelegatorList';
33
import EmojiPickerButtonDropdown from '@components/EmojiPicker/EmojiPickerButtonDropdown';
44
import FixedFooter from '@components/FixedFooter';
@@ -158,15 +158,15 @@ function StatusPage() {
158158
const saveButton = useMemo(
159159
() => (
160160
<Button
161-
success
162-
large
161+
variant={CONST.BUTTON_VARIANT.SUCCESS}
162+
size={CONST.BUTTON_SIZE.LARGE}
163163
style={styles.w100}
164-
text={translate('statusPage.save')}
165164
onPress={() => formRef.current?.submit()}
166-
pressOnEnter
167-
enterKeyEventListenerPriority={1}
168165
isLoading={isFormLoading}
169-
/>
166+
>
167+
<Button.KeyboardShortcut enterKeyEventListenerPriority={1} />
168+
<Button.Text>{translate('statusPage.save')}</Button.Text>
169+
</Button>
170170
),
171171
[translate, isFormLoading, styles.w100],
172172
);

‎src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Button from '@components/Button';
1+
import Button from '@components/ButtonComposed';
22
import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper';
33
import HeaderPageLayout from '@components/HeaderPageLayout';
44
import MenuItem from '@components/MenuItem';
@@ -41,16 +41,17 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
4141

4242
const submitButton = (
4343
<Button
44-
success
44+
variant={CONST.BUTTON_VARIANT.SUCCESS}
4545
isDisabled={isOffline}
46-
large
47-
text={translate('delegate.addCopilot')}
46+
size={CONST.BUTTON_SIZE.LARGE}
4847
style={styles.mt6}
49-
pressOnEnter
5048
onPress={() => {
5149
Navigation.navigate(ROUTES.SETTINGS_DELEGATE_CONFIRM_MAGIC_CODE.getRoute(login, role));
5250
}}
53-
/>
51+
>
52+
<Button.KeyboardShortcut />
53+
<Button.Text>{translate('delegate.addCopilot')}</Button.Text>
54+
</Button>
5455
);
5556

5657
return (

‎src/pages/settings/Security/LockAccount/LockAccountPageBase.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Button from '@components/Button';
1+
import Button from '@components/ButtonComposed';
22
import HeaderPageLayout from '@components/HeaderPageLayout';
33
import {ModalActions} from '@components/Modal/Global/ModalContext';
44

@@ -11,6 +11,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
1111
import type {LockAccountOnyxKey} from '@userActions/User';
1212
import {lockAccount} from '@userActions/User';
1313

14+
import CONST from '@src/CONST';
1415
import type Response from '@src/types/onyx/Response';
1516

1617
import React, {useState} from 'react';
@@ -74,15 +75,16 @@ function LockAccountPageBase({
7475

7576
const lockAccountButton = (
7677
<Button
77-
danger
78+
variant={CONST.BUTTON_VARIANT.DANGER}
7879
isLoading={isLoading}
7980
isDisabled={isOffline}
80-
large
81-
text={lockButtonText ?? translate('lockAccountPage.reportSuspiciousActivity')}
81+
size={CONST.BUTTON_SIZE.LARGE}
8282
style={styles.mt6}
83-
pressOnEnter
8483
onPress={handleReportSuspiciousActivity}
85-
/>
84+
>
85+
<Button.KeyboardShortcut />
86+
<Button.Text>{lockButtonText ?? translate('lockAccountPage.reportSuspiciousActivity')}</Button.Text>
87+
</Button>
8688
);
8789

8890
return (

‎src/pages/settings/Subscription/CardSection/BillingBanner/EarlyDiscountBanner.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Button from '@components/Button';
1+
import Button from '@components/ButtonComposed';
22
import Icon from '@components/Icon';
33
import {PressableWithFeedback} from '@components/Pressable';
44
import RenderHTML from '@components/RenderHTML';
@@ -91,11 +91,12 @@ function EarlyDiscountBanner({isSubscriptionPage, onboardingHelpDropdownButton,
9191
<View style={[styles.flexRow, styles.gap2, smallScreenStyle, styles.alignItemsCenter]}>
9292
{onboardingHelpDropdownButton}
9393
<Button
94-
success={!hasActiveScheduledCall}
94+
variant={!hasActiveScheduledCall ? CONST.BUTTON_VARIANT.SUCCESS : undefined}
9595
style={shouldDisplayButtonsInSeparateLine ? [styles.earlyDiscountButton, styles.flexGrow2] : styles.mr2}
96-
text={translate('subscription.billingBanner.earlyDiscount.claimOffer')}
9796
onPress={() => Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION.getRoute(Navigation.getActiveRoute()))}
98-
/>
97+
>
98+
<Button.Text>{translate('subscription.billingBanner.earlyDiscount.claimOffer')}</Button.Text>
99+
</Button>
99100
{!shouldDisplayButtonsInSeparateLine && dismissButton}
100101
</View>
101102
);

‎src/pages/settings/Subscription/CardSection/CardSectionDataEmpty/index.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import Button from '@components/Button';
1+
import Button from '@components/ButtonComposed';
22
import {useDelegateNoAccessActions, useDelegateNoAccessState} from '@components/DelegateNoAccessModalProvider';
33

44
import useLocalize from '@hooks/useLocalize';
55
import useThemeStyles from '@hooks/useThemeStyles';
66

77
import Navigation from '@navigation/Navigation';
88

9+
import CONST from '@src/CONST';
910
import ROUTES from '@src/ROUTES';
1011

1112
import React, {useCallback} from 'react';
@@ -28,12 +29,13 @@ function CardSectionDataEmpty() {
2829
};
2930
return (
3031
<Button
31-
text={translate('subscription.cardSection.addCardButton')}
32+
variant={CONST.BUTTON_VARIANT.SUCCESS}
33+
size={CONST.BUTTON_SIZE.LARGE}
3234
onPress={handleAddPaymentCardPress}
3335
style={styles.w100}
34-
success
35-
large
36-
/>
36+
>
37+
<Button.Text>{translate('subscription.cardSection.addCardButton')}</Button.Text>
38+
</Button>
3739
);
3840
}
3941

‎src/pages/settings/Subscription/SubscriptionPlan/SubscriptionPlanCardActionButton.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Button from '@components/Button';
1+
import Button from '@components/ButtonComposed';
22
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
33
import Text from '@components/Text';
44

@@ -111,10 +111,11 @@ function SubscriptionPlanCardActionButton({subscriptionPlan, isFromComparisonMod
111111
}
112112
return (
113113
<Button
114-
text={translate('subscription.yourPlan.downgrade')}
115114
style={style}
116115
onPress={() => handlePlanPress(CONST.POLICY.TYPE.TEAM)}
117-
/>
116+
>
117+
<Button.Text>{translate('subscription.yourPlan.downgrade')}</Button.Text>
118+
</Button>
118119
);
119120
}
120121
}
@@ -126,11 +127,12 @@ function SubscriptionPlanCardActionButton({subscriptionPlan, isFromComparisonMod
126127
}
127128
return (
128129
<Button
129-
success
130+
variant={CONST.BUTTON_VARIANT.SUCCESS}
130131
style={style}
131-
text={translate('subscription.yourPlan.upgrade')}
132132
onPress={() => handlePlanPress(CONST.POLICY.TYPE.CORPORATE)}
133-
/>
133+
>
134+
<Button.Text>{translate('subscription.yourPlan.upgrade')}</Button.Text>
135+
</Button>
134136
);
135137
}
136138
}
@@ -156,10 +158,11 @@ function SubscriptionPlanCardActionButton({subscriptionPlan, isFromComparisonMod
156158
/>
157159
<View style={[style, styles.mt2]}>
158160
<Button
159-
text={translate('subscription.subscriptionSettings.editSubscription')}
160161
onPress={() => Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION_SETTINGS_DETAILS)}
161162
style={styles.alignSelfStart}
162-
/>
163+
>
164+
<Button.Text>{translate('subscription.subscriptionSettings.editSubscription')}</Button.Text>
165+
</Button>
163166
</View>
164167
</View>
165168
);

‎src/pages/settings/Wallet/ActivatePhysicalCardPageBase.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Button from '@components/Button';
1+
import Button from '@components/ButtonComposed';
22
import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
33
import LottieAnimations from '@components/LottieAnimations';
44
import MagicCodeInput from '@components/MagicCodeInput';
@@ -135,16 +135,16 @@ function ActivatePhysicalCardPageBase({cardID = '', navigateBackTo, isFromDomain
135135
/>
136136
</View>
137137
<Button
138-
success
138+
variant={CONST.BUTTON_VARIANT.SUCCESS}
139139
isDisabled={isOffline}
140140
isLoading={inactiveCard?.isLoading}
141-
medium={isExtraSmallScreenHeight}
142-
large={!isExtraSmallScreenHeight}
141+
size={isExtraSmallScreenHeight ? undefined : CONST.BUTTON_SIZE.LARGE}
143142
style={[styles.w100, styles.p5, styles.mtAuto]}
144143
onPress={submitAndNavigateToNextPage}
145-
pressOnEnter
146-
text={translate('activateCardPage.activatePhysicalCard')}
147-
/>
144+
>
145+
<Button.KeyboardShortcut />
146+
<Button.Text>{translate('activateCardPage.activatePhysicalCard')}</Button.Text>
147+
</Button>
148148
</IllustratedHeaderPageLayout>
149149
);
150150
}

‎src/pages/settings/Wallet/PersonalCardDetailsPage.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Button from '@components/Button';
1+
import Button from '@components/ButtonComposed';
22
import FormHelpMessage from '@components/FormHelpMessage';
33
import HeaderWithBackButton from '@components/HeaderWithBackButton';
44
import ImageSVG from '@components/ImageSVG';
@@ -253,13 +253,14 @@ function PersonalCardDetailsPage({route}: PersonalCardDetailsPageProps) {
253253
style={[styles.flex1, styles.mb0]}
254254
/>
255255
<Button
256-
small
257-
danger
258-
text={translate('personalCard.fixCard')}
256+
variant={CONST.BUTTON_VARIANT.DANGER}
257+
size={CONST.BUTTON_SIZE.SMALL}
259258
onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_PERSONAL_CARD_FIX_CONNECTION.getRoute(cardID))}
260259
isDisabled={isOffline || card?.isLoadingLastUpdated}
261260
style={[styles.mb0, styles.alignSelfStart]}
262-
/>
261+
>
262+
<Button.Text>{translate('personalCard.fixCard')}</Button.Text>
263+
</Button>
263264
</View>
264265
</OfflineWithFeedback>
265266
)}

‎src/pages/settings/Wallet/PersonalCards/PersonalCardWarning.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Button from '@components/Button';
1+
import Button from '@components/ButtonComposed';
22
import HeaderPageLayout from '@components/HeaderPageLayout';
33
import RenderHTML from '@components/RenderHTML';
44
import Text from '@components/Text';
@@ -13,6 +13,7 @@ import {getPolicyExpenseChat} from '@libs/ReportUtils';
1313

1414
import Navigation from '@navigation/Navigation';
1515

16+
import CONST from '@src/CONST';
1617
import ROUTES from '@src/ROUTES';
1718

1819
import React from 'react';
@@ -63,23 +64,25 @@ function PersonalCardWarning() {
6364
footer={
6465
<>
6566
<Button
66-
large
67-
text={translate('personalCard.thisIsPersonalCard')}
67+
size={CONST.BUTTON_SIZE.LARGE}
6868
testID="confirmation-secondary-button"
6969
style={styles.mt3}
7070
onPress={() => {
7171
Navigation.navigate(ROUTES.SETTINGS_WALLET_PERSONAL_CARD_ADD_NEW);
7272
}}
73-
/>
73+
>
74+
<Button.Text>{translate('personalCard.thisIsPersonalCard')}</Button.Text>
75+
</Button>
7476
<Button
75-
success
76-
large
77-
text={translate(isAdmin ? 'personalCard.thisIsCompanyCard' : 'personalCard.askAdmin')}
77+
variant={CONST.BUTTON_VARIANT.SUCCESS}
78+
size={CONST.BUTTON_SIZE.LARGE}
7879
testID="confirmation-primary-button"
7980
style={styles.mt3}
80-
pressOnEnter
8181
onPress={onPrimaryActionPress}
82-
/>
82+
>
83+
<Button.Text>{translate(isAdmin ? 'personalCard.thisIsCompanyCard' : 'personalCard.askAdmin')}</Button.Text>
84+
<Button.KeyboardShortcut />
85+
</Button>
8386
</>
8487
}
8588
childrenContainerStyles={[styles.pt0, styles.gap6]}

0 commit comments

Comments
 (0)