Draft
Conversation
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
…o dsrn/titlestandard
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
amandaye0h
reviewed
Apr 9, 2026
| title="$4.42" | ||
| titleEndAccessory={ | ||
| <Box twClassName="ml-2"> | ||
| <Icon name={IconName.Info} size={IconSize.Sm} /> |
Contributor
There was a problem hiding this comment.
Suggested change
| <Icon name={IconName.Info} size={IconSize.Sm} /> | |
| <Icon name={IconName.Info} size={IconSize.Md} /> |
sm looks a bit small, recommending md
amandaye0h
reviewed
Apr 9, 2026
| gap={1} | ||
| > | ||
| <Icon name={IconName.Mobile} size={IconSize.Sm} /> | ||
| <Text variant={TextVariant.BodySm}>Import from mobile</Text> |
Contributor
There was a problem hiding this comment.
Hm, it looks like when the color is not specified, topAccessory defaults to text-default.
Would it be possible to add test to catch this?
Contributor
There was a problem hiding this comment.
Similarly, fontweight needs to be specified, otherwise it defaults to regular.
If other devs use this right out of the box, they might not know, so wondering if we can update the defaults to match.
Contributor
Author
There was a problem hiding this comment.
Since the design did not include a topLabel, I just put a topAccessory there so people can place ANYTHING in
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
2 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
Adds
TitleStandardto@metamask/design-system-react-native: a left-aligned title block with optional top row (topAccessory), inline title accessory (titleAccessory), and a bottom row that is eitherbottomLabel(with default secondary typography when it’s a string) orbottomAccessorywhen there is no renderablebottomLabel.Shared layout props live in
TitleStandardPropsSharedin@metamask/design-system-shared(ADR-0004 alignment with other shared types). The RN implementation usesBoxHorizontal/TextOrChildrenpatterns,titleProps/bottomLabelPropsfor platformText, andtwClassName+Viewprops on the root.Also includes unit tests, a README, Storybook stories (and registration in
storybook.requires.js), and a MIGRATION.md section for 0.14.0 → 0.15.0 documenting the stable API:titleis required,topLabel/topLabelPropsremoved in favor oftopAccessory, and bottom row behavior when bothbottomLabelandbottomAccessoryare passed.Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-582
Manual testing steps
yarn storybook:iosoryarn storybook:androidper your setup).yarn workspace @metamask/design-system-react-native run jest -- TitleStandard(or your usual Jest invocation for that workspace).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-07.at.19.08.06.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Low Risk
Low risk: changes are additive (new component, shared type, docs, stories, tests) with no modifications to existing runtime flows beyond new exports.
Overview
Adds new
TitleStandardcomponent to@metamask/design-system-react-native, providing a left-aligned title block with optionaltopAccessory, inlinetitleAccessory, and a mutually exclusive bottom row (bottomLabeltakes priority overbottomAccessory).Exposes the component and new shared contract
TitleStandardPropsSharedvia@metamask/design-system-shared, and wires up Storybook, unit tests, and component README. UpdatesMIGRATION.mdwith guidance for the stable0.15.0+API (requiredtitle,topLabelremoval, and bottom-row behavior).Reviewed by Cursor Bugbot for commit ec63d5b. Bugbot is set up for automated code reviews on this repo. Configure here.