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

package/CHANGELOG.md

@@ -1,6 +1,76 @@
 # Changelog
 
 All notable changes to `@boostdev/design-system-react-native` are documented here.
+## [0.6.0] - 2026-09-29
+### Added
+- Feat(theme): radius overrides for buttons and fields
+
+ThemeProvider takes `tokens.radius` ({ button, iconButton, field }, in
+points), the native equivalent of the web `--button_radius`. The
+defaults are 0.5.1's values (m, full, m), so nothing changes for an app
+that does not set it. `useTheme()` returns the resolved `radius` next
+to `colors` and `isDark`, and `ThemeRadius` is exported.
+
+A nested ThemeProvider merges its radius over its parent's, so a
+provider that only recolors a subtree keeps the app's corners. Colors
+still merge over the foundation, not over the parent.
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`d8200d3`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/d8200d39ed24b30658a6c45692883dd1128898c1))
+
+### Changed
+- Refactor(button): corner radius comes from the theme
+
+A text button uses `radius.button` and an icon-only button
+`radius.iconButton` instead of the hardcoded border.radius.m and
+border.radius.full. A borderRadius in `style` still wins.
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`d672541`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/d6725412c7a6406203b6887e34512a09994c5265))
+- Refactor(form): fields take their corner radius from the theme
+
+FormInput, Select, Combobox, Textarea and the FileInput drop zone use
+`radius.field` instead of the hardcoded border.radius.m. NumberInput
+uses it for the outer corners on its steppers.
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`17b93bf`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/17b93bfa554c060b1ae83ca488b738d9a307b4b9))
+
+## [0.5.1] - 2026-09-28
+### Fixed
+- Fix(button): text buttons get medium corners
+
+A button with a text label now uses border.radius.m (16) on every
+size instead of border.radius.full. An icon-only button (isIconOnly)
+stays round. A borderRadius in `style` still wins, since `style` is
+applied last.
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`085e779`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/085e77953480a1724df35b716c4f8dcf23ed14a3))
+- Fix(form): fields get the same medium corners as buttons
+
+FormInput, Combobox, Select and NumberInput went from a pill
+(border.radius.full) to border.radius.m (16). Textarea (xs) and the
+FileInput drop zone (s) move to m as well, so every field matches.
+NumberInput rounds only its outer corners, on the steppers.
+
+FormInput and Combobox draw the border on an inner View, so a
+consumer could not override the radius through `style`.
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`70f88f9`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/70f88f9d44e9c6552330eeaadb8e0c3e9f056a6c))
+- Fix(select): a chevron replaces the ▾ glyph
+
+The trigger drew its indicator as a ▾ character in the body font, so
+it rendered small and its size and weight differed per platform and
+font. It is now a thin open V in colorOnBgSubtle, drawn with borders
+like Collapsible's disclosure chevron, sized to the body text and
+centred on it. It stays hidden from assistive technology and the
+trigger's accessibility label is unchanged.
+
+Collapsible's chevron moves into one internal Chevron that both use,
+so Collapsible changes a little too: its stroke goes from 2 to 1.5 pt
+to match regular body text, and the V is centred on its box whichever
+way it points. The old Collapsible stroke assertion passed a number to
+toHaveStyle, which matched anything; it now checks '1.5px'.
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`ecf0dc0`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/ecf0dc0f43980128dd3e49a86d313dd4ab932cde))
+
 ## [0.5.0] - 2026-09-27
 ### Added
 - Feat(text): ScaledText with a ceiling from its own font size

package/README.md

@@ -34,7 +34,7 @@ export default function App() {
 }
 ```
 
-`ThemeProvider` auto-detects the system color scheme (light/dark) via `useColorScheme`, or you can pass `colorScheme="light" | "dark"` to force one. Inside the tree, `useTheme()` exposes `{ colors, isDark }` where `colors` is the full foundation token palette (`colorBg`, `colorOnBg`, `colorInteractive`, …).
+`ThemeProvider` auto-detects the system color scheme (light/dark) via `useColorScheme`, or you can pass `colorScheme="light" | "dark"` to force one. Inside the tree, `useTheme()` exposes `{ colors, isDark, radius }` where `colors` is the full foundation token palette (`colorBg`, `colorOnBg`, `colorInteractive`, …) and `radius` holds the corner radii of the controls (see [Control radius](#control-radius)).
 
 ## Brand theming (token overrides)
 
@@ -62,6 +62,40 @@ Unspecified tokens keep their foundation values. Available token names are the k
 Pass a stable `tokens` reference (a module-level constant, not an inline object
 literal) — the provider memoizes the merged colors on that reference.
 
+### Control radius
+
+The corner radius of buttons and fields comes from the theme, not from the
+components — the React Native equivalent of the web `--button_radius` custom
+property. Override it with `tokens.radius`, in points; it is the same in light
+and dark:
+
+```tsx
+import { ThemeProvider, border } from '@boostdev/design-system-react-native';
+import type { ThemeTokenOverrides } from '@boostdev/design-system-react-native';
+
+const tokens: ThemeTokenOverrides = {
+  light: { colorInteractive: '#00c853' },
+  radius: { button: border.radius.s, iconButton: border.radius.s, field: border.radius.s },
+};
+
+<ThemeProvider tokens={tokens}>
+  <App />
+</ThemeProvider>;
+```
+
+| Key          | Applies to                                                                | Default                     |
+| ------------ | ------------------------------------------------------------------------- | --------------------------- |
+| `button`     | `Button` with a text label                                                | `border.radius.m` (16)      |
+| `iconButton` | `Button` with `isIconOnly`                                                | `border.radius.full` (9999) |
+| `field`      | `FormInput`, `Select`, `Combobox`, `Textarea`, `FileInput`, `NumberInput` | `border.radius.m` (16)      |
+
+Unspecified keys keep their default. A nested `ThemeProvider` inherits its
+parent's radii and merges its own `radius` over them, so a provider that only
+recolors a subtree keeps the app's corners. (Colors differ: a nested provider
+merges its colors over the foundation, not over its parent.) A `borderRadius`
+in a `Button`'s `style` still wins over the theme. Your own controls can read
+the same values through `useTheme().radius` (type `ThemeRadius`).
+
 ## React Navigation compatibility
 
 The library also ships a thin, **opt-in** bridge that produces a [React Navigation](https://reactnavigation.org/) `Theme` from the same foundation tokens. The bridge is purely additive — nothing about the standalone API changes when you use it, and `@react-navigation/native` is only required if you actually consume the bridge.