feat: `KeyValueRow` component by kirillzyusko · Pull Request #959 · MetaMask/metamask-design-system

kirillzyusko · 2026-03-05T15:22:49Z

Description

Added KeyValueRow component.

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-281

Manual testing steps

Open StoryBook app
Check KeyValueRow component

Screenshots/Recordings

Before

After

Pre-merge author checklist

I've followed MetaMask Contributor Docs
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Low Risk
Adds a new UI component plus Storybook story and unit tests; changes are isolated to the design system and do not affect auth/security or core app flows.

Overview
Adds a new KeyValueRow component to the React Native design system to render a two-column key/value row, supporting optional icons (left/right/both) and an optional tooltip button on either side.

Exports KeyValueRowStubs (Root, Section, Label) and associated types/utils for composing custom variants, and wires in a Storybook story plus a Jest test suite covering label rendering, icon placement, tooltip behavior, and pass-through ViewProps.

^{Written by Cursor Bugbot for commit 09ac845. This will update automatically on new commits. Configure here.}

github-actions · 2026-03-06T18:29:44Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-03-06T18:47:26Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall

Nice work on the migration. We might need to have a discussion about the architecture of this component. Its not clear to me why the sub components exist. From what I can see they aren't used outside of the KeyValueRow so why are they needed?

These screenshots are from Mobile. Maybe @brianacnguyen knows? Looks like it was a component that the DS team created originally

georgewrmarshall · 2026-03-08T23:56:57Z

+          size={tooltip.size ?? ButtonIconSize.Md}
+          iconName={tooltip.iconName ?? IconName.Question}
+          accessibilityLabel={`${tooltip.title} tooltip`}
+          onPress={() => tooltip?.onPress?.()}


Can we add a prop here to access the ButtonIcon buttonIconProps so we can attach a test id to it?

georgewrmarshall · 2026-03-08T23:57:22Z

