Skip to content

feat(ui-react/ui-rnative): use composite pattern for Subheader #398

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aquelemiguel wants to merge 15 commits into
base: main
Choose a base branch
from
Open

feat(ui-react/ui-rnative): use composite pattern for Subheader #398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
5a796d5
feat: add composite api for subheader
aquelemiguel Jan 7, 2026
798835d
chore: drop dot notation for composite
aquelemiguel Jan 7, 2026
24bbcc2
feat: ditch children lookup for composite
aquelemiguel Jan 8, 2026
3b66be5
feat: stretch action to the right
aquelemiguel Jan 8, 2026
cb5a2b3
feat: add react native counterpart
aquelemiguel Jan 8, 2026
e9e0922
chore: run lint
aquelemiguel Jan 8, 2026
cbabed4
fix: improper variant
aquelemiguel Jan 8, 2026
cd898d4
feat: push linter fixes
aquelemiguel Jan 8, 2026
3b22afa
chore: simplify stories
aquelemiguel Jan 8, 2026
10adc14
chore: replace onPress handler in react with onClick
aquelemiguel Jan 9, 2026
3dfc5ed
docs: don't use link inside SubheaderAction
aquelemiguel Jan 9, 2026
1afd8c0
chore: remove SectionHeader isolated component
aquelemiguel Jan 9, 2026
a74c2e6
docs: add subcomponents for subheader
aquelemiguel Jan 9, 2026
ed7041f
chore: add missing onClick handler to .figma.tsx
aquelemiguel Jan 9, 2026
bd45cf3
chore: use box + lx in subheader
aquelemiguel Jan 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions apps/app-sandbox-rnative/src/app/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
Links,
Selects,
Spots,
Subheaders,
Switches,
Tags,
TextInputs,
Expand Down Expand Up @@ -134,6 +135,10 @@ const AppContent = ({
<Tags />
</SandboxBlock>
<Divider />
<SandboxBlock title='Subheaders'>
<Subheaders />
</SandboxBlock>
<Divider />
<SandboxBlock title='Switches'>
<Switches />
</SandboxBlock>
Expand Down
101 changes: 101 additions & 0 deletions apps/app-sandbox-rnative/src/app/blocks/Subheaders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import {
Subheader,
SubheaderRow,
SubheaderTitle,
SubheaderCount,
SubheaderHint,
Copy link
Collaborator

@aammami-ledger aammami-ledger Jan 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

have we not decided to call this SubheaderInfo instead ?

SubheaderDescription,
SubheaderAction,
Tooltip,
TooltipTrigger,
TooltipContent,
InteractiveIcon,
} from '@ledgerhq/lumen-ui-rnative';
import { Information } from '@ledgerhq/lumen-ui-rnative/symbols';
import { View, Text, Alert } from 'react-native';

export const Subheaders = () => {
return (
<View style={{ gap: 24 }}>
<Subheader>
<SubheaderRow>
<SubheaderTitle>Simple Title</SubheaderTitle>
</SubheaderRow>
</Subheader>

<Subheader>
<SubheaderRow>
<SubheaderTitle>With Count</SubheaderTitle>
<SubheaderCount value={30} />
</SubheaderRow>
</Subheader>

<Subheader>
<SubheaderRow>
<SubheaderTitle>With Hint</SubheaderTitle>
<SubheaderHint
content={
<Tooltip>
<TooltipTrigger>
<InteractiveIcon iconType='stroked'>
<Information />
</InteractiveIcon>
</TooltipTrigger>
<TooltipContent
content={<Text>This is additional information</Text>}
/>
</Tooltip>
}
/>
</SubheaderRow>
</Subheader>

<Subheader>
<SubheaderRow>
<SubheaderTitle>With Action</SubheaderTitle>
<SubheaderAction onPress={() => console.log('Action pressed')}>
Manage
</SubheaderAction>
</SubheaderRow>
</Subheader>

<Subheader>
<SubheaderRow>
<SubheaderTitle>Complete Example</SubheaderTitle>
<SubheaderCount
value={200}
format={(n: number) => (n > 99 ? '(99+)' : `(${n})`)}
/>
<SubheaderHint
content={
<Tooltip>
<TooltipTrigger>
<InteractiveIcon iconType='stroked'>
<Information />
</InteractiveIcon>
</TooltipTrigger>
<TooltipContent content={<Text>Info tooltip</Text>} />
</Tooltip>
}
/>
<SubheaderAction onPress={() => console.log('Action')}>
Action
</SubheaderAction>
</SubheaderRow>
<SubheaderDescription>
This is a description with all features combined
</SubheaderDescription>
</Subheader>

<Subheader>
<SubheaderRow onPress={() => Alert.alert('Clicked!')}>
<SubheaderTitle>Clickable Row</SubheaderTitle>
<SubheaderCount value={12} />
</SubheaderRow>
<SubheaderDescription>
Entire row is clickable when onPress is provided
</SubheaderDescription>
</Subheader>
</View>
);
};
1 change: 1 addition & 0 deletions apps/app-sandbox-rnative/src/app/blocks/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export * from './IconButtons';
export * from './Links';
export * from './Selects';
export * from './Spots';
export * from './Subheaders';
export * from './Switches';
export * from './Tags';
export * from './TextInputs';
Expand Down
32 changes: 23 additions & 9 deletions libs/ui-react/src/lib/Components/Subheader/Subheader.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import React from 'react';
import { Subheader, SubheaderProps } from './Subheader';
import {
Subheader,
SubheaderRow,
SubheaderTitle,
SubheaderAction,
} from './Subheader';
import { Link } from '../Link/Link';

import figma from '@figma/code-connect';
Expand All @@ -24,7 +29,13 @@ figma.connect(
url: 'https://ldls.vercel.app/?path=/story/communication-subheader--base',
},
],
example: (props) => <Subheader title={props.title} />,
example: (props) => (
<Subheader>
<SubheaderRow>
<SubheaderTitle>{props.title}</SubheaderTitle>
</SubheaderRow>
</Subheader>
),
},
);

Expand All @@ -38,13 +49,16 @@ figma.connect(
props: {
title: figma.string('title'),
},
example: (props: SubheaderProps) => (
<Subheader title={props.title}>
<Subheader.Action>
<Link href='#' appearance='accent' size='sm'>
Action
</Link>
</Subheader.Action>
example: (props) => (
<Subheader>
<SubheaderRow>
<SubheaderTitle>{props.title}</SubheaderTitle>
<SubheaderAction onClick={() => console.log('Action clicked')}>
<Link href='#' appearance='accent' size='sm'>
Action
</Link>
</SubheaderAction>
</SubheaderRow>
</Subheader>
),
},
Expand Down
Loading
Loading