BottomSheet Nested Options Selector

[cameronvoell]

Summary

This ticket is covering the refactoring of SelectControl to get around the UI restriction of nested react-native-modal's when using PickerCell so that we can have consistent nested BottomSheet menus in mobile block settings.

Background

While adding new Image Block Settings, we first saw the need for a nested settings menu to reveal Image Size Options (Thumbnail, Medium, Large, Fullscreen) from within the Image Block Settings. Our initial direction was to use nested react-native-modal components via a PickerCell component as a child of our BottomSheet. Unfortunately the underlying architecture of react-native-modal which relies on native Android and iOS components made it difficult to dismiss the parent modal before showing the child modal, which led to an undesirable user interface.

We ultimately decided to make a quick improvement to this UI for Image Size options, and return later to scope next steps for more flexible BottomSheet menus with nested menus that could be used going forward.

Current Status

While we were working on Image Size Settings, a cross platform component refactor created wrappers around our BottomSheet Menu and BottomSheet sub components, which led to the creation of TextControl, ToggleControl, and SelectControl. In addition, the new SelectControl wrapper around PickerCell was added to mobile Video Block Settings and Gallery Block Settings. This means we currently have at least three blocks that have a need for nested option selectors, and they currently exist in the app in two different forms.

Video Settings	ImageSettings

Proposal

Our ideal path forward is to refactor mobile SelectControl so that it has a UI that works for us going forward in mobile Image Size Options, Gallery Options, and Video Options, while also preserving its cross platform API.

Ideas for this have been presented from @iamthomasbishop and @Tug that involves a "nested" page within the current Bottom Sheet.

think the most intuitive way I’ve seen more complex sheets behave is to allow the user to go into a “nested” page within the sheet, generally displayed with a chevron/disclosure icon on the right side of the cell. @iamthomasbishop

Some untested example code from @Tug for such an implementation could be as follows:

[cameronvoell]

think the most intuitive way I’ve seen more complex sheets behave is to allow the user to go into a “nested” page within the sheet, generally displayed with a chevron/disclosure icon on the right side of the cell.

@iamthomasbishop Before we try this out, I wanted to make sure I understood you correctly. Do the mocks below correctly capture the idea behind the nested page within a sheet that is reached from clicking the row with the chevron icon? Does the nested page have a back icon, and how important do you think animation would be to this transition (as opposed to the nested screen simply popping in over the parent screen).

[iamthomasbishop]

Apologies for the delay on this one, I completely missed it. To answer your question, yes it could be something like that.

Does the nested page have a back icon

To me, it depends on how we define sheets and the transition we give them. If we animate a "push" transition, then a back button makes sense. Alternatively, if we just swap in another sheet, we could treat it as an actionSheet.

Here is what I mean by the two options:

I'm assuming both would be useful, but we might want to define behavior and best practices in documentation.

I imagine the first variation would work like a typical page push transition on each native pattern, while the swapping would simply dismiss the current sheet and display the new one, then once a selection is made, swap back to the original.