Open
Conversation
Contributor
📖 Storybook Preview |
…o dsrn/keyvaluecolumn
Contributor
📖 Storybook Preview |
amandaye0h
reviewed
Apr 7, 2026
packages/design-system-react-native/src/components/KeyValueColumn/KeyValueColumn.stories.tsx
Show resolved
Hide resolved
georgewrmarshall
previously approved these changes
Apr 7, 2026
Contributor
georgewrmarshall
left a comment
georgewrmarshall
left a comment
There was a problem hiding this comment.
Clean implementation. Styling follows conventions, test coverage is solid, and the composite layout stories (SingleColumnStack, TwoColumnGrid, Overflow) are a great addition for communicating real-world usage patterns.
packages/design-system-react-native/src/components/KeyValueColumn/KeyValueColumn.test.tsx
Show resolved
Hide resolved
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
…o dsrn/keyvaluecolumn
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
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
3 participants
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.
Description
This PR adds KeyValueColumn to
@metamask/design-system-react-native: a key–value pattern with the label above the value (vertical stack viaBoxVertical), each row laid out horizontally withBoxHorizontal.Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-666
Manual testing steps
yarn storybook:iosoryarn storybook:androidper your setup).yarn jest packages/design-system-react-native/src/components/KeyValueColumn/KeyValueColumn.test.tsx(or your usual Jest scope).Screenshots/Recordings
If applicable, add screenshots and/or recordings to visualize the before and after of your change.
Before
N/A — new component.
After
Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-04-06.at.16.41.05.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Medium Risk
Moderate risk because this introduces a new exported UI component and shared prop types that become part of the public design-system API surface. Failures would be limited to UI rendering/interaction and Storybook/tests cover key behaviors.
Overview
Adds a new
KeyValueColumncomponent to@metamask/design-system-react-nativethat renders a vertical key-over-value pair with optional start/end accessories on both rows, including optionalButtonIconend-actions viakeyEndButtonIconProps/valueEndButtonIconProps.Exports the component from the RN components index, registers new Storybook stories, and adds Jest coverage for rendering, accessory precedence, truncation defaults,
twClassNamemerging, and text prop overrides. Also introducesKeyValueColumnPropsSharedindesign-system-sharedand documents usage/recommended layouts in a new README.Reviewed by Cursor Bugbot for commit 964048e. Bugbot is set up for automated code reviews on this repo. Configure here.