feat: migrate Button component (notifications scope) (#27632)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

Replace Button component using DSRN.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-445

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**


https://github.com/user-attachments/assets/fc1a3116-4c08-42ac-b561-f2c63baaa969

### **After**


https://github.com/user-attachments/assets/4c53334c-68f9-4a97-9a58-d9de66d53260

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk UI refactor that swaps the notifications-scoped `Button`
implementation to `@metamask/design-system-react-native`, with minor
prop/behavior differences (disabled/loading/full-width) that could
affect interaction/styling.
> 
> **Overview**
> Migrates notifications UI screens/modals from the legacy
`component-library` `Button` to `@metamask/design-system-react-native`
`Button`, updating prop names (e.g., `ButtonVariants`→`ButtonVariant`,
`disabled`/`loading`→`isDisabled`/`isLoading`, `width`→`isFullWidth`)
and switching from `label` prop to children.
> 
> Adjusts related styling (e.g., loader button width) and updates
snapshots to reflect the new button render tree/accessibility output.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
83ad008. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: kirillzyusko

app/components/UI/Identity/ConfirmTurnOnBackupAndSyncModal/__snapshots__/ConfirmTurnOnBackupAndSyncModal.test.tsx.snap

@@ -189,90 +189,189 @@ exports[`ConfirmTurnOnBackupAndSyncModal renders correctly 1`] = `
               }
             }
           >
-            <TouchableOpacity
+            <View
+              accessibilityLabel="Cancel"
               accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
-              style={
+              accessibilityState={
                 {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#b4b4b528",
-                  "borderColor": "transparent",
-                  "borderRadius": 12,
-                  "borderWidth": 1,
-                  "flex": 1,
-                  "flexDirection": "row",
-                  "height": 48,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
                 }
               }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                [
+                  {
+                    "alignItems": "center",
+                    "alignSelf": "flex-start",
+                    "backgroundColor": "#b4b4b528",
+                    "borderColor": "transparent",
+                    "borderRadius": 12,
+                    "borderWidth": 1,
+                    "columnGap": 8,
+                    "flexDirection": "row",
+                    "height": 48,
+                    "justifyContent": "center",
+                    "minWidth": 80,
+                    "opacity": 1,
+                    "overflow": "hidden",
+                    "paddingLeft": 16,
+                    "paddingRight": 16,
+                  },
+                  {
+                    "flex": 1,
+                  },
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                ]
+              }
             >
               <Text
                 accessibilityRole="text"
+                ellipsizeMode="clip"
+                numberOfLines={1}
                 style={
-                  {
-                    "color": "#131416",
-                    "fontFamily": "Geist-Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
-                  }
+                  [
+                    {
+                      "color": "#131416",
+                      "flexGrow": 0,
+                      "flexShrink": 1,
+                      "flexWrap": "wrap",
+                      "fontFamily": "Geist-Medium",
+                      "fontSize": 16,
+                      "fontWeight": 400,
+                      "letterSpacing": 0,
+                      "lineHeight": 24,
+                      "textAlign": "center",
+                    },
+                    undefined,
+                  ]
                 }
               >
                 Cancel
               </Text>
-            </TouchableOpacity>
+            </View>
             <View
               style={
                 {
                   "width": 20,
                 }
               }
             />
-            <TouchableOpacity
+            <View
+              accessibilityLabel="Turn on"
               accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              disabled={false}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
-              style={
+              accessibilityState={
                 {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#131416",
-                  "borderRadius": 12,
-                  "flex": 1,
-                  "flexDirection": "row",
-                  "height": 48,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
                 }
               }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                [
+                  {
+                    "alignItems": "center",
+                    "alignSelf": "flex-start",
+                    "backgroundColor": "#131416",
+                    "borderRadius": 12,
+                    "columnGap": 8,
+                    "flexDirection": "row",
+                    "height": 48,
+                    "justifyContent": "center",
+                    "minWidth": 80,
+                    "opacity": 1,
+                    "overflow": "hidden",
+                    "paddingLeft": 16,
+                    "paddingRight": 16,
+                  },
+                  {
+                    "flex": 1,
+                  },
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                ]
+              }
             >
               <Text
                 accessibilityRole="text"
+                ellipsizeMode="clip"
+                numberOfLines={1}
                 style={
-                  {
-                    "color": "#ffffff",
-                    "fontFamily": "Geist-Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
-                  }
+                  [
+                    {
+                      "color": "#ffffff",
+                      "flexGrow": 0,
+                      "flexShrink": 1,
+                      "flexWrap": "wrap",
+                      "fontFamily": "Geist-Medium",
+                      "fontSize": 16,
+                      "fontWeight": 400,
+                      "letterSpacing": 0,
+                      "lineHeight": 24,
+                      "textAlign": "center",
+                    },
+                    undefined,
+                  ]
                 }
               >
                 Turn on
               </Text>
-            </TouchableOpacity>
+            </View>
           </View>
         </View>
       </View>

app/components/UI/Notification/Modal/index.tsx

@@ -9,10 +9,11 @@ import Icon, {
 import Text, {
   TextVariant,
 } from '../../../../component-library/components/Texts/Text';
-import Button, {
+import {
+  Button,
+  ButtonVariant,
   ButtonSize,
-  ButtonVariants,
-} from '../../../../component-library/components/Buttons/Button';
+} from '@metamask/design-system-react-native';
 import createStyles from './styles';
 import { useTheme } from '../../../../util/theme';
 interface ModalContentProps {
@@ -75,27 +76,29 @@ const ModalContent = ({
         )}
         <View style={styles.buttonsContainer}>
           <Button
-            variant={ButtonVariants.Secondary}
+            variant={ButtonVariant.Secondary}
             size={ButtonSize.Lg}
             style={styles.button}
             accessibilityRole={'button'}
             accessible
-            label={btnLabelCancel}
             onPress={handleCancel}
-          />
+          >
+            {btnLabelCancel}
+          </Button>
           <View style={styles.spacer} />
           <Button
-            variant={ButtonVariants.Primary}
+            variant={ButtonVariant.Primary}
             isDisabled={hascheckBox ? !isChecked : false}
             isDanger={hascheckBox ?? false}
             size={ButtonSize.Lg}
             style={styles.button}
             accessibilityRole={'button'}
             accessible
-            label={btnLabelCta}
             onPress={handleCta}
-            loading={loading}
-          />
+            isLoading={loading}
+          >
+            {btnLabelCta}
+          </Button>
         </View>
       </View>
     </View>

app/components/UI/Notification/SwitchLoadingModal/Loader.tsx

@@ -13,11 +13,11 @@ import Icon, {
 } from '../../../../component-library/components/Icons/Icon';
 
 import Spinner from '../../AnimatedSpinner';
-import Button, {
+import {
+  Button,
+  ButtonVariant,
   ButtonSize,
-  ButtonVariants,
-  ButtonWidthTypes,
-} from '../../../../component-library/components/Buttons/Button';
+} from '@metamask/design-system-react-native';
 import { strings } from '../../../../../locales/i18n';
 import type { ThemeColors } from '@metamask/design-tokens';
 
@@ -44,6 +44,7 @@ const createStyles = (colors: ThemeColors) =>
     },
     button: {
       alignSelf: 'center',
+      width: '90%',
     },
   });
 
@@ -79,13 +80,13 @@ const Loader = ({
       </Text>
       {!!errorText && (
         <Button
-          variant={ButtonVariants.Primary}
-          label={strings('app_settings.notifications_dismiss_modal')}
+          variant={ButtonVariant.Primary}
           size={ButtonSize.Md}
-          width={'90%' as ButtonWidthTypes}
           onPress={onDismiss}
           style={styles.button}
-        />
+        >
+          {strings('app_settings.notifications_dismiss_modal')}
+        </Button>
       )}
     </View>
   );

app/components/Views/Notifications/Details/Footers/AnnouncementCtaFooter.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 import { Linking } from 'react-native';
-import Button, {
-  ButtonVariants,
-  ButtonWidthTypes,
-} from '../../../../../component-library/components/Buttons/Button';
+import { Button, ButtonVariant } from '@metamask/design-system-react-native';
 import { ModalFooterAnnouncementCta } from '../../../../../util/notifications/notification-states/types/NotificationModalDetails';
 import useStyles from '../useStyles';
 import SharedDeeplinkManager from '../../../../../core/DeeplinkManager/DeeplinkManager';
@@ -66,14 +63,15 @@ export default function AnnouncementCtaFooter(
 
   return (
     <Button
-      variant={ButtonVariants.Primary}
-      width={ButtonWidthTypes.Full}
-      label={linkConfig.label}
+      variant={ButtonVariant.Primary}
+      isFullWidth
       style={styles.ctaBtn}
       onPress={() => {
         callEvent();
         linkConfig.onPress();
       }}
-    />
+    >
+      {linkConfig.label}
+    </Button>
   );
 }