@ledgerhq/lumen-ui-rnative 0.1.31 → 0.1.32

package/src/lib/Components/SegmentedControl/SegmentedControl.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
-import { Coins, Nft, TransferHorizontal, Settings } from '../../Symbols';
+import { Coins, Nft, TransferHorizontal } from '../../Symbols';
+import { DotCount } from '../DotCount';
 import { Box } from '../Utility';
 import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
 
@@ -74,11 +75,8 @@ export const WithIcons: Story = {
         <SegmentedControlButton value='nfts' icon={Nft}>
           NFTs
         </SegmentedControlButton>
-        <SegmentedControlButton value='activity' icon={TransferHorizontal}>
-          Activity
-        </SegmentedControlButton>
-        <SegmentedControlButton value='settings' icon={Settings}>
-          Settings
+        <SegmentedControlButton value='trade' icon={TransferHorizontal}>
+          Trade
         </SegmentedControlButton>
       </SegmentedControl>
     );
@@ -142,3 +140,33 @@ export const Disabled: Story = {
     </SegmentedControl>
   ),
 };
+
+export const WithTrailingContent: Story = {
+  args: {} as React.ComponentProps<typeof SegmentedControl>,
+  render: (args) => {
+    const [state, setState] = useState('tokens');
+
+    return (
+      <SegmentedControl
+        {...args}
+        selectedValue={state}
+        onSelectedChange={setState}
+        accessibilityLabel='Asset section'
+      >
+        <SegmentedControlButton
+          value='tokens'
+          trailingContent={<DotCount value={3} />}
+        >
+          Tokens
+        </SegmentedControlButton>
+        <SegmentedControlButton
+          value='nfts'
+          trailingContent={<DotCount value={12} />}
+        >
+          NFTs
+        </SegmentedControlButton>
+        <SegmentedControlButton value='trade'>Trade</SegmentedControlButton>
+      </SegmentedControl>
+    );
+  },
+};

package/src/lib/Components/SegmentedControl/SegmentedControl.test.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent } from '@testing-library/react-native';
+import { DotCount } from '../DotCount';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
 
@@ -53,4 +54,30 @@ describe('SegmentedControl', () => {
 
     expect(onSelectedChange).toHaveBeenCalledWith('receive');
   });
+
+  it('renders trailingContent inside segment buttons', () => {
+    const { getByLabelText } = render(
+      <TestWrapper>
+        <SegmentedControl
+          selectedValue='tokens'
+          onSelectedChange={() => {
+            /* empty */
+          }}
+          accessibilityLabel='Asset section'
+        >
+          <SegmentedControlButton
+            value='tokens'
+            trailingContent={
+              <DotCount value={3} accessibilityLabel='3 tokens' />
+            }
+          >
+            Tokens
+          </SegmentedControlButton>
+          <SegmentedControlButton value='nfts'>NFTs</SegmentedControlButton>
+        </SegmentedControl>
+      </TestWrapper>,
+    );
+
+    expect(getByLabelText('3 tokens')).toBeTruthy();
+  });
 });

package/src/lib/Components/SegmentedControl/SegmentedControl.tsx

