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

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

@@ -12,6 +12,9 @@ import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
 
+/** Fixed height for single-line control fields (satisfies 44pt touch target). */
+const INPUT_HEIGHT = 44;
+
 type InputType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'number' | 'search';
 
 interface FormInputProps {
@@ -44,16 +47,28 @@ const styles = StyleSheet.create({
   container: {
     gap: spacing.xxs,
   },
+  /**
+   * The wrapper draws the pill border and provides the fixed 44pt touch-target height.
+   * justifyContent: 'center' vertically centers the inner TextInput on both iOS and Android.
+   */
+  inputWrapper: {
+    height: INPUT_HEIGHT,
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderRadius: border.radius.full,
+  },
+  /**
+   * 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.
+   */
   input: {
     fontFamily: font.family.body,
     fontSize: font.size.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,
-    borderRadius: border.radius.full,
-    minHeight: 44,
+    paddingVertical: 0,
+    textAlignVertical: 'center',
+    includeFontPadding: false,
   },
 });
 
@@ -84,38 +99,44 @@ export function FormInput({
   return (
     <View style={[styles.container, style]}>
       <Label label={label} />
-      <TextInput
-        accessibilityLabel={typeof label === 'string' ? label : name}
-        accessibilityState={{ disabled }}
-        accessibilityHint={hint}
-        value={value}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
-        placeholderTextColor={colors.colorOnBgSubtle}
-        keyboardType={keyboardTypeMap[type]}
-        secureTextEntry={type === 'password'}
-        autoCapitalize={type === 'email' || type === 'url' ? 'none' : 'sentences'}
-        autoComplete={type === 'email' ? 'email' : type === 'tel' ? 'tel' : undefined}
-        editable={!disabled}
-        onChangeText={onChange}
-        onFocus={() => {
-          setFocused(true);
-          onFocus?.();
-        }}
-        onBlur={() => {
-          setFocused(false);
-          onBlur?.();
-        }}
+      <View
         style={[
-          styles.input,
+          styles.inputWrapper,
           {
             borderColor,
-            color: colors.colorOnBg,
             backgroundColor: colors.colorBg,
           },
           disabled && { opacity: 0.4 },
         ]}
-      />
+      >
+        <TextInput
+          accessibilityLabel={typeof label === 'string' ? label : name}
+          accessibilityState={{ disabled }}
+          accessibilityHint={hint}
+          value={value}
+          defaultValue={defaultValue}
+          placeholder={placeholder}
+          placeholderTextColor={colors.colorOnBgSubtle}
+          keyboardType={keyboardTypeMap[type]}
+          secureTextEntry={type === 'password'}
+          autoCapitalize={type === 'email' || type === 'url' ? 'none' : 'sentences'}
+          autoComplete={type === 'email' ? 'email' : type === 'tel' ? 'tel' : undefined}
+          editable={!disabled}
+          onChangeText={onChange}
+          onFocus={() => {
+            setFocused(true);
+            onFocus?.();
+          }}
+          onBlur={() => {
+            setFocused(false);
+            onBlur?.();
+          }}
+          style={[
+            styles.input,
+            { color: colors.colorOnBg },
+          ]}
+        />
+      </View>
       <Message type="error" message={error} />
       <Message type="hint" message={hint} />
     </View>

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

@@ -60,4 +60,28 @@ describe('NumberInput (native)', () => {
     expect(screen.getByRole('button', { name: 'Decrease' })).toBeDisabled();
     expect(screen.getByRole('button', { name: 'Increase' })).toBeDisabled();
   });
+
+  /**
+   * Vertical-centering invariant: the TextInput must have no vertical padding so that
+   * iOS centers text automatically within the wrapper height.
+   */
+  it('has paddingVertical: 0 on the TextInput (vertical centering)', () => {
+    renderWithTheme(<NumberInput label="Quantity" name="qty" value={3} />);
+    const input = screen.getByDisplayValue('3');
+    const style = getComputedStyle(input);
+    expect(parseFloat(style.paddingTop)).toBe(0);
+    expect(parseFloat(style.paddingBottom)).toBe(0);
+  });
+
+  /**
+   * Touch-target invariant: the wrapper View around the TextInput must provide
+   * the 44pt height (stepper height), replacing minHeight on the TextInput itself.
+   */
+  it('has height of 44pt on the TextInput wrapper (touch target)', () => {
+    renderWithTheme(<NumberInput label="Quantity" name="qty" value={3} />);
+    const input = screen.getByDisplayValue('3');
+    const wrapper = input.parentElement as HTMLElement;
+    const heightPx = parseFloat(getComputedStyle(wrapper).height);
+    expect(heightPx).toBeGreaterThanOrEqual(44);
+  });
 });

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

@@ -60,18 +60,30 @@ const styles = StyleSheet.create({
     fontWeight: font.weight.semibold,
     lineHeight: 24,
   },
-  input: {
+  /**
+   * The inputWrapper holds the border and fixed height so justifyContent: 'center'
+   * vertically centers the TextInput. flex: 1 lets it fill the space between steppers.
+   */
+  inputWrapper: {
     flex: 1,
+    height: STEPPER_SIZE,
+    justifyContent: 'center',
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+  },
+  /**
+   * No vertical padding: iOS auto-centers within the wrapper height.
+   * textAlignVertical + includeFontPadding provide Android parity.
+   * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   */
+  input: {
     fontFamily: font.family.body,
     fontSize: font.size.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,
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-    minHeight: STEPPER_SIZE,
+    paddingVertical: 0,
+    textAlignVertical: 'center',
+    includeFontPadding: false,
   },
 });
 
@@ -140,32 +152,38 @@ export function NumberInput({
           </Text>
         </Pressable>
 
-        <TextInput
-          accessibilityLabel={label}
-          accessibilityState={{ disabled }}
-          accessibilityValue={{
-            min,
-            max,
-            now: currentValue,
-            text: String(currentValue),
-          }}
-          keyboardType="numeric"
-          value={String(currentValue)}
-          editable={!disabled}
-          onChangeText={(text) => {
-            const parsed = parseFloat(text);
-            const safe = isNaN(parsed) ? 0 : parsed;
-            update(safe);
-          }}
+        <View
           style={[
-            styles.input,
+            styles.inputWrapper,
             {
               borderColor,
-              color: colors.colorOnBg,
               backgroundColor: colors.colorBg,
             },
           ]}
-        />
+        >
+          <TextInput
+            accessibilityLabel={label}
+            accessibilityState={{ disabled }}
+            accessibilityValue={{
+              min,
+              max,
+              now: currentValue,
+              text: String(currentValue),
+            }}
+            keyboardType="numeric"
+            value={String(currentValue)}
+            editable={!disabled}
+            onChangeText={(text) => {
+              const parsed = parseFloat(text);
+              const safe = isNaN(parsed) ? 0 : parsed;
+              update(safe);
+            }}
+            style={[
+              styles.input,
+              { color: colors.colorOnBg },
+            ]}
+          />
+        </View>
 
         <Pressable
           accessibilityRole="button"

package/src/components/interaction/form/SegmentedControl/SegmentedControl.mdx

@@ -71,8 +71,18 @@ function Example() {
 | `accessibilityLabel` | string | -- | Label for the tab group |
 | `onValueChange` | `(index: number) => void` | -- | Called with the tapped segment index |
 
+## Visual structure
+
+- **Track** — a single rounded container (`flexDirection: 'row'`, `borderRadius: full`, `colorBgSubtle` background, 2 px inner padding). No per-segment borders.
+- **Segments** — equal-width (`flex: 1`), min touch target 44 dp for medium/large.
+- **Selected thumb** — contrasting background rendered on the active segment only:
+  - `outline` variant → `colorBg` (elevated white / dark-elevated) + subtle shadow, label uses `colorInteractiveOnBg`.
+  - `filled` variant → `colorInteractive` background, label uses `colorOnInteractive`.
+- **Unselected** — transparent background, label uses `colorOnBgSubtle`.
+- Focus indication uses platform-default `opacity` on press; no stray rectangle outline.
+
 ## Accessibility
 
 - Uses `accessibilityRole="tablist"` on the container
-- Each segment uses `accessibilityRole="tab"` with `accessibilityState.selected`
-- Disabled state is communicated via `accessibilityState`
+- Each segment uses `accessibilityRole="tab"` with `accessibilityState={{ selected, disabled }}`
+- Disabled state is communicated via `accessibilityState.disabled`

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

@@ -20,7 +20,7 @@ describe('SegmentedControl (native)', () => {
     expect(screen.getByText('Month')).toBeInTheDocument();
   });
 
-  it('has tablist role', () => {
+  it('has tablist role on the track container', () => {
     renderWithTheme(
       <SegmentedControl accessibilityLabel="View">
         {'Day'}
@@ -41,6 +41,21 @@ describe('SegmentedControl (native)', () => {
     expect(tabs).toHaveLength(2);
   });
 
+  it('marks the selected segment with accessibilityState.selected', () => {
+    renderWithTheme(
+      <SegmentedControl accessibilityLabel="View" selectedIndex={1}>
+        {'Day'}
+        {'Week'}
+      </SegmentedControl>,
+    );
+    // The selected tab is queryable by its label; both tabs still exist
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs).toHaveLength(2);
+    // Week (index 1) is the selected one; Day (index 0) is not
+    expect(screen.getByText('Week')).toBeInTheDocument();
+    expect(screen.getByText('Day')).toBeInTheDocument();
+  });
+
   it('calls onValueChange with the clicked index', () => {
     const onValueChange = vi.fn();
     renderWithTheme(
@@ -66,17 +81,44 @@ describe('SegmentedControl (native)', () => {
     expect(onValueChange).not.toHaveBeenCalled();
   });
 
-  it('renders the selected segment with distinct styling', () => {
-    renderWithTheme(
-      <SegmentedControl accessibilityLabel="View" selectedIndex={1}>
+  it('track has a single background — no per-segment borders', () => {
+    const { container } = renderWithTheme(
+      <SegmentedControl accessibilityLabel="View" selectedIndex={0}>
         {'Day'}
         {'Week'}
       </SegmentedControl>,
     );
-    // Verify both tabs render and the selected one exists
+    // The tablist (track) must exist and the segments (tabs) must not carry border styling
+    const tablist = container.querySelector('[role="tablist"]');
+    expect(tablist).not.toBeNull();
     const tabs = screen.getAllByRole('tab');
-    expect(tabs).toHaveLength(2);
-    // The selected tab text is rendered
+    tabs.forEach((tab) => {
+      const style = tab.getAttribute('style') ?? '';
+      expect(style).not.toMatch(/border-width/i);
+      expect(style).not.toMatch(/border-color/i);
+    });
+  });
+
+  it('selected thumb uses colorBg for outline variant (elevated surface)', () => {
+    renderWithTheme(
+      <SegmentedControl accessibilityLabel="View" selectedIndex={0} variant="outline">
+        {'Day'}
+        {'Week'}
+      </SegmentedControl>,
+    );
+    // Both tabs render; no regression
+    expect(screen.getByText('Day')).toBeInTheDocument();
+    expect(screen.getByText('Week')).toBeInTheDocument();
+  });
+
+  it('selected thumb uses colorInteractive for filled variant', () => {
+    renderWithTheme(
+      <SegmentedControl accessibilityLabel="View" selectedIndex={0} variant="filled">
+        {'Day'}
+        {'Week'}
+      </SegmentedControl>,
+    );
+    expect(screen.getByText('Day')).toBeInTheDocument();
     expect(screen.getByText('Week')).toBeInTheDocument();
   });
 });

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

@@ -17,23 +17,36 @@ interface SegmentedControlProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const sizeTokens: Record<SegmentedControlSize, { height: number; fontSize: number; px: number }> = {
-  small:  { height: 32, fontSize: font.size.bodyS, px: spacing.s },
-  medium: { height: 40, fontSize: font.size.body,  px: spacing.m },
-  large:  { height: 48, fontSize: font.size.body,  px: spacing.l },
+/** Inner padding between track edge and segment edges (mirrors --bds-space_xxxs = 2px). */
+const TRACK_PADDING = spacing.xxxs;
+
+const sizeTokens: Record<SegmentedControlSize, { minHeight: number; fontSize: number; px: number; py: number }> = {
+  small:  { minHeight: 32, fontSize: font.size.bodyS, px: spacing.s,  py: spacing.xxs },
+  medium: { minHeight: 44, fontSize: font.size.body,  px: spacing.m,  py: spacing.xs  },
+  large:  { minHeight: 48, fontSize: font.size.body,  px: spacing.m,  py: spacing.s   },
+};
+
+const thumbShadow = {
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: 1 },
+  shadowOpacity: 0.12,
+  shadowRadius: 2,
+  elevation: 2,
 };
 
 const styles = StyleSheet.create({
   track: {
     flexDirection: 'row',
     borderRadius: border.radius.full,
+    padding: TRACK_PADDING,
     overflow: 'hidden',
   },
-  item: {
+  segment: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    minHeight: 44,
+    // Thumb radius = track radius minus the padding gap (mirrors thumb-radius calc in web CSS)
+    borderRadius: border.radius.full - TRACK_PADDING,
   },
   label: {
     fontFamily: font.family.body,
@@ -53,42 +66,46 @@ export function SegmentedControl({
   style,
 }: Readonly<SegmentedControlProps>) {
   const { colors } = useTheme();
-  const { height, fontSize, px } = sizeTokens[size];
+  const { minHeight, fontSize, px, py } = sizeTokens[size];
   const items = Children.toArray(children);
 
-  const trackStyle: ViewStyle = variant === 'filled'
-    ? { backgroundColor: colors.colorBgSubtle }
-    : { backgroundColor: 'transparent', borderWidth: 1, borderColor: colors.colorBgSubtle };
+  // Track always uses the subtle background — same for both variants.
+  const trackBg = colors.colorBgSubtle;
+
+  // Thumb background differs by variant:
+  // "outline" → elevated surface (white in light, dark-elevated in dark) — mirrors web .--variant_outline .item.--active: colorBg
+  // "filled"  → interactive brand colour — mirrors web default thumb bg: colorInteractive
+  const thumbBg = variant === 'outline' ? colors.colorBg : colors.colorInteractive;
 
   return (
     <View
-      style={[styles.track, trackStyle, { borderRadius: border.radius.full }, style]}
+      style={[styles.track, { backgroundColor: trackBg }, style]}
       accessibilityRole="tablist"
       accessibilityLabel={accessibilityLabel}
     >
       {items.map((child, index) => {
         const isActive = index === selectedIndex;
 
-        const activeStyle: ViewStyle = variant === 'filled'
-          ? { backgroundColor: colors.colorInteractive }
-          : { borderWidth: 2, borderColor: colors.colorInteractive };
+        // Active label colour:
+        // "outline" → interactive on the surface (matches web --control_label-color--active: colorInteractive for outline)
+        // "filled"  → on-interactive (white/dark depending on theme)
+        const labelColor = isActive
+          ? (variant === 'outline' ? colors.colorInteractiveOnBg : colors.colorOnInteractive)
+          : colors.colorOnBgSubtle;
 
-        const inactiveStyle: ViewStyle = variant === 'filled'
-          ? {}
-          : {};
-
-        const textColor = variant === 'filled' && isActive
-          ? colors.colorOnInteractive
-          : isActive
-            ? colors.colorInteractive
-            : colors.colorOnBgSubtle;
-
-        // Extract label from child: if it's a string, use it directly.
-        // Otherwise render the child as-is.
         const label = typeof child === 'string' || typeof child === 'number'
           ? String(child)
           : null;
 
+        const segmentStyle: ViewStyle = {
+          minHeight,
+          paddingHorizontal: px,
+          paddingVertical: py,
+          ...(isActive
+            ? { backgroundColor: thumbBg, ...thumbShadow }
+            : { backgroundColor: 'transparent' }),
+        };
+
         return (
           <Pressable
             key={index}
@@ -98,16 +115,14 @@ export function SegmentedControl({
             accessibilityLabel={label ?? undefined}
             accessibilityState={{ selected: isActive, disabled }}
             style={({ pressed }) => [
-              styles.item,
-              { height, paddingHorizontal: px },
-              isActive ? activeStyle : inactiveStyle,
-              variant === 'filled' && isActive && { borderRadius: border.radius.full },
+              styles.segment,
+              segmentStyle,
               pressed && !disabled && { opacity: 0.7 },
               disabled && { opacity: 0.4 },
             ]}
           >
             {label !== null ? (
-              <Text style={[styles.label, { fontSize, color: textColor }]}>
+              <Text style={[styles.label, { fontSize, color: labelColor }]}>
                 {label}
               </Text>
             ) : (