[M]DLS-535-feat(ui-rnative): add MediaCard component#571
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…ntent support - Introduced MediaCard component to display images with customizable content. - Added MediaCardLeadingContent and MediaCardTrailingContent for flexible layouts. - Updated App.tsx to include MediaCards in the sandbox. - Enhanced internationalization files with new close button labels in multiple languages. - Added tests and documentation for MediaCard component functionality.
zel-kass
force-pushed
the
DLS-535-feat/media-card-rn
branch
from
5f93ba3 to
e5b13a6
Compare
… and trailing content slots
zel-kass
changed the title
zel-kass
changed the title
…edgerhq/lumen-ui-rnative to 0.1.11
…djust gradient colors for design fidelity
* 💄 (figma): Sync Figma Design Tokens & Symbols * fix: remove is-utility: dark Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> --------- Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> Co-authored-by: gamegee <15988848+gamegee@users.noreply.github.com> Co-authored-by: Simon Bruneaud <simon.bruneaud@ledger.fr>
* chore: update app-sandbox-rnative versions Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> * test(ui-rnative): make sure to test the ThemeProvider with real components that consume the theme Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --------- Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
… theme JS (rn) (#580) Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr>
…rs and replace Pressable in MediaCard with new InteractiveIcon
aquelemiguel
requested changes
Mar 20, 2026
* fix(amount-display): fix ui-react AmountDisplay baseline issue + add 0.5px more width for each char Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> * nx plan Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> * fix(ui-react): fix amountdisplay failing test Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr> --------- Signed-off-by: Simon Bruneaud <simon.bruneaud@ledger.fr>
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new MediaCard component to @ledgerhq/lumen-ui-rnative (with Storybook docs/stories/tests) and introduces supporting UI tweaks across RN + React packages (InteractiveIcon appearance option and AmountDisplay layout/spacing fixes), plus sandbox/demo wiring and i18n additions.
Changes:
- Add
MediaCard/MediaCardTitle(implementation, types, stories, tests, MDX docs) and export it from the RN components barrel. - Extend
InteractiveIconwith anappearanceprop (including a white variant for dark backgrounds). - Adjust
AmountDisplaydigit widths (RN + React) and tweak the React DOM structure + test to address baseline/overflow issues; addcommon.closeAriaLabeltranslations and sandbox examples.
Reviewed changes
Copilot reviewed 29 out of 29 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| libs/ui-rnative/src/lib/Components/index.ts | Exports the new MediaCard component from the RN components barrel. |
| libs/ui-rnative/src/lib/Components/MediaCard/types.ts | Defines MediaCard and MediaCardTitle prop types. |
| libs/ui-rnative/src/lib/Components/MediaCard/index.ts | Public exports for MediaCard and its types. |
| libs/ui-rnative/src/lib/Components/MediaCard/MediaCard.tsx | Implements the RN MediaCard + gradients + close button. |
| libs/ui-rnative/src/lib/Components/MediaCard/MediaCard.test.tsx | Adds RN tests for rendering and press behaviors. |
| libs/ui-rnative/src/lib/Components/MediaCard/MediaCard.stories.tsx | Adds Storybook stories for layout/composition/close behavior. |
| libs/ui-rnative/src/lib/Components/MediaCard/MediaCard.mdx | Adds Storybook MDX documentation for MediaCard. |
| libs/ui-rnative/src/lib/Components/InteractiveIcon/types.ts | Adds appearance prop to InteractiveIcon API docs/types. |
| libs/ui-rnative/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx | Implements appearance color variants (base/muted/white). |
| libs/ui-rnative/src/lib/Components/AmountDisplay/AmountDisplay.tsx | Updates digit-width constants to prevent overflow in RN. |
| libs/ui-rnative/src/i18n/locales/zh.json | Adds common.closeAriaLabel translation. |
| libs/ui-rnative/src/i18n/locales/tr.json | Adds common.closeAriaLabel translation. |
| libs/ui-rnative/src/i18n/locales/th.json | Adds common.closeAriaLabel translation. |
| libs/ui-rnative/src/i18n/locales/ru.json | Adds common.closeAriaLabel translation. |
| libs/ui-rnative/src/i18n/locales/pt.json | Adds common.closeAriaLabel translation. |
| libs/ui-rnative/src/i18n/locales/ko.json | Adds common.closeAriaLabel translation. |
| libs/ui-rnative/src/i18n/locales/ja.json | Adds common.closeAriaLabel translation. |
| libs/ui-rnative/src/i18n/locales/fr.json | Adds common.closeAriaLabel translation. |
| libs/ui-rnative/src/i18n/locales/es.json | Adds common.closeAriaLabel translation. |
| libs/ui-rnative/src/i18n/locales/en.json | Adds common.closeAriaLabel translation. |
| libs/ui-rnative/src/i18n/locales/de.json | Adds common.closeAriaLabel translation. |
| libs/ui-react/src/lib/Components/AmountDisplay/AmountDisplay.tsx | Updates digit widths and DOM structure to fix baseline/overflow. |
| libs/ui-react/src/lib/Components/AmountDisplay/AmountDisplay.test.tsx | Updates assertions to match new DOM structure (aria-hidden nodes). |
| apps/app-sandbox-rnative/src/app/blocks/index.ts | Exposes new MediaCards sandbox block. |
| apps/app-sandbox-rnative/src/app/blocks/MediaCards.tsx | Adds sandbox examples demonstrating MediaCard usage. |
| apps/app-sandbox-rnative/src/app/App.tsx | Wires the MediaCards block into the sandbox app UI. |
| .nx/version-plans/version-plan-1774000912719.md | Version plan for ui-react AmountDisplay fixes. |
| .nx/version-plans/version-plan-1774000912718.md | Version plan for ui-rnative AmountDisplay width adjustments. |
| .nx/version-plans/version-plan-1773849698407.md | Version plan for introducing MediaCard in ui-rnative. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
gamegee
reviewed
Mar 20, 2026
gamegee
reviewed
Mar 20, 2026
gamegee
reviewed
Mar 20, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
Introduce MediaCard component for react native, with tests, documentation, and app sandbox demo