fix(BottomSheet): Add safe area and flagship app height to compute toolbar height

react/BottomSheet/helpers.js

@@ -14,7 +14,11 @@ export const computeToolbarHeight = (toolbarProps = {}) => {
     computedToolbarHeight = ref.current.offsetHeight
   }
 
-  return computedToolbarHeight
+  return (
+    computedToolbarHeight +
+    (getFlagshipMetadata().statusBarHeight || 0) +
+    getSafeAreaValue('top')
+  )
 }
 
 export const computeMaxHeight = toolbarProps => {

react/BottomSheet/helpers.spec.js

@@ -22,19 +22,19 @@ describe('computeMaxHeight', () => {
   it('should return correct value if no arg', () => {
     const res = computeMaxHeight({})
 
-    expect(res).toBe(799)
+    expect(res).toBe(784)
   })
 
   it('should return correct value with height arg', () => {
     const res = computeMaxHeight({ height: 50 })
 
-    expect(res).toBe(750)
+    expect(res).toBe(735)
   })
 
   it('should return correct value with ref arg', () => {
     const res = computeMaxHeight({ ref: { current: { offsetHeight: 50 } } })
 
-    expect(res).toBe(750)
+    expect(res).toBe(735)
   })
 })
 
@@ -397,7 +397,7 @@ describe('computeBottomSpacer', () => {
           offset: 0
         })
 
-        expect(res).toBe(1)
+        expect(res).toBe(16)
       })
 
       it('should return the toolbar height', () => {
@@ -409,7 +409,7 @@ describe('computeBottomSpacer', () => {
           offset: 0
         })
 
-        expect(res).toBe(50)
+        expect(res).toBe(65)
       })
 
       it('should return the offset value and border', () => {
@@ -420,7 +420,7 @@ describe('computeBottomSpacer', () => {
           offset: 48
         })
 
-        expect(res).toBe(49)
+        expect(res).toBe(64)
       })
 
       it('should return the offset value and border and toolbar height', () => {
@@ -432,7 +432,7 @@ describe('computeBottomSpacer', () => {
           offset: 48
         })
 
-        expect(res).toBe(98)
+        expect(res).toBe(113)
       })
     })
   })
@@ -495,7 +495,7 @@ describe('computeBottomSpacer', () => {
           offset: 0
         })
 
-        expect(res).toBe(1)
+        expect(res).toBe(16)
       })
 
       it('should return the toolbar height', () => {
@@ -507,7 +507,7 @@ describe('computeBottomSpacer', () => {
           offset: 0
         })
 
-        expect(res).toBe(50)
+        expect(res).toBe(65)
       })
 
       it('should return the offset value', () => {
@@ -518,7 +518,7 @@ describe('computeBottomSpacer', () => {
           offset: 48
         })
 
-        expect(res).toBe(49)
+        expect(res).toBe(64)
       })
 
       it('should return the offset value and toolbar height', () => {
@@ -530,7 +530,7 @@ describe('computeBottomSpacer', () => {
           offset: 48
         })
 
-        expect(res).toBe(98)
+        expect(res).toBe(113)
       })
     })
   })
@@ -540,18 +540,18 @@ describe('computeToolbarHeight', () => {
   it('should return the height prop', () => {
     const res = computeToolbarHeight({ height: 50 })
 
-    expect(res).toBe(50)
+    expect(res).toBe(65)
   })
 
   it('should return the height from ref', () => {
     const res = computeToolbarHeight({ ref: { current: { offsetHeight: 50 } } })
 
-    expect(res).toBe(50)
+    expect(res).toBe(65)
   })
 
   it('should return default value', () => {
     const res = computeToolbarHeight()
 
-    expect(res).toBe(1)
+    expect(res).toBe(16)
   })
 })

react/CozyDialogs/Readme.md

@@ -92,6 +92,8 @@ const hideBottomSheet = () => setState({ bottomSheetOpened: false })
 const showBottomSheet = () => setState({ bottomSheetOpened: true })
 const hideSecondConfirmDialog = () => setState({ secondConfirmDialogOpened: false })
 const showSecondConfirmDialog = () => setState({ secondConfirmDialogOpened: true })
+const hideSecondDialog = () => setState({ secondDialogOpened: false })
+const showSecondDialog = () => setState({ secondDialogOpened: true })
 const hideBSConfirmDialog = () => setState({ BSConfirmDialogOpened: false })
 const showBSConfirmDialog = () => setState({ BSConfirmDialogOpened: true })
 
@@ -188,6 +190,7 @@ initialState = {
   modalOpened: isTesting(),
   bottomSheetOpened: false,
   secondConfirmDialogOpened: false,
+  secondDialogOpened: false,
   BSConfirmDialogOpened: false,
   modal: Dialog,
   size: 'medium',
@@ -323,6 +326,9 @@ const initialVariants = [{
                     <div>
                       <Button label="Show inner confirm dialog" onClick={showSecondConfirmDialog}/>
                     </div>
+                    <div>
+                      <Button label="Show inner dialog" onClick={showSecondDialog}/>
+                    </div>
                   </Stack>
                 </Typography>
 
@@ -333,6 +339,13 @@ const initialVariants = [{
                   />
                 )}
 
+                {state.secondDialogOpened && (
+                  <Dialog open onClose={hideSecondDialog}
+                    title="This is a simple title"
+                    content="This is a simple content"
+                  />
+                )}
+
                 {state.bottomSheetOpened && (
                   <BottomSheet backdrop onClose={hideBottomSheet}>
                     <BottomSheetItem>