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

package/package.json

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

package/src/components/interaction/Button/Button.mdx

@@ -45,6 +45,10 @@ export default function App() {
 <Canvas of={Stories.Medium} />
 <Canvas of={Stories.Large} />
 
+## Shape
+
+A button with a text label has `border.radius.m` corners on every size, the same as the form fields. An icon-only button (`isIconOnly`) stays round (`border.radius.full`). A `borderRadius` in `style` overrides both.
+
 ## Icons
 
 <Canvas of={Stories.WithIconStart} />
@@ -52,7 +56,7 @@ export default function App() {
 
 ### Icon-only (1:1 aspect ratio)
 
-Set `isIconOnly` to render a square button with equal `spacing.xs` padding on both axes. Composable with any `variant`. Always pair with `accessibilityLabel` for assistive tech.
+Set `isIconOnly` to render a round 1:1 button with equal `spacing.xs` padding on both axes. Composable with any `variant`. Always pair with `accessibilityLabel` for assistive tech.
 
 <Canvas of={Stories.IconOnly} />
 <Canvas of={Stories.IconOnlyOutline} />

package/src/components/interaction/Button/Button.spec.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../../native/ThemeContext';
 import { Button } from './Button';
+import { cornerRadii } from '../../../test/cornerRadii';
 
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
@@ -69,4 +70,26 @@ describe('Button (native)', () => {
     const style = screen.getByRole('button').getAttribute('style') ?? '';
     expect(style).toMatch(/(^|[;\s])height:\s*56px/);
   });
+
+  it.each(['small', 'medium', 'large'] as const)(
+    'gives a %s text button the medium border radius',
+    (size) => {
+      renderWithTheme(<Button size={size}>Save</Button>);
+      expect(cornerRadii(screen.getByRole('button'))).toEqual(['16px', '16px', '16px', '16px']);
+    },
+  );
+
+  it('keeps an icon-only button round', () => {
+    renderWithTheme(
+      <Button isIconOnly accessibilityLabel="Confirm">
+        <span>✓</span>
+      </Button>,
+    );
+    expect(cornerRadii(screen.getByRole('button'))).toEqual(['9999px', '9999px', '9999px', '9999px']);
+  });
+
+  it("lets the caller's style override the border radius", () => {
+    renderWithTheme(<Button style={{ borderRadius: 4 }}>Save</Button>);
+    expect(cornerRadii(screen.getByRole('button'))).toEqual(['4px', '4px', '4px', '4px']);
+  });
 });

package/src/components/interaction/Button/Button.tsx

