fix: prevent overlap with addons panel

feat: add example for Layout overflow behavior
storybookjs · Oct 23, 2024 · fbf03a7 · fbf03a7
1 parent 2b8cf83
commit fbf03a7
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 4 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
@@ -104,8 +104,8 @@ export const Layout = ({
           )}
         </View>
 
-        <View style={{ flex: 1, overflow: 'hidden' }}>
-          <View style={{ flex: 1 }}>{children}</View>
+        <View style={{ flex: 1 }}>
+          <View style={{ flex: 1, overflow: 'hidden' }}>{children}</View>
 
           <View
             style={{