@@ -21,6 +21,7 @@ export function SegmentedControlButton({
   value,
   children,
   icon: Icon,
+  trailingContent,
   onPress,
   ...props
 }: SegmentedControlButtonProps) {
@@ -71,6 +72,7 @@ export function SegmentedControlButton({
         >
           {children}
         </Text>
+        {trailingContent}
       </Box>
     </Pressable>
   );

package/src/lib/Components/SegmentedControl/types.ts

@@ -56,6 +56,10 @@ export type SegmentedControlButtonProps = {
    * Optional icon shown to the left of the label (from Symbols).
    */
   icon?: IconComponent;
+  /**
+   * Optional content shown to the right of the label (e.g. DotCount badge).
+   */
+  trailingContent?: ReactNode;
   /**
    * Optional callback when the button is pressed (in addition to onSelectedChange on the parent).
    */

package/src/lib/Components/TextInput/TextInput.mdx

@@ -34,6 +34,10 @@ The label text automatically floats above the input when content is entered, pro
 
 <Canvas of={TextInputStories.WithContent} />
 
+### Label and placeholder
+
+<Canvas of={TextInputStories.WithLabelAndPlaceholder} />
+
 ### Clear Button
 
 A clear button (×) appears **automatically** when input has content.
@@ -54,17 +58,10 @@ Use `onClear` to extend the default clear behavior with custom logic.
 
 ### Error State
 
-The input supports error handling through `errorMessage` which displays an error message below the input with error styling including a red border and text color.
+The input supports error handling through `helperText` and `status` (`'error'` \| `'success'`), which show copy below the input with matching border and text styling.
 
 <Canvas of={TextInputStories.WithError} />
 
-The error message will be automatically:
-
-- Connected to the input
-- Displayed with a warning icon
-- Styled in the error color
-- Announced by screen readers
-
 ### Disabled State
 
 The input can be fully disabled using the `disabled` prop, which prevents interaction and applies a muted visual style.
@@ -221,13 +218,14 @@ function MyComponent() {
       label='Username'
       value={value}
       onChangeText={handleChange}
-      errorMessage={error}
+      helperText={error || undefined}
+      status={error ? 'error' : undefined}
     />
   );
 }
 ```
 
-> **Note:** Error messages are optional. Use `errorMessage` to display an error message below the input.
+> **Note:** Helper text is optional. Use `helperText` with `status="error"` to show validation feedback below the input.
 
 ### With Custom Styling
 

package/src/lib/Components/TextInput/TextInput.stories.tsx

@@ -66,11 +66,51 @@ export const WithContent: Story = {
   },
 };
 
+export const WithLabelAndPlaceholder: Story = {
+  render: (args) => <TextInputStory {...args} />,
+  args: {
+    label: 'Phone',
+    placeholder: '+1 (555) 000-0000',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'phone-pad',
+  },
+};
+
 export const WithError: Story = {
   render: (args) => <TextInputStory {...args} initialValue='ab' />,
   args: {
     label: 'Username',
-    errorMessage: 'Username must be at least 3 characters',
+    helperText: 'Username must be at least 3 characters',
+    status: 'error',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'default',
+  },
+};
+
+export const WithSuccess: Story = {
+  render: (args) => (
+    <TextInputStory
+      {...args}
+      initialValue='0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27'
+    />
+  ),
+  args: {
+    label: 'Address',
+    helperText: 'Address verified',
+    status: 'success',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'default',
+  },
+};
+
+export const WithNeutralHint: Story = {
+  render: (args) => <TextInputStory {...args} />,
+  args: {
+    label: 'Address',
+    helperText: 'Enter your ETH address',
     editable: true,
     hideClearButton: false,
     keyboardType: 'default',

package/src/lib/Components/TextInput/TextInput.test.tsx

@@ -0,0 +1,90 @@
+import { describe, expect, it } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen } from '@testing-library/react-native';
+import type { ReactElement } from 'react';
+import { CheckmarkCircleFill } from '../../Symbols/Icons/CheckmarkCircleFill';
+import { DeleteCircleFill } from '../../Symbols/Icons/DeleteCircleFill';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { TextInput } from './TextInput';
+
+const { colors } = ledgerLiveThemes.dark;
+
+const renderWithProvider = (
+  component: ReactElement,
+): ReturnType<typeof render> => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+};
+
+describe('TextInput', () => {
+  describe('Placeholder and label (BaseInput parity with web)', () => {
+    it('uses the provided placeholder when label and placeholder are both set', async () => {
+      await renderWithProvider(
+        <TextInput
+          label='Username'
+          placeholder='jane.doe'
+          value=''
+          onChangeText={() => {}}
+        />,
+      );
+
+      expect(screen.getByPlaceholderText('jane.doe')).toBeTruthy();
+    });
+  });
+
+  describe('Helper text', () => {
+    it('renders neutral helper text without feedback icons', () => {
+      renderWithProvider(
+        <TextInput label='Address' helperText='Enter your ETH address' />,
+      );
+
+      const helperText = screen.getByText('Enter your ETH address');
+
+      expect(helperText).toBeTruthy();
+      expect(helperText.props.style).toEqual(
+        expect.objectContaining({ color: colors.text.muted }),
+      );
+      expect(screen.UNSAFE_queryByType(DeleteCircleFill)).toBeNull();
+      expect(screen.UNSAFE_queryByType(CheckmarkCircleFill)).toBeNull();
+    });
+
+    it('renders error helper text with an error icon', () => {
+      renderWithProvider(
+        <TextInput
+          label='Address'
+          helperText='Invalid address format'
+          status='error'
+        />,
+      );
+
+      const helperText = screen.getByText('Invalid address format');
+
+      expect(helperText.props.style).toEqual(
+        expect.objectContaining({ color: colors.text.error }),
+      );
+      expect(screen.UNSAFE_getByType(DeleteCircleFill)).toBeTruthy();
+      expect(screen.UNSAFE_queryByType(CheckmarkCircleFill)).toBeNull();
+    });
+
+    it('renders success helper text with a success icon', () => {
+      renderWithProvider(
+        <TextInput
+          label='Address'
+          helperText='Address verified'
+          status='success'
+        />,
+      );
+
+      const helperText = screen.getByText('Address verified');
+
+      expect(helperText.props.style).toEqual(
+        expect.objectContaining({ color: colors.text.success }),
+      );
+      expect(screen.UNSAFE_getByType(CheckmarkCircleFill)).toBeTruthy();
+      expect(screen.UNSAFE_queryByType(DeleteCircleFill)).toBeNull();
+    });
+  });
+});

package/src/lib/Components/TextInput/TextInput.tsx

@@ -8,7 +8,7 @@ import { type TextInputProps } from './types';
  * - **Automatic clear button** appears when input has content
  * - **Floating label** with smooth animations
  * - **Suffix elements** for icons, buttons, or custom content
- * - **Error state styling** with errorMessage support
+ * - **Helper text** with optional `status` (`error` | `success`) for border and helper feedback styling
  * - **Container-based spacing** with padding and gap for clean layout
  * - **Flexible styling** via style props
  * - **React Native TextInput** with proper mobile behavior
@@ -28,12 +28,13 @@ import { type TextInputProps } from './types';
  * // Basic input with automatic clear button
  * <TextInput label="Title" value={title} onChangeText={setTitle} />
  *
- * // Input with error state
+ * // Input with error helper
  * <TextInput
  *   label="Email"
  *   value={email}
  *   onChangeText={setEmail}
- *   errorMessage="Please enter a valid email address"
+ *   helperText="Please enter a valid email address"
+ *   status="error"
  * />
  *
  * // Input with suffix element