You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: polaris.shopify.com/content/foundations/patterns/resource-picking.md
+34-47Lines changed: 34 additions & 47 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,25 +1,44 @@
1
1
---
2
2
name: Resource picking
3
3
keywords:
4
-
- breakpoint
4
+
- customer segments
5
5
- locations
6
6
- location picker
7
-
- segment picker
7
+
- multiselect
8
+
- multi-select
9
+
- multi select
8
10
- picker
11
+
- resource picker
12
+
- searchable listbox
13
+
- searchable list
14
+
- segment picker
9
15
- segments
10
16
- segementation
11
-
- customer segments
12
-
- searchable list
13
17
- single select
14
-
- multiselect
15
-
- multi-select
16
-
- multi select
18
+
examples:
19
+
- fileName: listbox-with-search.tsx
20
+
title: Searchable listbox
21
+
description: Use to help merchants browse, filter, and choose from a list of options.
22
+
- fileName: popover-with-segment-picker.tsx
23
+
title: Popover with segment picker
24
+
description: Use to help merchants quickly browse, find, and navigate from a list of customer segments.
25
+
- fileName: sheet-with-segment-picker.tsx
26
+
title: Sheet with segment picker
27
+
description: Use to help merchants quickly find and select from a list of customer segments.
17
28
---
18
29
19
30
# Resource picking
20
31
21
32
Resource picking experiences let merchants browse, find, and select items in a list to perform an action. The picking feature can help them navigate to a new page, filter an index table, or input one or more values in a form.
22
33
34
+
35
+
36
+
The primary building blocks of a picker experience are the listbox and text field components. Depending on what merchant problem you’re solving, the components may be hidden and revealed with an overlay, such as a popover or modal, or used directly inside of a container on the page. See the [customer segment picker](#customer-segments) and [location picker](#locations) examples for resource specific implementation details.
37
+
38
+
CODE SAMPLE
39
+
40
+
Include guidance about how to pick what container: The searchable listbox should be rendered directly.
41
+
23
42
---
24
43
25
44
## Principles
@@ -58,17 +77,15 @@ While there are many ways to treat a resource depending on the use case, two com
58
77
59
78
The number of locations a merchant has can range dramatically, and the location experience should adapt to that number. Using progressive disclosure, we can introduce features as merchants need them.
60
79
61
-
#### Popover list
62
-
63
80
The location picker popover allows a merchant to select any location they have added in the admin.
When a merchant only has one location, the button that opens the location picker should be hidden. There’s no need to access the experience when they can’t switch locations.
- List all other locations in alphabetical order. Each location item shows the location name only.
82
99
83
-
100
+
84
101
85
102
#### 11 or more locations
86
103
@@ -90,55 +107,25 @@ When a merchant has 11 or more locations:
90
107
- Add text search at the top of the location picker. This allows merchants to search for locations by specific criteria (location name, city, province, postal code, address, etc.).
91
108
- Directly below the search, show a section with the 5 most recently used locations. If there are none, show the first 5 locations from the full list.
92
109
- Below recently used locations, show an option to view all locations. Clicking this will show the inactive search state, displaying the full list of locations.
93
-
94
-
#### Location list
95
-
96
-
The location list allows merchants to view all locations they have added in the admin.
When a merchant has 1–10 locations, show all locations in a simple list. As notated in the image above:
103
-
104
-
1. Each list item should include the location name and address
105
-
2. The indicator at the bottom shows the total number of locations
106
-
107
-
108
-
109
-
##### 11 or more locations
110
-
111
-
When a merchant has 11 or more locations:
112
-
113
-
- Apply the same features as 1–10 locations
114
-
- Show text search, filters, and sorting at the top of the list
115
-
116
-
Notated in the image above, location list functionality at this level includes:
117
-
118
-
1.**Search**. Allow merchants to find locations via specific criteria (location name, city, province, postal code, address, etc.).
119
-
2.**Sort**. This will be contextual to the use case (alphabetical sort, date created, date edited, etc.).
120
-
3.**Filter**. This is also contextual to the use case. For example, merchants could filter by subscription type.
121
-
4.**Pagination**. Allow the merchant to load and view additional sets of locations. Trigger loading with a “Load more” button.
110
+
-
122
111
123
112
### Customer segments
124
113
125
114
The number of locations a merchant has can range dramatically, and the location experience should adapt to that number. Using progressive disclosure, we can introduce features as merchants need them.
126
115
127
-
#### Popover list
128
-
129
116
The location picker popover allows a merchant to select any location they have added in the admin.
When a merchant only has one location, the button that opens the location picker should be hidden. There’s no need to access the experience when they can’t switch locations.
- Add text search at the top of the location picker. This allows merchants to search for locations by specific criteria (location name, city, province, postal code, address, etc.).
0 commit comments