+      {isPreDefinedKeyValueRowLabel(label) ? (
+        <Text
+          variant={label.variant ?? TextVariant.BodyMd}
+          color={label.color ?? TextColor.TextDefault}


Can we add a prop object prop here to access the Text component labelProps

georgewrmarshall · 2026-03-09T00:01:31Z

@@ -0,0 +1,52 @@
+import { useTailwind } from '@metamask/design-system-twrnc-preset';


Every component should have a story and tests despite not having them in mobile

github-actions · 2026-03-17T17:06:26Z

📖 Storybook Preview

View PR Storybook

brianacnguyen

@georgewrmarshall going to approve this. I will do the cleanup and component improvements

## Release 26.0.0 This release adds new BannerAlert components, introduces `KeyValueRow` for React Native, includes breaking simplifications to React Native `TextButton` and `TextField`, and continues ADR-0003/0004 shared type migrations. ### 📦 Package Versions - `@metamask/design-system-shared`: **0.5.0** - `@metamask/design-system-react`: **0.12.0** - `@metamask/design-system-react-native`: **0.12.0** ### 🔄 Shared Type Updates (0.5.0) #### Component Type Additions (#975, #997) **What Changed:** - Added `BannerAlertSeverity` const object + `BannerAlertPropsShared` - Added `AvatarNetworkPropsShared` type (ADR-0004) **Impact:** - Enables consistent cross-platform `BannerAlert` severity/types - Continues ADR-0003/ADR-0004 const-object + string-union + shared types adoption ### 🌐 React Web Updates (0.12.0) #### Added - Added `BannerAlert` component (#975) #### Changed - Updated `TextButton` hover/pressed styles to be text-only (no background fill) (#1001) - Updated `Candlestick` icon asset with smaller size variant (#998) ### 📱 React Native Updates (0.12.0) #### Added - Added `BannerAlert` component (#966) - Added `KeyValueRow` component (#959) #### Changed - **BREAKING:** Simplified `TextButton` to a text-only control and removed `size`/`TextButtonSize`, inverse/disabled props, and icon/accessory props (#1001) - Migration: `./packages/design-system-react-native/MIGRATION.md#from-version-0110-to-0120` - **BREAKING:** Removed `TextFieldSize` and the `size` prop; `TextField` is now a single fixed-height (48px) row (#1000) - Migration: `./packages/design-system-react-native/MIGRATION.md#from-version-0110-to-0120` - Updated `Candlestick` icon asset with smaller size variant (#998) #### Fixed - Improved `Input` single-line typography alignment (including iOS placeholder behavior) (#1000) ### ⚠️ Breaking Changes #### TextButton API (React Native) **What Changed:** - Removed `size`/`TextButtonSize`, `isDisabled`, `isInverse`, and start/end icon & accessory props - `TextButton` now aligns with `Text` typography and press handlers (`variant`, `fontWeight`, `onPress`, etc.) **Migration:** See `./packages/design-system-react-native/MIGRATION.md#from-version-0110-to-0120`. **Impact:** - Affects all React Native `TextButton` usages relying on the removed props #### TextField Size API (React Native) **What Changed:** - Removed `TextFieldSize` and the `size` prop - `TextField` is now a single fixed-height (48px) row **Migration:** See `./packages/design-system-react-native/MIGRATION.md#from-version-0110-to-0120`. **Impact:** - Affects all React Native `TextField` usages passing `size` / importing `TextFieldSize` ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (`yarn changelog:validate`) - [x] Version bumps follow semantic versioning - [x] design-system-shared: minor (0.4.0 → 0.5.0) - new shared types - [x] design-system-react: minor (0.11.0 → 0.12.0) - new component + non-breaking changes - [x] design-system-react-native: minor (0.11.0 → 0.12.0) - new components + breaking API changes (pre-1.0) - [x] Breaking changes documented with migration guidance - [x] Migration guides updated with before/after examples (if breaking changes) - [x] PR references included in changelog entries ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've reviewed the [Release Workflow](./.cursor/rules/release-workflow.md) cursor rule - [x] All tests pass (`yarn build && yarn test && yarn lint`) - [x] Changelog validation passes (`yarn changelog:validate`) ## **Pre-merge reviewer checklist** - [ ] I've reviewed the [Reviewing Release PRs](./docs/reviewing-release-prs.md) guide - [ ] Package versions follow semantic versioning - [ ] Changelog entries are consumer-facing (not commit message regurgitation) - [ ] Breaking changes are documented in MIGRATION.md with examples - [ ] All unreleased changes are accounted for in changelogs  --- > [!NOTE] > **Medium Risk** > Mostly a version/changelog release PR, but includes documented **breaking** React Native API removals for `TextButton` and `TextField` that can break downstream consumers on upgrade. > > **Overview** > Bumps the monorepo version to `26.0.0` and releases `@metamask/design-system-react`/`@metamask/design-system-react-native` to `0.12.0` and `@metamask/design-system-shared` to `0.5.0`. > > Updates changelogs and the React Native migration guide to reflect new `BannerAlert` (web + RN) and `KeyValueRow` (RN), shared type additions (`BannerAlertSeverity`/`BannerAlertPropsShared`, `AvatarNetworkPropsShared`), and **breaking** RN API changes removing `TextButton` sizing/icons/disabled/inverse props and removing `TextField` sizing (`TextFieldSize`/`size`) in favor of a fixed-height row. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 5ead00c. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>

kirillzyusko added 2 commits March 5, 2026 16:20

feat: KeyValueRow migration

c237fed

feat: re-work code according to guidelines

43db9f1

kirillzyusko self-assigned this Mar 5, 2026

kirillzyusko added 3 commits March 6, 2026 19:12

fix: lint

6db6685

fix: remove constant file

1abe4f5

fix: TS

531753c

fix: storybook

5ccf9bf

kirillzyusko marked this pull request as ready for review March 6, 2026 18:50

kirillzyusko requested a review from a team as a code owner March 6, 2026 18:50

georgewrmarshall reviewed Mar 9, 2026

View reviewed changes

Merge branch 'main' into feat/key-value-row

09ac845

brianacnguyen approved these changes Mar 17, 2026

View reviewed changes

brianacnguyen merged commit 0e1a355 into main Mar 17, 2026
43 checks passed

brianacnguyen deleted the feat/key-value-row branch March 17, 2026 17:28

georgewrmarshall mentioned this pull request Mar 27, 2026

Release 26.0.0 #1004

Merged

18 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: `KeyValueRow` component#959

feat: `KeyValueRow` component#959
brianacnguyen merged 7 commits into
mainfrom
feat/key-value-row

kirillzyusko commented Mar 5, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Mar 6, 2026

Uh oh!

github-actions Bot commented Mar 6, 2026

Uh oh!

georgewrmarshall left a comment •

edited

Loading

Uh oh!

georgewrmarshall Mar 8, 2026

Uh oh!

georgewrmarshall Mar 8, 2026

Uh oh!

georgewrmarshall Mar 9, 2026

Uh oh!

github-actions Bot commented Mar 17, 2026

Uh oh!

brianacnguyen left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -0,0 +1,52 @@
		import { useTailwind } from '@metamask/design-system-twrnc-preset';

Uh oh!

Conversation

kirillzyusko commented Mar 5, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Mar 6, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Mar 6, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 17, 2026

📖 Storybook Preview

Uh oh!

brianacnguyen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kirillzyusko commented Mar 5, 2026 •

edited by cursor Bot

Loading

georgewrmarshall left a comment •

edited

Loading