@ledgerhq/lumen-ui-rnative 0.0.43 → 0.0.45

package/src/lib/Components/Button/BaseButton.test.tsx

@@ -0,0 +1,149 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+import { Plus, Settings } from '../../Symbols';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { BaseButton } from './BaseButton';
+
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+};
+
+describe('BaseButton Component', () => {
+  describe('Rendering', () => {
+    it('should render with text content and correct accessibility role', () => {
+      renderWithProvider(<BaseButton testID='button'>Click me</BaseButton>);
+      const button = screen.getByTestId('button');
+      expect(button).toBeTruthy();
+      expect(screen.getByText('Click me')).toBeTruthy();
+      expect(button.props.accessibilityRole).toBe('button');
+    });
+  });
+
+  describe('Appearances', () => {
+    it.each([
+      'base',
+      'accent',
+      'gray',
+      'transparent',
+      'no-background',
+      'red',
+    ] as const)('should render with %s appearance', (appearance) => {
+      renderWithProvider(
+        <BaseButton testID='button' appearance={appearance}>
+          {appearance}
+        </BaseButton>,
+      );
+      expect(screen.getByTestId('button')).toBeTruthy();
+    });
+  });
+
+  describe('Sizes', () => {
+    it.each(['xs', 'sm', 'md', 'lg'] as const)(
+      'should render with %s size',
+      (size) => {
+        renderWithProvider(
+          <BaseButton testID='button' size={size}>
+            {size}
+          </BaseButton>,
+        );
+        expect(screen.getByTestId('button')).toBeTruthy();
+      },
+    );
+  });
+
+  describe('Icons', () => {
+    it('should render with icon and text', () => {
+      renderWithProvider(
+        <BaseButton testID='button' icon={Plus}>
+          Add Item
+        </BaseButton>,
+      );
+      expect(screen.getByTestId('button')).toBeTruthy();
+      expect(screen.getByText('Add Item')).toBeTruthy();
+    });
+
+    it('should render as icon-only when no children provided', () => {
+      renderWithProvider(<BaseButton testID='button' icon={Settings} />);
+      expect(screen.getByTestId('button')).toBeTruthy();
+    });
+  });
+
+  describe('States', () => {
+    it('should be disabled when disabled prop is true', () => {
+      renderWithProvider(
+        <BaseButton testID='button' disabled>
+          Disabled
+        </BaseButton>,
+      );
+      const button = screen.getByTestId('button');
+      expect(button.props.accessibilityState.disabled).toBe(true);
+    });
+
+    it('should render loading state with spinner', () => {
+      renderWithProvider(
+        <BaseButton testID='button' loading>
+          Loading
+        </BaseButton>,
+      );
+      expect(screen.getByTestId('button')).toBeTruthy();
+      expect(screen.getByText('Loading')).toBeTruthy();
+    });
+
+    it('should render correctly with isFull prop', () => {
+      renderWithProvider(
+        <BaseButton testID='button' isFull>
+          Full Width
+        </BaseButton>,
+      );
+      const button = screen.getByTestId('base-button-content');
+      expect(button.props.style.width).toBe('100%');
+    });
+  });
+
+  describe('Interactions', () => {
+    it('should call onPress when pressed', () => {
+      const handlePress = jest.fn();
+      renderWithProvider(
+        <BaseButton testID='button' onPress={handlePress}>
+          Press me
+        </BaseButton>,
+      );
+
+      fireEvent.press(screen.getByTestId('button'));
+      expect(handlePress).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onPress when disabled', () => {
+      const handlePress = jest.fn();
+      renderWithProvider(
+        <BaseButton testID='button' onPress={handlePress} disabled>
+          Disabled
+        </BaseButton>,
+      );
+
+      fireEvent.press(screen.getByTestId('button'));
+      expect(handlePress).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply custom style and lx props', () => {
+      const customStyle: ViewStyle = { marginTop: 16 };
+      renderWithProvider(
+        <BaseButton testID='button' style={customStyle} lx={{ padding: 's8' }}>
+          Styled
+        </BaseButton>,
+      );
+      const button = screen.getByTestId('button');
+      expect(button.props.style).toBeDefined();
+    });
+  });
+});

package/src/lib/Components/Button/BaseButton.tsx

@@ -1,118 +1,134 @@
-import { cva } from 'class-variance-authority';
-import React from 'react';
-import { Text, Pressable } from 'react-native';
-import { cn } from '../../utils';
+import React, { FC, PropsWithChildren } from 'react';
+import { Text, View } from 'react-native';
+import { LumenStyleSheet, mergeStyles } from '../../../styles';
 import { IconSize } from '../Icon';
 import { Spinner } from '../Spinner';
-import { BaseButtonProps } from './BaseButton.types';
+import { Pressable } from '../Utility';
+import { BaseButtonProps } from './types';
 
