Page MenuHomePhabricator
Differential D14150

[native] add danger option to `PrimaryButton`
ClosedPublic
Actions

Authored by kamil on Dec 12 2024, 11:20 AM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Apr 2, 4:32 AM
Unknown Object (File)
Thu, Mar 27, 5:02 PM
Unknown Object (File)
Wed, Mar 26, 10:06 AM
Unknown Object (File)
Tue, Mar 25, 7:53 PM
Unknown Object (File)
Tue, Mar 25, 2:17 PM
Unknown Object (File)
Mar 6 2025, 2:53 PM
Unknown Object (File)
Feb 23 2025, 5:49 PM
Unknown Object (File)
Feb 18 2025, 9:14 AM
View All 40 Files
Subscribers
None

Details

Reviewers
ashoat
tomek
Commits
rCOMMcb62ca92a1c5: [native] add danger option to `PrimaryButton`
Summary

ENG-9959.

According to this we want a red Remove button so adding this config here.

I was trying to follow the approach we had in the codebase and was looking for patterns, but perhaps I broke some rules in how we should use colors, so sorry for that in advance.

Dark:

image.png (160×746 px, 15 KB)

Light:

image.png (150×736 px, 16 KB)

Example screen where this is used:

IMG_4790 (1).PNG (1×828 px, 57 KB)

Depends on D14149

Test Plan

Render button using dark and light theme

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

PathSize
native/
components/
16 lines

Diff 46550

View Options

native/components/primary-button.react.js

Show First 20 Lines • Show All 177 Lines • ▼ Show 20 Lines
export const IntroTipRouteName = 'IntroTip'; export const IntroTipRouteName = 'IntroTip';
export const CommunityDrawerTipRouteName = 'CommunityDrawerTip'; export const CommunityDrawerTipRouteName = 'CommunityDrawerTip';
export const HomeTabTipRouteName = 'HomeTabTip'; export const HomeTabTipRouteName = 'HomeTabTip';
export const MutedTabTipRouteName = 'MutedTabTip'; export const MutedTabTipRouteName = 'MutedTabTip';
export const NUXTipOverlayBackdropRouteName = 'NUXTipOverlayBackdrop'; export const NUXTipOverlayBackdropRouteName = 'NUXTipOverlayBackdrop';
export const QRAuthNavigatorRouteName = 'QRAuthNavigator'; export const QRAuthNavigatorRouteName = 'QRAuthNavigator';
export const QRAuthNotPrimaryDeviceRouteName = 'QRAuthNotPrimaryDevice'; export const QRAuthNotPrimaryDeviceRouteName = 'QRAuthNotPrimaryDevice';
export const ConnectSecondaryDeviceRouteName = 'ConnectSecondaryDevice'; export const ConnectSecondaryDeviceRouteName = 'ConnectSecondaryDevice';
export const SecondaryDeviceConnectedRouteName = 'SecondaryDeviceConnected';
export type RootParamList = { export type RootParamList = {
+LoggedOutModal: void, +LoggedOutModal: void,
+App: void, +App: void,
+ThreadPickerModal: ThreadPickerModalParams, +ThreadPickerModal: ThreadPickerModalParams,
+AddUsersModal: AddUsersModalParams, +AddUsersModal: AddUsersModalParams,
+CustomServerModal: CustomServerModalParams, +CustomServerModal: CustomServerModalParams,
+ColorSelectorModal: ColorSelectorModalParams, +ColorSelectorModal: ColorSelectorModalParams,
▲ Show 20 Lines • Show All 160 Lines • ▼ Show 20 Linesexport type UserProfileBottomSheetParamList = {
+UserProfileAvatarModal: UserProfileAvatarModalParams, +UserProfileAvatarModal: UserProfileAvatarModalParams,
+UserRelationshipTooltipModal: UserRelationshipTooltipModalParams, +UserRelationshipTooltipModal: UserRelationshipTooltipModalParams,
}; };
export type QRAuthNavigatorParamList = { export type QRAuthNavigatorParamList = {
+SecondaryDeviceQRCodeScanner: void, +SecondaryDeviceQRCodeScanner: void,
+QRAuthNotPrimaryDevice: void, +QRAuthNotPrimaryDevice: void,
+ConnectSecondaryDevice: ConnectSecondaryDeviceParams, +ConnectSecondaryDevice: ConnectSecondaryDeviceParams,
+SecondaryDeviceConnected: void,
}; };
export type ScreenParamList = { export type ScreenParamList = {
...RootParamList, ...RootParamList,
...OverlayParamList, ...OverlayParamList,
...TabParamList, ...TabParamList,
...ChatParamList, ...ChatParamList,
...ChatTopTabsParamList, ...ChatTopTabsParamList,
▲ Show 20 Lines • Show All 50 Lines • Show Last 20 Lines