Top Sheet
A modal view emerging from the Top App Bar that contains a scoped task related to the parent screen.
Anatomy
- Top App Bar: Navigational component displaying actions at the top of the screen. The Small variant is used for Single Select Top Sheets, while the Selection Mode variant is used for Multi-Select Top Sheets.
- Leading Navigation Icon Button: Dismisses the Top Sheet and any actions taken on the embedded UI elements.
- Sheet Content Slot: Flexible area that can be configured to display UI elements such as List Items. Contains a Primary Button for a call to action in Multi-Select variants.
- Overlay: Darkens the rest of the screen to further delineate the Top Sheet.
Usage Guidance
When to Use
- Use Top Sheet for scoped tasks related to UI elements in the Top App Bar such as filtering and sorting.
- Use Top Sheet for navigation to child pages from the parent page in Hubs when the menu structure is not flat (i.e., contains groupings made with Expandables).
When to Consider Something Else
- Use a Bottom Sheet for configuring scoped tasks related to UI elements on the screen outside of the Top App Bar.
- Use a lighter weight Menu for displaying items in an overflow state in the Top App Bar.
- Use the Additional Content Slot in the Top App Bar for adding descriptive page actions while still having the context of the rest page.
- Use a Menu for navigation to child pages from the parent page in Hubs when the menu structure is flat and concise.
- Use a Banner for surfacing feedback about a task, action, or state.
Behaviors
Opening
The Top Sheet is deployed by tapping on a dropdown in the header of the Top App Bar or by tapping on a UI element within the Additional Content Slot in the Top App Bar — a Pill or Secondary Button.
Closing
Dismissal occurs by completing an action within the custom UI in the Sheet Content Slot or by tapping on the Leading Navigation Icon Button or on the overlay outside of the Top Sheet to return to the parent screen.
Responsivity
Unlike the Bottom Sheet, the Top Sheet does not support gesture-based dismissal nor is it resizable. It automatically adjusts based on inserted content and cannot be adjusted by a user.
Overflow
A longer Top Sheet can fill the entire screen up until reaching the home indicator. When overflowing the allotted space, a native scroll bar appears with the perceivable view of the Top Sheet extending down to the home indicator. Upon scroll, the Top App Bar divider appears to clarify that content will pass underneath it.
Call-To-Action
When there are inputs in the Top Sheet such as Checkboxes or Radios, a call to action in the form of a Primary Button is used to enable users to save and apply their selections. The call-to-action should always appear at the bottom of the Top Sheet, after the user has seen all of the available content.
Examples
The Top Sheet consists of single and multi-select variants that vary on the basis of the type of Top App Bar and call-to-action.
Single-Select
Top Sheet includes a single-select variation without a call-to-action for navigational purposes. Upon selection of an instance in the single-select Top Sheet here, users are immediately redirected to their next destination.
Please note that this pattern in Top Sheet is used for Hub navigation when there is not a flat menu structure (i.e., content is divided into groups). See Menu for a lighter weight alternative when the menu structure is flat.
Multi-Select
Top Sheet also supports a multi-select variation that uses Checkboxes to enable users to select and apply inputs, such as with filtering and sorting. With a Checkbox, a call to action in the form of a Primary Button is used to enable users to save and apply their selections. The call to action should always appear at the bottom of the Top Sheet, after the user has seen all of the available content.
API Guidelines
Methods
Class name: TopSheet Module name: UIComponentsPlugin
extension View {
public func topSheet<ContentView: View>(
featureData: FeatureMetricsData,
showSheet: Binding<Bool>,
contentView: ContentView,
topSheetConfiguring: TopSheetConfiguring,
localizer: LocalizationAdapting
) -> some View
}Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| featureData | FeatureMetricsData | The feature name/context and the screen ID in which the component appears. | |
| showSheet | Binding<Bool> | A Binding<Bool> used to present/dismiss the sheet. | |
| contentView | View | A SwiftUIView | |
| topSheetConfiguring | TopSheetConfiguring | A protocol of type TopSheetConfiguring containing all the information TopSheet needs in order to function. See definition for more details. | |
| localizer | LocalizationAdapting | Localization provider |
Accesibility Guidelines
Coming soon…
Content Guidelines
- When naming the call to action in the Multi-Select variation, please refer to the Buttons and Calls to Action section of the Content Style Guide.
- When writing Checkbox Labels, refer to the Checkboxes section of the Content Style Guide.
Anatomy
- Top App Bar: Navigational component displaying actions at the top of the screen. The Small variant is used for Single Select Top Sheets, while the Selection Mode variant is used for Multi-Select Top Sheets.
- Leading Navigation Icon Button: Dismisses the Top Sheet and any actions taken on the embedded UI elements.
- Sheet Content Slot: Flexible area that can be configured to display UI elements such as List Items. Contains a Primary Button for a call to action in Multi-Select variants.
- Overlay: Darkens the rest of the screen to further delineate the Top Sheet.
Usage Guidance
When to Use
- Use Top Sheet for scoped tasks related to UI elements in the Top App Bar such as filtering and sorting.
- Use Top Sheet for navigation to child pages from the parent page in Hubs when the menu structure is not flat (i.e., contains groupings made with Expandables).
When to Consider Something Else
- Use a Bottom Sheet for configuring scoped tasks related to UI elements on the screen outside of the Top App Bar.
- Use a lighter weight Menu for displaying items in an overflow state in the Top App Bar.
- Use the Additional Content Slot in the Top App Bar for adding descriptive page actions while still having the context of the rest page.
- Use a Menu for navigation to child pages from the parent page in Hubs when the menu structure is flat and concise.
- Use a Banner for surfacing feedback about a task, action, or state.
Behaviors
Opening
The Top Sheet is deployed by tapping on a dropdown in the header of the Top App Bar or by tapping on a UI element within the Additional Content Slot in the Top App Bar — a Pill or Secondary Button.
Closing
Dismissal occurs by completing an action within the custom UI in the Sheet Content Slot or by tapping on the Leading Navigation Icon Button or on the overlay outside of the Top Sheet to return to the parent screen.
Responsivity
Unlike the Bottom Sheet, the Top Sheet does not support gesture-based dismissal nor is it resizable. It automatically adjusts based on inserted content and cannot be adjusted by a user.
Overflow
A longer Top Sheet can fill the entire screen up until reaching the home indicator. When overflowing the allotted space, a native scroll bar appears with the perceivable view of the Top Sheet extending down to the home indicator. Upon scroll, the Top App Bar divider appears to clarify that content will pass underneath it.
Call-To-Action
When there are inputs in the Top Sheet such as Checkboxes or Radios, a call to action in the form of a Primary Button is used to enable users to save and apply their selections. The call to action should always appear at the bottom of the Top Sheet, after the user has seen all of the available content.
Examples
The Top Sheet consists of single and multi-select variants that vary on the basis of the type of Top App Bar and call-to-action.
Single-Select
Top Sheet includes a single-select variation without a call-to-action for navigational purposes. Upon selection of an instance in the single-select Top Sheet here, users are immediately redirected to their next destination.
Please note that this pattern in Top Sheet is used for Hub navigation when there is not a flat menu structure (i.e., content is divided into groups). See Menu for a lighter weight alternative when the menu structure is flat.
Multi-Select
Top Sheet also supports a multi-select variation that uses Checkboxes to enable users to select and apply inputs, such as with filtering and sorting. With a Checkbox, a call to action in the form of a Primary Button is used to enable users to save and apply their selections. The call to action should always appear at the bottom of the Top Sheet, after the user has seen all of the available content.
API Guidelines
Coming soon…
Accesibility Guidelines
Coming soon…
Content Guidelines
- When naming the call to action in the Multi-Select variation, please refer to the Buttons and Calls to Action section of the Content Style Guide.
- When writing Checkbox Labels, refer to the Checkboxes section of the Content Style Guide.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.