Patterns
Item picker
The Item Picker is how a user selects the data sources for the report they’re viewing. It is most commonly used to select profiles, but is also used to select campaigns within Paid reports.
Examples
Visual best practices
Panel header
- Font size: Size 300
- Font weight: 600
- Font color: Neutral 800
List header
- Font size: Size 200
- Font weight: 600
- Font color: Neutral 600
List items
- Font size: Size 200
- Font weight: 400
- Font color: Neutral 800
- Avatar size (optional): 20 x 20px
Content best practices
Picker items
- Profile and campaign names can wrap to multiple lines
Interaction best practices
Selecting
- Sometimes, such as with Paid reports, selecting a data source is a two-step process. First the user must select an account, which then loads the list of data sources from which they can choose.
- Data should only be shown for data sources that have been selected. If no data sources are selected, no data should be displayed and the user should be prompted to select one or more. See Data States.
Filtering
- When there are more than 10 items in a list, a text input is displayed above the list to act as a text filter