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

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/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/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/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>;
 }
 

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,
+  ];
+}