Skip to content

fix: line-height bug and make Input controlled-only and require value#960

Merged
georgewrmarshall merged 5 commits into
mainfrom
feat/rn-input-controlled-only
Mar 6, 2026
Merged

fix: line-height bug and make Input controlled-only and require value#960
georgewrmarshall merged 5 commits into
mainfrom
feat/rn-input-controlled-only

Conversation

@georgewrmarshall

@georgewrmarshall georgewrmarshall commented Mar 5, 2026

Copy link
Copy Markdown
Contributor

Description

This PR updates @metamask/design-system-react-native Input/TextField behavior to align with the fixes from MetaMask Mobile PR MetaMask/metamask-mobile#26835 follow-up work:

  • makes RN Input controlled-only by requiring value and removing uncontrolled defaultValue from InputProps
  • adds the iOS-only placeholder alignment workaround (lineHeight: 0) only when placeholder text is visible
  • adds inline code comments requested in the referenced review to document placeholder visibility logic and the iOS-only workaround
  • updates RN Input/TextField tests, stories, and README usage examples for required value
  • adds regression tests for placeholder-to-text transitions, including multiline

Related issues

Fixes:

Manual testing steps

  1. Check out this branch and install dependencies if needed.
  2. Run yarn build from repo root.
  3. Run targeted RN tests:
    • NODE_OPTIONS=--experimental-vm-modules yarn jest --config packages/design-system-react-native/jest.config.js --runInBand --collectCoverage=false packages/design-system-react-native/src/components/Input/Input.test.tsx packages/design-system-react-native/src/components/TextField/TextField.test.tsx
  4. (Optional) Run focused lint for touched files:
    • yarn eslint packages/design-system-react-native/src/components/Input/Input.tsx packages/design-system-react-native/src/components/Input/Input.test.tsx packages/design-system-react-native/src/components/TextField/TextField.test.tsx packages/design-system-react-native/src/components/TextField/TextField.stories.tsx --fix

Screenshots/Recordings

N/A (logic + typing + tests/docs update)

Before

N/A

After

after.mov

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

Medium Risk
Medium risk because it’s a breaking API change (removes defaultValue and requires value) and adjusts iOS-specific styling that can affect text rendering/placeholder alignment across platforms.

Overview
Makes Input and TextField controlled-only. InputProps now requires a value: string and explicitly omits value/defaultValue, forcing all usages (stories/tests/docs) to pass value.

Fixes iOS placeholder alignment without impacting typed text. Input now applies an iOS-only lineHeight: 0 workaround only when a non-empty placeholder exists and value is empty, with new regression tests covering placeholder-to-text transitions (including multiline).

Written by Cursor Bugbot for commit 287fb5d. This will update automatically on new commits. Configure here.

@github-actions

github-actions Bot commented Mar 5, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix prepared a fix for the issue found in the latest run.

  • ✅ Fixed: Null check misses undefined, applying wrong iOS style
    • Replaced strict null check with nullish check (placeholder != null) to avoid treating undefined as a real placeholder and incorrectly applying the iOS lineHeight workaround.

Create PR

Or push these changes by commenting:

@cursor push bbc27e1641
Preview (bbc27e1641)
diff --git a/packages/design-system-react-native/src/components/Input/Input.tsx b/packages/design-system-react-native/src/components/Input/Input.tsx
--- a/packages/design-system-react-native/src/components/Input/Input.tsx
+++ b/packages/design-system-react-native/src/components/Input/Input.tsx
@@ -48,7 +48,7 @@
     const finalFontWeight = MAP_TEXT_VARIANT_FONTWEIGHT[textVariant];
     const fontSuffix = TWCLASSMAP_TEXT_FONTWEIGHT[finalFontWeight];
     const fontClass = `font-${FontFamily.Default}${fontSuffix}`;
-    const hasPlaceholder = placeholder !== null && placeholder !== '';
+    const hasPlaceholder = placeholder != null && placeholder !== '';
     // Treat empty controlled values as placeholder-visible so the iOS
     // placeholder alignment workaround applies during placeholder-to-text
     // transitions.

Comment thread packages/design-system-react-native/src/components/Input/Input.tsx Outdated
@github-actions

github-actions Bot commented Mar 5, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@github-actions

github-actions Bot commented Mar 5, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@github-actions

github-actions Bot commented Mar 5, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@georgewrmarshall georgewrmarshall marked this pull request as ready for review March 5, 2026 21:56
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner March 5, 2026 21:56
@georgewrmarshall georgewrmarshall self-assigned this Mar 5, 2026
@georgewrmarshall georgewrmarshall changed the title feat(rn): make Input controlled-only and require value fix: line-height bug and make Input controlled-only and require value Mar 5, 2026
@georgewrmarshall georgewrmarshall enabled auto-merge (squash) March 6, 2026 00:49
@github-actions

github-actions Bot commented Mar 6, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@georgewrmarshall georgewrmarshall merged commit 1f477af into main Mar 6, 2026
43 checks passed
@georgewrmarshall georgewrmarshall deleted the feat/rn-input-controlled-only branch March 6, 2026 00:53
@georgewrmarshall georgewrmarshall mentioned this pull request Mar 10, 2026
6 tasks
georgewrmarshall added a commit that referenced this pull request Mar 10, 2026
## Release 25.0.0

