[Spec] Sheet

Summary

A drag-able sheet with custom content that can either be visible from the bottom or the top. It let’s people interact with a different set of actions within a page or to view specific content without being navigated.

Required properties:

• Background should be grayed when sheet is visible
  • Tapping the grayed area should hide the sheet
• Programmatically set the direction the sheet should display to top or bottom
• Content should be completely customizable.
• Programmatically show/hide the sheet.
• Programmatically set the position of the sheet
• Hitbox should be a little higher than the sheet, this will be helpful for people when they drag it.
• The component should respect the keyboard and move it’s content respectively.

Optional properties:

• Drag-able by using a handle.
• Snap to snap-points when it is dragged

Questions:

• Should the component go over the navigation bar when it is full-sized?
  • The component will not go over the navigation bar for the first iterations.

API Changes

Add a ModalityLayout with a new SheetBehavior:

<dxui:ModalityLayout>
        <dxui:ModalityLayout.Behaviors>
            <dxui:SheetBehavior>
                <StackLayout>
                    <Label Text="My label inside of the sheet" />
                </StackLayout>
            </dxui:SheetBehavior>
        </dxui:ModalityLayout.Behaviors>
</dxui:ModalityLayout>

Alignement

The sheet should either be visible from the bottom or at the top of the screen.

The default alignment should be Bottom (pic).

<dxui:SheetBehavior IsOpen="True" 
                    Alignment="Top" />

Snapping

When people drag the sheet, it should be able to snap to points on the screen. The position of the points will have to be defined by the consumer. The number of positions should be limited, but can be increased in the future.

Each snap point should be a number between 0-1 (representing 0 - 100% of the screen height)

<dxui:SheetBehavior IsOpen="True"
                    IsDragable="True"  
                    SnapPoints="0.2, 0.8" />

Set position programmatically

The consumer of the sheet should be able to programatically set the position of the sheet. The provided method should accept a number between 0 - 1 (representing 0 - 100%)

Half size:

<dxui:SheetBehavior IsOpen="True"
                    Position="0.5" />

Full size:

<dxui:SheetBehavior IsOpen="True"
                    Position="1" />

References

-https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/ -https://material.io/develop/android/components/bottom-sheet-dialog-fragment/ -Detect if keyboard is open

[darkwood]

I think “Direction” is misleading word. I would suggest “Alignment” or “Align” <SheetView IsOpen="True" Align="Top" />

[haavamoa]

The back button should close the modal. The dxui PopupLayout navigates to the previous page.

Is this discussed with our designers? We have had this discussion before and we did end up with navigating back and not closing the modals when we Tapped the back button. We have created an seperste issue for it : #98

I had not discussed this. In the lab result modals that I tested, ux is bad when it navigate to the previous page.

Let’s discuss this internally and demonstrate it. I agree that the back button on Android feels natural that it closes the modal, but it feels unnatural that the back arrow in the navigation bar should close the modal.

Let’s keep the spec for Sheet clean and continue discussion in #98 if it is needed.