diff --git a/VAMobile/documentation/docs/Flagship design library/Templates/ScreenTypes.md b/VAMobile/documentation/docs/Flagship design library/Templates/ScreenTypes.md index 41b443b91d1..07948e4ddf5 100644 --- a/VAMobile/documentation/docs/Flagship design library/Templates/ScreenTypes.md +++ b/VAMobile/documentation/docs/Flagship design library/Templates/ScreenTypes.md @@ -64,12 +64,72 @@ The VA mobile app has 5 main screen types that fall into two categories: ### Child screen​ -- **Definition:** Child screens live within a feature, generally an item in a list. It’s often the endpoint of a hierarchy. Displays the tab bar and a descriptive back button. -- **Screen transition:** Horizontal (pushing on & off from right). -- **Scroll behavior:** Content scrolls if it exceeds the panel height. - - Screen title scroll behavior: - - Upon load: "VA" header text visible in top bar, screen title appears in body. - - When scrolled: "VA" header disappears from top bar, screen title disappears from body and moves to top bar. -- **Examples:** Appointment details, Prescription details -- **Resources:** - - [Figma file: Feature landing/child screen template](https://www.figma.com/file/cdp7Be4UdYesq9fXeqaOgt/IA%2FNAV-Screen- \ No newline at end of file +* **Definition:** Child screens live within a feature, generally an item in a list. It’s often the end point of a hierarchy. Displays the tab bar and a descriptive back button. +* **Screen transition:** Horizontal (pushing on & off from right). +* **Scroll behavior:** Content scrolls if it exceeds the panel height + * Screen title scroll behavior + * Upon load: "VA" header text visible in top bar, screen title appears in body + * When scrolled: "VA" header disappears from top bar, screen title disappears from body and moves to top bar +* **Examples:** Appointment details, Prescription details +* **Resources:** + * [Figma file: Feature landing/child screen template](https://www.figma.com/file/cdp7Be4UdYesq9fXeqaOgt/IA%2FNAV-Screen-Templates?node-id=2%3A334) + * [Figma: header scroll behavior](https://www.figma.com/file/cdp7Be4UdYesq9fXeqaOgt/IA%2FNAV-Screen-Templates?node-id=1%3A364) + * [Github ticket: Feature landing/child screen template](https://app.zenhub.com/workspaces/va-mobile-frontendqa-60f1a34998bc75000f2a489f/issues/gh/department-of-veterans-affairs/va-mobile-app/3977) + +## Modal screens +### Fullscreen task/subtask​ + + +* **Definition:** A contained, linear flow that is presented modally at any level of the app’s hierarchy, opening on a layer over the current screen and taking up the whole screen. A fullscreen task/subtask can be one or multiple steps, and it requires an explicit close or cancel button to exit. Use a task/subtask to enable something complex in order to lock in focus. Because it covers the entire screen, it is the only modally appearing screen over which other dialogs or panels can appear. It does not display the tab bar. +* **Behaviors & Logic:** + * **Screen Transition:** Screen transition is vertical (pushing on & off from the bottom) to open the subtask, then horizontal between sequential steps (if applicable). + * **Scroll behavior:** Content (including primary & secondary action buttons) scrolls if it exceeds the panel height. + * **Button behavior & display logic** + * Top bar action buttons: + * Left button: Cancel (use for single step task or first step in a multi-step task) or Back (use only for subsequent steps in a multi-step task). Must be accompanied by primary action button. Closes editable view without saving changes and/or closes entire multi-step flow without saving changes (Display "Are you sure?" confirmation modal before closing). + * Right button: Done or Close. Does not appear with a primary action button. Closes non-editable view. + * Embedded action buttons: + * Primary action button: May appear alone or with a secondary action button. If task is a single step, tap to save/submit and close view. If task is multi-step, tap to advance to next step (mid-task) or save/submit and close view (end of task). Always accompanied by a Cancel or Back button, never used with Close or Done. + * Secondary action button: May appear above the primary action button, but not alone. +* **Example:** Create an appointment, Refill a prescription +* **Resources:** + * [Figma file: Fullscreen subtask](https://www.figma.com/file/cdp7Be4UdYesq9fXeqaOgt/IA%2FNAV-Screen-Templates?node-id=155%3A2706) + * [Github ticket: Fullscreen subtask template](https://app.zenhub.com/workspaces/va-mobile-frontendqa-60f1a34998bc75000f2a489f/issues/gh/department-of-veterans-affairs/va-mobile-app/3978) + +### Large panel​ + + +* **Definition:** A contained (single step) task that is presented modally at any level of the app’s hierarchy and appears as a card that covers most of the underlying content. It displays a close button to exit, but can also swipe down or tap on background to close. Use a large panel to display more in depth detail (multiple paragraphs) or a small (quick) task, when you need to lock in focus and limit the possibility of abandoning. Cannot appear over another panel. Does not display the tab bar. +* **Behaviors & Logic:** + * **Screen transition:** Screen transition is vertical (pushing on & off from the bottom) to open & close, then horizontal between sequential steps (if applicable). + * **Scroll behavior:** + * Top bar title and actions are fixed & do not scroll. + * Content (including primary & secondary action buttons) scrolls if it exceeds the panel height. + * **Button behavior & display logic** + * Top bar action buttons: + * Left button: Cancel only, must be accompanied by primary embedded action button in content. Closes editable view without saving changes (Display "Are you sure?" confirmation modal). + * Right button: Done or Close. Does not appear with a primary action button. Closes non-editable view. + * Embedded action buttons: + * Primary action button: May appear alone or with a secondary action button. If task is a single step, tap to save/submit and close view. Always accompanied by Cancel. + * Secondary close/dismiss actions (Save/close action depends on top bar action button label) : + * Swipe down from header to close the panel + * Android hardware back also results in closing the panel +* **Example:** Help text, composing a secure message +* **Resources:** + * [Figma file: Large panel template](https://www.figma.com/file/cdp7Be4UdYesq9fXeqaOgt/IA%2FNAV-Screen-Templates?node-id=155%3A2739) + * [Github ticket: Large panel template](https://app.zenhub.com/workspaces/va-mobile-frontendqa-60f1a34998bc75000f2a489f/issues/gh/department-of-veterans-affairs/va-mobile-app/3979) + +### Web view + + + +* **Definition:** A screen that displays content from an outside website without requiring the user to leave the app. Requires an explicit close or cancel button to exit. Does not display tab bar due to required web toolbar. +* **Transition:** Horizontal (pushing on & off from right). +* **Example:** Contact VA +* **Resources:** + * [Figma file: Webview](https://www.figma.com/file/cdp7Be4UdYesq9fXeqaOgt/VAMobile-Navigation2.0-ScreenTemplates-Shipped%F0%9F%9A%A2?node-id=208%3A2793&t=b57jsZqgwHpuU2ja-4) + + +### Adding new screen types +- Always try to use an existing screen type first before proposing a new (or modifying an existing) screen type. +- New screen types should apply to multiple features/locations in the app rather than stand as one-offs, and need to be approved by the Component Committee. \ No newline at end of file