This release includes new components migrated from Extension and Mobile,
breaking API improvements to ButtonIcon and Input components, and
continued ADR-0003/0004 type migrations.

### 📦 Package Versions

- `@metamask/design-system-shared`: **0.4.0**
- `@metamask/design-system-react`: **0.11.0**
- `@metamask/design-system-react-native`: **0.11.0**

### 🔄 Shared Type Updates (0.4.0)

#### Component Type Additions (#964, #955)

Added shared types for newly migrated components following ADR-0003 and
ADR-0004 patterns:

**What Changed:**
- Added `ButtonFilter` shared types with `ButtonFilterVariant` const
object and `ButtonFilterPropsShared`
- Added `BannerBase` shared types with `BannerBaseSeverity` const object
and `BannerBasePropsShared`

**Impact:**
- Enables consistent ButtonFilter and BannerBase implementations across
React and React Native
- Continues ADR-0003/0004 const-object + string-union pattern adoption

### 🌐 React Web Updates (0.11.0)

#### Added
- Added `ButtonFilter` component for filter button functionality (#964)
- Added `BannerBase` component for creating custom banner notifications
(#961)

#### Changed
- **BREAKING:** Updated `ButtonIcon` API to use `variant` prop instead
of `isInverse` and `isFloating` boolean props (#948)
- Updated `Ai` icon to filled version for visual consistency (#970)

### 📱 React Native Updates (0.11.0)

#### Added
- Added `ButtonFilter` component (#964)
- Added `BottomSheet` component for modal interactions (#963)
- Added `MainActionButton` component for primary CTAs (#952)
- Added `BannerBase` component for custom banners (#955)
- Added `ListItem` component for standardized list rows (#958)
- Added `TabEmptyState` component for empty states (#949)
- Added `BottomSheetDialog` component for dialogs (#905)

#### Changed
- **BREAKING:** Updated `ButtonIcon` API to use `variant` prop instead
of `isInverse` and `isFloating` boolean props (#948)
- **BREAKING:** `Input` component now requires `value` prop and is
controlled-only (#960)
- Updated `Ai` icon to filled version (#970)

#### Fixed
- Fixed iOS placeholder alignment issue in `Input` component (#960)
- Fixed missing component exports (#967)

### ⚠️ Breaking Changes

#### ButtonIcon Variant Prop (Both Platforms)

**What Changed:**
- Removed `isInverse` and `isFloating` boolean props
- Added `variant` prop with three options:
  - `ButtonIconVariant.Default` (transparent background - default)
- `ButtonIconVariant.Filled` (muted background with rounded corners -
new)
- `ButtonIconVariant.Floating` (colored background with inverse icon -
replaces `isFloating`)

**Migration:**
```tsx
// Before
<ButtonIcon name={IconName.Add} isFloating />

// After
<ButtonIcon name={IconName.Add} variant={ButtonIconVariant.Floating} />
```

See migration guides for complete instructions:
- [React Migration
Guide](./packages/design-system-react/MIGRATION.md#from-version-0100-to-0110)
- [React Native Migration
Guide](./packages/design-system-react-native/MIGRATION.md#from-version-0100-to-0110)

#### Input Controlled-Only (React Native Only)

**What Changed:**
- Removed `defaultValue` prop
- `value` prop is now required
- All Input instances must be controlled with state management

**Migration:**
```tsx
// Before
<Input placeholder="Enter text" defaultValue="Initial" onChange={handleChange} />

// After
const [text, setText] = useState('Initial');
<Input placeholder="Enter text" value={text} onChange={setText} />
```

**Impact:**
- Affects `Input` and `TextField` components
- Provides consistent behavior and fixes iOS placeholder alignment

See [React Native Migration
Guide](./packages/design-system-react-native/MIGRATION.md#from-version-0100-to-0110)
for complete instructions.

### ✅ Checklist

- [x] Changelogs updated with human-readable descriptions
- [x] Changelog validation passed (`yarn changelog:validate`)
- [x] Version bumps follow semantic versioning
  - design-system-shared: minor (0.3.0 → 0.4.0) - new shared types
- design-system-react: minor (0.10.0 → 0.11.0) - new components +
breaking ButtonIcon change
- design-system-react-native: minor (0.10.0 → 0.11.0) - new components +
breaking ButtonIcon and Input changes
- [x] Breaking changes documented with migration guidance
- [x] Migration guides updated with before/after examples
- [x] PR references included in changelog entries

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Although this PR is mostly versioning/docs, it formalizes breaking
public API changes (`ButtonIcon` and RN `Input`) that will require
downstream updates and could cause consumer build failures if missed.
> 
> **Overview**
> Bumps the monorepo release to `25.0.0` and publishes new package
versions (`@metamask/design-system-react@0.11.0`,
`@metamask/design-system-react-native@0.11.0`,
`@metamask/design-system-shared@0.4.0`) with updated changelogs.
> 
> Documents newly added components/types (`ButtonFilter`, `BannerBase`,
plus several React Native-only additions like `BottomSheet`, `ListItem`,
etc.) and **breaking API changes**: `ButtonIcon` replaces
`isInverse`/`isFloating` with a `variant` prop (React + RN), and React
Native `Input` becomes controlled-only (requires `value`, removes
`defaultValue`). Migration guides are updated with before/after examples
and new compare links.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
0148a27. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants