@boostdev/design-system-react-native 0.2.5 → 0.2.6

package/CHANGELOG.md

@@ -1,6 +1,16 @@
 # Changelog
 
 All notable changes to `@boostdev/design-system-react-native` are documented here.
+## [0.2.6] - 2026-06-15
+### Fixed
+- Fix(collapsible): render the disclosure indicator as a border-box chevron instead of the ▸ (U+25B8) glyph char
+
+The Collapsible's caret was a text glyph, which reads as a stray unicode
+character rather than a crisp icon. It is now a small View with two adjacent
+borders, rotated -45deg when collapsed (points right) to 45deg when expanded
+(points down) — font-independent and icon-like, with the toggle animation
+preserved. The spec pins it as a border chevron, not a glyph. ([`ee649db`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/ee649db))
+
 ## [0.2.5] - 2026-06-12
 ### Fixed
 - Fix(side-sheet): body sizes to content instead of collapsing to zero height

package/dist/index.cjs

@@ -1145,7 +1145,12 @@ var styles15 = import_react_native17.StyleSheet.create({
     lineHeight: lineHeight.body
   },
   chevron: {
-    fontSize: import_native.font.size.body,
+    // 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: import_native.spacing.xs
   },
   content: {
@@ -1184,9 +1189,9 @@ function Collapsible({
     }
     onToggle?.(next);
   }, [isOpen, isControlled, onToggle, rotation]);
-  const rotateZ = rotation.interpolate({
+  const rotate = rotation.interpolate({
     inputRange: [0, 1],
-    outputRange: ["0deg", "90deg"]
+    outputRange: ["-45deg", "45deg"]
   });
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     import_react_native17.View,
@@ -1205,12 +1210,12 @@ function Collapsible({
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native17.Text, { style: [styles15.summaryText, { color: colors2.colorOnBg }], children: summary }),
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                import_react_native17.Animated.Text,
+                import_react_native17.Animated.View,
                 {
-                  style: [styles15.chevron, { color: colors2.colorOnBgSubtle, transform: [{ rotateZ }] }],
+                  testID: "bds-collapsible-chevron",
+                  style: [styles15.chevron, { borderColor: colors2.colorOnBgSubtle, transform: [{ rotate }] }],
                   importantForAccessibility: "no",
-                  accessibilityElementsHidden: true,
-                  children: "\u25B8"
+                  accessibilityElementsHidden: true
                 }
               )
             ]

package/dist/index.js

@@ -1059,7 +1059,12 @@ var styles15 = StyleSheet15.create({
     lineHeight: lineHeight.body
   },
   chevron: {
-    fontSize: font.size.body,
+    // 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: {
@@ -1098,9 +1103,9 @@ function Collapsible({
     }
     onToggle?.(next);
   }, [isOpen, isControlled, onToggle, rotation]);
-  const rotateZ = rotation.interpolate({
+  const rotate = rotation.interpolate({
     inputRange: [0, 1],
-    outputRange: ["0deg", "90deg"]
+    outputRange: ["-45deg", "45deg"]
   });
   return /* @__PURE__ */ jsxs9(
     View12,
@@ -1119,12 +1124,12 @@ function Collapsible({
             children: [
               /* @__PURE__ */ jsx17(Text13, { style: [styles15.summaryText, { color: colors2.colorOnBg }], children: summary }),
               /* @__PURE__ */ jsx17(
-                Animated2.Text,
+                Animated2.View,
                 {
-                  style: [styles15.chevron, { color: colors2.colorOnBgSubtle, transform: [{ rotateZ }] }],
+                  testID: "bds-collapsible-chevron",
+                  style: [styles15.chevron, { borderColor: colors2.colorOnBgSubtle, transform: [{ rotate }] }],
                   importantForAccessibility: "no",
-                  accessibilityElementsHidden: true,
-                  children: "\u25B8"
+                  accessibilityElementsHidden: true
                 }
               )
             ]

package/package.json

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

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

@@ -16,6 +16,17 @@ describe('Collapsible (native)', () => {
     expect(screen.getByText('Details')).toBeInTheDocument();
   });
 
+  it('renders the disclosure indicator as a border chevron, not a glyph char', () => {
+    renderWithTheme(
+      <Collapsible summary="Details">
+        <span>Content</span>
+      </Collapsible>,
+    );
+    const chevron = screen.getByTestId('bds-collapsible-chevron');
+    expect(chevron).toHaveStyle({ borderRightWidth: 2 });
+    expect(chevron).not.toHaveTextContent('▸');
+  });
+
   it('hides content by default', () => {
     renderWithTheme(
       <Collapsible summary="Details">

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

@@ -58,7 +58,12 @@ const styles = StyleSheet.create({
     lineHeight: lineHeight.body,
   },
   chevron: {
-    fontSize: font.size.body,
+    // 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: {
@@ -103,9 +108,10 @@ export function Collapsible({
     onToggle?.(next);
   }, [isOpen, isControlled, onToggle, rotation]);
 
-  const rotateZ = rotation.interpolate({
+  // Chevron points right when collapsed (-45deg) and down when expanded (45deg).
+  const rotate = rotation.interpolate({
     inputRange: [0, 1],
-    outputRange: ['0deg', '90deg'],
+    outputRange: ['-45deg', '45deg'],
   });
 
   return (
@@ -121,13 +127,12 @@ export function Collapsible({
         style={({ pressed }) => [styles.header, pressed && styles.pressed]}
       >
         <Text style={[styles.summaryText, { color: colors.colorOnBg }]}>{summary}</Text>
-        <Animated.Text
-          style={[styles.chevron, { color: colors.colorOnBgSubtle, transform: [{ rotateZ }] }]}
+        <Animated.View
+          testID="bds-collapsible-chevron"
+          style={[styles.chevron, { borderColor: colors.colorOnBgSubtle, transform: [{ rotate }] }]}
           importantForAccessibility="no"
           accessibilityElementsHidden={true}
-        >
-          ▸
-        </Animated.Text>
+        />
       </Pressable>
       {isOpen && (
         <View style={styles.content}>