@czi-sds/mcp 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/component-props/Accordion.json +14 -15
- package/data/component-props/Alert.json +2 -44
- package/data/component-props/Autocomplete.json +14 -32
- package/data/component-props/Banner.json +11 -12
- package/data/component-props/Button.json +17 -82
- package/data/component-props/ButtonDropdown.json +26 -0
- package/data/component-props/ButtonIcon.json +4 -60
- package/data/component-props/ButtonToggle.json +2 -66
- package/data/component-props/Callout.json +11 -65
- package/data/component-props/CellBasic.json +28 -56
- package/data/component-props/CellComponent.json +4 -32
- package/data/component-props/CellHeader.json +13 -49
- package/data/component-props/ComplexFilter.json +24 -4
- package/data/component-props/ContentCard.json +66 -2
- package/data/component-props/Dialog.json +26 -0
- package/data/component-props/Dropdown.json +29 -67
- package/data/component-props/DropdownMenu.json +16 -56
- package/data/component-props/HeatmapChart.json +6 -87
- package/data/component-props/Icon.json +3 -8
- package/data/component-props/InputCheckbox.json +5 -53
- package/data/component-props/InputDropdown.json +11 -33
- package/data/component-props/InputRadio.json +5 -53
- package/data/component-props/InputSearch.json +6 -70
- package/data/component-props/InputSlider.json +21 -35
- package/data/component-props/InputText.json +7 -63
- package/data/component-props/InputToggle.json +5 -54
- package/data/component-props/Link.json +18 -0
- package/data/component-props/LoadingIndicator.json +1 -2
- package/data/component-props/MenuItem.json +11 -41
- package/data/component-props/MenuSelect.json +4 -67
- package/data/component-props/NavigationFooter.json +0 -8
- package/data/component-props/NavigationHeader.json +14 -65
- package/data/component-props/NavigationJumpTo.json +0 -40
- package/data/component-props/Notification.json +14 -58
- package/data/component-props/Pagination.json +8 -33
- package/data/component-props/Panel.json +4 -54
- package/data/component-props/SegmentedControl.json +0 -55
- package/data/component-props/TableRow.json +10 -38
- package/data/component-props/Tabs.json +18 -0
- package/data/component-props/Tag.json +10 -56
- package/data/component-props/TagFilter.json +0 -47
- package/data/component-props/Tooltip.json +12 -61
- package/data/component-props/TooltipCondensed.json +18 -0
- package/data/component-props/TooltipTable.json +0 -4
- package/data/zeroheight-exports/Accordion.md +167 -125
- package/data/zeroheight-exports/Banner.md +71 -48
- package/data/zeroheight-exports/Borders.md +72 -73
- package/data/zeroheight-exports/Buttons.md +375 -330
- package/data/zeroheight-exports/Callout.md +138 -116
- package/data/zeroheight-exports/Colors.md +254 -255
- package/data/zeroheight-exports/Content-Card.md +36 -37
- package/data/zeroheight-exports/Contributing-to-SDS.md +34 -35
- package/data/zeroheight-exports/Control-Inputs.md +289 -234
- package/data/zeroheight-exports/Corners.md +63 -64
- package/data/zeroheight-exports/Cover-page.md +0 -1
- package/data/zeroheight-exports/Dialog.md +237 -179
- package/data/zeroheight-exports/Downloads.md +10 -11
- package/data/zeroheight-exports/Drop-Shadows.md +40 -41
- package/data/zeroheight-exports/Dropdown-Input.md +158 -127
- package/data/zeroheight-exports/Dropdown-Menu.md +814 -718
- package/data/zeroheight-exports/Element-Status-Tracker.md +191 -192
- package/data/zeroheight-exports/Field-Inputs.md +149 -130
- package/data/zeroheight-exports/Filters.md +114 -94
- package/data/zeroheight-exports/Getting-Started.md +112 -249
- package/data/zeroheight-exports/Hero.md +43 -37
- package/data/zeroheight-exports/Icons.md +205 -206
- package/data/zeroheight-exports/Intent.md +6 -7
- package/data/zeroheight-exports/Introduction-to-Bases.md +8 -9
- package/data/zeroheight-exports/Introduction-to-Cells.md +11 -12
- package/data/zeroheight-exports/Introduction-to-DNA.md +8 -9
- package/data/zeroheight-exports/Introduction-to-Genes.md +8 -9
- package/data/zeroheight-exports/Introduction.md +52 -53
- package/data/zeroheight-exports/Link.md +50 -37
- package/data/zeroheight-exports/Lists.md +78 -63
- package/data/zeroheight-exports/Loading-Indicator.md +7 -8
- package/data/zeroheight-exports/Navigation.md +163 -142
- package/data/zeroheight-exports/Notification.md +132 -102
- package/data/zeroheight-exports/Panel.md +231 -115
- package/data/zeroheight-exports/Responsive-Design.md +35 -32
- package/data/zeroheight-exports/Search-Input.md +9 -10
- package/data/zeroheight-exports/Search.md +87 -104
- package/data/zeroheight-exports/Segmented-Control.md +68 -45
- package/data/zeroheight-exports/Spacing.md +210 -211
- package/data/zeroheight-exports/Table.md +414 -302
- package/data/zeroheight-exports/Tabs.md +126 -98
- package/data/zeroheight-exports/Tags.md +148 -118
- package/data/zeroheight-exports/Text-Link.md +32 -33
- package/data/zeroheight-exports/Theming.md +48 -29
- package/data/zeroheight-exports/Tooltips.md +253 -237
- package/data/zeroheight-exports/Typography.md +463 -464
- package/dist/stdio.js +44 -132
- package/package.json +3 -4
- package/data/component-props/Chip.json +0 -73
- package/data/component-props/List.json +0 -43
- package/data/component-props/Menu.json +0 -48
- package/data/component-props/Table.json +0 -26
- package/data/component-props-storybook/Accordion-storybook.json +0 -45
- package/data/component-props-storybook/Alert-storybook.json +0 -30
- package/data/component-props-storybook/Autocomplete-storybook.json +0 -67
- package/data/component-props-storybook/Banner-storybook.json +0 -78
- package/data/component-props-storybook/Button-storybook.json +0 -115
- package/data/component-props-storybook/ButtonDropdown-storybook.json +0 -73
- package/data/component-props-storybook/ButtonIcon-storybook.json +0 -60
- package/data/component-props-storybook/ButtonToggle-storybook.json +0 -68
- package/data/component-props-storybook/Callout-storybook.json +0 -90
- package/data/component-props-storybook/CellBasic-storybook.json +0 -138
- package/data/component-props-storybook/CellComponent-storybook.json +0 -48
- package/data/component-props-storybook/CellHeader-storybook.json +0 -71
- package/data/component-props-storybook/Chip-storybook.json +0 -26
- package/data/component-props-storybook/ComplexFilter-storybook.json +0 -60
- package/data/component-props-storybook/ContentCard-storybook.json +0 -175
- package/data/component-props-storybook/Dialog-storybook.json +0 -56
- package/data/component-props-storybook/Dropdown-storybook.json +0 -93
- package/data/component-props-storybook/DropdownMenu-storybook.json +0 -73
- package/data/component-props-storybook/HeatmapChart-storybook.json +0 -55
- package/data/component-props-storybook/Icon-storybook.json +0 -75
- package/data/component-props-storybook/InputCheckbox-storybook.json +0 -57
- package/data/component-props-storybook/InputDropdown-storybook.json +0 -80
- package/data/component-props-storybook/InputRadio-storybook.json +0 -56
- package/data/component-props-storybook/InputSearch-storybook.json +0 -55
- package/data/component-props-storybook/InputSlider-storybook.json +0 -55
- package/data/component-props-storybook/InputText-storybook.json +0 -59
- package/data/component-props-storybook/InputToggle-storybook.json +0 -42
- package/data/component-props-storybook/Link-storybook.json +0 -50
- package/data/component-props-storybook/List-storybook.json +0 -26
- package/data/component-props-storybook/LoadingIndicator-storybook.json +0 -34
- package/data/component-props-storybook/Menu-storybook.json +0 -26
- package/data/component-props-storybook/MenuItem-storybook.json +0 -74
- package/data/component-props-storybook/MenuSelect-storybook.json +0 -38
- package/data/component-props-storybook/NavigationFooter-storybook.json +0 -67
- package/data/component-props-storybook/NavigationHeader-storybook.json +0 -115
- package/data/component-props-storybook/NavigationJumpTo-storybook.json +0 -41
- package/data/component-props-storybook/Notification-storybook.json +0 -89
- package/data/component-props-storybook/Pagination-storybook.json +0 -50
- package/data/component-props-storybook/Panel-storybook.json +0 -52
- package/data/component-props-storybook/SegmentedControl-storybook.json +0 -30
- package/data/component-props-storybook/Table-storybook.json +0 -26
- package/data/component-props-storybook/TableHeader-storybook.json +0 -26
- package/data/component-props-storybook/TableRow-storybook.json +0 -62
- package/data/component-props-storybook/Tabs-storybook.json +0 -45
- package/data/component-props-storybook/Tag-storybook.json +0 -78
- package/data/component-props-storybook/TagFilter-storybook.json +0 -30
- package/data/component-props-storybook/Tooltip-storybook.json +0 -85
- package/data/component-props-storybook/TooltipCondensed-storybook.json +0 -38
- package/data/component-props-storybook/TooltipTable-storybook.json +0 -47
|
@@ -6,16 +6,16 @@ Search is a flexible way for users to find data of interest or filter down their
|
|
|
6
6
|
|
|
7
7
|
## Search Flow Types
|
|
8
8
|
|
|
9
|
-
| There are three general flow patterns recommended when considering adding search or filter functionality to products. Each of these follows the same four basic steps:
|
|
10
|
-
|
|
|
9
|
+
| There are three general flow patterns recommended when considering adding search or filter functionality to products. Each of these follows the same four basic steps: 1. User types in a keyword 2. Search is initiated 3. Results are displayed 4. User takes action on the results Although the general steps followed are universal, the implementation choices made on how each step is accomplished, most notably how the results are displayed, are what differentiate each flow type. | | **Jump to flow type:** On-page Results flow Results Page flow |
|
|
10
|
+
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------------- |
|
|
11
11
|
|
|
12
12
|
### Flow Types
|
|
13
13
|
|
|
14
|
-
| **On-page Results** |
|
|
15
|
-
|
|
|
14
|
+
| **On-page Results** | | **Results Page** |
|
|
15
|
+
| ------------------- | --- | ---------------- |
|
|
16
16
|
|
|
17
|
-
| The content on the page automatically updates to reflect the search result. |
|
|
18
|
-
|
|
|
17
|
+
| The content on the page automatically updates to reflect the search result. | | The results of the search are displayed on a separate "search results" page. |
|
|
18
|
+
| --------------------------------------------------------------------------- | --- | ---------------------------------------------------------------------------- |
|
|
19
19
|
|
|
20
20
|
---
|
|
21
21
|
|
|
@@ -23,23 +23,21 @@ Search is a flexible way for users to find data of interest or filter down their
|
|
|
23
23
|
|
|
24
24
|
Search results are displayed on the current page by filtering down the visible content within the searchable area(s) to show matches only. This search is the most common pattern; it is used both at the component and the page levels.
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
|
|
27
27
|
|
|
28
28
|
---
|
|
29
29
|
|
|
30
30
|
#### 1. User types keyword into Search Input
|
|
31
31
|
|
|
32
|
-
It is recommended to position your Search Input at the top level of the content the user will be searching.
|
|
32
|
+
It is recommended to position your Search Input at the top level of the content the user will be searching.
|
|
33
33
|
|
|
34
|
-
For example, if the search will display results for a list of plugins (1), position the Search Input at the top of the list (2).
|
|
34
|
+
For example, if the search will display results for a list of plugins (1), position the Search Input at the top of the list (2).
|
|
35
35
|
|
|
36
36
|
#### **2. Search Initiated by User**
|
|
37
37
|
|
|
38
|
-
Search is initiated when the user clicks a button, hits “enter”, or completes some other user action.
|
|
39
|
-
|
|
40
|
-
This method is recommended when search results must be fetched from the backend, or when the user needs to set up other specifications before initiating the search.
|
|
38
|
+
Search is initiated when the user clicks a button, hits “enter”, or completes some other user action.
|
|
41
39
|
|
|
42
|
-
|
|
40
|
+
This method is recommended when search results must be fetched from the backend, or when the user needs to set up other specifications before initiating the search.
|
|
43
41
|
|
|
44
42
|
|
|
45
43
|
|
|
@@ -53,10 +51,10 @@ If there are no results, it is recommended that a “No Results” blank state i
|
|
|
53
51
|
|
|
54
52
|
Depending on the product and the user’s workflow, users may take a number of next actions on the results, possibly including:
|
|
55
53
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
54
|
+
- Refine search results (1); re-starts this flow.
|
|
55
|
+
- Sort search results (2).
|
|
56
|
+
- Filter search results (3).
|
|
57
|
+
- Interact with results, such as selecting a single result (4).
|
|
60
58
|
|
|
61
59
|
---
|
|
62
60
|
|
|
@@ -64,7 +62,7 @@ Depending on the product and the user’s workflow, users may take a number of n
|
|
|
64
62
|
|
|
65
63
|
Below are links to example use cases where we recommend using an On-page Results flow:
|
|
66
64
|
|
|
67
|
-
|
|
65
|
+
- Search within a Dropdown Menu
|
|
68
66
|
|
|
69
67
|
### Technical Considerations
|
|
70
68
|
|
|
@@ -72,8 +70,8 @@ It is recommended to discuss any search approach under consideration with the en
|
|
|
72
70
|
|
|
73
71
|
That being said, for the On-page Results flow, keep in mind:
|
|
74
72
|
|
|
75
|
-
|
|
76
|
-
|
|
73
|
+
- This approach is impacted by whether the search is done on the frontend or the backend. If search is slow and has to be done on the backend, consider using the Results Page flow type instead.
|
|
74
|
+
- Paginated vs infinite scrolling results may have an impact on the search flow options available.
|
|
77
75
|
|
|
78
76
|
---
|
|
79
77
|
|
|
@@ -81,7 +79,7 @@ That being said, for the On-page Results flow, keep in mind:
|
|
|
81
79
|
|
|
82
80
|
Search results are displayed on a different page than where the search was originally initiated. Depending on the use case, this may be a unique “Results” page, or an existing page where the data is usually located. The Results Page flow is often combined with the On-page Results flow. Learn more about Combining Search Types.
|
|
83
81
|
|
|
84
|
-
|
|
82
|
+
|
|
85
83
|
|
|
86
84
|
---
|
|
87
85
|
|
|
@@ -91,7 +89,7 @@ It is recommended to position Search Inputs at the top level of the content the
|
|
|
91
89
|
|
|
92
90
|
For example, if the search will display results from across the whole site (1), position the Search Input in a top-level navigation or outside of the page content hierarchy (2).
|
|
93
91
|
|
|
94
|
-
|
|
92
|
+
|
|
95
93
|
|
|
96
94
|
#### 2. **Search Initiated by User**
|
|
97
95
|
|
|
@@ -99,7 +97,7 @@ Search is initiated when the user clicks a button (1), hits “enter” (2), or
|
|
|
99
97
|
|
|
100
98
|
Because results will be displayed on a new page, Live Search is not recommended.
|
|
101
99
|
|
|
102
|
-
|
|
100
|
+
|
|
103
101
|
|
|
104
102
|
#### 3. Results Displayed on the Results page
|
|
105
103
|
|
|
@@ -109,17 +107,17 @@ The results page format depends on the product's use case and content. In the ex
|
|
|
109
107
|
|
|
110
108
|
If there are no results, it is recommended to display a bank state on the results page.
|
|
111
109
|
|
|
112
|
-
|
|
110
|
+
|
|
113
111
|
|
|
114
112
|
#### 4. User Takes Action on Results
|
|
115
113
|
|
|
116
114
|
Depending on the product and the user’s workflow, they may take a number of next actions on the results, possibly including:
|
|
117
115
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
116
|
+
- Refine search results (1). It is recommended to use the On-Page Results flow type; see Combining Flow Types.
|
|
117
|
+
- Interact with results, like drilling down into a single result (2) .
|
|
118
|
+
- Filter or Sort Results.
|
|
119
|
+
|
|
121
120
|
|
|
122
|
-
|
|
123
121
|
|
|
124
122
|
---
|
|
125
123
|
|
|
@@ -127,7 +125,7 @@ Depending on the product and the user’s workflow, they may take a number of ne
|
|
|
127
125
|
|
|
128
126
|
It is recommended to discuss any search approach under consideration with the engineering team to better understand the technical parameters the product can support.
|
|
129
127
|
|
|
130
|
-
That being said, for the Results Page flow type, keep in mind that this approach has the best performance when the search is performed on the backend.
|
|
128
|
+
That being said, for the Results Page flow type, keep in mind that this approach has the best performance when the search is performed on the backend.
|
|
131
129
|
|
|
132
130
|
## Example Use Cases
|
|
133
131
|
|
|
@@ -143,8 +141,8 @@ The following behaviors are recommended for displaying search results within a D
|
|
|
143
141
|
|
|
144
142
|
## Other Considerations
|
|
145
143
|
|
|
146
|
-
| Search is a complex component, and is highly subjective to each product's use case. While it's impossible to support and document every use case, here is a collection of patterns that may be useful to consider when implementing it.
|
|
147
|
-
|
|
|
144
|
+
| Search is a complex component, and is highly subjective to each product's use case. While it's impossible to support and document every use case, here is a collection of patterns that may be useful to consider when implementing it. The patterns detailed below have not been developed by the SDS team and are simply examples pulled from products that utilize the SDS components. | | **Jump to pattern:** Combining Search Types Supporting User Behavior |
|
|
145
|
+
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | -------------------------------------------------------------------- |
|
|
148
146
|
|
|
149
147
|
---
|
|
150
148
|
|
|
@@ -187,7 +185,7 @@ Search results are displayed on the current page by filtering down the visible c
|
|
|
187
185
|
|
|
188
186
|
It is recommended to position the Search Input at the top level of the content the user will be searching within.
|
|
189
187
|
|
|
190
|
-
For example, if the search will display results for a single Table (1), position the Search Input at the top of the table (2).
|
|
188
|
+
For example, if the search will display results for a single Table (1), position the Search Input at the top of the table (2).
|
|
191
189
|
|
|
192
190
|
#### **2A. Search Initiated Automatically (Live Search)**
|
|
193
191
|
|
|
@@ -195,15 +193,11 @@ Otherwise known as "Live Search," as the user types, the app automatically initi
|
|
|
195
193
|
|
|
196
194
|
This method is recommended in most cases of the On-page Results flow if implementation will allow it. This may not be a feasible solution if the product's search results are paginated.
|
|
197
195
|
|
|
198
|
-
|
|
199
|
-
|
|
200
196
|
#### **2B. Search Initiated by User**
|
|
201
197
|
|
|
202
198
|
Search is initiated when the user clicks a button, hits “enter”, or completes some other user action.
|
|
203
199
|
|
|
204
|
-
This method is recommended when search results must be fetched from the backend, or when the user needs to set up other specifications before initiating the search.
|
|
205
|
-
|
|
206
|
-
|
|
200
|
+
This method is recommended when search results must be fetched from the backend, or when the user needs to set up other specifications before initiating the search.
|
|
207
201
|
|
|
208
202
|
#### **3. Results Displayed in Searched Content Area**
|
|
209
203
|
|
|
@@ -211,16 +205,16 @@ Results are displayed by filtering the content in the searchable area (1) so tha
|
|
|
211
205
|
|
|
212
206
|
If there are no results, it is recommended that a “No Results” blank state is displayed in the content area instead.
|
|
213
207
|
|
|
214
|
-
|
|
208
|
+
|
|
215
209
|
|
|
216
210
|
**4. User Takes Action on Results**
|
|
217
211
|
|
|
218
212
|
Depending on the product and the user’s workflow, users may take a number of next actions on the results, possibly including:
|
|
219
213
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
214
|
+
- Refine search results (1); re-starts this flow.
|
|
215
|
+
- Filter search results (2).
|
|
216
|
+
- Sort search results (3).
|
|
217
|
+
- Interact with results, like drilling down into a single result, performing actions upon results, etc. (4).
|
|
224
218
|
|
|
225
219
|
---
|
|
226
220
|
|
|
@@ -228,7 +222,7 @@ Depending on the product and the user’s workflow, users may take a number of n
|
|
|
228
222
|
|
|
229
223
|
Below are links to example use cases where we recommend using an On-page Results flow:
|
|
230
224
|
|
|
231
|
-
|
|
225
|
+
- Search within a Dropdown Menu
|
|
232
226
|
|
|
233
227
|
### Technical Considerations
|
|
234
228
|
|
|
@@ -262,18 +256,18 @@ Search is a flexible way for users to find data of interest or filter down their
|
|
|
262
256
|
|
|
263
257
|
## Search Flow Types
|
|
264
258
|
|
|
265
|
-
| There are two general flow patterns recommended when considering adding search or filter functionality to products. Both of these follow the same four basic steps:
|
|
266
|
-
|
|
|
259
|
+
| There are two general flow patterns recommended when considering adding search or filter functionality to products. Both of these follow the same four basic steps: 1. User types in a keyword 2. Search is initiated 3. Results are displayed 4. User takes action on the results Although the general steps followed are universal, the implementation choices made on how each step is accomplished, most notably how the results are displayed, are what differentiate each flow type. | | **Jump to type:** On-page Results flow Results Dropdown flow |
|
|
260
|
+
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ------------------------------------------------------------ |
|
|
267
261
|
|
|
268
262
|
---
|
|
269
263
|
|
|
270
264
|
### Flow Types
|
|
271
265
|
|
|
272
|
-
| **On-page Results** |
|
|
273
|
-
|
|
|
266
|
+
| **On-page Results** | | **Results Dropdown** |
|
|
267
|
+
| ------------------- | --- | -------------------- |
|
|
274
268
|
|
|
275
|
-
| The content on the page automatically updates to reflect the search result. |
|
|
276
|
-
|
|
|
269
|
+
| The content on the page automatically updates to reflect the search result. | | The results of the search are Menu Items in a Dropdown Menu for the user to select from. |
|
|
270
|
+
| --------------------------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------- |
|
|
277
271
|
|
|
278
272
|
---
|
|
279
273
|
|
|
@@ -295,8 +289,6 @@ Search is initiated when the user clicks a button, hits “enter”, or complete
|
|
|
295
289
|
|
|
296
290
|
This method is recommended when search results must be fetched from the backend, or when the user needs to set up other specifications before initiating the search.
|
|
297
291
|
|
|
298
|
-
|
|
299
|
-
|
|
300
292
|
#### **3. Results Displayed in Searched Content Area**
|
|
301
293
|
|
|
302
294
|
Results are displayed by filtering the content in the searchable area (1) so that only search results are visible.
|
|
@@ -307,10 +299,10 @@ If there are no results, it is recommended that a “No Results” blank state i
|
|
|
307
299
|
|
|
308
300
|
Depending on the product and the user’s workflow, users may take a number of next actions on the results, possibly including:
|
|
309
301
|
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
302
|
+
- Refine search results (1); re-starts this flow.
|
|
303
|
+
- Filter search results (2).
|
|
304
|
+
- Sort search results (3).
|
|
305
|
+
- Interact with results, like drilling down into a single result, performing actions upon results, etc. (4).
|
|
314
306
|
|
|
315
307
|
---
|
|
316
308
|
|
|
@@ -318,7 +310,7 @@ Depending on the product and the user’s workflow, users may take a number of n
|
|
|
318
310
|
|
|
319
311
|
Below are links to example use cases where we recommend using an On-page Results flow:
|
|
320
312
|
|
|
321
|
-
|
|
313
|
+
- Search within a Dropdown Menu
|
|
322
314
|
|
|
323
315
|
### Technical Considerations
|
|
324
316
|
|
|
@@ -346,8 +338,6 @@ As the user types, the app automatically initiates the search with each keystrok
|
|
|
346
338
|
|
|
347
339
|
It is not recommended for user action to initiate search for this flow type.
|
|
348
340
|
|
|
349
|
-
|
|
350
|
-
|
|
351
341
|
#### **3. Results Displayed in Dropdown**
|
|
352
342
|
|
|
353
343
|
Instead of updating the searched content area, results are displayed in a Dropdown Menu below the Search Input (1).
|
|
@@ -358,9 +348,9 @@ If there are no results, it is recommended to display a bank state in the Dropdo
|
|
|
358
348
|
|
|
359
349
|
Depending on the product and the user’s workflow, they may take a number of next actions on the results, possibly including:
|
|
360
350
|
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
351
|
+
- Refine search results (1); re-starts this flow.
|
|
352
|
+
- Interact with results, such as drilling down into a single result (2) .
|
|
353
|
+
- Initiate a different type of search flow. For example, the user clicks “enter” to filter page by search keyword (3). See Combining Search Types section to learn more.
|
|
364
354
|
|
|
365
355
|
## Example Use Cases
|
|
366
356
|
|
|
@@ -374,12 +364,12 @@ When searching the Menu Items within a Dropdown Menu, it is recommended to use t
|
|
|
374
364
|
|
|
375
365
|
The following behaviors are recommended for displaying search results within a Dropdown Menu.
|
|
376
366
|
|
|
377
|
-
|
|
367
|
+
|
|
378
368
|
|
|
379
369
|
## Other Considerations
|
|
380
370
|
|
|
381
|
-
| Search is a complex component, and is highly subjective to each product's use case. While it's impossible to support and document every use case, here is a collection of patterns that may be useful to consider when implementing it.
|
|
382
|
-
|
|
|
371
|
+
| Search is a complex component, and is highly subjective to each product's use case. While it's impossible to support and document every use case, here is a collection of patterns that may be useful to consider when implementing it. The patterns detailed below have not been developed by the SDS team and are simply examples pulled from products that utilize the SDS components. **Please consider the information in this section as inspiration only.** | | **Jump to pattern:** Combining Search Types Supporting User Behavior |
|
|
372
|
+
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | -------------------------------------------------------------------- |
|
|
383
373
|
|
|
384
374
|
---
|
|
385
375
|
|
|
@@ -405,16 +395,16 @@ Search is a flexible way for users to find data of interest or filter down their
|
|
|
405
395
|
|
|
406
396
|
## Search Flow Types
|
|
407
397
|
|
|
408
|
-
| There are three general flow patterns recommended when considering adding search or filter functionality to products. Each of these follows the same four basic steps:
|
|
409
|
-
|
|
|
398
|
+
| There are three general flow patterns recommended when considering adding search or filter functionality to products. Each of these follows the same four basic steps: 1. User types in a keyword 2. Search is initiated 3. Results are displayed 4. User takes action on the results Although the general steps followed are universal, the implementation choices made on how each step is accomplished, most notably how the results are displayed, are what differentiate each flow type. | | **Jump to flow type:** On-page Results flow Results Dropdown flow Results Page flow |
|
|
399
|
+
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------------------------------------------------------- |
|
|
410
400
|
|
|
411
401
|
### Flow Types
|
|
412
402
|
|
|
413
403
|
| **On-page Results** | **Results Dropdown** | **Results Page** |
|
|
414
|
-
|
|
|
404
|
+
| ------------------- | -------------------- | ---------------- |
|
|
415
405
|
|
|
416
406
|
| The content on the page automatically updates to reflect the search result. | The results of the search are Menu Items in a Dropdown Menu for the user to select from. | The results of the search are displayed on a separate "search results" page. |
|
|
417
|
-
|
|
|
407
|
+
| --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
|
|
418
408
|
|
|
419
409
|
---
|
|
420
410
|
|
|
@@ -430,9 +420,9 @@ The example flow below uses CZ GEN EPI to show the on-page refresh of content th
|
|
|
430
420
|
|
|
431
421
|
#### 1. User types keyword into Search Input
|
|
432
422
|
|
|
433
|
-
It is recommended to position the Search Input at the top level of the content the user will be searching within.
|
|
423
|
+
It is recommended to position the Search Input at the top level of the content the user will be searching within.
|
|
434
424
|
|
|
435
|
-
For example, if the search will display results for a single Table (1), position the Search Input at the top of the table (2).
|
|
425
|
+
For example, if the search will display results for a single Table (1), position the Search Input at the top of the table (2).
|
|
436
426
|
|
|
437
427
|
#### 2A. Search Initiated Automatically (Live Search)
|
|
438
428
|
|
|
@@ -440,30 +430,26 @@ Otherwise known as "Live Search," as the user types, the app automatically initi
|
|
|
440
430
|
|
|
441
431
|
This method is recommended in most cases of the On-page Results flow if implementation will allow it. This may not be a feasible solution if the product's search results are paginated.
|
|
442
432
|
|
|
443
|
-
|
|
444
|
-
|
|
445
433
|
#### **2B. Search Initiated by User**
|
|
446
434
|
|
|
447
|
-
Search is initiated when the user clicks a button, hits “enter”, or completes some other user action.
|
|
435
|
+
Search is initiated when the user clicks a button, hits “enter”, or completes some other user action.
|
|
448
436
|
|
|
449
437
|
This method is recommended when search results must be fetched from the backend, or when the user needs to set up other specifications before initiating the search.
|
|
450
438
|
|
|
451
|
-
|
|
452
|
-
|
|
453
439
|
#### **3.** Results Displayed in Searched Content Area
|
|
454
440
|
|
|
455
|
-
Results are displayed by filtering the content in the searchable area (1) so that only search results are visible.
|
|
441
|
+
Results are displayed by filtering the content in the searchable area (1) so that only search results are visible.
|
|
456
442
|
|
|
457
|
-
If there are no results, it is recommended that a “No Results” blank state is displayed in the content area instead.
|
|
443
|
+
If there are no results, it is recommended that a “No Results” blank state is displayed in the content area instead.
|
|
458
444
|
|
|
459
445
|
#### 4. User Takes Action on Results
|
|
460
446
|
|
|
461
447
|
Depending on the product and the user’s workflow, users may take a number of next actions on the results, possibly including:
|
|
462
448
|
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
449
|
+
- Refine search results (1); re-starts this flow.
|
|
450
|
+
- Filter search results (2).
|
|
451
|
+
- Sort search results (3).
|
|
452
|
+
- Interact with results, like drilling down into a single result, performing actions upon results, etc. (4).
|
|
467
453
|
|
|
468
454
|
---
|
|
469
455
|
|
|
@@ -471,7 +457,7 @@ Depending on the product and the user’s workflow, users may take a number of n
|
|
|
471
457
|
|
|
472
458
|
Below are links to example use cases where we recommend using an On-page Results flow:
|
|
473
459
|
|
|
474
|
-
|
|
460
|
+
- Search within a Dropdown Menu
|
|
475
461
|
|
|
476
462
|
### Technical Considerations
|
|
477
463
|
|
|
@@ -479,14 +465,14 @@ It is recommended to discuss any search approach under consideration with the en
|
|
|
479
465
|
|
|
480
466
|
That being said, for the On-page Results flow, keep in mind:
|
|
481
467
|
|
|
482
|
-
|
|
483
|
-
|
|
468
|
+
- This approach is impacted by whether the search is done on the frontend or the backend. If search is slow and has to be done on the backend, consider using User-initiated Search (Step 2B) or the Results Page flow type instead.
|
|
469
|
+
- Paginated vs infinite scrolling results may have an impact on the search flow options available.
|
|
484
470
|
|
|
485
471
|
---
|
|
486
472
|
|
|
487
473
|
## Results Dropdown
|
|
488
474
|
|
|
489
|
-
Search results are displayed inside a Dropdown Menu that appears below the Search Input. The user will remain on the same page until they select a result from the Dropdown Menu.
|
|
475
|
+
Search results are displayed inside a Dropdown Menu that appears below the Search Input. The user will remain on the same page until they select a result from the Dropdown Menu.
|
|
490
476
|
|
|
491
477
|
### Example from CZ ID
|
|
492
478
|
|
|
@@ -498,7 +484,7 @@ The example flow below uses CZ ID to show the contents of a Dropdown Menu filter
|
|
|
498
484
|
|
|
499
485
|
It is recommended to position the Search Input at the top level of the content the search will apply to.
|
|
500
486
|
|
|
501
|
-
For example, if the search will display results from across multiple tabs (1), position the Search Input in the header (2).
|
|
487
|
+
For example, if the search will display results from across multiple tabs (1), position the Search Input in the header (2).
|
|
502
488
|
|
|
503
489
|
#### 2. Search Initiated (Live Update)
|
|
504
490
|
|
|
@@ -506,11 +492,9 @@ As the user types, the app automatically initiates the search with each keystrok
|
|
|
506
492
|
|
|
507
493
|
It is not recommended for user action to initiate search for this flow type.
|
|
508
494
|
|
|
509
|
-
|
|
510
|
-
|
|
511
495
|
#### 3. Results Displayed in Dropdown
|
|
512
496
|
|
|
513
|
-
Instead of updating the searched content area, results are displayed in a Dropdown Menu below the Search Input (1).
|
|
497
|
+
Instead of updating the searched content area, results are displayed in a Dropdown Menu below the Search Input (1).
|
|
514
498
|
|
|
515
499
|
If there are no results, it is recommended to display a bank state in the Dropdown Menu instead.
|
|
516
500
|
|
|
@@ -518,9 +502,9 @@ If there are no results, it is recommended to display a bank state in the Dropdo
|
|
|
518
502
|
|
|
519
503
|
Depending on the product and the user’s workflow, they may take a number of next actions on the results, possibly including:
|
|
520
504
|
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
505
|
+
- Refine search results (1); re-starts this flow.
|
|
506
|
+
- Interact with results, such as drilling down into a single result (2) .
|
|
507
|
+
- Initiate a different type of search flow. For example, the user clicks “enter” to filter page by search keyword (3). See Combining Search Types section to learn more.
|
|
524
508
|
|
|
525
509
|
---
|
|
526
510
|
|
|
@@ -536,21 +520,21 @@ The example flow below uses napari.org to show the usage of a Results Page to di
|
|
|
536
520
|
|
|
537
521
|
#### 1. User Types Keyword into Search Component
|
|
538
522
|
|
|
539
|
-
It is recommended to position Search Inputs at the top level of the content the search will apply to.
|
|
523
|
+
It is recommended to position Search Inputs at the top level of the content the search will apply to.
|
|
540
524
|
|
|
541
525
|
For example, if the search will display results from across the whole site (1), position the Search Input in a top-level navigation or outside of the page content hierarchy (2).
|
|
542
526
|
|
|
543
527
|
#### 2. **Search Initiated by User**
|
|
544
528
|
|
|
545
|
-
Search is initiated when the user clicks a button (1), hits “enter” (2), or some other user action.
|
|
529
|
+
Search is initiated when the user clicks a button (1), hits “enter” (2), or some other user action.
|
|
546
530
|
|
|
547
531
|
Because results will be displayed on a new page, Live Search is not recommended.
|
|
548
532
|
|
|
549
533
|
#### 3. Results Displayed on the Results page
|
|
550
534
|
|
|
551
|
-
After the user initiates the search, they are automatically directed to a results page.
|
|
535
|
+
After the user initiates the search, they are automatically directed to a results page.
|
|
552
536
|
|
|
553
|
-
The results page format depends on the product's use case and content. In the example shown, the results page is a unique page that lists search results for pages across the entire website.
|
|
537
|
+
The results page format depends on the product's use case and content. In the example shown, the results page is a unique page that lists search results for pages across the entire website.
|
|
554
538
|
|
|
555
539
|
If there are no results, it is recommended to display a bank state on the results page.
|
|
556
540
|
|
|
@@ -558,9 +542,9 @@ If there are no results, it is recommended to display a bank state on the result
|
|
|
558
542
|
|
|
559
543
|
Depending on the product and the user’s workflow, they may take a number of next actions on the results, possibly including:
|
|
560
544
|
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
545
|
+
- Refine search results (1). It is recommended to use the On-Page Results flow type; see Combining Flow Types.
|
|
546
|
+
- Interact with results, like drilling down into a single result (2) .
|
|
547
|
+
- Filter or Sort Results.
|
|
564
548
|
|
|
565
549
|
---
|
|
566
550
|
|
|
@@ -568,7 +552,7 @@ Depending on the product and the user’s workflow, they may take a number of ne
|
|
|
568
552
|
|
|
569
553
|
It is recommended to discuss any search approach under consideration with the engineering team to better understand the technical parameters the product can support.
|
|
570
554
|
|
|
571
|
-
That being said, for the Results Page flow type, keep in mind that this approach has the best performance when the search is performed on the backend.
|
|
555
|
+
That being said, for the Results Page flow type, keep in mind that this approach has the best performance when the search is performed on the backend.
|
|
572
556
|
|
|
573
557
|
## Example Use Cases
|
|
574
558
|
|
|
@@ -584,8 +568,8 @@ The following behaviors are recommended for displaying search results within a D
|
|
|
584
568
|
|
|
585
569
|
## Other Considerations
|
|
586
570
|
|
|
587
|
-
| Search is a complex component, and is highly subjective to each product's use case. While it's impossible to support and document every use case, here is a collection of patterns that may be useful to consider when implementing it.
|
|
588
|
-
|
|
|
571
|
+
| Search is a complex component, and is highly subjective to each product's use case. While it's impossible to support and document every use case, here is a collection of patterns that may be useful to consider when implementing it. The patterns detailed below have not been developed by the SDS team and are simply examples pulled from products that utilize the SDS components. **Please consider the information in this section as inspiration only.** | | **Jump to pattern:** Combining Search Types Supporting User Behavior |
|
|
572
|
+
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | -------------------------------------------------------------------- |
|
|
589
573
|
|
|
590
574
|
---
|
|
591
575
|
|
|
@@ -595,7 +579,7 @@ Depending on the use case, there may be a need to combine multiple flow types. H
|
|
|
595
579
|
|
|
596
580
|
### Results Page + On-page Results Flow
|
|
597
581
|
|
|
598
|
-
In most use cases for the Results Page flow, it can be beneficial to provide users with a way to modify their search results by implementing the On-page Results flow within a Results Page design.
|
|
582
|
+
In most use cases for the Results Page flow, it can be beneficial to provide users with a way to modify their search results by implementing the On-page Results flow within a Results Page design.
|
|
599
583
|
|
|
600
584
|
### Results Dropdown + On-page Results Flow
|
|
601
585
|
|
|
@@ -606,4 +590,3 @@ CZ ID combines the Results Dropdown and the On-page Results flows. This allows u
|
|
|
606
590
|
## Patterns to Support User Behavior
|
|
607
591
|
|
|
608
592
|
Below are some example behavior patterns worth considering to help support users in their searching. Evaluate if implementing these will help users’ workflows and if the product can support any technical requirements of implementation.
|
|
609
|
-
|