A drawer is a convenient way to present information such as notifications or context-sensitive help. Use a drawer for secondary content which only needs to appear when specifically requested by users.
Documents
When users click a UI element in the header, such as the Notifications or Help icon, this triggers a drawer to slide in from the right. Users can dismiss the drawer by:
A standard drawer has a section for a title at the top and includes a Close "x button.
Content can populate the area below this with 30px margins. Custom background colors and dividing lines can extend to 100% width.
A standard drawer changes to a detailed view when a user selects a topic in the Help list. This view includes a Back label and icon so the user can return to the standard view.
When the user closes the drawer, it should retain its state. Then when the user reopens the drawer, it should still display in detailed view.
Displaying the second level uses an animation to provide context.
A drawer maintains the same behavior all the way down to the extra small breakpoint, at which point it begins taking up 100% of the viewport width.
| Spacing | 30px side, 25px top and 30px bottom margins around the content area |
| 20px vertical margins below the title area, 30px side margins, 25px top margin | |
| 20px side margins around title separator | |
| Drawer is 320px wide at the Small breakpoint and wider | |
| Drawer is 100% width at the Extra Small breakpoint | |
| Dividing lines may extend past the content area, up to 100% width | |
| Background | Default background is white, may customized to an accessible color and extend to 100% width. |
| Border is 1px solid alto (#D9D9D9) | |
| Typography | Title is a Basic section heading |
| Icons | Close icon is Remove-sm-24 |
| A focused icon will use the standard browser outline for focus | |
| Touch target: 44 x 44px | |
| Shadow | box-shadow of 5px blur, rgba(199,199,199,0.70) color |
| Title separator | 1px solid alto |
| Keyboard shortcuts | Pressing escape should close the drawer in any mode |
| Focus behavior | Opening the drawer moves focus from the triggering element to the first focusable item within the drawer (typically the Close icon). |
| Tabbing within the drawer should cycle through focusable items like normal | |
| The drawer should capture focus, so you won't be able to tab out of the drawer | |
| Upon dismissing the drawer focus should be restored to the triggering element | |
| Scrolling | Content should scroll under the drawer header, which remains stickied to the top of the drawer |
| A subtle shadow effect appears once content is scrolled beneath the header |
| Title | Use a static "Back" label |
| Focusing the "< Back" element will use the standard browser outline for focus | |
| Uses Bold UI Text in Charcoal | |
| Spacing | Generally the same spacing as the Standard view |
| 28px above the title and 25px below the title (should keep the close icon in the same place) | |
| Icon | Chevron-back-18 icon |
| 10px spacing between icon and label | |
| Focus behavior | Follow the patterns of the Standard drawer |
| Transitioning into the Detailed view should move focus to the first focusable element of the view (typically the back button) | |
| Focus should again be captured | |
| Focus targets from the Standard view should not be accessible |
| Animation | Slide in from the right |
| Timing | 0.5 seconds |
| ease-in-out easing |
| Animation | Content container slides in from the right |
| Title slides away to the left | |
| Back fades/slides in from about the middle of the drawer | |
| Content | 0.3 seconds |
| ease-in-out | |
| Opacity is 0 in hidden state | |
| Hiding title | Move 40px off to the left |
| Opacity fades to 0 | |
| 0.3 seconds | |
| ease-in-out | |
| Restoring title | Restore properties |
| 0.4 seconds | |
| ease-in-out | |
| Showing back | Starts with midpoint centered at 60% of the content width and opacity of 0 |
| 0.3 seconds | |
| ease-in-out | |
| Hiding back | Reset position and opacity |
| 0.4 seconds | |
| ease-in-out |
Parker Malenke
Apply new brand to existing component.
Initial version.
Test