Improve dialogs issue (#2941)

* Fix collapse, update backdrop color

* Remove test prop

* Remove debug code

2 files changed, 41 insertions, 6 deletions

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index f30d24e6a..529535051 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -90,6 +90,7 @@ export function Outer({
           keyboardBlurBehavior="restore"
           topInset={insets.top}
           {...sheetOptions}
+          snapPoints={sheetOptions.snapPoints || ['100%']}
           ref={sheet}
           index={openIndex}
           backgroundStyle={{backgroundColor: 'transparent'}}
@@ -99,6 +100,7 @@ export function Outer({
               appearsOnIndex={0}
               disappearsOnIndex={-1}
               {...props}
+              style={[flatten(props.style), t.atoms.bg_contrast_300]}
             />
           )}
           handleIndicatorStyle={{backgroundColor: t.palette.primary_500}}
@@ -117,7 +119,7 @@ export function Outer({
                 },
               ]}
             />
-            {hasSnapPoints ? children : <View>{children}</View>}
+            {children}
           </Context.Provider>
         </BottomSheet>
       </Portal>
diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx
index a18b3c62f..821ac3c88 100644
--- a/src/view/screens/Storybook/Dialogs.tsx
+++ b/src/view/screens/Storybook/Dialogs.tsx
@@ -9,7 +9,8 @@ import * as Prompt from '#/components/Prompt'
 import {useDialogStateControlContext} from '#/state/dialogs'
 
 export function Dialogs() {
-  const control = Dialog.useDialogControl()
+  const scrollable = Dialog.useDialogControl()
+  const basic = Dialog.useDialogControl()
   const prompt = Prompt.usePromptControl()
   const {closeAllDialogs} = useDialogStateControlContext()
 
@@ -20,8 +21,31 @@ export function Dialogs() {
         color="secondary"
         size="small"
         onPress={() => {
-          control.open()
+          scrollable.open()
           prompt.open()
+          basic.open()
+        }}
+        label="Open basic dialog">
+        Open all dialogs
+      </Button>
+
+      <Button
+        variant="outline"
+        color="secondary"
+        size="small"
+        onPress={() => {
+          scrollable.open()
+        }}
+        label="Open basic dialog">
+        Open scrollable dialog
+      </Button>
+
+      <Button
+        variant="outline"
+        color="secondary"
+        size="small"
+        onPress={() => {
+          basic.open()
         }}
         label="Open basic dialog">
         Open basic dialog
@@ -48,8 +72,17 @@ export function Dialogs() {
         </Prompt.Actions>
       </Prompt.Outer>
 
+      <Dialog.Outer control={basic}>
+        <Dialog.Handle />
+
+        <Dialog.Inner label="test">
+          <H3 nativeID="dialog-title">Dialog</H3>
+          <P nativeID="dialog-description">A basic dialog</P>
+        </Dialog.Inner>
+      </Dialog.Outer>
+
       <Dialog.Outer
-        control={control}
+        control={scrollable}
         nativeOptions={{sheet: {snapPoints: ['100%']}}}>
         <Dialog.Handle />
 
@@ -77,9 +110,9 @@ export function Dialogs() {
                 variant="outline"
                 color="primary"
                 size="small"
-                onPress={() => control.close()}
+                onPress={() => scrollable.close()}
                 label="Open basic dialog">
-                Close basic dialog
+                Close dialog
               </Button>
             </View>
           </View>