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

package/CHANGELOG.md

@@ -1,6 +1,29 @@
 # 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
+
+The panel is content-sized (maxHeight 90%, no explicit height). Yoga
+resolves a flex:1 child of an auto-height parent to basis 0 with nothing
+to grow into, so the body collapsed to zero height: opening a SideSheet
+showed only the header bar (title + close), with all children invisible.
+
+body now uses flexShrink:1, so it sizes to its content and shrinks (for
+inner scrolling) once the panel hits maxHeight. The body View gained
+testID "bds-sidesheet-body"; the spec pins no-flex-grow + shrinkability. ([`8242d9d`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/8242d9dd795d3d4ece0513f4002f951f13469a2e))
+
 ## [0.2.4] - 2026-06-11
 ### Fixed
 - Fix(form): optical vertical centering for single-line input text

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
                 }
               )
             ]
@@ -3884,7 +3889,9 @@ var styles41 = import_react_native45.StyleSheet.create({
     lineHeight: 24
   },
   body: {
-    flex: 1
+    // The panel is content-sized (maxHeight only): a flex-grow body would
+    // resolve to zero height there. Shrink past maxHeight, never grow.
+    flexShrink: 1
   }
 });
 function SideSheet({
@@ -3993,7 +4000,7 @@ function SideSheet({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native45.View, { style: styles41.body, children })
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native45.View, { style: styles41.body, testID: "bds-sidesheet-body", children })
             ]
           }
         )

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
                 }
               )
             ]
@@ -3877,7 +3882,9 @@ var styles41 = StyleSheet41.create({
     lineHeight: 24
   },
   body: {
-    flex: 1
+    // The panel is content-sized (maxHeight only): a flex-grow body would
+    // resolve to zero height there. Shrink past maxHeight, never grow.
+    flexShrink: 1
   }
 });
 function SideSheet({
@@ -3986,7 +3993,7 @@ function SideSheet({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx45(View38, { style: styles41.body, children })
+              /* @__PURE__ */ jsx45(View38, { style: styles41.body, testID: "bds-sidesheet-body", children })
             ]
           }
         )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-react-native",
-  "version": "0.2.4",
+  "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/interaction/SideSheet/SideSheet.spec.tsx

@@ -77,4 +77,18 @@ describe('SideSheet (native)', () => {
     );
     expect(container).toBeInTheDocument();
   });
+
+  // The panel is content-sized (maxHeight only). A flex-grow body inside an
+  // auto-height parent resolves to zero height in Yoga, collapsing the sheet
+  // to just its header bar. The body must shrink, never grow from basis 0.
+  it('sizes the body to its content (no flex-grow collapse)', () => {
+    renderWithTheme(
+      <SideSheet isOpen onClose={() => {}} title="Sized">
+        <span>Body</span>
+      </SideSheet>,
+    );
+    const body = screen.getByTestId('bds-sidesheet-body');
+    expect(body).not.toHaveStyle({ flexGrow: '1' });
+    expect(body).toHaveStyle({ flexShrink: '1' });
+  });
 });

package/src/components/interaction/SideSheet/SideSheet.tsx

@@ -65,7 +65,9 @@ const styles = StyleSheet.create({
     lineHeight: 24,
   },
   body: {
-    flex: 1,
+    // The panel is content-sized (maxHeight only): a flex-grow body would
+    // resolve to zero height there. Shrink past maxHeight, never grow.
+    flexShrink: 1,
   },
 });
 
@@ -167,7 +169,9 @@ export function SideSheet({
               </Text>
             </Pressable>
           </View>
-          <View style={styles.body}>{children}</View>
+          <View style={styles.body} testID="bds-sidesheet-body">
+            {children}
+          </View>
         </Animated.View>
       </View>
     </Modal>

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