-const buttonVariants = {
-  root: cva(
-    'inline-flex size-fit flex-row items-center justify-center rounded-full transition-colors body-1-semi-bold',
-    {
-      variants: {
-        appearance: {
-          base: 'bg-interactive active:bg-interactive-pressed',
-          gray: 'bg-muted active:bg-muted-pressed',
-          accent: 'bg-accent active:bg-accent-pressed',
-          transparent:
-            'bg-muted-transparent active:bg-muted-transparent-pressed',
-          'no-background': 'bg-transparent active:bg-base-transparent-pressed',
-          red: 'bg-error active:bg-error-pressed',
-        },
-        size: {
-          xs: 'px-12 py-8 body-2-semi-bold',
-          sm: 'px-16 py-10 body-2-semi-bold',
-          md: 'px-16 py-12',
-          lg: 'p-16',
-        },
-        isFull: {
-          true: 'w-full',
-        },
-        loading: {
-          true: '',
-        },
-        iconOnly: {
-          true: '',
-          false: '',
-        },
-        disabled: {
-          true: 'bg-disabled text-disabled active:bg-disabled',
-          false: '',
-        },
-      },
-      compoundVariants: [
-        {
-          size: 'xs',
-          iconOnly: true,
-          className: 'p-8',
-        },
-        {
-          size: 'sm',
-          iconOnly: true,
-          className: 'p-12',
-        },
-        {
-          size: 'md',
-          iconOnly: true,
-          className: 'p-12',
-        },
-        {
-          size: 'lg',
-          iconOnly: true,
-          className: 'p-16',
-        },
-        {
-          iconOnly: false,
-          className: 'gap-8',
-        },
-        {
-          appearance: 'no-background',
-          disabled: true,
-          className: 'bg-base-transparent',
+type Appearance = NonNullable<BaseButtonProps['appearance']>;
+type Size = NonNullable<BaseButtonProps['size']>;
+
+const iconSizeMap: Record<Size, IconSize> = {
+  xs: 16,
+  sm: 20,
+  md: 24,
+  lg: 24,
+} as const;
+
+const useRootStyles = ({ isFull }: { isFull: boolean }) => {
+  return LumenStyleSheet.useCreate(
+    (t) => {
+      return {
+        root: {
+          width: isFull ? t.sizes.full : 'auto',
+          borderRadius: t.borderRadius.full,
         },
-      ],
-      defaultVariants: {
-        appearance: 'base',
-        size: 'md',
-        isFull: false,
-        iconOnly: false,
-        disabled: false,
-      },
+      };
     },
-  ),
-  label: cva('line-clamp-2 text-left text-inherit body-1-semi-bold', {
-    variants: {
-      appearance: {
-        base: 'text-on-interactive',
-        accent: 'text-on-accent',
-        red: 'text-error',
-        gray: 'text-base',
-        'no-background': 'text-base',
-        transparent: 'text-base',
-      },
-      disabled: {
-        true: 'text-disabled',
-      },
-    },
-  }),
+    [isFull],
+  );
 };
 
-const iconVariants = cva('shrink-0', {
-  variants: {
-    appearance: {
-      base: 'text-on-interactive',
-      accent: 'text-on-accent',
-      red: 'text-error',
-      gray: 'text-base',
-      'no-background': 'text-base',
-      transparent: 'text-base',
-    },
-    disabled: {
-      true: 'text-disabled',
+const useStyles = ({
+  appearance,
+  size,
+  disabled,
+  pressed,
+  iconOnly,
+  isFull,
+}: {
+  appearance: Appearance;
+  size: Size;
+  disabled: boolean;
+  pressed: boolean;
+  iconOnly: boolean;
+  isFull: boolean;
+}) => {
+  return LumenStyleSheet.useCreate(
+    (t) => {
+      const bgColors: Record<Appearance, string> = {
+        base: t.colors.bg.interactive,
+        gray: t.colors.bg.muted,
+        accent: t.colors.bg.accent,
+        transparent: t.colors.bg.mutedTransparent,
+        'no-background': 'transparent',
+        red: t.colors.bg.error,
+      };
+
+      const pressedBgColors: Record<Appearance, string> = {
+        base: t.colors.bg.interactivePressed,
+        gray: t.colors.bg.mutedPressed,
+        accent: t.colors.bg.accentPressed,
+        transparent: t.colors.bg.mutedTransparentPressed,
+        'no-background': t.colors.bg.baseTransparentPressed,
+        red: t.colors.bg.errorPressed,
+      };
+
+      const textColors: Record<Appearance, string> = {
+        base: t.colors.text.onInteractive,
+        accent: t.colors.text.onAccent,
+        red: t.colors.text.error,
+        gray: t.colors.text.base,
+        'no-background': t.colors.text.base,
+        transparent: t.colors.text.base,
+      };
+
+      const sizeStyles: Record<Size, { paddingH: number; paddingV: number }> = {
+        xs: { paddingH: t.spacings.s12, paddingV: t.spacings.s8 },
+        sm: { paddingH: t.spacings.s16, paddingV: t.spacings.s10 },
+        md: { paddingH: t.spacings.s16, paddingV: t.spacings.s12 },
+        lg: { paddingH: t.spacings.s16, paddingV: t.spacings.s16 },
+      };
+
+      const iconOnlyPadding: Record<Size, number> = {
+        xs: t.spacings.s8,
+        sm: t.spacings.s10,
+        md: t.spacings.s12,
+        lg: t.spacings.s16,
+      };
+
+      const typography =
+        size === 'xs' || size === 'sm'
+          ? t.typographies.body2SemiBold
+          : t.typographies.body1SemiBold;
+
+      const currentSizeStyle = sizeStyles[size];
+
+      return {
+        container: mergeStyles(
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: bgColors[appearance],
+          },
+          iconOnly
+            ? { padding: iconOnlyPadding[size] }
+            : {
+                paddingHorizontal: currentSizeStyle.paddingH,
+                paddingVertical: currentSizeStyle.paddingV,
+                gap: t.spacings.s8,
+              },
+          isFull && { width: t.sizes.full },
+          pressed && { backgroundColor: pressedBgColors[appearance] },
+          disabled && { backgroundColor: t.colors.bg.disabled },
+          appearance === 'no-background' &&
+            disabled && { backgroundColor: 'transparent' },
+        ),
+        label: mergeStyles(typography, {
+          color: disabled ? t.colors.text.disabled : textColors[appearance],
+          textAlign: 'left',
+        }),
+        icon: {
+          flexShrink: 0,
+          color: disabled ? t.colors.text.disabled : textColors[appearance],
+        },
+      };
     },
-  },
-});
+    [appearance, size, disabled, pressed, iconOnly, isFull],
+  );
+};
 
 /**
  * Base button component
@@ -125,66 +141,95 @@ export const BaseButton = React.forwardRef<
 >(
   (
     {
-      className,
+      lx,
+      style,
       children,
       appearance = 'base',
       size = 'md',
-      isFull,
-      loading,
+      isFull = false,
+      loading = false,
       icon: IconProp,
-      disabled,
+      disabled = false,
       ...props
     },
     ref,
   ) => {
-    const iconOnly = Boolean(IconProp && !children);
-
-    const iconSizeMap: { [key: string]: IconSize } = {
-      xs: 16,
-      sm: 20,
-      md: 24,
-      lg: 24,
-    };
-
-    const calculatedIconSize = size ? iconSizeMap[size] : 24;
+    const rootStyles = useRootStyles({ isFull });
 
     return (
       <Pressable
         ref={ref}
-        className={cn(
-          className,
-          buttonVariants.root({
-            appearance,
-            size,
-            isFull,
-            loading,
-            iconOnly,
-            disabled,
-          }),
-        )}
-        disabled={disabled ?? false}
+        lx={lx}
+        style={[style, rootStyles.root]}
+        disabled={disabled}
+        accessibilityRole='button'
+        accessibilityState={{ disabled }}
         {...props}
       >
-        {loading && (
-          <Spinner
-            size={calculatedIconSize}
-            className={iconVariants({ appearance, disabled })}
-          />
-        )}
-        {!loading && IconProp && (
-          <IconProp
-            size={calculatedIconSize}
-            className={iconVariants({ appearance, disabled })}
-          />
-        )}
-        {children && (
-          <Text className={buttonVariants.label({ appearance, disabled })}>
+        {({ pressed }) => (
+          <BaseButtonContent
+            appearance={appearance}
+            size={size}
+            disabled={disabled}
+            pressed={pressed}
+            isFull={isFull}
+            loading={loading}
+            IconProp={IconProp}
+          >
             {children}
-          </Text>
+          </BaseButtonContent>
         )}
       </Pressable>
     );
   },
 );
 
+type BaseButtonContentProps = PropsWithChildren<{
+  appearance: Appearance;
+  size: Size;
+  disabled: boolean;
+  pressed: boolean;
+  isFull: boolean;
+  loading: boolean;
+  IconProp?: BaseButtonProps['icon'];
+}>;
+
+const BaseButtonContent: FC<BaseButtonContentProps> = ({
+  appearance,
+  size,
+  disabled,
+  pressed,
+  isFull,
+  loading,
+  IconProp,
+  children,
+}) => {
+  const calculatedIconSize = iconSizeMap[size];
+  const iconOnly = Boolean(IconProp && !children);
+  const styles = useStyles({
+    appearance,
+    size,
+    disabled,
+    pressed,
+    iconOnly,
+    isFull,
+  });
+
+  return (
+    <View style={styles.container} testID='base-button-content'>
+      {loading && (
+        <Spinner size={calculatedIconSize} color={styles.icon.color} />
+      )}
+      {!loading && IconProp && (
+        <IconProp size={calculatedIconSize} style={styles.icon} />
+      )}
+      {children && (
+        <Text style={styles.label} numberOfLines={2}>
+          {children}
+        </Text>
+      )}
+    </View>
+  );
+};
+
 BaseButton.displayName = 'BaseButton';

package/src/lib/Components/Button/Button.mdx

@@ -4,6 +4,7 @@ import { Button } from './Button';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
 import CommonRulesDoAndDont from '../../../../.storybook/docs/CommonRulesDoAndDont.mdx';
+import { Box } from '../Utility';
 
 <Meta title='Action/Button' of={ButtonStories} />
 
@@ -60,23 +61,14 @@ Buttons' contents can be of two types:
 
 Buttons come in four different sizes:
 
-- S (**40 px** tall)
-- M (default, **48 px** tall)
-- L (**56 px** tall)
+- `sm` (**40px**)
+- `md` (**48px**, default)
+- `lg` (**56px**)
 
-> Note: For XS size (32 px tall), use the [IconButton](/docs/action-iconbutton--docs) component instead.
+> Note: For `xs` size (32 px), use the [IconButton](/docs/action-iconbutton--docs) component instead.
 
 <Canvas of={ButtonStories.SizesShowcase} />
 
-> **⚠️ Important**: Icon sizes are automatically managed by the Button component based on the selected size. Never override the icon size using className or style props, as this will break the visual consistency of the design system. The Button component ensures proper scaling and alignment of icons across all sizes.
->
-> ```tsx
-> // ✅ Correct: Let Button handle icon sizing
-> <Button size="sm" icon={Settings} accessibilityLabel="Settings">Settings</Button>
->
-> // ❌ Wrong: Don't override icon size [it's not gonna work even if you try]
-> <Button size="sm" icon={Settings} className="w-6 h-6" accessibilityLabel="Settings">Settings</Button>
-> ```
 
 ### States
 
@@ -90,7 +82,7 @@ Buttons dynamically adapt their width to the size of their content, while keepin
 
 When a label is too long, it's truncated to 2 lines, with a maximum width of the button's container:
 
-<Canvas of={ButtonStories.ResponsiveLayout2} />
+<Canvas of={ButtonStories.LabelTruncate} />
 
 > The Button must dynamically resize to its container constraints.
 
@@ -130,13 +122,26 @@ function MyComponent() {
 
 ### Custom Styling
 
-While the component comes with predefined styles, you can extend them using NativeWind classes:
+While the component comes with predefined styles, you can extend them using the `lx` prop for token-based styling:
 
 ```tsx
 <Button
   size='md'
   appearance='base'
-  className='mt-4' // Custom margin top
+  lx={{ marginTop: 's4' }} // Custom margin top using design tokens
+  onPress={() => {}}
+>
+  Custom Button
+</Button>
+```
+
+You can also use the `style` prop for escape-hatch styling when needed:
+
+```tsx
+<Button
+  size='md'
+  appearance='base'
+  style={{ marginTop: 16 }} // Raw style values
   onPress={() => {}}
 >
   Custom Button
@@ -207,12 +212,13 @@ The Button component is built on React Native's `Pressable` and accepts all its
 
 The following guidelines are based on our [Button Component API Design ADR](https://ledgerhq.atlassian.net/wiki/spaces/DLS/pages/6003949581/ADR-001+Button+Component+API+Design). These decisions were made to ensure consistency, maintainability, and proper implementation of our design system principles.
 
-<div className='flex flex-col gap-24'>
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <DoVsDontRow>
-    <DoBlockItem
-      title='Use icon prop'
-      description='Pass icon as a component reference for proper sizing and alignment'
-    >
+  <DoBlockItem
+    title='Use icon prop'
+    description='Pass icon as a component reference for proper sizing and alignment'
+  >
+
 
 {/* prettier-ignore */}
 ```tsx
@@ -291,13 +297,13 @@ import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
 
     </DoBlockItem>
     <DontBlockItem
-      title="Don't use className for width"
-      description='Avoid using className to control button width'
+      title="Don't use style for full width"
+      description='Avoid using style to control button width'
     >
 
 {/* prettier-ignore */}
 ```tsx
-<Button className='w-full' onPress={() => {}}>
+<Button style={{ width: '100%' }} onPress={() => {}}>
   Full Width
 </Button>
 ```
@@ -331,13 +337,10 @@ import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
   Clickable Looking Button
 </Button>
 ```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</div>
+</DontBlockItem>
+</DoVsDontRow>
+<CommonRulesDoAndDont />
+</Box>
 
 ## Platform Considerations