@boostdev/design-system-react-native 0.2.3 → 0.2.4

package/CHANGELOG.md

@@ -1,6 +1,22 @@
 # Changelog
 
 All notable changes to `@boostdev/design-system-react-native` are documented here.
+## [0.2.4] - 2026-06-11
+### Fixed
+- Fix(form): optical vertical centering for single-line input text
+
+Arial's asymmetric metrics (ascent 0.905em, descent 0.212em) place ink
+~0.08em below the layout-box centre on iOS. Add OPTICAL_TEXT_SHIFT = -1.5
+constant to form/atoms/inputHelpers.ts (single source of truth) and apply
+transform: [{translateY: OPTICAL_TEXT_SHIFT}] to the single-line TextInput
+in FormInput, NumberInput, and Combobox. Verified on-simulator: shifts ink
+from +1.33pt to -0.33pt at fontSize 16.
+
+Textarea (multiline) is unchanged.
+
+Spec invariants extended: pin translateY shift alongside existing
+no-lineHeight, paddingVertical-0, and wrapper-height-≥44 assertions. ([`a3e08e5`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/a3e08e5a6f4c53ef12ba810ef96d395e4ee116e7))
+
 ## [0.2.3] - 2026-06-11
 ### Fixed
 - Fix(segmented-control): proper track + thumb rendering

package/dist/index.cjs

