@boostdev/design-system-react-native 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 # Changelog
 
 All notable changes to `@boostdev/design-system-react-native` are documented here.
+## [0.2.1] - 2026-06-11
+### Fixed
+- Fix(form): prevent iOS text clipping in single-line inputs
+
+Remove explicit lineHeight from the TextInput style in FormInput,
+NumberInput, and Combobox. On iOS, an explicit lineHeight on a
+single-line TextInput clips descenders and ascenders at the line box
+boundary. The minHeight: 44 token satisfies touch-target requirements
+without needing lineHeight. Textarea (multiline) is unaffected.
+
+Test contract pinned: FormInput spec asserts lineHeight resolves to
+"normal" and minHeight >= 44pt via getComputedStyle. ([`c3055e4`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/c3055e464fd0b8891fec1f0eb616b8357390ec50))
+
 ## [0.2.0] - 2026-06-10
 ### Added
 - Feat: rename Drawer to SideSheet, optional @react-navigation/native peer, nav theme docs, git-cliff ([`42e165d`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/42e165d6df397876df8b721122259af640eeaa98))

package/dist/index.cjs

@@ -2693,7 +2693,8 @@ var styles33 = import_react_native37.StyleSheet.create({
   input: {
     fontFamily: import_native.font.family.body,
     fontSize: import_native.font.size.body,
-    lineHeight: lineHeight.body,
+    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
+    // lineHeight is set explicitly. minHeight: 44 satisfies the touch-target requirement.
     paddingVertical: import_native.spacing.xs,
     paddingHorizontal: import_native.spacing.s,
     borderWidth: 1,
@@ -2944,7 +2945,8 @@ var styles35 = import_react_native39.StyleSheet.create({
   input: {
     fontFamily: import_native.font.family.body,
     fontSize: import_native.font.size.body,
-    lineHeight: lineHeight.body,
+    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
+    // lineHeight is set explicitly. minHeight: 44 satisfies the touch-target requirement.
     paddingHorizontal: import_native.spacing.s,
     paddingVertical: import_native.spacing.xs,
     borderWidth: 1,
@@ -3504,7 +3506,8 @@ var styles39 = import_react_native43.StyleSheet.create({
     flex: 1,
     fontFamily: import_native.font.family.body,
     fontSize: import_native.font.size.body,
-    lineHeight: lineHeight.body,
+    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
+    // lineHeight is set explicitly. minHeight: STEPPER_SIZE (44) covers the touch target.
     textAlign: "center",
     paddingHorizontal: import_native.spacing.xs,
     paddingVertical: import_native.spacing.xs,

package/dist/index.js

@@ -2646,7 +2646,8 @@ var styles33 = StyleSheet33.create({
   input: {
     fontFamily: font.family.body,
     fontSize: font.size.body,
-    lineHeight: lineHeight.body,
+    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
+    // lineHeight is set explicitly. minHeight: 44 satisfies the touch-target requirement.
     paddingVertical: spacing.xs,
     paddingHorizontal: spacing.s,
     borderWidth: 1,
@@ -2901,7 +2902,8 @@ var styles35 = StyleSheet35.create({
   input: {
     fontFamily: font.family.body,
     fontSize: font.size.body,
-    lineHeight: lineHeight.body,
+    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
+    // lineHeight is set explicitly. minHeight: 44 satisfies the touch-target requirement.
     paddingHorizontal: spacing.s,
     paddingVertical: spacing.xs,
     borderWidth: 1,
@@ -3483,7 +3485,8 @@ var styles39 = StyleSheet39.create({
     flex: 1,
     fontFamily: font.family.body,
     fontSize: font.size.body,
-    lineHeight: lineHeight.body,
+    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
+    // lineHeight is set explicitly. minHeight: STEPPER_SIZE (44) covers the touch target.
     textAlign: "center",
     paddingHorizontal: spacing.xs,
     paddingVertical: spacing.xs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-react-native",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "BoostDev React Native component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "react-native",

package/src/components/interaction/form/Combobox/Combobox.tsx

@@ -9,7 +9,7 @@ import {
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import { spacing, font, border, lineHeight } from '../../../../native/tokens';
+import { spacing, font, border, lineHeight } from '../../../../native/tokens'; // lineHeight used for optionText (Text, not TextInput)
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
@@ -45,7 +45,8 @@ const styles = StyleSheet.create({
   input: {
     fontFamily: font.family.body,
     fontSize: font.size.body,
-    lineHeight: lineHeight.body,
+    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
+    // lineHeight is set explicitly. minHeight: 44 satisfies the touch-target requirement.
     paddingVertical: spacing.xs,
     paddingHorizontal: spacing.s,
     borderWidth: 1,

package/src/components/interaction/form/FormInput/FormInput.spec.tsx

@@ -48,4 +48,34 @@ describe('FormInput (native)', () => {
     const inputs = container.querySelectorAll('input, [style*="opacity"]');
     expect(inputs.length).toBeGreaterThan(0);
   });
+
+  /**
+   * Style-contract invariant: single-line TextInput must NOT have lineHeight set.
+   *
+   * On iOS, an explicit lineHeight on a single-line TextInput causes the text to
+   * render vertically clipped — descenders and ascenders are cut off at the line box
+   * boundary. The minHeight: 44 token satisfies the touch-target requirement without
+   * needing lineHeight. This test pins that invariant so it can't silently regress.
+   *
+   * react-native-web applies token-based styles as atomic CSS classes. getComputedStyle
+   * resolves those classes in jsdom and returns "normal" when lineHeight is absent.
+   */
+  it('does not set lineHeight on the TextInput (iOS clipping prevention)', () => {
+    renderWithTheme(<FormInput label="Email" name="email" value="bjorn@boonen.eu" />);
+    const input = screen.getByDisplayValue('bjorn@boonen.eu');
+    // "normal" means no explicit lineHeight was applied; a numeric value means it was.
+    expect(getComputedStyle(input).lineHeight).toBe('normal');
+  });
+
+  /**
+   * Touch-target invariant: single-line input must meet the 44pt minimum touch target.
+   * This is the replacement constraint that makes lineHeight safe to omit.
+   */
+  it('has minHeight of at least 44pt on the TextInput', () => {
+    renderWithTheme(<FormInput label="Email" name="email" />);
+    const input = screen.getByRole('textbox');
+    // getComputedStyle resolves the atomic CSS class to a pixel value.
+    const minHeightPx = parseFloat(getComputedStyle(input).minHeight);
+    expect(minHeightPx).toBeGreaterThanOrEqual(44);
+  });
 });

package/src/components/interaction/form/FormInput/FormInput.tsx

@@ -7,7 +7,7 @@ import {
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import { spacing, font, border, lineHeight } from '../../../../native/tokens';
+import { spacing, font, border } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
@@ -47,7 +47,8 @@ const styles = StyleSheet.create({
   input: {
     fontFamily: font.family.body,
     fontSize: font.size.body,
-    lineHeight: lineHeight.body,
+    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
+    // lineHeight is set explicitly. minHeight: 44 satisfies the touch-target requirement.
     paddingHorizontal: spacing.s,
     paddingVertical: spacing.xs,
     borderWidth: 1,

package/src/components/interaction/form/NumberInput/NumberInput.tsx

@@ -8,7 +8,7 @@ import {
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import { spacing, font, border, lineHeight } from '../../../../native/tokens';
+import { spacing, font, border } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
@@ -64,7 +64,8 @@ const styles = StyleSheet.create({
     flex: 1,
     fontFamily: font.family.body,
     fontSize: font.size.body,
-    lineHeight: lineHeight.body,
+    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
+    // lineHeight is set explicitly. minHeight: STEPPER_SIZE (44) covers the touch target.
     textAlign: 'center',
     paddingHorizontal: spacing.xs,
     paddingVertical: spacing.xs,