fix: alignment of Snaps icons within ButtonLink/SnapUIButton component

app/components/Snaps/SnapUIButton/SnapUIButton.test.tsx

@@ -0,0 +1,202 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { SnapUIButton } from './SnapUIButton';
+import { useSnapInterfaceContext } from '../SnapInterfaceContext';
+import { ButtonType, UserInputEventType } from '@metamask/snaps-sdk';
+import Text, {
+  TextColor,
+} from '../../../component-library/components/Texts/Text';
+import { View } from 'react-native';
+import AnimatedLottieView from 'lottie-react-native';
+
+jest.mock('../SnapInterfaceContext', () => ({
+  useSnapInterfaceContext: jest.fn(),
+}));
+
+jest.mock('../../../util/theme', () => ({
+  useTheme: jest.fn().mockReturnValue({
+    colors: {
+      background: { default: '#FFFFFF' },
+      border: { muted: '#CCCCCC', default: '#DDDDDD' },
+      text: { default: '#000000' },
+      primary: { default: '#0376C9' },
+      error: { default: '#D73A49' },
+    },
+  }),
+}));
+
+describe('SnapUIButton', () => {
+  const mockHandleEvent = jest.fn();
+  const mockOnPress = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useSnapInterfaceContext as jest.Mock).mockReturnValue({
+      handleEvent: mockHandleEvent,
+    });
+  });
+
+  const getColorForTextVariant = (color: TextColor): string => {
+    switch (color) {
+      case TextColor.Info:
+        return '#0376C9';
+      case TextColor.Error:
+        return '#D73A49';
+      case TextColor.Muted:
+        return '#000000';
+      default:
+        return '#000000';
+    }
+  };
+
+  const createStyledText = (
+    text: string,
+    color: TextColor = TextColor.Info,
+  ) => (
+    <Text color={color} style={{ color: getColorForTextVariant(color) }}>
+      {text}
+    </Text>
+  );
+
+  it('renders correctly with text children', () => {
+    const { getByText } = render(
+      <SnapUIButton>{createStyledText('Test Button')}</SnapUIButton>,
+    );
+
+    expect(getByText('Test Button')).toBeTruthy();
+  });
+
+  it('renders correctly when disabled', () => {
+    const { getByText, getByTestId } = render(
+      <SnapUIButton disabled testID="disabled-button">
+        {createStyledText('Disabled Button', TextColor.Muted)}
+      </SnapUIButton>,
+    );
+
+    expect(getByText('Disabled Button')).toBeTruthy();
+    expect(getByTestId('disabled-button').props.disabled).toBe(true);
+  });
+
+  it('renders with loading state', () => {
+    const { UNSAFE_getByType } = render(
+      <SnapUIButton loading>{createStyledText('Loading Button')}</SnapUIButton>,
+    );
+
+    expect(UNSAFE_getByType(AnimatedLottieView)).toBeTruthy();
+  });
+
+  it('calls onPress and handles ButtonClickEvent when pressed', () => {
+    const { getByText } = render(
+      <SnapUIButton onPress={mockOnPress} name="test-button">
+        {createStyledText('Click Me')}
+      </SnapUIButton>,
+    );
+
+    fireEvent.press(getByText('Click Me'));
+
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+    expect(mockHandleEvent).toHaveBeenCalledWith({
+      event: UserInputEventType.ButtonClickEvent,
+      name: 'test-button',
+    });
+  });
+
+  it('handles FormSubmitEvent when button type is Submit', () => {
+    const { getByText } = render(
+      <SnapUIButton
+        type={ButtonType.Submit}
+        name="test-button"
+        form="test-form"
+      >
+        {createStyledText('Submit Form')}
+      </SnapUIButton>,
+    );
+
+    fireEvent.press(getByText('Submit Form'));
+
+    expect(mockHandleEvent).toHaveBeenCalledWith({
+      event: UserInputEventType.ButtonClickEvent,
+      name: 'test-button',
+    });
+    expect(mockHandleEvent).toHaveBeenCalledWith({
+      event: UserInputEventType.FormSubmitEvent,
+      name: 'test-form',
+    });
+  });
+
+  it('renders icon component correctly', () => {
+    const MockIcon = () => <View testID="mock-icon" />;
+    MockIcon.displayName = 'Icon';
+
+    const { getByTestId } = render(
+      <SnapUIButton testID="icon-button">
+        <MockIcon />
+      </SnapUIButton>,
+    );
+
+    expect(getByTestId('icon-button')).toBeTruthy();
+    expect(getByTestId('mock-icon')).toBeTruthy();
+  });
+
+  it('renders destructive variant button correctly', () => {
+    const { getByTestId } = render(
+      <SnapUIButton testID="destructive-button">
+        {createStyledText('Destructive Button', TextColor.Error)}
+      </SnapUIButton>,
+    );
+
+    expect(getByTestId('destructive-button')).toBeTruthy();
+  });
+
+  it('renders with custom style', () => {
+    const customStyle = { backgroundColor: '#FF0000', borderRadius: 16 };
+    const { getByTestId } = render(
+      <SnapUIButton style={customStyle} testID="styled-button">
+        {createStyledText('Styled Button')}
+      </SnapUIButton>,
+    );
+
+    const button = getByTestId('styled-button');
+    expect(button.props.style.backgroundColor).toBe('#FF0000');
+    expect(button.props.style.borderRadius).toBe(16);
+  });
+
+  it('handles non-string, non-icon children properly', () => {
+    const NonStringComponent = () => <View testID="non-string-component" />;
+
+    const { getByTestId } = render(
+      <SnapUIButton testID="custom-children-button">
+        <NonStringComponent />
+      </SnapUIButton>,
+    );
+
+    expect(getByTestId('custom-children-button')).toBeTruthy();
+    expect(getByTestId('non-string-component')).toBeTruthy();
+  });
+
+  it('sets proper accessibility properties', () => {
+    const { getByTestId } = render(
+      <SnapUIButton testID="accessible-button" name="button-name">
+        {createStyledText('Accessible Button')}
+      </SnapUIButton>,
+    );
+
+    const button = getByTestId('accessible-button');
+    expect(button.props.accessible).toBe(true);
+    expect(button.props.accessibilityRole).toBe('button');
+    expect(button.props.accessibilityLabel).toBe('button-name');
+  });
+
+  it('provides fallback to name for accessibilityLabel when children is not a string', () => {
+    const NonStringComponent = () => <View testID="non-string-component" />;
+
+    const { getByTestId } = render(
+      <SnapUIButton testID="accessible-button" name="button-name">
+        <NonStringComponent />
+      </SnapUIButton>,
+    );
+
+    const button = getByTestId('accessible-button');
+    expect(button.props.accessibilityLabel).toBe('button-name');
+  });
+});

