@boostdev/design-system-react-native 0.4.0 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +65 -0
- package/README.md +10 -0
- package/dist/index.cjs +854 -764
- package/dist/index.d.cts +35 -4
- package/dist/index.d.ts +35 -4
- package/dist/index.js +645 -659
- package/package.json +1 -1
- package/src/components/interaction/Button/Button.mdx +5 -1
- package/src/components/interaction/Button/Button.spec.tsx +40 -0
- package/src/components/interaction/Button/Button.tsx +15 -8
- package/src/components/interaction/Dialog/Dialog.tsx +2 -9
- package/src/components/interaction/DropdownMenu/DropdownMenu.tsx +2 -13
- package/src/components/interaction/Rating/Rating.tsx +2 -1
- package/src/components/interaction/SideSheet/SideSheet.tsx +2 -11
- package/src/components/interaction/Toast/Toast.tsx +2 -9
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx +2 -1
- package/src/components/interaction/form/Combobox/Combobox.spec.tsx +9 -0
- package/src/components/interaction/form/Combobox/Combobox.tsx +4 -12
- package/src/components/interaction/form/FileInput/FileInput.spec.tsx +6 -0
- package/src/components/interaction/form/FileInput/FileInput.tsx +3 -2
- package/src/components/interaction/form/FormInput/FormInput.spec.tsx +18 -9
- package/src/components/interaction/form/FormInput/FormInput.tsx +5 -11
- package/src/components/interaction/form/NumberInput/NumberInput.spec.tsx +8 -0
- package/src/components/interaction/form/NumberInput/NumberInput.tsx +6 -13
- package/src/components/interaction/form/RadioGroup/RadioGroup.tsx +2 -1
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.spec.tsx +40 -0
- package/src/components/interaction/form/SegmentedControl/SegmentedControl.tsx +8 -2
- package/src/components/interaction/form/Select/Select.mdx +2 -1
- package/src/components/interaction/form/Select/Select.spec.tsx +22 -1
- package/src/components/interaction/form/Select/Select.tsx +9 -17
- package/src/components/interaction/form/Slider/Slider.tsx +2 -9
- package/src/components/interaction/form/Textarea/Textarea.spec.tsx +6 -0
- package/src/components/interaction/form/Textarea/Textarea.tsx +3 -8
- package/src/components/interaction/form/atoms/Label.tsx +2 -1
- package/src/components/interaction/form/atoms/Message.tsx +2 -1
- package/src/components/layout/SectionHeader/SectionHeader.tsx +2 -1
- package/src/components/ui/Accordion/Accordion.tsx +2 -11
- package/src/components/ui/Alert/Alert.tsx +2 -1
- package/src/components/ui/Avatar/Avatar.tsx +2 -1
- package/src/components/ui/Badge/Badge.spec.tsx +28 -0
- package/src/components/ui/Badge/Badge.tsx +9 -3
- package/src/components/ui/Breadcrumb/Breadcrumb.tsx +2 -1
- package/src/components/ui/Calendar/Calendar.tsx +2 -8
- package/src/components/ui/Carousel/Carousel.tsx +2 -12
- package/src/components/ui/Collapsible/Collapsible.spec.tsx +1 -1
- package/src/components/ui/Collapsible/Collapsible.tsx +7 -22
- package/src/components/ui/DescriptionList/DescriptionList.tsx +2 -1
- package/src/components/ui/Link/Link.tsx +2 -1
- package/src/components/ui/NotificationBanner/NotificationBanner.tsx +2 -1
- package/src/components/ui/Pagination/Pagination.tsx +2 -1
- package/src/components/ui/Progress/Progress.tsx +2 -1
- package/src/components/ui/ProgressCircle/ProgressCircle.tsx +2 -1
- package/src/components/ui/Table/Table.tsx +2 -9
- package/src/components/ui/Tabs/Tabs.tsx +2 -10
- package/src/components/ui/Tooltip/Tooltip.tsx +2 -1
- package/src/components/ui/Typography/Typography.mdx +2 -0
- package/src/components/ui/Typography/Typography.spec.tsx +59 -0
- package/src/components/ui/Typography/Typography.tsx +18 -2
- package/src/index.ts +2 -0
- package/src/native/Chevron.spec.tsx +34 -0
- package/src/native/Chevron.tsx +50 -0
- package/src/native/ScaledText.guard.spec.ts +25 -0
- package/src/native/ScaledText.spec.tsx +77 -0
- package/src/native/ScaledText.tsx +30 -0
- package/src/native/fontScale.spec.ts +35 -0
- package/src/native/fontScale.ts +15 -0
- package/src/test/cornerRadii.ts +15 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,71 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
3
|
All notable changes to `@boostdev/design-system-react-native` are documented here.
|
|
4
|
+
## [0.5.1] - 2026-09-28
|
|
5
|
+
### Fixed
|
|
6
|
+
- Fix(button): text buttons get medium corners
|
|
7
|
+
|
|
8
|
+
A button with a text label now uses border.radius.m (16) on every
|
|
9
|
+
size instead of border.radius.full. An icon-only button (isIconOnly)
|
|
10
|
+
stays round. A borderRadius in `style` still wins, since `style` is
|
|
11
|
+
applied last.
|
|
12
|
+
|
|
13
|
+
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`085e779`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/085e77953480a1724df35b716c4f8dcf23ed14a3))
|
|
14
|
+
- Fix(form): fields get the same medium corners as buttons
|
|
15
|
+
|
|
16
|
+
FormInput, Combobox, Select and NumberInput went from a pill
|
|
17
|
+
(border.radius.full) to border.radius.m (16). Textarea (xs) and the
|
|
18
|
+
FileInput drop zone (s) move to m as well, so every field matches.
|
|
19
|
+
NumberInput rounds only its outer corners, on the steppers.
|
|
20
|
+
|
|
21
|
+
FormInput and Combobox draw the border on an inner View, so a
|
|
22
|
+
consumer could not override the radius through `style`.
|
|
23
|
+
|
|
24
|
+
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`70f88f9`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/70f88f9d44e9c6552330eeaadb8e0c3e9f056a6c))
|
|
25
|
+
- Fix(select): a chevron replaces the ▾ glyph
|
|
26
|
+
|
|
27
|
+
The trigger drew its indicator as a ▾ character in the body font, so
|
|
28
|
+
it rendered small and its size and weight differed per platform and
|
|
29
|
+
font. It is now a thin open V in colorOnBgSubtle, drawn with borders
|
|
30
|
+
like Collapsible's disclosure chevron, sized to the body text and
|
|
31
|
+
centred on it. It stays hidden from assistive technology and the
|
|
32
|
+
trigger's accessibility label is unchanged.
|
|
33
|
+
|
|
34
|
+
Collapsible's chevron moves into one internal Chevron that both use,
|
|
35
|
+
so Collapsible changes a little too: its stroke goes from 2 to 1.5 pt
|
|
36
|
+
to match regular body text, and the V is centred on its box whichever
|
|
37
|
+
way it points. The old Collapsible stroke assertion passed a number to
|
|
38
|
+
toHaveStyle, which matched anything; it now checks '1.5px'.
|
|
39
|
+
|
|
40
|
+
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`ecf0dc0`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/ecf0dc0f43980128dd3e49a86d313dd4ab932cde))
|
|
41
|
+
|
|
42
|
+
## [0.5.0] - 2026-09-27
|
|
43
|
+
### Added
|
|
44
|
+
- Feat(text): ScaledText with a ceiling from its own font size
|
|
45
|
+
|
|
46
|
+
maxFontScaleFor(fontSize): below 20 pt text may double with the OS text
|
|
47
|
+
size, 20-25 pt grows to 1.5x, 26-59 pt to 1.3x, and 60 pt or more stays
|
|
48
|
+
as it is. ScaledText and ScaledTextInput apply it to React Native's own
|
|
49
|
+
Text and TextInput, which otherwise grow up to 3.57x on iOS
|
|
50
|
+
accessibility sizes.
|
|
51
|
+
|
|
52
|
+
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`6420767`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/6420767083a8b2549583d933a9493816a23e537e))
|
|
53
|
+
- Feat(text): every component text goes through ScaledText
|
|
54
|
+
|
|
55
|
+
A guard spec fails when a component takes Text or TextInput from
|
|
56
|
+
react-native directly.
|
|
57
|
+
|
|
58
|
+
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`e1202d5`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/e1202d5f1e91debf8b66667a14615b6674c775c5))
|
|
59
|
+
- Feat(text): components hold a larger OS text size
|
|
60
|
+
|
|
61
|
+
Typography takes maxFontSizeMultiplier and numberOfLines. Button and
|
|
62
|
+
FormInput grow from a minimum height instead of a fixed one, and a
|
|
63
|
+
long Button label wraps. SegmentedControl labels stay on one line and
|
|
64
|
+
shrink to fit. Badge takes maxFontSizeMultiplier for a count on a
|
|
65
|
+
fixed shape.
|
|
66
|
+
|
|
67
|
+
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`27af98d`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/27af98d047ee97ad0870827a3254d6ea02802546))
|
|
68
|
+
|
|
4
69
|
## [0.4.0] - 2026-09-24
|
|
5
70
|
### Added
|
|
6
71
|
- Feat(segmented-control): xlarge size with a 56 pt tap target
|
package/README.md
CHANGED
|
@@ -135,6 +135,16 @@ Both standalone (`useTheme`) and Navigation (`useReactNavigationTheme` / `create
|
|
|
135
135
|
2. Pass it as `tokens` to `createReactNavigationTheme({ tokens, dark })` for the Navigation layer.
|
|
136
136
|
3. For the standalone layer — and to have overrides flow through to the Navigation theme automatically — use the `tokens` prop on `ThemeProvider` (see [Brand theming](#brand-theming-token-overrides) above).
|
|
137
137
|
|
|
138
|
+
## Text size
|
|
139
|
+
|
|
140
|
+
Every DS text grows with the OS text size (iOS Dynamic Type, Android font scale) up to a ceiling
|
|
141
|
+
taken from its own font size (`maxFontScaleFor`): below 20pt grows up to 2×, 20–25pt up to 1.5×,
|
|
142
|
+
26–59pt up to 1.3×, and 60pt or more stays at 1× (a countdown, a score). Override a component's
|
|
143
|
+
`maxFontSizeMultiplier` prop to set a different ceiling, e.g. `1` for text in a fixed shape.
|
|
144
|
+
|
|
145
|
+
In your own app code, use `ScaledText` / `ScaledTextInput` instead of React Native's `Text` /
|
|
146
|
+
`TextInput` to get the same rule.
|
|
147
|
+
|
|
138
148
|
## Development
|
|
139
149
|
|
|
140
150
|
```bash
|