This full-width modal is the right fit when customers need to create, view, or edit a transaction.
- Use a trowser when the user needs to fill out a complex form.
- The trowser can display a single-step flow or a multi-step, multi-screen task flow (as in an activation flow).
Appearance and behavior
- The trowser includes a header and a sticky footer.
- There is no left navigation.
The trowser’s sticky title or header remains secondary to the global header, even though it might lead to some of the same places (such as help and settings). The X in the corner enables users to close the trowser and return to where they started.
You can use the trowser to let users see transactions they opened previously in the current session. Because the user can navigate between multiple transactions, autosave is a must and needs to be clearly displayed in the header.
The Stage displays title info or the Flow Navigation. In transactions, it is used to display important information: customer, payment details, and totals.
The main content area of the Trowser scrolls behind the sticky header and footer. The Form specs differ between transaction forms and other forms, so make sure you take a look at those.
A Drawer can slide over the main content as a way to add items (examples: add a note to a transaction).
Navigation and the sticky footer
The Trowser may use a stacked model to navigate deeper into a context, with each new Trowser layering on top of the current Trowser using animation. For example, while in the “Receive Payment” trowser a user may click to view a related Invoice which would open that trowser on top. Trowsers can also navigate between sibling trowsers (such as navigating between invoices).
The sticky footer is permanently anchored to the bottom of the screen and is home to the primary and secondary call-to-actions, as well as tertiary actions (text links) like print and export. The primary call-to-action is always on the right. When completing a transaction or flow, the primary action is save. During a flow navigation, Next becomes primary and Back is the secondary action placed to its left. When the various steps have completed, the primary call to action changes to “Save” or “Done”. No buttons appear on the left side of the trowser footer.
When there are many actions, links may be centered in the sticky footer. When there isn’t sufficient space, a “more” popover may be used.
There is no need for a cancel button because the “X” always closes the current trowser, returning the user back to the layer they opened it from. If data has been entered without saving and autosave functionality doesn’t exist for the flow, a critical alert warns the user that they might lose data.
Sticky footer with “more” popover
Each trowser slides down from the top. When it hits the bottom there is a small bounce to help indicate that it is layering on top of something.
The trowser has a maximum width of 1440px. In the case where it appears on a very large screen, the trowser gets centered with a black 40% opacity mask behind it. If a 565px drawer is ever opened within the trowser, it needs to be positioned appropriately. When there is space for the drawer and trowser to sit completely or partially side by side, the drawer panel will push the trowser left to recenter the total width of the drawer and trowser. If there is not enough space, the drawer will overlap the trowser as it does in smaller windows. When the save and X to close the trowser are not overlapped by the drawer, they use a dissolve transition to hide temporarily.
Examples of trowsers and trowsers with drawers on extra large screens
The trowser behaviors similarly across devices. The main changes are that on devices other than desktop, we show fewer options in the header and footer:
- Fixed header required.
- Fixed footer required.
- X in top right corner, required.
- One single primary button in bottom right (which can launch a mobile friendly menu button).
- Overflow icon for all other actions (which uses the mobile friendly menu button).
- No help icon.
- No trowser history icon.
- No settings icon.
- The trowser title is in sentence case (Sentence case).
- The title remains the same throughout the entire flow. Examples: Get ready for payroll, Payroll tax setup, etc.