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: website/docs/components/flyout/partials/guidelines/guidelines.md
+33-45Lines changed: 33 additions & 45 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,20 +8,20 @@
8
8
9
9
### When not to use
10
10
11
-
- When requesting minimal information or feedback from the user through a form. Instead, use a [Modal](/components/modal).
12
-
- When displaying or collecting overly complex information, consider moving the content to its own page.
11
+
- When requesting minimal information or feedback from the user, use a [Modal](/components/modal).
12
+
- When displaying or collecting complex information, consider moving the content to its own page.
13
13
14
14
### Flyout vs Modal
15
15
16
16
While similar in functionality and interaction, the Flyout and [Modal](/components/modal) are meant to be used in different scenarios and to express different types of content. There is a fair amount of overlap in their usage but they differ in complexity, status and messaging, speed and regularity, and experience hierarchy.
17
17
18
18
#### Complexity
19
19
20
-
A Flyout is useful for more complex read-only content, given the space it occupies in the viewport, while Modals are useful for less complex content that can be interacted with quickly. Complexity of content is relative. Use your own judgment to determine if the content or function is overly complex and consider moving it to its own page.
20
+
A Flyout is useful for more complex read-only content, given the space it occupies in the viewport, while Modals are useful for less complex content that can be interacted with quickly. Use your judgment to determine if the content or function is overly complex and consider moving it to its own page.
21
21
22
22
#### Status and messaging
23
23
24
-
Flyouts are useful when displaying detailed content that relates to the page, while Modals are useful for messaging status, e.g., confirming a destructive action or warning about the effects of a change.
24
+
Flyouts are useful when displaying detailed content that relates to the main page, while Modals are useful for messaging status, e.g., confirming a destructive action or warning about the effects of a change.
25
25
26
26
#### Speed and regularity
27
27
@@ -35,13 +35,11 @@ While each of these components is triggered by a user action, where they exist i
35
35
- A Flyout extends or "branches" off from the main flow to add detail and highlight secondary features and functions (Fig 1.1).
36
36
- Rather than blocking the user from continuing in the main flow, a Flyout enhances and adds detail to the flow to aid in the completion of a function.
37
37
38
-
**Fig. 1.0:** Hierarchy representation of a Modal blocking the user progression through a flow.
38
+
39
+
<Doc::ImageCaption @text="Fig. 1.0: Hierarchy representation of a Modal blocking the user progression through a flow."/>
39
40
40
-
41
-
42
-
**Fig. 1.1:** Hierarchy representation of the Flyout relative to the user flow.
43
-
44
-
41
+
42
+
<Doc::ImageCaption @text="Fig. 1.1: Hierarchy representation of the Flyout relative to the user flow."/>
45
43
46
44
### Usage examples
47
45
@@ -67,7 +65,7 @@ While code snippets and terminal scripts are usually detailed, they are well sui
67
65
68
66
#### Forms
69
67
70
-
Don't use a form in a Flyout, whether the function is creating an object, or updating an existing one. This type of content is often complex and more appropriate on its own page, or in the case of a simple form, within a [Modal](/components/modal).
68
+
Avoid using a form in a Flyout, whether the function is creating an object, or updating an existing one. This type of content is often complex and more appropriate on its own page, or in the case of a simple form, within a [Modal](/components/modal).
71
69
72
70
!!! Dont
73
71
@@ -91,19 +89,15 @@ The Flyout header features several properties to better communicate the purpose
91
89
92
90
### Title icon
93
91
94
-
**With title icon**
92
+
An icon paired with the title can help reinforce the purpose and function of the Flyout while also drawing the eye to the header and title area.
95
93
96
-
94
+
The purpose and function of the Flyout should not rely solely on an icon, instead the title should be explicit and pragmatic while the icon provides visual support.
97
95
98
-
**Without title icon**
96
+
97
+
<Doc::ImageCaption @text="With title icon"/>
99
98
100
99
101
-
102
-
#### Usage
103
-
104
-
An icon paired with the title can help reinforce the purpose and function of the Flyout while also drawing the eye to the header and title area.
105
-
106
-
The purpose and function of the Flyout should not rely solely on an icon, instead the title should be explicit and pragmatic while the icon provides visual support.
100
+
<Doc::ImageCaption @text="Without title icon"/>
107
101
108
102
### Tagline
109
103
@@ -112,29 +106,25 @@ The purpose and function of the Flyout should not rely solely on an icon, instea
112
106
Even though adding a title icon and tagline can help the user better understand the content, both elements add visual weight which might not be suitable or necessary for all Flyouts.
113
107
!!!
114
108
115
-
**With tagline**
109
+
A tagline helps the user maintain the context of the main page where the Flyout was triggered. Since a Flyout disables and obscures the main page content, adding a tagline can help the user understand the relationship between the Flyout and the main page.
116
110
117
-
111
+
The tagline should directly reference the page, feature title, or object to reinforce the purpose of the Flyout.
118
112
119
-
**With tagline and icon**
113
+
114
+
<Doc::ImageCaption @text="With tagline"/>
120
115
121
116
122
-
123
-
A **tagline** helps the user maintain the context of the main page the Flyout was triggered from. Since a Flyout disables and obscures the main page content, adding a tagline can help the user understand the relationship between the Flyout and the main page.
124
-
125
-
The **tagline** should directly reference the page, feature title, or object to reinforce the purpose of the Flyout.
117
+
<Doc::ImageCaption @text="With tagline and icon"/>
126
118
127
119
### Description
128
120
129
-
A **description** provides additional information about the Flyout.
130
-
131
-
**With description**
121
+
A description provides additional information about the Flyout.
132
122
133
123
134
-
135
-
**With description and icon**
124
+
<Doc::ImageCaption @text="With description"/>
136
125
137
126
127
+
<Doc::ImageCaption @text="With description and icon"/>
138
128
139
129
## Flyout body
140
130
@@ -151,13 +141,11 @@ The Ember and Figma components account for the footer in slightly different ways
151
141
- The Ember component is a generic container that yields elements passed to it.
152
142
- The Figma component consists of a variant for the number of actions, as well as support for generic content via an instance swap property.
153
143
154
-
**With one action**
155
-
156
144
157
-
158
-
**With two actions**
145
+
<Doc::ImageCaption @text="With one action"/>
159
146
160
147
148
+
<Doc::ImageCaption @text="With two actions"/>
161
149
162
150
For more guidance and details around organizing buttons and actions, refer to the [Button organization](/patterns/button-organization) pattern documentation.
163
151
@@ -170,9 +158,9 @@ A Flyout supports actions within the footer allowing for basic functions to be p
170
158
171
159
!!! Do
172
160
173
-
Use a Flyout for actions like batch selection that are secondary to the main page.
161
+
A Flyout can be used for actions like batch selection that are secondary to the main page.
174
162
175
-
163
+
176
164
!!!
177
165
178
166
!!! Do
@@ -184,9 +172,9 @@ Use a Flyout for simple declarative content like text and links that enhance the
184
172
185
173
!!! Dont
186
174
187
-
Don't use a Flyout for editing or creating objects. These are generally considered primary functions and should be handled on their own page or within a Modal in simple scenarios.
175
+
Avoid using a Flyout for editing or creating objects. These are generally considered primary functions and should be handled on their own page or within a Modal in simple scenarios.
188
176
189
-
177
+
190
178
!!!
191
179
192
180
## Dismissal
@@ -207,19 +195,19 @@ Multiple dismissal options are available that can be customized in production wi
207
195
208
196
**Figma tip**
209
197
210
-
In Figma, the Flyout should be paired with the [Overlay](https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67216-32335&t=gWdKy44MzTP4cTRo-1) component which obscures the main page content the Flyout sits on top of. Using the Flyout without the overlay is currently not supported and helps to communicate visually the `inert` nature of the main page.
198
+
In Figma, the Flyout should be paired with the [Overlay](https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67216-32335&t=gWdKy44MzTP4cTRo-1) component which obscures the main page and helps to visually communicate the `inert` nature of the content. Using the Flyout without the overlay is **not supported**.
211
199
212
-
We publish a [[Template] Flyout](https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67212-27152&t=gWdKy44MzTP4cTRo-1) component coupling these two components together that can be imported into your design file and detached.
200
+
A [[Template] Flyout](https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67212-27152&t=gWdKy44MzTP4cTRo-1) component couples these two components so they can be added to your design together.
213
201
!!!
214
202
215
-
A Flyout should slide out from the right side of the viewport on top of the main page content and occupy 100% of the viewport height.
203
+
A Flyout should slide out from the right side of the viewport on top of the main page and occupy 100% of the viewport height.
216
204
217
205
- This is true regardless of whether there is a sidebar or navigational element that persists on the page.
218
-
- A Flyout should overlay all content and block/disable interaction on the main page.
206
+
- A Flyout should overlay all content and disable interaction on the main page.
219
207
220
208
221
209
222
-
On smaller viewports, the Flyout should occupy 100% of the viewport width minus half the size of the minimized SideNav width from the viewport edge.
210
+
On smaller viewports, the Flyout should occupy 100% of the viewport width minus half the size of the minimized `SideNav` or `AppSideNav` width from the viewport edge.
223
211
224
212
- If the body content of the Flyout exceeds the maximum height of the viewport, a scroll will be introduced.
225
213
- The Flyout header is not included in the scrolling section, only the body content. The header should always be visible to help the user understand the Flyout content and how it relates to the main page.
0 commit comments