app/components/Snaps/SnapUIButton/SnapUIButton.tsx

@@ -1,45 +1,46 @@
 import React, { FunctionComponent } from 'react';
 import { ButtonType, UserInputEventType } from '@metamask/snaps-sdk';
-import ButtonLink from '../../../component-library/components/Buttons/Button/variants/ButtonLink';
-import { ButtonLinkProps } from '../../../component-library/components/Buttons/Button/variants/ButtonLink/ButtonLink.types';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  ViewStyle,
+  StyleProp,
+  TouchableOpacityProps,
+} from 'react-native';
 import { useSnapInterfaceContext } from '../SnapInterfaceContext';
-import Text, {
-  TextColor,
-  TextVariant,
-} from '../../../component-library/components/Texts/Text';
 import AnimatedLottieView from 'lottie-react-native';
+import { useTheme } from '../../../util/theme';
 
-export interface SnapUIButtonProps {
+export interface SnapUIButtonProps extends TouchableOpacityProps {
   name?: string;
   loading?: boolean;
   type?: ButtonType;
   form?: string;
-  variant: keyof typeof COLORS;
-  textVariant?: TextVariant;
+  style?: StyleProp<ViewStyle>;
+  disabled?: boolean;
+  onPress?: () => void;
+  children?: React.ReactNode;
+  testID?: string;
 }
 
-const COLORS = {
-  primary: TextColor.Info,
-  destructive: TextColor.Error,
-  disabled: TextColor.Muted,
-};
-
-export const SnapUIButton: FunctionComponent<
-  SnapUIButtonProps & ButtonLinkProps
-> = ({
+export const SnapUIButton: FunctionComponent<SnapUIButtonProps> = ({
   name,
   children,
   form,
   type = ButtonType.Button,
-  variant = 'primary',
   disabled = false,
   loading = false,
-  textVariant,
+  style,
+  onPress,
+  testID,
   ...props
 }) => {
   const { handleEvent } = useSnapInterfaceContext();
+  const { colors } = useTheme();
 
   const handlePress = () => {
+    onPress?.();
+
     handleEvent({
       event: UserInputEventType.ButtonClickEvent,
       name,
@@ -54,34 +55,54 @@ export const SnapUIButton: FunctionComponent<
     }
   };
 
-  const overriddenVariant = disabled ? 'disabled' : variant;
+  const styles = StyleSheet.create({
+    button: {
+      backgroundColor: colors.background.default,
+      borderRadius: 8,
+      paddingVertical: 8,
+      flexDirection: 'row',
+      alignItems: 'center',
+      ...(style as ViewStyle),
+    },
+    loadingAnimation: {
+      width: 24,
+      height: 24,
+    },
+  });
 
-  const color = COLORS[overriddenVariant as keyof typeof COLORS];
+  if (loading) {
+    return (
+      <TouchableOpacity
+        style={styles.button}
+        disabled
+        accessible
+        accessibilityRole="button"
+        accessibilityLabel={typeof children === 'string' ? children : name}
+        testID={testID}
+        {...props}
+      >
+        <AnimatedLottieView
+          source={{ uri: './loading.json' }}
+          autoPlay
+          loop
+          style={styles.loadingAnimation}
+        />
+      </TouchableOpacity>
+    );
+  }
 
   return (
-    <ButtonLink
-      {...props}
-      id={name}
+    <TouchableOpacity
+      style={styles.button}
       onPress={handlePress}
       disabled={disabled}
-      label={
-        loading ? (
-          <AnimatedLottieView
-            source={{ uri: './loading.json' }}
-            autoPlay
-            loop
-            // eslint-disable-next-line react-native/no-inline-styles
-            style={{
-              width: 24,
-              height: 24,
-            }}
-          />
-        ) : (
-          <Text color={color} variant={textVariant}>
-            {children}
-          </Text>
-        )
-      }
-    />
+      accessible
+      accessibilityRole="button"
+      accessibilityLabel={typeof children === 'string' ? children : name}
+      testID={testID}
+      {...props}
+    >
+      {children}
+    </TouchableOpacity>
   );
 };