@@ -21,10 +21,10 @@ export interface ButtonProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const sizeTokens: Record<ButtonSize, { height: number; px: number; fontSize: number; radius: number }> = {
-  small:  { height: 36,  px: spacing.m,   fontSize: font.size.bodyS,    radius: border.radius.full },
-  medium: { height: 48,  px: spacing.m,   fontSize: font.size.body,     radius: border.radius.full },
-  large:  { height: 56,  px: spacing.xxl, fontSize: font.size.heading3, radius: border.radius.full },
+const sizeTokens: Record<ButtonSize, { height: number; px: number; fontSize: number }> = {
+  small:  { height: 36,  px: spacing.m,   fontSize: font.size.bodyS },
+  medium: { height: 48,  px: spacing.m,   fontSize: font.size.body },
+  large:  { height: 56,  px: spacing.xxl, fontSize: font.size.heading3 },
 };
 
 const styles = StyleSheet.create({
@@ -57,7 +57,7 @@ export function Button({
   style,
 }: Readonly<ButtonProps>) {
   const { colors } = useTheme();
-  const { height, px, fontSize, radius } = sizeTokens[size];
+  const { height, px, fontSize } = sizeTokens[size];
 
   // Color model: filled = interactive bg, outline = transparent bg + interactive_on-bg border/text
   const primaryColor = colors.colorInteractive;
@@ -69,7 +69,8 @@ export function Button({
   const containerStyle: ViewStyle = {
     minHeight: height,
     paddingHorizontal: isIconOnly ? spacing.xs : px,
-    borderRadius: radius,
+    // A text button has medium corners on every size; an icon-only button stays round.
+    borderRadius: isIconOnly ? border.radius.full : border.radius.m,
     opacity: disabled ? 0.4 : 1,
     // Icon-only: square with equal xs padding on both axes.
     ...(isIconOnly && { aspectRatio: 1, paddingVertical: spacing.xs }),

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

@@ -3,6 +3,7 @@ import { ThemeProvider } from '../../../../native/ThemeContext';
 import { Combobox } from './Combobox';
 import type { ComboboxOption } from './Combobox';
 import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
+import { cornerRadii } from '../../../../test/cornerRadii';
 
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
@@ -100,4 +101,12 @@ describe('Combobox (native)', () => {
     expect(OPTICAL_TEXT_SHIFT).toBe(-1.5);
     expect(transform).toMatch(/(-1\.5|-1\.50)/);
   });
+
+  it('gives the bordered field box the medium border radius', () => {
+    renderWithTheme(
+      <Combobox label="Fruit" name="fruit" options={fruits} />,
+    );
+    const wrapper = screen.getByRole('combobox').parentElement as HTMLElement;
+    expect(cornerRadii(wrapper)).toEqual(['16px', '16px', '16px', '16px']);
+  });
 });

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

@@ -36,7 +36,7 @@ const styles = StyleSheet.create({
     gap: spacing.xxs,
   },
   /**
-   * Draws the pill border and provides the fixed 44pt touch-target height.
+   * Draws the rounded border and provides the fixed 44pt touch-target height.
    * justifyContent: 'center' vertically centers the inner TextInput.
    * position: 'relative' is required for the dropdown's absolute positioning.
    */
@@ -45,7 +45,7 @@ const styles = StyleSheet.create({
     height: INPUT_HEIGHT,
     justifyContent: 'center',
     borderWidth: 1,
-    borderRadius: border.radius.full,
+    borderRadius: border.radius.m,
   },
   /**
    * No vertical padding: iOS centers text automatically inside the wrapper height.

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

@@ -1,6 +1,7 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
 import { FileInput } from './FileInput';
+import { cornerRadii } from '../../../../test/cornerRadii';
 
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
@@ -70,4 +71,9 @@ describe('FileInput (native)', () => {
     );
     expect(screen.getByText('Resume *')).toBeInTheDocument();
   });
+
+  it('gives the drop zone the medium border radius', () => {
+    renderWithTheme(<FileInput label="Upload" name="upload" />);
+    expect(cornerRadii(screen.getByRole('button'))).toEqual(['16px', '16px', '16px', '16px']);
+  });
 });

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

@@ -33,7 +33,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.m,
     borderWidth: 2,
     borderStyle: 'dashed',
-    borderRadius: border.radius.s,
+    borderRadius: border.radius.m,
     minHeight: 120,
   },
   icon: {

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

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
 import { FormInput } from './FormInput';
 import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
+import { cornerRadii } from '../../../../test/cornerRadii';
 
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
@@ -99,6 +100,12 @@ describe('FormInput (native)', () => {
     expect(getComputedStyle(wrapper).minHeight).toBe('44px');
   });
 
+  it('gives the bordered field box the medium border radius', () => {
+    renderWithTheme(<FormInput label="Email" name="email" />);
+    const wrapper = screen.getByRole('textbox').parentElement as HTMLElement;
+    expect(cornerRadii(wrapper)).toEqual(['16px', '16px', '16px', '16px']);
+  });
+
   /**
    * 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

@@ -43,14 +43,14 @@ const styles = StyleSheet.create({
     gap: spacing.xxs,
   },
   /**
-   * The wrapper draws the pill border and provides at least 44pt touch-target height.
+   * The wrapper draws the rounded border 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.full,
+    borderRadius: border.radius.m,
   },
   /**
    * No vertical padding: iOS centers text automatically inside the wrapper height.

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

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
 import { NumberInput } from './NumberInput';
 import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
+import { cornerRadii } from '../../../../test/cornerRadii';
 
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
@@ -97,4 +98,11 @@ describe('NumberInput (native)', () => {
     expect(OPTICAL_TEXT_SHIFT).toBe(-1.5);
     expect(transform).toMatch(/(-1\.5|-1\.50)/);
   });
+
+  it('rounds the outer corners of the field with the medium border radius', () => {
+    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', '']);
+  });
 });

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

@@ -40,13 +40,13 @@ const styles = StyleSheet.create({
     borderWidth: 1,
   },
   stepperStart: {
-    borderTopStartRadius: border.radius.full,
-    borderBottomStartRadius: border.radius.full,
+    borderTopStartRadius: border.radius.m,
+    borderBottomStartRadius: border.radius.m,
     borderEndWidth: 0,
   },
   stepperEnd: {
-    borderTopEndRadius: border.radius.full,
-    borderBottomEndRadius: border.radius.full,
+    borderTopEndRadius: border.radius.m,
+    borderBottomEndRadius: border.radius.m,
     borderStartWidth: 0,
   },
   stepperText: {

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 trigger button that opens a bottom sheet modal with a scrollable list of options.
+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.
 
 > **Status: alpha** — API may change before stable release.
 
@@ -80,6 +80,7 @@ function Example() {
 ## Accessibility
 
 - Trigger announces the label and current value via `accessibilityLabel`
+- The chevron is decorative: it is drawn with borders (no glyph) and hidden from the accessibility tree
 - `accessibilityState.expanded` reflects whether the modal is open
 - Each option announces its label and selected state
 - Disabled options are communicated via `accessibilityState.disabled`

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

@@ -1,6 +1,7 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
 import { Select } from './Select';
+import { cornerRadii } from '../../../../test/cornerRadii';
 
 const options = [
   { value: 'apple', label: 'Apple' },
@@ -61,4 +62,24 @@ describe('Select (native)', () => {
     const trigger = screen.getByRole('button', { name: /Fruit/ });
     expect(trigger).toBeDisabled();
   });
+
+  it('gives the trigger the medium border radius', () => {
+    renderWithTheme(<Select label="Fruit" name="fruit" options={options} />);
+    const trigger = screen.getByRole('button', { name: /Fruit/ });
+    expect(cornerRadii(trigger)).toEqual(['16px', '16px', '16px', '16px']);
+  });
+
+  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/ });
+    expect(trigger).not.toHaveTextContent('\u25BE');
+    expect(within(trigger).getByTestId('bds-select-chevron')).toBeInTheDocument();
+  });
+
+  it('keeps the chevron out of the trigger accessibility label', () => {
+    renderWithTheme(
+      <Select label="Fruit" name="fruit" options={options} placeholder="Choose..." />,
+    );
+    expect(screen.getByRole('button', { name: 'Fruit, Choose...' })).toBeInTheDocument();
+  });
 });

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

@@ -3,6 +3,7 @@ import { StyleSheet, View, Pressable, Modal, FlatList, SafeAreaView, StyleProp,
 import { ScaledText as Text } from '../../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
+import { Chevron } from '../../../../native/Chevron';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
 
@@ -36,7 +37,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.s,
     paddingVertical: spacing.xs,
     borderWidth: 1,
-    borderRadius: border.radius.full,
+    borderRadius: border.radius.m,
     minHeight: 44,
   },
   triggerText: {
@@ -46,8 +47,6 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   chevron: {
-    fontFamily: font.family.body,
-    fontSize: font.size.body,
     marginStart: spacing.xs,
   },
   overlay: {
@@ -151,9 +150,11 @@ export function Select({
         >
           {displayText}
         </Text>
-        <Text style={[styles.chevron, { color: colors.colorOnBgSubtle }]} aria-hidden>
-          {'\u25BE'}
-        </Text>
+        <Chevron
+          testID="bds-select-chevron"
+          color={colors.colorOnBgSubtle}
+          style={styles.chevron}
+        />
       </Pressable>
 
       <Modal

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

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
 import { Textarea } from './Textarea';
+import { cornerRadii } from '../../../../test/cornerRadii';
 
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
@@ -47,4 +48,9 @@ describe('Textarea (native)', () => {
     const inputs = container.querySelectorAll('textarea, [style*="opacity"]');
     expect(inputs.length).toBeGreaterThan(0);
   });
+
+  it('gives the bordered field box the medium border radius', () => {
+    renderWithTheme(<Textarea label="Message" name="message" />);
+    expect(cornerRadii(screen.getByRole('textbox'))).toEqual(['16px', '16px', '16px', '16px']);
+  });
 });

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

@@ -33,7 +33,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.s,
     paddingVertical: spacing.xs,
     borderWidth: 1,
-    borderRadius: border.radius.xs,
+    borderRadius: border.radius.m,
     minHeight: 100,
     textAlignVertical: 'top',
   },

package/src/components/ui/Collapsible/Collapsible.spec.tsx

@@ -23,7 +23,7 @@ describe('Collapsible (native)', () => {
       </Collapsible>,
     );
     const chevron = screen.getByTestId('bds-collapsible-chevron');
-    expect(chevron).toHaveStyle({ borderRightWidth: 2 });
+    expect(chevron).toHaveStyle({ borderRightWidth: '1.5px' });
     expect(chevron).not.toHaveTextContent('▸');
   });
 

package/src/components/ui/Collapsible/Collapsible.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, View, Pressable, Animated, LayoutAnimation, Platform, UIMan
 import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
+import { Chevron } from '../../../native/Chevron';
 
 if (
   Platform.OS === 'android' &&
@@ -48,12 +49,6 @@ const styles = StyleSheet.create({
     lineHeight: lineHeight.body,
   },
   chevron: {
-    // Border-box chevron (no glyph font dependency): a small square with two
-    // adjacent borders, rotated to form a crisp "›" / "⌄" disclosure indicator.
-    width: 8,
-    height: 8,
-    borderRightWidth: 2,
-    borderBottomWidth: 2,
     marginStart: spacing.xs,
   },
   content: {
@@ -117,11 +112,11 @@ export function Collapsible({
         style={({ pressed }) => [styles.header, pressed && styles.pressed]}
       >
         <Text style={[styles.summaryText, { color: colors.colorOnBg }]}>{summary}</Text>
-        <Animated.View
+        <Chevron
           testID="bds-collapsible-chevron"
-          style={[styles.chevron, { borderColor: colors.colorOnBgSubtle, transform: [{ rotate }] }]}
-          importantForAccessibility="no"
-          accessibilityElementsHidden={true}
+          color={colors.colorOnBgSubtle}
+          rotate={rotate}
+          style={styles.chevron}
         />
       </Pressable>
       {isOpen && (

package/src/native/Chevron.spec.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import { Chevron } from './Chevron';
+
+describe('Chevron', () => {
+  it('draws an open V from two adjacent borders, without a glyph', () => {
+    render(<Chevron color="#123456" testID="chevron" />);
+    const chevron = screen.getByTestId('chevron');
+    expect(chevron).toHaveStyle({ borderRightWidth: '1.5px', borderBottomWidth: '1.5px' });
+    expect(chevron).toBeEmptyDOMElement();
+  });
+
+  it('strokes the V in the given colour', () => {
+    render(<Chevron color="#123456" testID="chevron" />);
+    expect(screen.getByTestId('chevron')).toHaveStyle({
+      borderRightColor: 'rgb(18, 52, 86)',
+      borderBottomColor: 'rgb(18, 52, 86)',
+    });
+  });
+
+  it('points down by default', () => {
+    render(<Chevron color="#123456" testID="chevron" />);
+    expect(getComputedStyle(screen.getByTestId('chevron')).transform).toMatch(/rotate\(45deg\)/);
+  });
+
+  it('takes another rotation', () => {
+    render(<Chevron color="#123456" rotate="-45deg" testID="chevron" />);
+    expect(getComputedStyle(screen.getByTestId('chevron')).transform).toMatch(/rotate\(-45deg\)/);
+  });
+
+  it('is hidden from assistive technology', () => {
+    render(<Chevron color="#123456" testID="chevron" />);
+    expect(screen.getByTestId('chevron')).toHaveAttribute('aria-hidden', 'true');
+  });
+});

package/src/native/Chevron.tsx

@@ -0,0 +1,50 @@
+import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+
+/** Edge of the bordered square. Rotated 45deg, the V is about 11pt wide: body-text size. */
+const SIZE = 8;
+const STROKE = 1.5;
+/**
+ * The V's ink sits in the bordered corner of the square, not on its centre. Shifting the
+ * square back along its own diagonal (before the rotation) centres the ink on the layout
+ * box whichever way the chevron points: (SIZE - STROKE) / 4 on each axis.
+ */
+const CENTRE_SHIFT = -(SIZE - STROKE) / 4;
+
+const styles = StyleSheet.create({
+  chevron: {
+    // Border-box chevron (no glyph font dependency): a small square with two
+    // adjacent borders, rotated to form a crisp "›" / "⌄" indicator.
+    width: SIZE,
+    height: SIZE,
+    borderRightWidth: STROKE,
+    borderBottomWidth: STROKE,
+  },
+});
+
+export interface ChevronProps {
+  color: string;
+  /** '45deg' points down (the default), '-45deg' points right. Takes an Animated interpolation. */
+  rotate?: string | Animated.AnimatedInterpolation<string>;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Decorative open "V", hidden from assistive technology. Internal: not part of the public API. */
+export function Chevron({ color, rotate = '45deg', testID, style }: Readonly<ChevronProps>) {
+  return (
+    <Animated.View
+      testID={testID}
+      style={[
+        styles.chevron,
+        {
+          borderColor: color,
+          transform: [{ rotate }, { translateX: CENTRE_SHIFT }, { translateY: CENTRE_SHIFT }],
+        },
+        style,
+      ]}
+      aria-hidden
+      importantForAccessibility="no-hide-descendants"
+      accessibilityElementsHidden
+    />
+  );
+}

package/src/test/cornerRadii.ts

@@ -0,0 +1,15 @@
+/**
+ * The four corner radii of an element, clockwise from top-left.
+ *
+ * react-native-web expands `borderRadius` into the four corner longhands, and jsdom
+ * does not rebuild the `border-radius` shorthand from them, so a spec reads the corners.
+ */
+export function cornerRadii(element: Element): string[] {
+  const style = getComputedStyle(element);
+  return [
+    style.borderTopLeftRadius,
+    style.borderTopRightRadius,
+    style.borderBottomRightRadius,
+    style.borderBottomLeftRadius,
+  ];
+}