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

package/CHANGELOG.md

@@ -1,6 +1,38 @@
 # Changelog
 
 All notable changes to `@boostdev/design-system-react-native` are documented here.
+## [0.2.3] - 2026-06-11
+### Fixed
+- Fix(segmented-control): proper track + thumb rendering
+
+Replace per-segment outline/border approach with a single rounded track
+(colorBgSubtle background, 2 px inner padding) containing equal-width
+segments. Selected segment renders a contrasting thumb: colorBg + shadow
+for the outline variant (white elevated surface), colorInteractive for
+the filled variant. No per-segment borders; no stray focus rectangle.
+
+Mirrors the web DS visual contract (track bg, thumb bg, thumb radius =
+track radius minus padding). Dark mode via useTheme throughout.
+All accessibilityRole/accessibilityState props preserved.
+Spec updated to pin track-has-one-background and thumb structure. ([`2a83f88`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/2a83f8804553e390528fc85dd79c1541bf92343e))
+
+## [0.2.2] - 2026-06-11
+### Fixed
+- Fix(form): vertically center text in single-line inputs
+
+Replace minHeight + paddingVertical on TextInput with a wrapper View
+(height: 44, justifyContent: center) + paddingVertical: 0 on the inner
+TextInput. iOS auto-centers text within the wrapper height; paddingVertical
+on the TextInput itself caused text to sit off-center after the 0.2.1
+lineHeight removal. Added textAlignVertical: center and includeFontPadding:
+false for Android parity.
+
+Applied consistently to FormInput, NumberInput, and Combobox.
+Textarea (multiline) is unaffected.
+
+Spec invariants updated: paddingVertical === 0 on TextInput, wrapper
+height >= 44 replace the previous minHeight >= 44 assertion. ([`437b16d`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/437b16dccb60b3b3948c84519990c18688e51f71))
+
 ## [0.2.1] - 2026-06-11
 ### Fixed
 - Fix(form): prevent iOS text clipping in single-line inputs

package/dist/index.cjs

