Can't get out of a verification dialog

[kittykat]

This issue is: Ready to build

This screen should act as a bottom sheet. When the user clicks outside the area of the bottom sheet it should close. We should implement the appropriate close actions suggested by google. Found here:

Other ways to close the bottom sheet should be:
https://material.io/components/sheets-bottom#modal-bottom-sheet

Control
Modal bottom sheets appear when triggered by a user action, such as tapping a button or an overflow icon. They can be dismissed by:

• Tapping a menu item or action within the bottom sheet
• Tapping the scrim
• Swiping the sheet down

Original issue

I accidentally clicked on a new session toast as it popped up while I was doing something else.

Now I have this and can't dismiss it:

I want to be able to dismiss that dialog by clicking away from it.

[bmarty]

It was a design decision to use BottomSheet for this purpose (I was against it), and to make BottomSheet non dismissable (which is also bad practice).

That said, clicking on "Back" should propose the user to cancel the process.

[ouchadam]

It does seem a little unfriendly to enforce a non dismissable flow

other parts of this flow go to the are you sure screen, feels like we could do the same here?

CANCEL VERIFICATION

[bmarty]

About "Are you sure?":

From https://material.io/components/dialogs

[daniellekirkwood]

Bottom sheets don't have "close" button unless they're in their expanded state (full screen) but I don't think this bottom sheet expands?

Other ways to close the bottom sheet should be:
https://material.io/components/sheets-bottom#modal-bottom-sheet

Control
Modal bottom sheets appear when triggered by a user action, such as tapping a button or an overflow icon. They can be dismissed by:

• Tapping a menu item or action within the bottom sheet
• Tapping the scrim
• Swiping the sheet down
• Using a close affordance within the bottom sheet’s top app bar, if available

It doesn't look like a Bottom sheet is the correct material.io component here so I'm tagging @amshakal and labelling Needs-Design for 2 UX decisions:

• Do we want to keep the bottom sheet for this instance. If no, which component instead?
• If yes... Do we add a Close button to the bottom sheet or implement the Google recommended close actions (see above) or something else?

EDIT
Met with Amsha today and we will keep the bottom sheet component as it's a pattern across the app that it well used and familiar to users.
Amsha will discuss our further options with others on the team and let us know the final decision 👍

[daniellekirkwood]

Removing the Needs-Product label.

I think we should implement the bottom sheet action where selecting not-the-bottom-sheet closes the bottom sheet.

Design to make final decision here.

[amshakal]

Hello, I agree with Daneille. The reason is that we are using the bottom sheet pattern for all things verification already.

[daniellekirkwood]

Thanks, @amshakal

I will remove the Needs Design label and update the description of the issue

[bmarty]

As a general remark, there are too many bottom sheets in this app and I did not success in the past to change the designer mind. Having text input area in bottom sheet is also quite weird :/. According to material.io bottom sheets can be used to: provide additional room for content, iconography, and actions. and it's great for instance when long clicking on a Matrix room or on a message. But for a flow of several screens, it's quite bad especially when using dark pattern to block user from dismissing it like reported in this issue.

The verification flow should be a full screen flow IMO. In this case it is possible to display a dialog when the user when to exit before it's finished, like we are doing for instance during account creation.

[bmarty]

(oh I am repeating myself, sorry about that)

[daniellekirkwood]

That's great feedback @bmarty
As the scope of this issue is to fix the defect (where the user can't exit the flow) we will stick to the agreed approach. However, we can raise an Enhancement issue to address your comments about the usage of the Bottom Sheet throughout the app and I'm sure the design team would be happy to review old decisions.

[bmarty]

OK, thanks.

So as far as I understand, we want this bottom sheet to be dismissable, and when dismissed, it should cancel the verification process (if there is something to do).

CC @ahmed-radhouane