fix: line-height bug and make Input controlled-only and require value#960
Merged
Conversation
Contributor
📖 Storybook Preview |
Contributor
There was a problem hiding this comment.
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.
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.
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
brianacnguyen
approved these changes
Mar 5, 2026
Contributor
📖 Storybook Preview |
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 -->
7 tasks
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.

Description
This PR updates
@metamask/design-system-react-nativeInput/TextFieldbehavior to align with the fixes from MetaMask Mobile PR MetaMask/metamask-mobile#26835 follow-up work:Inputcontrolled-only by requiringvalueand removing uncontrolleddefaultValuefromInputPropslineHeight: 0) only when placeholder text is visiblevalueRelated issues
Fixes:
Manual testing steps
yarn buildfrom repo root.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.tsxyarn 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 --fixScreenshots/Recordings
N/A (logic + typing + tests/docs update)
Before
N/A
After
after.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Medium Risk
Medium risk because it’s a breaking API change (removes
defaultValueand requiresvalue) and adjusts iOS-specific styling that can affect text rendering/placeholder alignment across platforms.Overview
Makes
InputandTextFieldcontrolled-only.InputPropsnow requires avalue: stringand explicitly omitsvalue/defaultValue, forcing all usages (stories/tests/docs) to passvalue.Fixes iOS placeholder alignment without impacting typed text.
Inputnow applies an iOS-onlylineHeight: 0workaround only when a non-emptyplaceholderexists andvalueis empty, with new regression tests covering placeholder-to-text transitions (includingmultiline).Written by Cursor Bugbot for commit 287fb5d. This will update automatically on new commits. Configure here.