@@ -2871,22 +2871,32 @@ function Combobox({
 var import_react10 = require("react");
 var import_react_native38 = require("react-native");
 var import_jsx_runtime38 = require("react/jsx-runtime");
+var TRACK_PADDING = import_native.spacing.xxxs;
 var sizeTokens2 = {
-  small: { height: 32, fontSize: import_native.font.size.bodyS, px: import_native.spacing.s },
-  medium: { height: 40, fontSize: import_native.font.size.body, px: import_native.spacing.m },
-  large: { height: 48, fontSize: import_native.font.size.body, px: import_native.spacing.l }
+  small: { minHeight: 32, fontSize: import_native.font.size.bodyS, px: import_native.spacing.s, py: import_native.spacing.xxs },
+  medium: { minHeight: 44, fontSize: import_native.font.size.body, px: import_native.spacing.m, py: import_native.spacing.xs },
+  large: { minHeight: 48, fontSize: import_native.font.size.body, px: import_native.spacing.m, py: import_native.spacing.s }
+};
+var thumbShadow = {
+  shadowColor: "#000",
+  shadowOffset: { width: 0, height: 1 },
+  shadowOpacity: 0.12,
+  shadowRadius: 2,
+  elevation: 2
 };
 var styles34 = import_react_native38.StyleSheet.create({
   track: {
     flexDirection: "row",
     borderRadius: import_native.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: import_native.border.radius.full - TRACK_PADDING
   },
   label: {
     fontFamily: import_native.font.family.body,
@@ -2905,21 +2915,26 @@ function SegmentedControl({
   style
 }) {
   const { colors: colors2 } = useTheme();
-  const { height, fontSize, px } = sizeTokens2[size];
+  const { minHeight, fontSize, px, py } = sizeTokens2[size];
   const items = import_react10.Children.toArray(children);
-  const trackStyle = variant === "filled" ? { backgroundColor: colors2.colorBgSubtle } : { backgroundColor: "transparent", borderWidth: 1, borderColor: colors2.colorBgSubtle };
+  const trackBg = colors2.colorBgSubtle;
+  const thumbBg = variant === "outline" ? colors2.colorBg : colors2.colorInteractive;
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     import_react_native38.View,
     {
-      style: [styles34.track, trackStyle, { borderRadius: import_native.border.radius.full }, style],
+      style: [styles34.track, { backgroundColor: trackBg }, style],
       accessibilityRole: "tablist",
       accessibilityLabel,
       children: items.map((child, index) => {
         const isActive = index === selectedIndex;
-        const activeStyle = variant === "filled" ? { backgroundColor: colors2.colorInteractive } : { borderWidth: 2, borderColor: colors2.colorInteractive };
-        const inactiveStyle = variant === "filled" ? {} : {};
-        const textColor = variant === "filled" && isActive ? colors2.colorOnInteractive : isActive ? colors2.colorInteractive : colors2.colorOnBgSubtle;
+        const labelColor = isActive ? variant === "outline" ? colors2.colorInteractiveOnBg : colors2.colorOnInteractive : colors2.colorOnBgSubtle;
         const label = typeof child === "string" || typeof child === "number" ? String(child) : null;
+        const segmentStyle = {
+          minHeight,
+          paddingHorizontal: px,
+          paddingVertical: py,
+          ...isActive ? { backgroundColor: thumbBg, ...thumbShadow } : { backgroundColor: "transparent" }
+        };
         return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           import_react_native38.Pressable,
           {
@@ -2929,14 +2944,12 @@ function SegmentedControl({
             accessibilityLabel: label ?? void 0,
             accessibilityState: { selected: isActive, disabled },
             style: ({ pressed }) => [
-              styles34.item,
-              { height, paddingHorizontal: px },
-              isActive ? activeStyle : inactiveStyle,
-              variant === "filled" && isActive && { borderRadius: import_native.border.radius.full },
+              styles34.segment,
+              segmentStyle,
               pressed && !disabled && { opacity: 0.7 },
               disabled && { opacity: 0.4 }
             ],
-            children: label !== null ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native38.Text, { style: [styles34.label, { fontSize, color: textColor }], children: label }) : child
+            children: label !== null ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native38.Text, { style: [styles34.label, { fontSize, color: labelColor }], children: label }) : child
           },
           index
         );

package/dist/index.js

@@ -2824,22 +2824,32 @@ function Combobox({
 import { Children } from "react";
 import { StyleSheet as StyleSheet34, View as View31, Pressable as Pressable19, Text as Text28 } from "react-native";
 import { jsx as jsx38 } from "react/jsx-runtime";
+var TRACK_PADDING = spacing.xxxs;
 var sizeTokens2 = {
-  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 }
+  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 }
+};
+var thumbShadow = {
+  shadowColor: "#000",
+  shadowOffset: { width: 0, height: 1 },
+  shadowOpacity: 0.12,
+  shadowRadius: 2,
+  elevation: 2
 };
 var styles34 = StyleSheet34.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,
@@ -2858,21 +2868,26 @@ function SegmentedControl({
   style
 }) {
   const { colors: colors2 } = useTheme();
-  const { height, fontSize, px } = sizeTokens2[size];
+  const { minHeight, fontSize, px, py } = sizeTokens2[size];
   const items = Children.toArray(children);
-  const trackStyle = variant === "filled" ? { backgroundColor: colors2.colorBgSubtle } : { backgroundColor: "transparent", borderWidth: 1, borderColor: colors2.colorBgSubtle };
+  const trackBg = colors2.colorBgSubtle;
+  const thumbBg = variant === "outline" ? colors2.colorBg : colors2.colorInteractive;
   return /* @__PURE__ */ jsx38(
     View31,
     {
-      style: [styles34.track, trackStyle, { borderRadius: border.radius.full }, style],
+      style: [styles34.track, { backgroundColor: trackBg }, style],
       accessibilityRole: "tablist",
       accessibilityLabel,
       children: items.map((child, index) => {
         const isActive = index === selectedIndex;
-        const activeStyle = variant === "filled" ? { backgroundColor: colors2.colorInteractive } : { borderWidth: 2, borderColor: colors2.colorInteractive };
-        const inactiveStyle = variant === "filled" ? {} : {};
-        const textColor = variant === "filled" && isActive ? colors2.colorOnInteractive : isActive ? colors2.colorInteractive : colors2.colorOnBgSubtle;
+        const labelColor = isActive ? variant === "outline" ? colors2.colorInteractiveOnBg : colors2.colorOnInteractive : colors2.colorOnBgSubtle;
         const label = typeof child === "string" || typeof child === "number" ? String(child) : null;
+        const segmentStyle = {
+          minHeight,
+          paddingHorizontal: px,
+          paddingVertical: py,
+          ...isActive ? { backgroundColor: thumbBg, ...thumbShadow } : { backgroundColor: "transparent" }
+        };
         return /* @__PURE__ */ jsx38(
           Pressable19,
           {
@@ -2882,14 +2897,12 @@ function SegmentedControl({
             accessibilityLabel: label ?? void 0,
             accessibilityState: { selected: isActive, disabled },
             style: ({ pressed }) => [
-              styles34.item,
-              { height, paddingHorizontal: px },
-              isActive ? activeStyle : inactiveStyle,
-              variant === "filled" && isActive && { borderRadius: border.radius.full },
+              styles34.segment,
+              segmentStyle,
               pressed && !disabled && { opacity: 0.7 },
               disabled && { opacity: 0.4 }
             ],
-            children: label !== null ? /* @__PURE__ */ jsx38(Text28, { style: [styles34.label, { fontSize, color: textColor }], children: label }) : child
+            children: label !== null ? /* @__PURE__ */ jsx38(Text28, { style: [styles34.label, { fontSize, color: labelColor }], children: label }) : child
           },
           index
         );

package/package.json

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

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>
             ) : (