@boostdev/design-system-react-native 0.5.1 → 0.7.0

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

@@ -1,9 +1,12 @@
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
+import type { ThemeRadius } from '../../../../native/ThemeContext';
 import { FormInput } from './FormInput';
 import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
 import { cornerRadii } from '../../../../test/cornerRadii';
 
+const radius12: ThemeRadius = { button: 12, iconButton: 12, field: 12 };
+
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
 }
@@ -100,12 +103,22 @@ describe('FormInput (native)', () => {
     expect(getComputedStyle(wrapper).minHeight).toBe('44px');
   });
 
-  it('gives the bordered field box the medium border radius', () => {
+  it('gives the bordered field box the medium border radius by default', () => {
     renderWithTheme(<FormInput label="Email" name="email" />);
     const wrapper = screen.getByRole('textbox').parentElement as HTMLElement;
     expect(cornerRadii(wrapper)).toEqual(['16px', '16px', '16px', '16px']);
   });
 
+  it('takes the border radius of the field box from the theme', () => {
+    render(
+      <ThemeProvider tokens={{ radius: radius12 }}>
+        <FormInput label="Email" name="email" />
+      </ThemeProvider>,
+    );
+    const wrapper = screen.getByRole('textbox').parentElement as HTMLElement;
+    expect(cornerRadii(wrapper)).toEqual(['12px', '12px', '12px', '12px']);
+  });
+
   /**
    * Optical-centering invariant: the TextInput must have a translateY transform equal
    * to OPTICAL_TEXT_SHIFT to compensate for Arial's asymmetric vertical metrics.

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

@@ -1,7 +1,7 @@
 import { ReactNode, useState } from 'react';
 import { StyleSheet, View, KeyboardTypeOptions, StyleProp, ViewStyle } from 'react-native';
 import { ScaledTextInput as TextInput } from '../../../../native/ScaledText';
-import { spacing, font, border } from '../../../../native/tokens';
+import { spacing, font } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
@@ -43,14 +43,14 @@ const styles = StyleSheet.create({
     gap: spacing.xxs,
   },
   /**
-   * The wrapper draws the rounded border and provides at least 44pt touch-target height.
+   * The wrapper draws the rounded border (`radius.field` from the theme) and provides
+   * at least 44pt touch-target height.
    * justifyContent: 'center' vertically centers the inner TextInput on both iOS and Android.
    */
   inputWrapper: {
     minHeight: INPUT_HEIGHT,
     justifyContent: 'center',
     borderWidth: 1,
-    borderRadius: border.radius.m,
   },
   /**
    * No vertical padding: iOS centers text automatically inside the wrapper height.
@@ -84,7 +84,7 @@ export function FormInput({
   onFocus,
   style,
 }: Readonly<FormInputProps>) {
-  const { colors } = useTheme();
+  const { colors, radius } = useTheme();
   const [focused, setFocused] = useState(false);
 
   const borderColor = error
@@ -101,6 +101,7 @@ export function FormInput({
           styles.inputWrapper,
           {
             borderColor,
+            borderRadius: radius.field,
             backgroundColor: colors.colorBg,
           },
           disabled && { opacity: 0.4 },

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

@@ -1,9 +1,12 @@
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
+import type { ThemeRadius } from '../../../../native/ThemeContext';
 import { NumberInput } from './NumberInput';
 import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
 import { cornerRadii } from '../../../../test/cornerRadii';
 
+const radius12: ThemeRadius = { button: 12, iconButton: 12, field: 12 };
+
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
 }
@@ -99,10 +102,20 @@ describe('NumberInput (native)', () => {
     expect(transform).toMatch(/(-1\.5|-1\.50)/);
   });
 
-  it('rounds the outer corners of the field with the medium border radius', () => {
+  it('rounds the outer corners of the field with the medium border radius by default', () => {
     renderWithTheme(<NumberInput label="Quantity" name="qty" value={3} />);
     // Clockwise from top-left: the steppers round only the field's outer corners.
     expect(cornerRadii(screen.getByRole('button', { name: 'Decrease' }))).toEqual(['16px', '', '', '16px']);
     expect(cornerRadii(screen.getByRole('button', { name: 'Increase' }))).toEqual(['', '16px', '16px', '']);
   });
+
+  it('takes the radius of the outer corners from the theme', () => {
+    render(
+      <ThemeProvider tokens={{ radius: radius12 }}>
+        <NumberInput label="Quantity" name="qty" value={3} />
+      </ThemeProvider>,
+    );
+    expect(cornerRadii(screen.getByRole('button', { name: 'Decrease' }))).toEqual(['12px', '', '', '12px']);
+    expect(cornerRadii(screen.getByRole('button', { name: 'Increase' }))).toEqual(['', '12px', '12px', '']);
+  });
 });

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
 import { ScaledText as Text, ScaledTextInput as TextInput } from '../../../../native/ScaledText';
-import { spacing, font, border } from '../../../../native/tokens';
+import { spacing, font } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
@@ -39,14 +39,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderWidth: 1,
   },
+  // The steppers round only the field's outer corners, with `radius.field` from the theme.
   stepperStart: {
-    borderTopStartRadius: border.radius.m,
-    borderBottomStartRadius: border.radius.m,
     borderEndWidth: 0,
   },
   stepperEnd: {
-    borderTopEndRadius: border.radius.m,
-    borderBottomEndRadius: border.radius.m,
     borderStartWidth: 0,
   },
   stepperText: {
@@ -97,7 +94,7 @@ export function NumberInput({
   onChange,
   style,
 }: Readonly<NumberInputProps>) {
-  const { colors } = useTheme();
+  const { colors, radius } = useTheme();
   const isControlled = value !== undefined;
   const [internalValue, setInternalValue] = useState(defaultValue ?? 0);
 
@@ -134,6 +131,8 @@ export function NumberInput({
             styles.stepperStart,
             {
               borderColor,
+              borderTopStartRadius: radius.field,
+              borderBottomStartRadius: radius.field,
               backgroundColor: colors.colorBgSubtle,
             },
             pressed && { opacity: 0.7 },
@@ -192,6 +191,8 @@ export function NumberInput({
             styles.stepperEnd,
             {
               borderColor,
+              borderTopEndRadius: radius.field,
+              borderBottomEndRadius: radius.field,
               backgroundColor: colors.colorBgSubtle,
             },
             pressed && { opacity: 0.7 },

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

@@ -5,7 +5,7 @@ import * as Stories from './Select.stories';
 
 # Select (React Native)
 
-Dropdown-style select component. Renders a field-shaped trigger (`border.radius.m`, like the other form fields) with a downward chevron. Pressing it opens a bottom sheet modal with a scrollable list of options.
+Dropdown-style select component. Renders a field-shaped trigger with a downward chevron. Its corner radius is the theme's `radius.field`, like the other form fields (`border.radius.m` by default; set it through `ThemeProvider` `tokens={{ radius: { field } }}`). Pressing it opens a bottom sheet modal with a scrollable list of options.
 
 > **Status: alpha** — API may change before stable release.
 

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

@@ -1,8 +1,11 @@
 import { render, screen, within } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
+import type { ThemeRadius } from '../../../../native/ThemeContext';
 import { Select } from './Select';
 import { cornerRadii } from '../../../../test/cornerRadii';
 
+const radius12: ThemeRadius = { button: 12, iconButton: 12, field: 12 };
+
 const options = [
   { value: 'apple', label: 'Apple' },
   { value: 'banana', label: 'Banana' },
@@ -63,12 +66,22 @@ describe('Select (native)', () => {
     expect(trigger).toBeDisabled();
   });
 
-  it('gives the trigger the medium border radius', () => {
+  it('gives the trigger the medium border radius by default', () => {
     renderWithTheme(<Select label="Fruit" name="fruit" options={options} />);
     const trigger = screen.getByRole('button', { name: /Fruit/ });
     expect(cornerRadii(trigger)).toEqual(['16px', '16px', '16px', '16px']);
   });
 
+  it('takes the border radius of the trigger from the theme', () => {
+    render(
+      <ThemeProvider tokens={{ radius: radius12 }}>
+        <Select label="Fruit" name="fruit" options={options} />
+      </ThemeProvider>,
+    );
+    const trigger = screen.getByRole('button', { name: /Fruit/ });
+    expect(cornerRadii(trigger)).toEqual(['12px', '12px', '12px', '12px']);
+  });
+
   it('draws the dropdown indicator as a chevron, not a ▾ glyph', () => {
     renderWithTheme(<Select label="Fruit" name="fruit" options={options} />);
     const trigger = screen.getByRole('button', { name: /Fruit/ });

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

@@ -37,7 +37,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.s,
     paddingVertical: spacing.xs,
     borderWidth: 1,
-    borderRadius: border.radius.m,
     minHeight: 44,
   },
   triggerText: {
@@ -103,7 +102,7 @@ export function Select({
   onChange,
   style,
 }: Readonly<SelectProps>) {
-  const { colors } = useTheme();
+  const { colors, radius } = useTheme();
   const [open, setOpen] = useState(false);
 
   const selectedOption = options.find((o) => o.value === value);
@@ -135,6 +134,7 @@ export function Select({
           styles.trigger,
           {
             borderColor,
+            borderRadius: radius.field,
             backgroundColor: colors.colorBg,
           },
           disabled && { opacity: 0.4 },

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

@@ -1,8 +1,11 @@
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
+import type { ThemeRadius } from '../../../../native/ThemeContext';
 import { Textarea } from './Textarea';
 import { cornerRadii } from '../../../../test/cornerRadii';
 
+const radius12: ThemeRadius = { button: 12, iconButton: 12, field: 12 };
+
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
 }
@@ -49,8 +52,17 @@ describe('Textarea (native)', () => {
     expect(inputs.length).toBeGreaterThan(0);
   });
 
-  it('gives the bordered field box the medium border radius', () => {
+  it('gives the bordered field box the medium border radius by default', () => {
     renderWithTheme(<Textarea label="Message" name="message" />);
     expect(cornerRadii(screen.getByRole('textbox'))).toEqual(['16px', '16px', '16px', '16px']);
   });
+
+  it('takes the border radius of the field box from the theme', () => {
+    render(
+      <ThemeProvider tokens={{ radius: radius12 }}>
+        <Textarea label="Message" name="message" />
+      </ThemeProvider>,
+    );
+    expect(cornerRadii(screen.getByRole('textbox'))).toEqual(['12px', '12px', '12px', '12px']);
+  });
 });

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

@@ -1,7 +1,7 @@
 import { ReactNode, useState } from 'react';
 import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
 import { ScaledTextInput as TextInput } from '../../../../native/ScaledText';
-import { spacing, font, border, lineHeight } from '../../../../native/tokens';
+import { spacing, font, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
@@ -33,7 +33,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.s,
     paddingVertical: spacing.xs,
     borderWidth: 1,
-    borderRadius: border.radius.m,
     minHeight: 100,
     textAlignVertical: 'top',
   },
@@ -54,7 +53,7 @@ export function Textarea({
   onFocus,
   style,
 }: Readonly<TextareaProps>) {
-  const { colors } = useTheme();
+  const { colors, radius } = useTheme();
   const [focused, setFocused] = useState(false);
 
   const borderColor = error
@@ -90,6 +89,7 @@ export function Textarea({
           styles.textarea,
           {
             borderColor,
+            borderRadius: radius.field,
             color: colors.colorOnBg,
             backgroundColor: colors.colorBg,
           },

package/src/components/layout/ButtonGroup/ButtonGroup.stories.tsx

@@ -22,7 +22,7 @@ export const Flow: Story = {
   render: (args) => (
     <ButtonGroup {...args} variant="flow">
       <Button>Primary</Button>
-      <Button variant="ghost">Secondary</Button>
+      <Button variant="outline">Secondary</Button>
     </ButtonGroup>
   ),
 };
@@ -30,7 +30,7 @@ export const Card: Story = {
   render: (args) => (
     <ButtonGroup {...args} variant="card">
       <Button>Confirm</Button>
-      <Button variant="ghost">Cancel</Button>
+      <Button variant="outline">Cancel</Button>
     </ButtonGroup>
   ),
 };
@@ -38,7 +38,7 @@ export const Modal: Story = {
   render: (args) => (
     <ButtonGroup {...args} variant="modal">
       <Button>Save</Button>
-      <Button variant="ghost">Discard</Button>
+      <Button variant="outline">Discard</Button>
     </ButtonGroup>
   ),
 };

package/src/index.ts

@@ -2,7 +2,7 @@
 
 // Infrastructure
 export { ThemeProvider, useTheme } from './native/ThemeContext';
-export type { ThemeTokenOverrides, ThemeColors, ThemeColorName } from './native/ThemeContext';
+export type { ThemeTokenOverrides, ThemeRadius, ThemeColors, ThemeColorName } from './native/ThemeContext';
 export {
   createReactNavigationTheme,
   useReactNavigationTheme,

package/src/native/ThemeContext.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { Text } from 'react-native';
-import { colors } from './tokens';
+import { border, colors } from './tokens';
 import { ThemeProvider, useTheme } from './ThemeContext';
 
 function Probe() {
@@ -55,3 +55,83 @@ describe('ThemeProvider token overrides', () => {
     expect(screen.getByTestId('interactive')).toHaveTextContent(colors.dark.colorInteractive);
   });
 });
+
+function RadiusProbe() {
+  const { radius } = useTheme();
+  return (
+    <>
+      <Text testID="radius-button">{radius.button}</Text>
+      <Text testID="radius-icon-button">{radius.iconButton}</Text>
+      <Text testID="radius-field">{radius.field}</Text>
+    </>
+  );
+}
+
+function radii(): string[] {
+  return ['radius-button', 'radius-icon-button', 'radius-field'].map(
+    (id) => screen.getByTestId(id).textContent ?? '',
+  );
+}
+
+describe('ThemeProvider radius overrides', () => {
+  it('provides the medium and full radii when no overrides given', () => {
+    render(
+      <ThemeProvider>
+        <RadiusProbe />
+      </ThemeProvider>,
+    );
+    expect(radii()).toEqual([String(border.radius.m), String(border.radius.full), String(border.radius.m)]);
+  });
+
+  it('merges a partial radius override over the defaults', () => {
+    render(
+      <ThemeProvider tokens={{ radius: { button: 4 } }}>
+        <RadiusProbe />
+      </ThemeProvider>,
+    );
+    expect(radii()).toEqual(['4', String(border.radius.full), String(border.radius.m)]);
+  });
+
+  it('applies the same radii in the dark scheme', () => {
+    render(
+      <ThemeProvider colorScheme="dark" tokens={{ radius: { button: 12, iconButton: 12, field: 12 } }}>
+        <RadiusProbe />
+      </ThemeProvider>,
+    );
+    expect(radii()).toEqual(['12', '12', '12']);
+  });
+
+  it("lets a nested provider inherit its parent's radii", () => {
+    render(
+      <ThemeProvider tokens={{ radius: { button: 12, field: 8 } }}>
+        <ThemeProvider tokens={{ light: { colorInteractive: '#00c853' } }}>
+          <RadiusProbe />
+        </ThemeProvider>
+      </ThemeProvider>,
+    );
+    expect(radii()).toEqual(['12', String(border.radius.full), '8']);
+  });
+
+  it("merges a nested provider's radius override over its parent's radii", () => {
+    render(
+      <ThemeProvider tokens={{ radius: { button: 12, field: 8 } }}>
+        <ThemeProvider tokens={{ radius: { field: 2 } }}>
+          <RadiusProbe />
+        </ThemeProvider>
+      </ThemeProvider>,
+    );
+    expect(radii()).toEqual(['12', String(border.radius.full), '2']);
+  });
+
+  it("keeps merging a nested provider's colors over the foundation, not over its parent", () => {
+    render(
+      <ThemeProvider tokens={{ light: { colorBg: '#fafafa' } }}>
+        <ThemeProvider tokens={{ light: { colorInteractive: '#00c853' } }}>
+          <Probe />
+        </ThemeProvider>
+      </ThemeProvider>,
+    );
+    expect(screen.getByTestId('interactive')).toHaveTextContent('#00c853');
+    expect(screen.getByTestId('bg')).toHaveTextContent(colors.light.colorBg);
+  });
+});

package/src/native/ThemeContext.tsx

@@ -1,12 +1,28 @@
 import { createContext, ReactNode, useContext, useMemo } from 'react';
 import { useColorScheme } from 'react-native';
-import { colors } from './tokens';
+import { border, colors } from './tokens';
 
 export type ThemeColorName = keyof typeof colors.light;
 
 /** Semantic theme colors, widened to `string` so brand overrides typecheck. */
 export type ThemeColors = Readonly<Record<ThemeColorName, string>>;
 
+/** Corner radii of the controls, in points. */
+export interface ThemeRadius {
+  /** Buttons with a text label. */
+  button: number;
+  /** Icon-only buttons (`isIconOnly`). */
+  iconButton: number;
+  /** Input fields: FormInput, Select, Combobox, Textarea, FileInput, NumberInput. */
+  field: number;
+}
+
+const defaultRadius: ThemeRadius = {
+  button: border.radius.m,
+  iconButton: border.radius.full,
+  field: border.radius.m,
+};
+
 /**
  * Per-scheme token overrides, merged over the foundation colors.
  * The React Native equivalent of overriding tokens in the web
@@ -15,11 +31,18 @@ export type ThemeColors = Readonly<Record<ThemeColorName, string>>;
 export interface ThemeTokenOverrides {
   light?: Partial<Record<ThemeColorName, string>>;
   dark?: Partial<Record<ThemeColorName, string>>;
+  /**
+   * Radius overrides, the same in light and dark. The native equivalent of the
+   * web `--button_radius` custom property. Merged over the parent provider's
+   * radii, so a nested provider that only overrides colors keeps the app's radii.
+   */
+  radius?: Partial<ThemeRadius>;
 }
 
 interface ThemeContextValue {
   colors: ThemeColors;
   isDark: boolean;
+  radius: ThemeRadius;
 }
 
 const ThemeContext = createContext<ThemeContextValue | null>(null);
@@ -33,11 +56,17 @@ interface ThemeProviderProps {
 export function ThemeProvider({ children, colorScheme, tokens }: ThemeProviderProps) {
   const systemScheme = useColorScheme();
   const isDark = (colorScheme ?? systemScheme) === 'dark';
+  // Colors merge over the foundation; radii merge over the parent provider's.
+  const parentRadius = useContext(ThemeContext)?.radius ?? defaultRadius;
   const value = useMemo<ThemeContextValue>(() => {
     const base = isDark ? colors.dark : colors.light;
     const overrides = isDark ? tokens?.dark : tokens?.light;
-    return { colors: { ...base, ...overrides }, isDark };
-  }, [isDark, tokens]);
+    return {
+      colors: { ...base, ...overrides },
+      isDark,
+      radius: { ...parentRadius, ...tokens?.radius },
+    };
+  }, [isDark, tokens, parentRadius]);
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
 }