ALF confirmation dialogs (Dialogs Pt. 3) (#3143)

* Improve a11y on ios

* Format

* Remove android

* Fix android

* ALF confirmation dialog

* Use ALF for Delete Post confirmation

organize

diff

fix text

minimize

change copy

alternative confirm prompt

revert type changes

add ButtonColor param

* small adjustment to buttons in prompt

* full width below gtmobile

* update hide post dialog

* space out dialogs

* update dialogs for lists

* add example

* add to app passwords

* Revert some changes

* use sharedvalue for `importantForAccessibility`

* add back `isOpen`

* fix some more types

* small adjustment to buttons in prompt

* full width below gtmobile

* update the rest of the prompts

rm old confirm modal

rm update prompt

feed error prompt

feed source card and profile block/unblock

composer discard

* Update src/view/screens/AppPasswords.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* lint

* How about a default

* Reverse reverse

* Port over confirm dialogs

* Add some comments

* Remove unused file

* complete merge

* add testID where needed

---------

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

src/components/Dialog/index.tsx

@@ -75,6 +75,7 @@ export function Outer({
   control,
   onClose,
   nativeOptions,
+  testID,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
   const sheet = React.useRef<BottomSheet>(null)
@@ -145,7 +146,8 @@ export function Outer({
           accessibilityViewIsModal
           // Android
           importantForAccessibility="yes"
-          style={[a.absolute, a.inset_0]}>
+          style={[a.absolute, a.inset_0]}
+          testID={testID}>
           <BottomSheet
             enableDynamicSizing={!hasSnapPoints}
             enablePanDownToClose

src/components/Dialog/types.ts

@@ -46,6 +46,7 @@ export type DialogOuterProps = {
     sheet?: Omit<BottomSheetProps, 'children'>
   }
   webOptions?: {}
+  testID?: string
 }
 
 type DialogInnerPropsBase<T> = React.PropsWithChildren<ViewStyleProp> & T

src/components/Prompt.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import {View, PressableProps} from 'react-native'
+import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useTheme, atoms as a, useBreakpoints} from '#/alf'
 import {Text} from '#/components/Typography'
-import {Button} from '#/components/Button'
+import {Button, ButtonColor, ButtonText} from '#/components/Button'
 
 import * as Dialog from '#/components/Dialog'
 
@@ -22,8 +22,10 @@ const Context = React.createContext<{
 export function Outer({
   children,
   control,
+  testID,
 }: React.PropsWithChildren<{
   control: Dialog.DialogOuterProps['control']
+  testID?: string
 }>) {
   const {gtMobile} = useBreakpoints()
   const titleId = React.useId()
@@ -35,7 +37,7 @@ export function Outer({
   )
 
   return (
-    <Dialog.Outer control={control}>
+    <Dialog.Outer control={control} testID={testID}>
       <Context.Provider value={context}>
         <Dialog.Handle />
 
@@ -80,7 +82,9 @@ export function Actions({children}: React.PropsWithChildren<{}>) {
         a.w_full,
         a.gap_sm,
         a.justify_end,
-        gtMobile ? [a.flex_row] : [a.flex_col, a.pt_md, a.pb_4xl],
+        gtMobile
+          ? [a.flex_row, a.flex_row_reverse, a.justify_start]
+          : [a.flex_col, a.pt_md, a.pb_4xl],
       ]}>
       {children}
     </View>
@@ -89,18 +93,29 @@ export function Actions({children}: React.PropsWithChildren<{}>) {
 
 export function Cancel({
   children,
-}: React.PropsWithChildren<{onPress?: PressableProps['onPress']}>) {
+  cta,
+}: React.PropsWithChildren<{
+  /**
+   * Optional i18n string, used in lieu of `children` for simple buttons. If
+   * undefined (and `children` is undefined), it will default to "Cancel".
+   */
+  cta?: string
+}>) {
   const {_} = useLingui()
   const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
+  const onPress = React.useCallback(() => {
+    close()
+  }, [close])
+
   return (
     <Button
       variant="solid"
       color="secondary"
       size={gtMobile ? 'small' : 'medium'}
-      label={_(msg`Cancel`)}
-      onPress={() => close()}>
-      {children}
+      label={cta || _(msg`Cancel`)}
+      onPress={onPress}>
+      {children ? children : <ButtonText>{cta || _(msg`Cancel`)}</ButtonText>}
     </Button>
   )
 }
@@ -108,22 +123,70 @@ export function Cancel({
 export function Action({
   children,
   onPress,
-}: React.PropsWithChildren<{onPress?: () => void}>) {
+  color = 'primary',
+  cta,
+  testID,
+}: React.PropsWithChildren<{
+  onPress: () => void
+  color?: ButtonColor
+  /**
+   * Optional i18n string, used in lieu of `children` for simple buttons. If
+   * undefined (and `children` is undefined), it will default to "Confirm".
+   */
+  cta?: string
+  testID?: string
+}>) {
   const {_} = useLingui()
   const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
   const handleOnPress = React.useCallback(() => {
     close()
-    onPress?.()
+    onPress()
   }, [close, onPress])
+
   return (
     <Button
       variant="solid"
-      color="primary"
+      color={color}
       size={gtMobile ? 'small' : 'medium'}
-      label={_(msg`Confirm`)}
-      onPress={handleOnPress}>
-      {children}
+      label={cta || _(msg`Confirm`)}
+      onPress={handleOnPress}
+      testID={testID}>
+      {children ? children : <ButtonText>{cta || _(msg`Confirm`)}</ButtonText>}
     </Button>
   )
 }
+
+export function Basic({
+  control,
+  title,
+  description,
+  cancelButtonCta,
+  confirmButtonCta,
+  onConfirm,
+  confirmButtonColor,
+}: React.PropsWithChildren<{
+  control: Dialog.DialogOuterProps['control']
+  title: string
+  description: string
+  cancelButtonCta?: string
+  confirmButtonCta?: string
+  onConfirm: () => void
+  confirmButtonColor?: ButtonColor
+}>) {
+  return (
+    <Outer control={control} testID="confirmModal">
+      <Title>{title}</Title>
+      <Description>{description}</Description>
+      <Actions>
+        <Action
+          cta={confirmButtonCta}
+          onPress={onConfirm}
+          color={confirmButtonColor}
+          testID="confirmBtn"
+        />
+        <Cancel cta={cancelButtonCta} />
+      </Actions>
+    </Outer>
+  )
+}

src/components/dialogs/MutedWords.tsx

@@ -277,29 +277,16 @@ function MutedWordRow({
 
   return (
     <>
-      <Prompt.Outer control={control}>
-        <Prompt.Title>
-          <Trans>Are you sure?</Trans>
-        </Prompt.Title>
-        <Prompt.Description>
-          <Trans>
-            This will delete {word.value} from your muted words. You can always
-            add it back later.
-          </Trans>
-        </Prompt.Description>
-        <Prompt.Actions>
-          <Prompt.Cancel>
-            <ButtonText>
-              <Trans>Nevermind</Trans>
-            </ButtonText>
-          </Prompt.Cancel>
-          <Prompt.Action onPress={remove}>
-            <ButtonText>
-              <Trans>Remove</Trans>
-            </ButtonText>
-          </Prompt.Action>
-        </Prompt.Actions>
-      </Prompt.Outer>
+      <Prompt.Basic
+        control={control}
+        title={_(msg`Are you sure?`)}
+        description={_(
+          msg`This will delete ${word.value} from your muted words. You can always add it back later.`,
+        )}
+        onConfirm={remove}
+        confirmButtonCta={_(msg`Remove`)}
+        confirmButtonColor="negative"
+      />
 
       <View
         style={[