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

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 # Changelog
 
 All notable changes to `@boostdev/design-system-react-native` are documented here.
+## [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

@@ -3884,7 +3884,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 +3995,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

@@ -3877,7 +3877,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 +3988,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.5",
   "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>