@@ -2681,6 +2681,11 @@ function FileInput({
 // src/components/interaction/form/Combobox/Combobox.tsx
 var import_react9 = require("react");
 var import_react_native37 = require("react-native");
+
+// src/components/interaction/form/atoms/inputHelpers.ts
+var OPTICAL_TEXT_SHIFT = -1.5;
+
+// src/components/interaction/form/Combobox/Combobox.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var INPUT_HEIGHT = 44;
 var MAX_DROPDOWN_HEIGHT = 200;
@@ -2704,6 +2709,7 @@ var styles33 = import_react_native37.StyleSheet.create({
    * No vertical padding: iOS centers text automatically inside the wrapper height.
    * textAlignVertical + includeFontPadding provide Android parity.
    * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: import_native.font.family.body,
@@ -2711,7 +2717,8 @@ var styles33 = import_react_native37.StyleSheet.create({
     paddingHorizontal: import_native.spacing.s,
     paddingVertical: 0,
     textAlignVertical: "center",
-    includeFontPadding: false
+    includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }]
   },
   dropdown: {
     position: "absolute",
@@ -2990,6 +2997,7 @@ var styles35 = import_react_native39.StyleSheet.create({
    * No vertical padding: iOS centers text automatically inside the wrapper height.
    * textAlignVertical + includeFontPadding are Android-specific but harmless on iOS.
    * No lineHeight: explicit lineHeight on a single-line TextInput clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: import_native.font.family.body,
@@ -2997,7 +3005,8 @@ var styles35 = import_react_native39.StyleSheet.create({
     paddingHorizontal: import_native.spacing.s,
     paddingVertical: 0,
     textAlignVertical: "center",
-    includeFontPadding: false
+    includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }]
   }
 });
 function FormInput({
@@ -3571,6 +3580,7 @@ var styles39 = import_react_native43.StyleSheet.create({
    * No vertical padding: iOS auto-centers within the wrapper height.
    * textAlignVertical + includeFontPadding provide Android parity.
    * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: import_native.font.family.body,
@@ -3579,7 +3589,8 @@ var styles39 = import_react_native43.StyleSheet.create({
     paddingHorizontal: import_native.spacing.xs,
     paddingVertical: 0,
     textAlignVertical: "center",
-    includeFontPadding: false
+    includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }]
   }
 });
 function NumberInput({

package/dist/index.js

@@ -2634,6 +2634,11 @@ import {
   Text as Text27,
   ScrollView as ScrollView4
 } from "react-native";
+
+// src/components/interaction/form/atoms/inputHelpers.ts
+var OPTICAL_TEXT_SHIFT = -1.5;
+
+// src/components/interaction/form/Combobox/Combobox.tsx
 import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 var INPUT_HEIGHT = 44;
 var MAX_DROPDOWN_HEIGHT = 200;
@@ -2657,6 +2662,7 @@ var styles33 = StyleSheet33.create({
    * No vertical padding: iOS centers text automatically inside the wrapper height.
    * textAlignVertical + includeFontPadding provide Android parity.
    * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: font.family.body,
@@ -2664,7 +2670,8 @@ var styles33 = StyleSheet33.create({
     paddingHorizontal: spacing.s,
     paddingVertical: 0,
     textAlignVertical: "center",
-    includeFontPadding: false
+    includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }]
   },
   dropdown: {
     position: "absolute",
@@ -2947,6 +2954,7 @@ var styles35 = StyleSheet35.create({
    * No vertical padding: iOS centers text automatically inside the wrapper height.
    * textAlignVertical + includeFontPadding are Android-specific but harmless on iOS.
    * No lineHeight: explicit lineHeight on a single-line TextInput clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: font.family.body,
@@ -2954,7 +2962,8 @@ var styles35 = StyleSheet35.create({
     paddingHorizontal: spacing.s,
     paddingVertical: 0,
     textAlignVertical: "center",
-    includeFontPadding: false
+    includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }]
   }
 });
 function FormInput({
@@ -3550,6 +3559,7 @@ var styles39 = StyleSheet39.create({
    * No vertical padding: iOS auto-centers within the wrapper height.
    * textAlignVertical + includeFontPadding provide Android parity.
    * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: font.family.body,
@@ -3558,7 +3568,8 @@ var styles39 = StyleSheet39.create({
     paddingHorizontal: spacing.xs,
     paddingVertical: 0,
     textAlignVertical: "center",
-    includeFontPadding: false
+    includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }]
   }
 });
 function NumberInput({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-react-native",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "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.spec.tsx

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
 import { Combobox } from './Combobox';
 import type { ComboboxOption } from './Combobox';
+import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
 
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
@@ -85,4 +86,18 @@ describe('Combobox (native)', () => {
     const heightPx = parseFloat(getComputedStyle(wrapper).height);
     expect(heightPx).toBeGreaterThanOrEqual(44);
   });
+
+  /**
+   * Optical-centering invariant: the TextInput must have a translateY transform equal
+   * to OPTICAL_TEXT_SHIFT to compensate for Arial's asymmetric vertical metrics.
+   */
+  it('has optical translateY shift on the TextInput (Arial centering correction)', () => {
+    renderWithTheme(
+      <Combobox label="Fruit" name="fruit" options={fruits} />,
+    );
+    const input = screen.getByRole('combobox');
+    const transform = getComputedStyle(input).transform;
+    expect(OPTICAL_TEXT_SHIFT).toBe(-1.5);
+    expect(transform).toMatch(/(-1\.5|-1\.50)/);
+  });
 });

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

@@ -10,6 +10,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import { spacing, font, border, lineHeight } from '../../../../native/tokens'; // lineHeight used for optionText (Text, not TextInput)
+import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
 
 /** Fixed height for single-line control fields (satisfies 44pt touch target). */
 const INPUT_HEIGHT = 44;
@@ -58,6 +59,7 @@ const styles = StyleSheet.create({
    * No vertical padding: iOS centers text automatically inside the wrapper height.
    * textAlignVertical + includeFontPadding provide Android parity.
    * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: font.family.body,
@@ -66,6 +68,7 @@ const styles = StyleSheet.create({
     paddingVertical: 0,
     textAlignVertical: 'center',
     includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }],
   },
   dropdown: {
     position: 'absolute',

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

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
 import { FormInput } from './FormInput';
+import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
 
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
@@ -95,4 +96,27 @@ describe('FormInput (native)', () => {
     // Suppress unused-variable warning from destructuring
     void container;
   });
+
+  /**
+   * Optical-centering invariant: the TextInput must have a translateY transform equal
+   * to OPTICAL_TEXT_SHIFT to compensate for Arial's asymmetric vertical metrics.
+   *
+   * Arial's ascent (0.905em) vs descent (0.212em) means iOS places ink ~1.3pt below
+   * the geometric centre of the wrapper. The translateY shift was measured on-simulator
+   * to bring ink from +1.33pt to -0.33pt, which is visually centred.
+   *
+   * react-native-web serialises transform: [{translateY: n}] as a CSS transform string,
+   * so we check that the computed style contains the expected value.
+   */
+  it('has optical translateY shift on the TextInput (Arial centering correction)', () => {
+    renderWithTheme(<FormInput label="Email" name="email" value="bjorn@boonen.eu" />);
+    const input = screen.getByDisplayValue('bjorn@boonen.eu');
+    const transform = getComputedStyle(input).transform;
+    // react-native-web renders translateY as a matrix or translate() — check the value
+    // is present and matches the constant.
+    expect(OPTICAL_TEXT_SHIFT).toBe(-1.5);
+    // The transform string must encode a non-zero Y translation.
+    // matrix(1, 0, 0, 1, 0, -1.5) or translateY(-1.5px) — both contain the value.
+    expect(transform).toMatch(/(-1\.5|-1\.50)/);
+  });
 });

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

@@ -11,6 +11,7 @@ import { spacing, font, border } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
+import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
 
 /** Fixed height for single-line control fields (satisfies 44pt touch target). */
 const INPUT_HEIGHT = 44;
@@ -61,6 +62,7 @@ const styles = StyleSheet.create({
    * No vertical padding: iOS centers text automatically inside the wrapper height.
    * textAlignVertical + includeFontPadding are Android-specific but harmless on iOS.
    * No lineHeight: explicit lineHeight on a single-line TextInput clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: font.family.body,
@@ -69,6 +71,7 @@ const styles = StyleSheet.create({
     paddingVertical: 0,
     textAlignVertical: 'center',
     includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }],
   },
 });
 

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

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
 import { NumberInput } from './NumberInput';
+import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
 
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
@@ -84,4 +85,16 @@ describe('NumberInput (native)', () => {
     const heightPx = parseFloat(getComputedStyle(wrapper).height);
     expect(heightPx).toBeGreaterThanOrEqual(44);
   });
+
+  /**
+   * Optical-centering invariant: the TextInput must have a translateY transform equal
+   * to OPTICAL_TEXT_SHIFT to compensate for Arial's asymmetric vertical metrics.
+   */
+  it('has optical translateY shift on the TextInput (Arial centering correction)', () => {
+    renderWithTheme(<NumberInput label="Quantity" name="qty" value={3} />);
+    const input = screen.getByDisplayValue('3');
+    const transform = getComputedStyle(input).transform;
+    expect(OPTICAL_TEXT_SHIFT).toBe(-1.5);
+    expect(transform).toMatch(/(-1\.5|-1\.50)/);
+  });
 });

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

@@ -12,6 +12,7 @@ import { spacing, font, border } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
+import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
 
 interface NumberInputProps {
   label: string;
@@ -75,6 +76,7 @@ const styles = StyleSheet.create({
    * No vertical padding: iOS auto-centers within the wrapper height.
    * textAlignVertical + includeFontPadding provide Android parity.
    * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: font.family.body,
@@ -84,6 +86,7 @@ const styles = StyleSheet.create({
     paddingVertical: 0,
     textAlignVertical: 'center',
     includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }],
   },
 });
 

package/src/components/interaction/form/atoms/inputHelpers.ts

@@ -0,0 +1,14 @@
+/**
+ * Optical vertical correction for single-line TextInput on iOS.
+ *
+ * Arial (the DS body font) has asymmetric vertical metrics:
+ *   ascent 0.905em vs descent 0.212em
+ * When iOS centers the TextInput's layout box inside the 44pt wrapper,
+ * the INK centre sits ~0.08em (~1.3pt at fontSize 16) below the geometric
+ * centre. Applying translateY here shifts the ink from +1.33pt to -0.33pt,
+ * which is visually perfect (verified on-simulator).
+ *
+ * Do NOT apply this to multiline TextInput (Textarea) — multiline inputs
+ * scroll their content and translateY would misalign the first line.
+ */
+export const OPTICAL_TEXT_SHIFT = -1.5;