fix: overflowing story content overlaps sidebar (#627)

* fix: overflowing story content overlaps sidebar * fix: prevent overlap with addons panel feat: add example for Layout overflow behavior * fix: overflow on mobile --------- Co-authored-by: Daniel Williams <[email protected]>
storybookjs · Oct 25, 2024 · 1287053 · 1287053
1 parent d57c562
commit 1287053
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 5 deletions.
diff --git a/packages/react-native-ui/src/Layout.stories.tsx b/packages/react-native-ui/src/Layout.stories.tsx
@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Layout } from './Layout';
 import { mockDataset } from './mockdata';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { LayoutProvider } from './LayoutProvider';
 
 const meta = {
   title: 'components/Layout',
@@ -12,7 +13,9 @@ const meta = {
     (Story) => (
       <GestureHandlerRootView style={{ flex: 1 }}>
         <BottomSheetModalProvider>
-          <Story />
+          <LayoutProvider>
+            <Story />
+          </LayoutProvider>
         </BottomSheetModalProvider>
       </GestureHandlerRootView>
     ),
@@ -31,3 +34,44 @@ export const Basic: Story = {
     storyId: 'emails-buildnotification--with-changes',
   },
 };
+
+export const OverflowSidebarExample: Story = {
+  args: {
+    children: (
+      <View
+        style={{
+          width: '100%',
+          backgroundColor: 'lightgreen',
+          alignItems: 'flex-end',
+          left: '-50%',
+        }}
+      >
+        <Text style={{ width: '50%', textAlign: 'right' }}>
+          This box should not overflow the side navigation in desktop mode
+        </Text>
+      </View>
+    ),
+    //@ts-ignore
+    storyHash: mockDataset.withRoot,
+    storyId: 'emails-buildnotification--with-changes',
+  },
+};
+
+export const OverflowAddonsExample: Story = {
+  args: {
+    children: (
+      <View
+        style={{
+          height: '100%',
+          backgroundColor: 'lightgreen',
+          bottom: '-50%',
+        }}
+      >
+        <Text style={{ height: '50%' }}>This box should not overflow the addons panel</Text>
+      </View>
+    ),
+    //@ts-ignore
+    storyHash: mockDataset.withRoot,
+    storyId: 'emails-buildnotification--with-changes',
+  },
+};
diff --git a/packages/react-native-ui/src/Layout.tsx b/packages/react-native-ui/src/Layout.tsx
@@ -105,7 +105,7 @@ export const Layout = ({
         </View>
 
         <View style={{ flex: 1 }}>
-          <View style={{ flex: 1 }}>{children}</View>
+          <View style={{ flex: 1, overflow: 'hidden' }}>{children}</View>
 
           <View
             style={{
@@ -133,7 +133,7 @@ export const Layout = ({
 
   return (
     <View style={{ flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }}>
-      <View style={{ flex: 1 }}>{children}</View>
+      <View style={{ flex: 1, overflow: 'hidden' }}>{children}</View>
 
       <MobileMenuDrawer ref={mobileMenuDrawerRef} onStateChange={setDrawerOpen}>
         <View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>

diff --git a/packages/react-native/src/components/StoryView/StoryView.tsx b/packages/react-native/src/components/StoryView/StoryView.tsx
@@ -37,7 +37,7 @@ const StoryView = () => {
 
     return (
       <View
-        style={{ flex: 1, backgroundColor: theme.background?.content }}
+        style={{ flex: 1, backgroundColor: theme.background?.content, overflow: 'hidden' }}
         key={id}
         testID={id}
         onStartShouldSetResponder={dismissOnStartResponder}