@fundamental-styles/mcp 0.41.6 → 0.41.7-rc.1
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/CHANGELOG.md +11 -3
- package/data/component-guidance.json +2625 -0
- package/data/component-use-cases.json +51 -8
- package/package.json +1 -1
- package/src/data/load-catalog.d.ts +18 -1
- package/src/data/load-catalog.js +7 -1
- package/src/data/load-catalog.js.map +1 -1
- package/src/server.js +538 -8
- package/src/server.js.map +1 -1
- package/src/types/component-metadata.d.ts +17 -0
- package/src/types/component-metadata.js.map +1 -1
|
@@ -0,0 +1,2625 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": "1.0.0",
|
|
3
|
+
"generated": "2026-05-13T14:51:09.594Z",
|
|
4
|
+
"components": {
|
|
5
|
+
"button": {
|
|
6
|
+
"id": "button",
|
|
7
|
+
"name": "Button",
|
|
8
|
+
"category": "Actions & Controls",
|
|
9
|
+
"description": "Buttons enable users to trigger actions in applications, from submitting data to opening menus or toggling views. They are available in different types and visual styles to reflect purpose, priority, and intent. Button behavior and appearance can change depending on user interaction, layout context, or the type of task.",
|
|
10
|
+
"whenToUse": [
|
|
11
|
+
"Trigger specific actions such as Create/Edit/Save, Approve/Reject, Accept/Decline, OK/Cancel",
|
|
12
|
+
"Use toggle buttons in a toolbar to activate or deactivate an object or element",
|
|
13
|
+
"Use toggle buttons to switch between different states",
|
|
14
|
+
"Use segmented button in toolbar to select one option from a small group (e.g., Year/Month/Day, Small/Medium/Large)",
|
|
15
|
+
"Use menu button if you need a menu that provides more than one option",
|
|
16
|
+
"Use split button to offer a group of actions when one option is used more often than the others"
|
|
17
|
+
],
|
|
18
|
+
"whenToAvoid": [
|
|
19
|
+
"Linking to a different page or object → Use link instead",
|
|
20
|
+
"Displaying general navigation functions → Use Home or breadcrumbs instead",
|
|
21
|
+
"Navigating within a multi-step process → Use wizard instead",
|
|
22
|
+
"Letting users upload content → Use upload set control instead",
|
|
23
|
+
"Letting users select from multiple related options → Use radio buttons or checkboxes instead",
|
|
24
|
+
"Using toggle button to trigger an activity, flow, or process (such as Create, Edit, or Save) → Use button instead",
|
|
25
|
+
"Using toggle button to display a large number of options → Use menu button instead",
|
|
26
|
+
"Using split button to switch between different states → Use toggle button or switch instead",
|
|
27
|
+
"Using split button for standalone actions with no additional options → Use button instead"
|
|
28
|
+
],
|
|
29
|
+
"bestPractices": [
|
|
30
|
+
"Use default button for neutral or informative (secondary) actions",
|
|
31
|
+
"Use emphasized button (`fd-button--emphasized`) to indicate the primary action on the screen",
|
|
32
|
+
"Use ghost button to trigger secondary actions or highlight the most important action in a content toolbar",
|
|
33
|
+
"Use positive button (`fd-button--positive`) to trigger positive semantic actions (e.g., Accept) - always with text",
|
|
34
|
+
"Use negative button (`fd-button--negative`) to trigger negative semantic actions (e.g., Reject) - always with text",
|
|
35
|
+
"Use attention button (`fd-button--attention`) to trigger semantic actions that need attention - always with text",
|
|
36
|
+
"Use transparent button (`fd-button--transparent`) for negative path actions in header/footer bars and secondary actions in toolbars",
|
|
37
|
+
"Use toggle button to switch between two states or activate/deactivate an element in a toolbar",
|
|
38
|
+
"Use segmented button for selecting one option from a small group",
|
|
39
|
+
"Use menu button for groups of multiple actions",
|
|
40
|
+
"Use split button when one option is used more often than others in a group of actions",
|
|
41
|
+
"Only use one emphasized button per page/dialog (indicates primary action)",
|
|
42
|
+
"Always include descriptive text or `aria-label` for icon-only buttons"
|
|
43
|
+
]
|
|
44
|
+
},
|
|
45
|
+
"product-switch": {
|
|
46
|
+
"id": "product-switch",
|
|
47
|
+
"name": "Product Switch",
|
|
48
|
+
"category": "Actions & Controls",
|
|
49
|
+
"description": "Product Switch provides role-based access to multiple products or lines of business (LoBs). Displays an icon button that triggers a Popover with products/LoBs. Single-level navigation only. Typically placed in Shellbar on far-right side.",
|
|
50
|
+
"whenToUse": [
|
|
51
|
+
"Give users access to several different products or LoBs within same UI",
|
|
52
|
+
"Switch between applications or product lines",
|
|
53
|
+
"Provide role-based product navigation",
|
|
54
|
+
"Display product portfolio in enterprise applications",
|
|
55
|
+
"Enable cross-product navigation from Shellbar"
|
|
56
|
+
],
|
|
57
|
+
"whenToAvoid": [
|
|
58
|
+
"Navigation within current product → Use product menu in Shellbar instead",
|
|
59
|
+
"Multi-level navigation hierarchy → Use side navigation or menu",
|
|
60
|
+
"Few products that fit in main navigation → Include in primary nav",
|
|
61
|
+
"Single product application → Not needed"
|
|
62
|
+
],
|
|
63
|
+
"bestPractices": [
|
|
64
|
+
"Place in Shellbar on far-right side",
|
|
65
|
+
"Use SAP Icon Fonts or Avatar component (size S, 48x48 px) for product icons",
|
|
66
|
+
"Support PNG, JPG, and SVG formats for avatars",
|
|
67
|
+
"Render all icons within 48x48 px bounding box for consistency",
|
|
68
|
+
"Trigger Popover on click to display product list",
|
|
69
|
+
"Keep navigation single-level only",
|
|
70
|
+
"Provide clear product names and icons",
|
|
71
|
+
"Show user's accessible products based on role/permissions",
|
|
72
|
+
"Maintain visual consistency across all product icons",
|
|
73
|
+
"Limit to products user has access to"
|
|
74
|
+
]
|
|
75
|
+
},
|
|
76
|
+
"scrollbar": {
|
|
77
|
+
"id": "scrollbar",
|
|
78
|
+
"name": "Scrollbar",
|
|
79
|
+
"category": "Actions & Controls",
|
|
80
|
+
"description": "Themeable Scrollbar follows Fiori 3 design guidelines. Preferred over browser's default scrollbar in components that support custom scrollbars. Works in Chrome, Safari, WebKit-based browsers; partial support in Firefox (no hover); IE shows default scrollbar.",
|
|
81
|
+
"whenToUse": [
|
|
82
|
+
"In components with scrollable content following Fiori 3 guidelines",
|
|
83
|
+
"Consistent theming across the application",
|
|
84
|
+
"WebKit-based browsers (Chrome, Safari, Edge Chromium)",
|
|
85
|
+
"Need themed scrollbar matching SAP design system"
|
|
86
|
+
],
|
|
87
|
+
"whenToAvoid": [
|
|
88
|
+
"IE browser (not supported) → Default scrollbar shown automatically",
|
|
89
|
+
"Content that fits without scrolling → No scrollbar needed",
|
|
90
|
+
"Native scrolling behavior is required for specific UX"
|
|
91
|
+
],
|
|
92
|
+
"bestPractices": [
|
|
93
|
+
"Preferred over browser default in Fiori 3 components",
|
|
94
|
+
"Automatically themed to match SAP design system",
|
|
95
|
+
"Works best in Chrome, Safari, and WebKit browsers",
|
|
96
|
+
"Gracefully degrades in Firefox (no hover effects)",
|
|
97
|
+
"Falls back to default scrollbar in IE",
|
|
98
|
+
"Consistent with other Fiori components",
|
|
99
|
+
"Firefox has partial support - hover effects won't work",
|
|
100
|
+
"IE falls back to default browser scrollbar",
|
|
101
|
+
"Test scrollbar appearance across target browsers"
|
|
102
|
+
]
|
|
103
|
+
},
|
|
104
|
+
"user-menu": {
|
|
105
|
+
"id": "user-menu",
|
|
106
|
+
"name": "User Menu",
|
|
107
|
+
"category": "Actions & Controls",
|
|
108
|
+
"description": "User Menu is integral part of Shell Bar, accessed by clicking avatar at far-right end. Provides user-specific options available across all screens. Displays current user info, account switching, user menu items, product-specific functionality. Can include sign in/out actions, settings, legal information.",
|
|
109
|
+
"whenToUse": [
|
|
110
|
+
"Present user-specific information, settings, and actions",
|
|
111
|
+
"Enable account switching",
|
|
112
|
+
"Display product-related and legal information",
|
|
113
|
+
"Facilitate Sign In or Sign Out actions",
|
|
114
|
+
"Show current user information",
|
|
115
|
+
"Access user preferences and settings",
|
|
116
|
+
"Display user-specific menu items"
|
|
117
|
+
],
|
|
118
|
+
"whenToAvoid": [
|
|
119
|
+
"Navigation elements → Use side navigation or main menu",
|
|
120
|
+
"Home page customization items → Use page-level controls",
|
|
121
|
+
"Inactive items → Hide instead of showing as disabled",
|
|
122
|
+
"Content overload → Keep concise, limit to essential items",
|
|
123
|
+
"Dynamic content changes within product → Keep menu stable"
|
|
124
|
+
],
|
|
125
|
+
"bestPractices": [
|
|
126
|
+
"Part of Shell Bar, accessed via avatar at far-right",
|
|
127
|
+
"Available across all screens",
|
|
128
|
+
"Display current user information",
|
|
129
|
+
"Enable switching between accounts",
|
|
130
|
+
"Include product-specific functionality when relevant",
|
|
131
|
+
"Show Sign In/Sign Out actions",
|
|
132
|
+
"Display user settings and preferences",
|
|
133
|
+
"Include product-related and legal information",
|
|
134
|
+
"Keep menu concise - essential items only",
|
|
135
|
+
"Hide inactive items rather than disabling",
|
|
136
|
+
"Avoid navigation - use for user-specific actions only",
|
|
137
|
+
"Don't alter menu content dynamically within product"
|
|
138
|
+
]
|
|
139
|
+
},
|
|
140
|
+
"avatar": {
|
|
141
|
+
"id": "avatar",
|
|
142
|
+
"name": "Avatar",
|
|
143
|
+
"category": "Data Display",
|
|
144
|
+
"description": "Avatars are visual representations of users, products, or business entities, helping people quickly identify them within an application. Users can be shown with their own photos or initials, while products can be depicted with representative images or logos.",
|
|
145
|
+
"whenToUse": [
|
|
146
|
+
"Display user photos, initials, or placeholders for personal identification",
|
|
147
|
+
"Show standardized images for business content such as products, parts, logos, or campaign visuals",
|
|
148
|
+
"Represent concepts or entities with icons when images aren't available",
|
|
149
|
+
"Present images with transparent backgrounds when needed for clarity or design fit",
|
|
150
|
+
"Provide placeholder images when no other source image is available",
|
|
151
|
+
"Apply avatars consistently in places like lists, cards, and headers to create familiarity and a uniform visual pattern across the interface"
|
|
152
|
+
],
|
|
153
|
+
"whenToAvoid": [
|
|
154
|
+
"Display pictures in a sequence, such as a slideshow or carousel → Use `fd-carousel` instead",
|
|
155
|
+
"Display an interactive icon → Use `fd-button` with an icon inside instead"
|
|
156
|
+
],
|
|
157
|
+
"bestPractices": [
|
|
158
|
+
"Use a circle shape (`fd-avatar--circle`) for people",
|
|
159
|
+
"Use a square shape for product or business-related images (default shape)",
|
|
160
|
+
"Use the predefined sizes: `fd-avatar--xs`, `fd-avatar--s`, `fd-avatar--m`, `fd-avatar--l`, `fd-avatar--xl`",
|
|
161
|
+
"For product icons, replace the default icon with a more suitable icon for your use case",
|
|
162
|
+
"Provide a clear alternative text (`alt` attribute) for the avatar image",
|
|
163
|
+
"For interactive avatars with badges, provide both a tooltip and alternative text",
|
|
164
|
+
"Avoid unnecessarily large image files (optimize images)",
|
|
165
|
+
"Avoid badges on avatars smaller than size S"
|
|
166
|
+
]
|
|
167
|
+
},
|
|
168
|
+
"avatar-group": {
|
|
169
|
+
"id": "avatar-group",
|
|
170
|
+
"name": "Avatar Group",
|
|
171
|
+
"category": "Data Display",
|
|
172
|
+
"description": "The avatar group is a visual element that displays several avatars together, indicating that more than one person or business entity is associated with an item. It's typically used to represent a group of people who belong together – for example, members of a project team or department.",
|
|
173
|
+
"whenToUse": [
|
|
174
|
+
"Display a group of at least two people",
|
|
175
|
+
"Display several people who share something in common, such as a project or a team",
|
|
176
|
+
"Show team members, collaborators, or participants",
|
|
177
|
+
"Indicate multiple people associated with an item or task"
|
|
178
|
+
],
|
|
179
|
+
"whenToAvoid": [
|
|
180
|
+
"Display a gallery of simple images → Use carousel instead",
|
|
181
|
+
"Display a single avatar → Use `fd-avatar` instead",
|
|
182
|
+
"Show visual content other than avatars",
|
|
183
|
+
"Show unrelated media or content types"
|
|
184
|
+
],
|
|
185
|
+
"bestPractices": [
|
|
186
|
+
"Always display avatar groups horizontally",
|
|
187
|
+
"Use the group type when it's more important to show the avatar group as a whole",
|
|
188
|
+
"Use the individual type when users need to focus on each person in the avatar group",
|
|
189
|
+
"Use the avatar group to display at least two avatars",
|
|
190
|
+
"Use size S by default for most layouts",
|
|
191
|
+
"Use sizes M or L only when avatars are key to the page",
|
|
192
|
+
"Display at minimum two avatars (for single avatar, use `fd-avatar`)"
|
|
193
|
+
]
|
|
194
|
+
},
|
|
195
|
+
"calendar": {
|
|
196
|
+
"id": "calendar",
|
|
197
|
+
"name": "Calendar",
|
|
198
|
+
"category": "Data Display",
|
|
199
|
+
"description": "The calendar lets users select single dates, multiple days, entire weeks, or date ranges. It displays all time-related data (year, month, week, day, date) at a glance and is typically used within a date picker pattern combined with input group and popover.",
|
|
200
|
+
"whenToUse": [
|
|
201
|
+
"Select a single date, multiple days, entire weeks, or a date range",
|
|
202
|
+
"Display multiple months at once",
|
|
203
|
+
"Calendar needs to be always visible and prominent",
|
|
204
|
+
"Users need to see year, month, week, weekday and date at a glance (e.g., selecting based on day of week)",
|
|
205
|
+
"Support locale-specific date formats by allowing visual date selection",
|
|
206
|
+
"Highlight special days or hide/disable specific days"
|
|
207
|
+
],
|
|
208
|
+
"whenToAvoid": [
|
|
209
|
+
"Power users entering data fast → Use date picker instead",
|
|
210
|
+
"Keyboard is primary input device → Use date picker instead",
|
|
211
|
+
"Limited screen space where permanent calendar display takes too much room → Use date picker instead",
|
|
212
|
+
"Primary goal is selecting a date range → Use date range selection instead",
|
|
213
|
+
"Displaying range of weekdays in a single row → Use calendar date interval instead",
|
|
214
|
+
"Comparing calendars from different people → Use planning calendar instead",
|
|
215
|
+
"Selecting combined date and time values → Use date/time picker instead"
|
|
216
|
+
],
|
|
217
|
+
"bestPractices": [
|
|
218
|
+
"Use within date picker pattern (calendar + input group + popover) rather than standalone",
|
|
219
|
+
"Enable visual date selection to bypass locale-specific format interpretation",
|
|
220
|
+
"Highlight special days when relevant to user's task",
|
|
221
|
+
"Allow navigation between months and years",
|
|
222
|
+
"Calendar is rarely used as a standalone component - usually part of date picker pattern",
|
|
223
|
+
"Consider date picker for keyboard-heavy or data-entry workflows"
|
|
224
|
+
]
|
|
225
|
+
},
|
|
226
|
+
"carousel": {
|
|
227
|
+
"id": "carousel",
|
|
228
|
+
"name": "Carousel",
|
|
229
|
+
"category": "Data Display",
|
|
230
|
+
"description": "The carousel allows users to browse through a set of items, displaying one or several items at a time with navigation to next or previous items. It's best suited for browsing images and includes optional paging indicators. The content area automatically adjusts to available screen space.",
|
|
231
|
+
"whenToUse": [
|
|
232
|
+
"Display items that need strong visual representation",
|
|
233
|
+
"Show items sequentially or side by side",
|
|
234
|
+
"Browse through a set of images where viewing one by one helps distinguish between items",
|
|
235
|
+
"Comparison scenarios where displaying several items side by side is useful",
|
|
236
|
+
"Any sap.m control can be contained (not limited to images)"
|
|
237
|
+
],
|
|
238
|
+
"whenToAvoid": [
|
|
239
|
+
"Displaying uniform items that don't benefit from individual presentation",
|
|
240
|
+
"Items that don't require sequential browsing or visual distinction"
|
|
241
|
+
],
|
|
242
|
+
"bestPractices": [
|
|
243
|
+
"Use paging indicator to show user's current position in the set",
|
|
244
|
+
"Content area automatically adjusts to available screen space",
|
|
245
|
+
"Navigation buttons float on left/right or appear in page indicator area (non-touch devices)",
|
|
246
|
+
"Support swipe gestures on touchable devices (buttons hidden automatically)",
|
|
247
|
+
"Add visually hidden div with `role=\"region\"` and `aria-live=\"polite\"` as sibling to `.fd-carousel`",
|
|
248
|
+
"Update aria-live region dynamically via JavaScript for content changes",
|
|
249
|
+
"Display Message Page with `sap-icon--document` for empty state (no pages loaded)",
|
|
250
|
+
"Ensure accessibility by announcing content changes to screen readers",
|
|
251
|
+
"Navigation method adapts automatically: buttons for non-touch, swipe for touch devices"
|
|
252
|
+
]
|
|
253
|
+
},
|
|
254
|
+
"feed-input": {
|
|
255
|
+
"id": "feed-input",
|
|
256
|
+
"name": "Feed Input",
|
|
257
|
+
"category": "Data Display",
|
|
258
|
+
"description": "The feed input is designed for users to type notes or comments and post them to a corresponding feed. It handles small amounts of unformatted text across multiple instances like notes or feed entries.",
|
|
259
|
+
"whenToUse": [
|
|
260
|
+
"User needs to input small amounts of text without formatting",
|
|
261
|
+
"Multiple instances are expected, such as notes or feed entries",
|
|
262
|
+
"Adding comments or posts to a feed",
|
|
263
|
+
"Quick text input for social or collaborative features"
|
|
264
|
+
],
|
|
265
|
+
"whenToAvoid": [
|
|
266
|
+
"User needs to format text (rich text editor) → Use rich text editor instead",
|
|
267
|
+
"Only a single text box instance is needed → Use textarea (multiple lines) or text control (single line) instead"
|
|
268
|
+
],
|
|
269
|
+
"bestPractices": [
|
|
270
|
+
"Use for unformatted text input only",
|
|
271
|
+
"Design for multiple instances (feed scenarios)",
|
|
272
|
+
"Keep interface simple and focused on quick text entry",
|
|
273
|
+
"Consider textarea for single-instance multi-line text needs",
|
|
274
|
+
"Consider text control for single-line text input"
|
|
275
|
+
]
|
|
276
|
+
},
|
|
277
|
+
"feed-list-item": {
|
|
278
|
+
"id": "feed-list-item",
|
|
279
|
+
"name": "Feed List Item",
|
|
280
|
+
"category": "Data Display",
|
|
281
|
+
"description": "The feed list displays feed list items that each consist of a username, written entry, optional image, and a byline (timestamp or attribute as free text). It's designed for displaying homogenous feed entries.",
|
|
282
|
+
"whenToUse": [
|
|
283
|
+
"Multiple instances are expected, such as notes or feed entries",
|
|
284
|
+
"Items in the feed list are homogenous",
|
|
285
|
+
"User needs to input small amounts of text without formatting",
|
|
286
|
+
"Display existing feed entries with username, content, and metadata"
|
|
287
|
+
],
|
|
288
|
+
"whenToAvoid": [
|
|
289
|
+
"User needs to format text (rich text editor) → Use rich text editor instead",
|
|
290
|
+
"Only a single text box instance is needed → Use Text Area instead",
|
|
291
|
+
"Displaying empty fields for user to input feed entries → Use Feed Input instead"
|
|
292
|
+
],
|
|
293
|
+
"bestPractices": [
|
|
294
|
+
"Each item includes username, written entry, and optional image",
|
|
295
|
+
"Include byline with timestamp or attribute as free text",
|
|
296
|
+
"Keep items homogenous for consistent feed appearance",
|
|
297
|
+
"Use Feed Input component for creating new feed entries",
|
|
298
|
+
"Feed list is for displaying existing entries, not for input",
|
|
299
|
+
"Pair with Feed Input for complete feed functionality"
|
|
300
|
+
]
|
|
301
|
+
},
|
|
302
|
+
"generic-tag": {
|
|
303
|
+
"id": "generic-tag",
|
|
304
|
+
"name": "Generic Tag",
|
|
305
|
+
"category": "Data Display",
|
|
306
|
+
"description": "Generic tag displays complementary information like key performance indicators (KPIs) or status details, providing additional context without users leaving the current page. Typically appears in dynamic page headers or object page header areas following the title.",
|
|
307
|
+
"whenToUse": [
|
|
308
|
+
"Display complementary information for an object (e.g., KPI)",
|
|
309
|
+
"Show status details or additional context",
|
|
310
|
+
"Place in dynamic page header or object page header area following the title",
|
|
311
|
+
"Provide non-intrusive contextual information"
|
|
312
|
+
],
|
|
313
|
+
"whenToAvoid": [
|
|
314
|
+
"Decorative purposes",
|
|
315
|
+
"Navigation"
|
|
316
|
+
],
|
|
317
|
+
"bestPractices": [
|
|
318
|
+
"Use for complementary information like KPIs and status",
|
|
319
|
+
"Place in header area following the title",
|
|
320
|
+
"Provide additional context without requiring page navigation",
|
|
321
|
+
"Use in dynamic page header or object page header area",
|
|
322
|
+
"Should be informational, not interactive or decorative",
|
|
323
|
+
"Not for navigation purposes"
|
|
324
|
+
]
|
|
325
|
+
},
|
|
326
|
+
"generic-tile": {
|
|
327
|
+
"id": "generic-tile",
|
|
328
|
+
"name": "Generic Tile",
|
|
329
|
+
"category": "Data Display",
|
|
330
|
+
"description": "Generic tile is a container representing an app on the SAP Fiori launchpad home page. Displays various content types including icons, information text, titles, KPIs, counters, and charts. Tiles automatically move to the next row when horizontal space is insufficient.",
|
|
331
|
+
"whenToUse": [
|
|
332
|
+
"Display apps on SAP Fiori launchpad home page",
|
|
333
|
+
"Show content types: KPIs, charts, icons, information text, titles, counters",
|
|
334
|
+
"Use icons on basic launch tiles or monitoring tiles (when not showing KPI or chart)",
|
|
335
|
+
"Display different content types based on data from the app"
|
|
336
|
+
],
|
|
337
|
+
"whenToAvoid": [
|
|
338
|
+
"Using tiles anywhere other than launchpad home page",
|
|
339
|
+
"Showing content types not described in guidelines (videos, animations, gifs)",
|
|
340
|
+
"Using status area for error messages",
|
|
341
|
+
"Using tile subtitle for explanations (only for differentiators like specific data views)",
|
|
342
|
+
"Using icons on KPI tiles (only on basic launch or monitoring tiles)",
|
|
343
|
+
"Showing icons next to counter expecting 5+ digits",
|
|
344
|
+
"Developing custom icons (use standard icons only)"
|
|
345
|
+
],
|
|
346
|
+
"bestPractices": [
|
|
347
|
+
"Only use on launchpad home page",
|
|
348
|
+
"Show icons to help distinguish tiles when not showing KPI or chart",
|
|
349
|
+
"Use short tile names",
|
|
350
|
+
"Use modifiers: `fd-numeric-content__scale--text`, `fd-tile--feed`, `fd-tile--double`, `fd-tile--container—list`",
|
|
351
|
+
"Use deviation arrows: `sap-icon--down` or `sap-icon--up` in scale factor area",
|
|
352
|
+
"Tiles automatically wrap to next row when space is insufficient",
|
|
353
|
+
"Icons only on basic launch or monitoring tiles, not KPI tiles",
|
|
354
|
+
"Avoid icons next to counters with 5+ digits",
|
|
355
|
+
"Use subtitle only for differentiators, not explanations"
|
|
356
|
+
]
|
|
357
|
+
},
|
|
358
|
+
"grid-list": {
|
|
359
|
+
"id": "grid-list",
|
|
360
|
+
"name": "Grid List",
|
|
361
|
+
"category": "Data Display",
|
|
362
|
+
"description": "Grid list displays items in a grid format (not rows), ideal for visual content like images, charts, and object cards that benefit from more height. Usually used as an alternative view for lists or tables, focusing on complete items rather than cells.",
|
|
363
|
+
"whenToUse": [
|
|
364
|
+
"Visual content that benefits from rectangular card format (images, charts, object cards)",
|
|
365
|
+
"Focus on complete items rather than individual cells",
|
|
366
|
+
"Display homogeneous set of basic data",
|
|
367
|
+
"Sort, group, or filter simple data sets",
|
|
368
|
+
"Alternative view for tables or lists when content benefits from grid format"
|
|
369
|
+
],
|
|
370
|
+
"whenToAvoid": [
|
|
371
|
+
"Content not appropriate for card format (e.g., wall of text) → Use table instead",
|
|
372
|
+
"Selecting one item from very small number without viewing details → Use select or combo box instead",
|
|
373
|
+
"Data structured hierarchically → Use tree instead",
|
|
374
|
+
"Overview of large amount of data → Use chart instead",
|
|
375
|
+
"Layout purposes only → Use layout container like CSS Grid instead",
|
|
376
|
+
"Managing complex datasets needing extensive sorting, grouping, filtering, or editing → Use table instead"
|
|
377
|
+
],
|
|
378
|
+
"bestPractices": [
|
|
379
|
+
"Best for visual content (images, charts, object cards)",
|
|
380
|
+
"Items displayed in grid, not rows",
|
|
381
|
+
"Focus on complete items rather than cells",
|
|
382
|
+
"Use for homogeneous basic data sets",
|
|
383
|
+
"Good alternative view format for lists or tables",
|
|
384
|
+
"Content should profit from rectangular card-like format",
|
|
385
|
+
"Not suitable for hierarchical data or complex dataset management"
|
|
386
|
+
]
|
|
387
|
+
},
|
|
388
|
+
"icon": {
|
|
389
|
+
"id": "icon",
|
|
390
|
+
"name": "Icon",
|
|
391
|
+
"category": "Data Display",
|
|
392
|
+
"description": "Icons provide visual clarity, save screen space, and guide users during navigation. Used as visual elements within other components or independently (when readable by screen readers or have tooltips). Non-interactive by nature for illustrative purposes only.",
|
|
393
|
+
"whenToUse": [
|
|
394
|
+
"Display icon for illustrative purposes without interaction states (non-interactive icon/pictogram)",
|
|
395
|
+
"Pair icon with another communication method (text or tooltip)",
|
|
396
|
+
"Use as visual elements within other components",
|
|
397
|
+
"Save screen space while maintaining clarity",
|
|
398
|
+
"Guide users during navigation"
|
|
399
|
+
],
|
|
400
|
+
"whenToAvoid": [
|
|
401
|
+
"Icon needs to be selected or have interaction states → Use transparent button style instead"
|
|
402
|
+
],
|
|
403
|
+
"bestPractices": [
|
|
404
|
+
"Use for illustrative purposes only (non-interactive)",
|
|
405
|
+
"Always pair with text or tooltip for accessibility",
|
|
406
|
+
"Ensure screen reader compatibility",
|
|
407
|
+
"For interactive icons, use transparent button style (see Button component)",
|
|
408
|
+
"Icons alone don't provide sufficient accessibility without text/tooltip",
|
|
409
|
+
"For selectable icons, use Button component with transparent style"
|
|
410
|
+
]
|
|
411
|
+
},
|
|
412
|
+
"illustrated-message": {
|
|
413
|
+
"id": "illustrated-message",
|
|
414
|
+
"name": "Illustrated Message",
|
|
415
|
+
"category": "Data Display",
|
|
416
|
+
"description": "Illustrated messages engage users and add personality using SVG illustrations (from SAP Moments library), paired with heading, description, and optional call-to-action button. Available in sizes: Large (default), Medium, Small, Extra Small, and Base (no illustration). Supports responsive container for Large size.",
|
|
417
|
+
"whenToUse": [
|
|
418
|
+
"Clarify situations with engaging visuals (empty states, errors, success)",
|
|
419
|
+
"Add personality to user experience",
|
|
420
|
+
"Explain reason for empty state",
|
|
421
|
+
"Provide details and next steps",
|
|
422
|
+
"Guide users with optional call-to-action button",
|
|
423
|
+
"Use SVG illustrations from SAP Moments library"
|
|
424
|
+
],
|
|
425
|
+
"whenToAvoid": [
|
|
426
|
+
"When simple text message suffices without visual engagement",
|
|
427
|
+
"Dense data displays where illustrations distract"
|
|
428
|
+
],
|
|
429
|
+
"bestPractices": [
|
|
430
|
+
"Always pair illustration with message (heading + description)",
|
|
431
|
+
"Heading explains reason for state, preferably single line",
|
|
432
|
+
"Description adds details and next steps (3 lines or less)",
|
|
433
|
+
"Include CTA button when there's a clear next step (optional but recommended)",
|
|
434
|
+
"Use sizes: Large (`.fd-illustrated-message`), Medium (`--medium`), Small (`--small`), Extra Small (`--xsmall`), Base (`--base`, no illustration)",
|
|
435
|
+
"Use `.fd-illustrated-message-responsive-container` for Large size responsiveness (inline content query)",
|
|
436
|
+
"Legacy modifiers still supported: `--scene` (Large), `--dialog` (Medium), `--spot` (Small), `--dot` (Extra Small)",
|
|
437
|
+
"Illustration must come from SAP Moments library (use SVG)",
|
|
438
|
+
"Base type has no illustration (text only)"
|
|
439
|
+
]
|
|
440
|
+
},
|
|
441
|
+
"info-label": {
|
|
442
|
+
"id": "info-label",
|
|
443
|
+
"name": "Info Label",
|
|
444
|
+
"category": "Data Display",
|
|
445
|
+
"description": "Info Label is a small non-interactive numeric or text-based label (BTP component). Primary use is adding user-defined characteristics to objects. Supports 10 accent colors and display mode.",
|
|
446
|
+
"whenToUse": [
|
|
447
|
+
"Add user-defined characteristic to an object",
|
|
448
|
+
"Display small non-interactive numeric or text-based labels",
|
|
449
|
+
"Categorize or tag objects with visual color coding",
|
|
450
|
+
"Display mode for larger presentation (use `fd-info-label--display`)"
|
|
451
|
+
],
|
|
452
|
+
"whenToAvoid": [
|
|
453
|
+
"Interactive labels or tags → Use different component",
|
|
454
|
+
"Large amounts of text → Use other text components"
|
|
455
|
+
],
|
|
456
|
+
"bestPractices": [
|
|
457
|
+
"Use accent color modifiers: `fd-info-label--accent-color-1` through `--accent-color-10`",
|
|
458
|
+
"Accent colors: 1-Mango, 2-Red, 3-Raspberry, 4-Pink, 5-Indigo, 6-Blue, 7-Teal (Default), 8-Green, 9-Cyan, 10-Grey",
|
|
459
|
+
"Use `fd-info-label--display` modifier for display mode",
|
|
460
|
+
"Default accent is Teal (accent-color-7)",
|
|
461
|
+
"Non-interactive by design",
|
|
462
|
+
"BTP-specific component",
|
|
463
|
+
"Use for small labels only (numeric or short text)"
|
|
464
|
+
]
|
|
465
|
+
},
|
|
466
|
+
"list": {
|
|
467
|
+
"id": "list",
|
|
468
|
+
"name": "List",
|
|
469
|
+
"category": "Data Display",
|
|
470
|
+
"description": "Lists display homogeneous basic data, distinguished from tables (which handle complex data). Used in master lists for master-detail scenarios with flexible column layout, popovers, and dialogs. Supports byline variant for additional content and semantic status.",
|
|
471
|
+
"whenToUse": [
|
|
472
|
+
"Display homogeneous set of basic data",
|
|
473
|
+
"Sort, group, or filter simple datasets",
|
|
474
|
+
"Display single-level hierarchy (simpler than tree table)",
|
|
475
|
+
"Include additional text in list items (byline list with `fd-list--byline`)",
|
|
476
|
+
"Present semantic status in list items (byline list)",
|
|
477
|
+
"Display accounts in user menu (subline with third line)"
|
|
478
|
+
],
|
|
479
|
+
"whenToAvoid": [
|
|
480
|
+
"Managing complex datasets needing extensive sorting, grouping, filtering, or editing → Use table instead",
|
|
481
|
+
"Working with complex hierarchies → Use tree instead",
|
|
482
|
+
"Including objects in list items (when using byline list) → Use Object List instead"
|
|
483
|
+
],
|
|
484
|
+
"bestPractices": [
|
|
485
|
+
"Use for homogeneous basic data (not complex data)",
|
|
486
|
+
"Use in master-detail scenarios with flexible column layout",
|
|
487
|
+
"Use in popovers or dialogs",
|
|
488
|
+
"Add `fd-list--byline` modifier for byline list (additional text/semantic status)",
|
|
489
|
+
"Byline list extends standard list items with additional content",
|
|
490
|
+
"Support single-level hierarchies (simpler use case)",
|
|
491
|
+
"Lists for basic data, tables for complex data",
|
|
492
|
+
"Use tree for complex hierarchies, not list"
|
|
493
|
+
]
|
|
494
|
+
},
|
|
495
|
+
"micro-process-flow": {
|
|
496
|
+
"id": "micro-process-flow",
|
|
497
|
+
"name": "Micro Process Flow",
|
|
498
|
+
"category": "Data Display",
|
|
499
|
+
"description": "Micro Process Flow visualizes the state of individual items in a linear workflow. Can be embedded in lists or tables. Responsive, adapts to parent container size. Supports simple wrap or overflow with navigation arrows for long processes.",
|
|
500
|
+
"whenToUse": [
|
|
501
|
+
"Show state of each step in linear, multi-step process",
|
|
502
|
+
"Display progress of multiple items in list or table",
|
|
503
|
+
"Default layout: icons with circular background, semantic colors, click events (SAP icon font)",
|
|
504
|
+
"Custom layout: replace with other controls (status indicator, button, label, link, avatar)",
|
|
505
|
+
"Dependent steps (default): connector lines between steps when completion is precondition for next step",
|
|
506
|
+
"Independent steps: no connectors when steps can be processed in any order"
|
|
507
|
+
],
|
|
508
|
+
"whenToAvoid": [
|
|
509
|
+
"Single-step process → Use progress indicator or object status instead",
|
|
510
|
+
"Complex non-linear workflow → Use process flow instead"
|
|
511
|
+
],
|
|
512
|
+
"bestPractices": [
|
|
513
|
+
"Responsive: adapts to parent container size",
|
|
514
|
+
"Simple wrap: steps wrap to new line if don't fit width",
|
|
515
|
+
"Overflow mode: navigation arrows with hidden step count, scroll horizontally",
|
|
516
|
+
"Default layout: icons with circular background, semantic colors, SAP icon font",
|
|
517
|
+
"Custom layout: supports status indicator, button, label, link, avatar",
|
|
518
|
+
"Dependent steps: use connector lines, indicate transition state with icons",
|
|
519
|
+
"Independent steps: no connectors for non-sequential processing",
|
|
520
|
+
"Use dependent steps when completion is precondition for next step",
|
|
521
|
+
"Use independent steps when any-order processing is allowed"
|
|
522
|
+
]
|
|
523
|
+
},
|
|
524
|
+
"object-identifier": {
|
|
525
|
+
"id": "object-identifier",
|
|
526
|
+
"name": "Object Identifier",
|
|
527
|
+
"category": "Data Display",
|
|
528
|
+
"description": "Object Identifier is short text representing the key identifier of an object, displayed in containers, tables, panels, popovers, and more. Text wraps if insufficient horizontal space. Comprises title text, optional descriptive text, and optional active state (link-like) that can trigger events.",
|
|
529
|
+
"whenToUse": [
|
|
530
|
+
"Indicate key identifier on an object",
|
|
531
|
+
"Display text instead of ID for easy readability",
|
|
532
|
+
"Distinguish objects by IDs (display as descriptive text below title)",
|
|
533
|
+
"Need interactive link-like behavior (active state) to trigger events"
|
|
534
|
+
],
|
|
535
|
+
"whenToAvoid": [
|
|
536
|
+
"Displaying system messages",
|
|
537
|
+
"Decorative purposes only"
|
|
538
|
+
],
|
|
539
|
+
"bestPractices": [
|
|
540
|
+
"Display text instead of ID for easy user readability",
|
|
541
|
+
"If IDs necessary to distinguish objects, show as descriptive text below title text",
|
|
542
|
+
"Comprises title text and optional descriptive text",
|
|
543
|
+
"Optional active state resembles link and can trigger events",
|
|
544
|
+
"Text wraps when insufficient horizontal space",
|
|
545
|
+
"Can be displayed in various container types (tables, panels, popovers)",
|
|
546
|
+
"Prioritize readable text over raw IDs",
|
|
547
|
+
"Not for system messages or decorative purposes"
|
|
548
|
+
]
|
|
549
|
+
},
|
|
550
|
+
"object-list": {
|
|
551
|
+
"id": "object-list",
|
|
552
|
+
"name": "Object List",
|
|
553
|
+
"category": "Data Display",
|
|
554
|
+
"description": "Object list consists of object list items providing quick object overviews. Each item shows essential information for prioritizing objects. Can display title, avatar, object display components (Identifier, Number, Attribute, Marker, Status), introductory text, icon, and status line with indicator icons.",
|
|
555
|
+
"whenToUse": [
|
|
556
|
+
"Display brief details to user",
|
|
557
|
+
"Quick overview of objects",
|
|
558
|
+
"Show essential information for object identification and prioritization",
|
|
559
|
+
"Display object display components: Object Identifier, Object Number, Object Attribute, Object Marker, Object Status",
|
|
560
|
+
"Show introductory text (e.g., \"Forwarded by...\", \"On Behalf of...\")",
|
|
561
|
+
"Display status line with indicator icons (locked, favorites, flagged for follow-up)"
|
|
562
|
+
],
|
|
563
|
+
"whenToAvoid": [
|
|
564
|
+
"Displaying detailed information to user",
|
|
565
|
+
"Triggering more than one event (each item should contain one link)"
|
|
566
|
+
],
|
|
567
|
+
"bestPractices": [
|
|
568
|
+
"Show only essential information for prioritization",
|
|
569
|
+
"Avoid long descriptive texts (limited space, will truncate)",
|
|
570
|
+
"Each item provides quick overview of object",
|
|
571
|
+
"Use semantic status modifiers: `fd-object-number--positive/negative/critical/informative`, `fd-object-status--positive/negative/critical/informative`",
|
|
572
|
+
"Can display: title, avatar, object components, introductory text, icon, status line",
|
|
573
|
+
"Each object list item should contain one link",
|
|
574
|
+
"Text space is limited - avoid long descriptions",
|
|
575
|
+
"Only one event per item"
|
|
576
|
+
]
|
|
577
|
+
},
|
|
578
|
+
"object-marker": {
|
|
579
|
+
"id": "object-marker",
|
|
580
|
+
"name": "Object Marker",
|
|
581
|
+
"category": "Data Display",
|
|
582
|
+
"description": "Object Marker indicates technical status of an object (draft, unsaved changes, locked, favorite, flagged). Displays technical state, not business lifecycle status. Can be represented as icon only, icon with text, or text only, depending on screen size.",
|
|
583
|
+
"whenToUse": [
|
|
584
|
+
"Indicate technical status of object",
|
|
585
|
+
"Display technical states: draft, unsaved changes, locked, favorite, flagged",
|
|
586
|
+
"Adapt presentation to screen size (icon only, icon + text, text only)"
|
|
587
|
+
],
|
|
588
|
+
"whenToAvoid": [
|
|
589
|
+
"Displaying status of object in business lifecycle → Use different component"
|
|
590
|
+
],
|
|
591
|
+
"bestPractices": [
|
|
592
|
+
"Use for technical status only (not business lifecycle)",
|
|
593
|
+
"Represents states: draft, unsaved changes, locked, favorite, flagged",
|
|
594
|
+
"Adaptive representation: icon only, icon with text, or text only",
|
|
595
|
+
"Adjust display based on screen size",
|
|
596
|
+
"Not for business lifecycle status",
|
|
597
|
+
"Specifically for technical state indicators"
|
|
598
|
+
]
|
|
599
|
+
},
|
|
600
|
+
"object-number": {
|
|
601
|
+
"id": "object-number",
|
|
602
|
+
"name": "Object Number",
|
|
603
|
+
"category": "Data Display",
|
|
604
|
+
"description": "Object Number represents a numeric attribute of an object and its unit. Displayed with semantics to provide insight about object's value. Supports semantic statuses via modifier classes (neutral, positive, negative, critical, informative).",
|
|
605
|
+
"whenToUse": [
|
|
606
|
+
"Display key number of an object",
|
|
607
|
+
"Display one or more numeric attributes of an object (e.g., for comparison)",
|
|
608
|
+
"Emphasize (bold) for key numeric attributes on page or line item status in table"
|
|
609
|
+
],
|
|
610
|
+
"whenToAvoid": [
|
|
611
|
+
"Displaying system messages",
|
|
612
|
+
"Decorative purposes only"
|
|
613
|
+
],
|
|
614
|
+
"bestPractices": [
|
|
615
|
+
"Properly describe and make semantically understandable (accessibility)",
|
|
616
|
+
"If color describes value as negative, accompany with icon, label, unit, or attribute",
|
|
617
|
+
"Color should not be only way value state is conveyed",
|
|
618
|
+
"Use semantic status modifiers: `fd-object-number--positive`, `--negative`, `--critical`, `--informative` (neutral is default)",
|
|
619
|
+
"Emphasize (bold) for key numeric attributes or table line item status",
|
|
620
|
+
"Display with unit for clarity",
|
|
621
|
+
"Ensure accessibility - don't rely on color alone for value state",
|
|
622
|
+
"Include icon, label, unit, or attribute with color indicators"
|
|
623
|
+
]
|
|
624
|
+
},
|
|
625
|
+
"object-status": {
|
|
626
|
+
"id": "object-status",
|
|
627
|
+
"name": "Object Status",
|
|
628
|
+
"category": "Data Display",
|
|
629
|
+
"description": "Object Status is a short text that represents the semantic status of an object. It has a semantic color and an optional icon. Typically used in dynamic page headers and as status attributes of line items in tables.",
|
|
630
|
+
"whenToUse": [
|
|
631
|
+
"Display semantic status of an object with text and color",
|
|
632
|
+
"Show status attribute in table line items",
|
|
633
|
+
"Indicate object state in dynamic page headers",
|
|
634
|
+
"Provide quick visual indication of object status with semantic meaning"
|
|
635
|
+
],
|
|
636
|
+
"whenToAvoid": [
|
|
637
|
+
"Displaying detailed system messages → Use `fd-message-strip` instead",
|
|
638
|
+
"Long status descriptions → Keep text short and concise",
|
|
639
|
+
"Non-semantic decorative text → Use plain text instead"
|
|
640
|
+
],
|
|
641
|
+
"bestPractices": [
|
|
642
|
+
"Use semantic color modifiers: `fd-object-status--positive`, `--negative`, `--critical`, `--informative` (neutral is default)",
|
|
643
|
+
"Add optional icon to reinforce status meaning",
|
|
644
|
+
"Keep status text short and concise",
|
|
645
|
+
"Color should not be only way status is conveyed (accessibility)",
|
|
646
|
+
"Include icon or clear text label alongside color",
|
|
647
|
+
"Use in tables for line item status indication",
|
|
648
|
+
"Display in dynamic page headers for object-level status",
|
|
649
|
+
"Ensure accessibility - don't rely on color alone for status meaning",
|
|
650
|
+
"Accompany semantic colors with icons or descriptive text"
|
|
651
|
+
]
|
|
652
|
+
},
|
|
653
|
+
"table": {
|
|
654
|
+
"id": "table",
|
|
655
|
+
"name": "Table",
|
|
656
|
+
"category": "Data Display",
|
|
657
|
+
"description": "Table contains set of line items with rows (each showing one line item) and columns. Items can contain data or interactive elements. Two groups: fully responsive tables and desktop-centric tables. Responsive table offers flexibility, grid table for large datasets (>1,000 rows) and analytical use cases.",
|
|
658
|
+
"whenToUse": [
|
|
659
|
+
"Display large amounts of data in tabular form",
|
|
660
|
+
"Flexible, visually appealing table content (responsive table)",
|
|
661
|
+
"Focus on working with line items, not individual cells",
|
|
662
|
+
"Select one or more items needing details to choose correctly",
|
|
663
|
+
"Line items independent, no cross-column operations needed",
|
|
664
|
+
"Single implementation for all devices",
|
|
665
|
+
"Display >1,000 rows simultaneously (grid table)",
|
|
666
|
+
"Cell-level and spatial relationships important (grid table)",
|
|
667
|
+
"Comparing items is major use case (grid table)",
|
|
668
|
+
"Need analytical table without analytical binding (grid table)"
|
|
669
|
+
],
|
|
670
|
+
"whenToAvoid": [
|
|
671
|
+
"Simple hierarchical dataset → Use Tree instead",
|
|
672
|
+
"Hierarchical master list for master-detail with Flexible Column Layout → Use Tree",
|
|
673
|
+
"Tree table would be too complex → Use Tree",
|
|
674
|
+
"Selecting hierarchical items with few details → Use Tree",
|
|
675
|
+
"Very few items (under 5) → Consider List or Card layout"
|
|
676
|
+
],
|
|
677
|
+
"bestPractices": [
|
|
678
|
+
"Use responsive table for flexible content and visual appeal",
|
|
679
|
+
"Responsive table allows multiple components and different item templates",
|
|
680
|
+
"Use grid table for >1,000 rows",
|
|
681
|
+
"Grid table maintains stable layout regardless of screen width",
|
|
682
|
+
"Grid table cells contain only one component",
|
|
683
|
+
"Include sorting, filtering, and search for large datasets",
|
|
684
|
+
"Provide selection for line items when needed",
|
|
685
|
+
"Use pagination for very large datasets",
|
|
686
|
+
"Make column headers clear and descriptive",
|
|
687
|
+
"Choose table type based on use case (responsive vs grid)",
|
|
688
|
+
"Consider performance with large datasets"
|
|
689
|
+
]
|
|
690
|
+
},
|
|
691
|
+
"title": {
|
|
692
|
+
"id": "title",
|
|
693
|
+
"name": "Title",
|
|
694
|
+
"category": "Data Display",
|
|
695
|
+
"description": "Title is a simple, large-sized text with additional semantic information for accessibility. Unlike manually styled headings, titles can be used by assistive technologies (screen readers) to create hierarchical site map for faster navigation. Used by panel, toolbar, list components.",
|
|
696
|
+
"whenToUse": [
|
|
697
|
+
"Set title above table or form",
|
|
698
|
+
"Show text in page header",
|
|
699
|
+
"Create semantic heading hierarchy",
|
|
700
|
+
"Need assistive technology support for navigation",
|
|
701
|
+
"Used in panel, toolbar, or list components",
|
|
702
|
+
"Display section or content headings"
|
|
703
|
+
],
|
|
704
|
+
"whenToAvoid": [
|
|
705
|
+
"Text inside a text block → Use paragraph or span",
|
|
706
|
+
"Text inside a form element → Use form label or legend",
|
|
707
|
+
"Inline text within paragraphs → Use span or emphasis",
|
|
708
|
+
"Decorative text without semantic meaning → Use styled text"
|
|
709
|
+
],
|
|
710
|
+
"bestPractices": [
|
|
711
|
+
"Provides semantic information for accessibility",
|
|
712
|
+
"Used by screen readers for hierarchical site navigation",
|
|
713
|
+
"Use above tables or forms as headings",
|
|
714
|
+
"Use in page headers",
|
|
715
|
+
"Use proper heading level (H1-H6) for document structure",
|
|
716
|
+
"Maintain logical heading hierarchy",
|
|
717
|
+
"Used by panel, toolbar, list components",
|
|
718
|
+
"Large-sized text with semantic meaning",
|
|
719
|
+
"Different from manually styled headings - has semantic value",
|
|
720
|
+
"Don't skip heading levels (e.g., H1 to H4)"
|
|
721
|
+
]
|
|
722
|
+
},
|
|
723
|
+
"tree": {
|
|
724
|
+
"id": "tree",
|
|
725
|
+
"name": "Tree",
|
|
726
|
+
"category": "Data Display",
|
|
727
|
+
"description": "Tree displays and works with hierarchical item sets. Nodes contain additional items, leaves don't. Single top-most node is root. Similar to List but hierarchical. Used in master lists (Flexible Column Layout), Popovers, Dialogs, Dynamic Page Layout. Expandable/collapsible nodes with dynamic indentation.",
|
|
728
|
+
"whenToUse": [
|
|
729
|
+
"Display key identifier of hierarchically structured items",
|
|
730
|
+
"Select one or more items from hierarchical set",
|
|
731
|
+
"Hierarchy has restricted levels (up to ~12) and items (~200)",
|
|
732
|
+
"Master list in Flexible Column Layout master-detail",
|
|
733
|
+
"Single implementation for all devices",
|
|
734
|
+
"Navigate hierarchical data structures",
|
|
735
|
+
"Expand/collapse hierarchical nodes"
|
|
736
|
+
],
|
|
737
|
+
"whenToAvoid": [
|
|
738
|
+
"Select from very small non-hierarchical items → Use Select or Combobox instead",
|
|
739
|
+
"Items not structured hierarchically → Use List instead",
|
|
740
|
+
"Only two hierarchy levels → Use grouped List instead",
|
|
741
|
+
"Categorization based on item details → Use analytical table with multi-level grouping",
|
|
742
|
+
"Large hierarchy (>12 levels or >200 items) → Consider alternative visualization"
|
|
743
|
+
],
|
|
744
|
+
"bestPractices": [
|
|
745
|
+
"Container for hierarchical items with expand/collapse",
|
|
746
|
+
"Dynamic indentation per level when expanding nodes",
|
|
747
|
+
"Root contains `expanded-level-*` class tracking current level",
|
|
748
|
+
"Same indentation rules for compact and cozy modes",
|
|
749
|
+
"Add `fd-tree__content--wrap` for text wrapping (default: no wrap)",
|
|
750
|
+
"Use `fd-tree--active` for all navigable items",
|
|
751
|
+
"Use `fd-tree__item-container--active` for specific navigable items",
|
|
752
|
+
"Use `is-selected` class for selection (radio/checkbox)",
|
|
753
|
+
"Use `is-navigated` class for previously navigated items",
|
|
754
|
+
"Support hover, selected, active states",
|
|
755
|
+
"Up to ~12 levels and ~200 items",
|
|
756
|
+
"Default: items non-interactive, add states as needed",
|
|
757
|
+
"Consider performance with large hierarchies"
|
|
758
|
+
]
|
|
759
|
+
},
|
|
760
|
+
"variant-management": {
|
|
761
|
+
"id": "variant-management",
|
|
762
|
+
"name": "Variant Management",
|
|
763
|
+
"category": "Data Display",
|
|
764
|
+
"description": "Variant Management stores filter settings (filter parameters, selection fields, layout) defined in components like filter bar. Enables users to load, save, and change variants. In table context, saves and manages table settings including layout, column visibility, sorting, and grouping.",
|
|
765
|
+
"whenToUse": [
|
|
766
|
+
"Store filter settings from filter bar",
|
|
767
|
+
"Save filter parameters, selection fields, and layout",
|
|
768
|
+
"Load, save, and change filter variants",
|
|
769
|
+
"Manage table settings (layout, columns, sorting, grouping)",
|
|
770
|
+
"Allow users to save personalized views",
|
|
771
|
+
"Enable switching between different filter configurations",
|
|
772
|
+
"Store table personalization settings"
|
|
773
|
+
],
|
|
774
|
+
"whenToAvoid": [
|
|
775
|
+
"Simple filtering without save/load needs → Use basic filters",
|
|
776
|
+
"No personalization required → Don't add variant management",
|
|
777
|
+
"Single fixed view → No need for variants",
|
|
778
|
+
"Temporary filters not worth saving → Use inline filters"
|
|
779
|
+
],
|
|
780
|
+
"bestPractices": [
|
|
781
|
+
"Store filter settings from filter bar",
|
|
782
|
+
"Include filter parameters, selection fields, and layout",
|
|
783
|
+
"Enable load, save, and change variant operations",
|
|
784
|
+
"In tables: save layout, column visibility, sorting, grouping",
|
|
785
|
+
"Allow users to name and manage their variants",
|
|
786
|
+
"Provide default/standard variants",
|
|
787
|
+
"Allow marking favorite/default variant",
|
|
788
|
+
"Support sharing variants between users when appropriate",
|
|
789
|
+
"Include variant descriptions for clarity",
|
|
790
|
+
"Allow deleting user-created variants",
|
|
791
|
+
"Clearly distinguish between personal and shared variants",
|
|
792
|
+
"Protect system/standard variants from deletion"
|
|
793
|
+
]
|
|
794
|
+
},
|
|
795
|
+
"action-sheet": {
|
|
796
|
+
"id": "action-sheet",
|
|
797
|
+
"name": "Action Sheet",
|
|
798
|
+
"category": "Feedback & Status",
|
|
799
|
+
"description": "An action sheet consists of a list of options a user can select from to complete an action. Actions can be clustered if there is not enough space on the screen. Action sheets are typically used on mobile devices.",
|
|
800
|
+
"whenToUse": [
|
|
801
|
+
"You need an option that provides more than one action",
|
|
802
|
+
"It is really important that the user stays in context on a phone",
|
|
803
|
+
"You only have a small number of actions (typically 3-8)",
|
|
804
|
+
"You want a mobile-optimized action menu",
|
|
805
|
+
"You need a touch-friendly interface for selecting from multiple options",
|
|
806
|
+
"You want to display actions in a bottom sheet on mobile devices"
|
|
807
|
+
],
|
|
808
|
+
"whenToAvoid": [
|
|
809
|
+
"The menu provides only one option → Use a button instead",
|
|
810
|
+
"You need to show a hierarchical menu → Use `fd-menu` button instead",
|
|
811
|
+
"Desktop applications → Use `fd-menu` or `fd-popover` instead for better desktop UX",
|
|
812
|
+
"Your users would benefit more from a split button → Use `fd-split-button` which offers an easy-to-access default action with additional options"
|
|
813
|
+
],
|
|
814
|
+
"bestPractices": [
|
|
815
|
+
"Use action sheets primarily for mobile/touch interfaces",
|
|
816
|
+
"Keep the number of actions manageable (3-8 options)",
|
|
817
|
+
"Use clear, action-oriented labels (verbs like \"Share\", \"Delete\", \"Copy\")",
|
|
818
|
+
"Place destructive actions at the bottom with visual distinction (red color)",
|
|
819
|
+
"Always include a \"Cancel\" option to dismiss the action sheet",
|
|
820
|
+
"Make touch targets large enough (minimum 44x44 pixels)",
|
|
821
|
+
"Use icons alongside text for better scannability",
|
|
822
|
+
"On desktop, consider using a menu or popover instead",
|
|
823
|
+
"Don't use action sheets for complex nested menus"
|
|
824
|
+
]
|
|
825
|
+
},
|
|
826
|
+
"busy-indicator": {
|
|
827
|
+
"id": "busy-indicator",
|
|
828
|
+
"name": "Busy Indicator",
|
|
829
|
+
"category": "Feedback & Status",
|
|
830
|
+
"description": "The busy indicator informs the user about an ongoing operation. It indicates an unspecified amount of wait time.",
|
|
831
|
+
"whenToUse": [
|
|
832
|
+
"Indicate an unspecified amount of wait time that is longer than 1 second",
|
|
833
|
+
"When progress can't be estimated or doesn't need to be visualized in detail",
|
|
834
|
+
"Only part of the application or a particular component is affected"
|
|
835
|
+
],
|
|
836
|
+
"whenToAvoid": [
|
|
837
|
+
"The operation takes less than 1 second",
|
|
838
|
+
"The progress can be measured → Use progress indicator instead",
|
|
839
|
+
"You need to indicate that a larger part of the screen is loading, such as during a page load → Use a placeholder loading animation instead",
|
|
840
|
+
"You need to block the screen to prevent the user from interacting with the app → Use a busy dialog instead"
|
|
841
|
+
],
|
|
842
|
+
"bestPractices": [
|
|
843
|
+
"Only show one busy indicator at a time",
|
|
844
|
+
"Use for operations longer than 1 second",
|
|
845
|
+
"Don't block user interaction with other parts of the interface",
|
|
846
|
+
"Consider using progress indicator if the operation progress can be measured",
|
|
847
|
+
"Use busy dialog if you need to block the entire screen"
|
|
848
|
+
]
|
|
849
|
+
},
|
|
850
|
+
"contextual-menu": {
|
|
851
|
+
"id": "contextual-menu",
|
|
852
|
+
"name": "Contextual Menu",
|
|
853
|
+
"category": "Feedback & Status",
|
|
854
|
+
"description": "Contextual Menu is opinionated composition of Popover and Menu components with styled button. Uses More icon or \"More\" word to indicate additional options. On click/tap, contextual menu opens. Composed from Popover and Menu - no own CSS. Only one menu open at a time.",
|
|
855
|
+
"whenToUse": [
|
|
856
|
+
"More options than room to display",
|
|
857
|
+
"Indicate additional options with More icon or \"More\" text",
|
|
858
|
+
"Overflow menu for actions",
|
|
859
|
+
"Context-specific actions menu",
|
|
860
|
+
"Space-constrained action display",
|
|
861
|
+
"Composition of Popover and Menu needed"
|
|
862
|
+
],
|
|
863
|
+
"whenToAvoid": [
|
|
864
|
+
"Few actions that fit in available space → Display actions directly",
|
|
865
|
+
"Primary actions → Display prominently, not in overflow menu",
|
|
866
|
+
"Navigation items → Use navigation menu instead",
|
|
867
|
+
"Complex nested menus → Consider different pattern"
|
|
868
|
+
],
|
|
869
|
+
"bestPractices": [
|
|
870
|
+
"Composed from Popover and Menu components",
|
|
871
|
+
"No own CSS - completely composed from other components",
|
|
872
|
+
"Use More icon or \"More\" text to indicate more options",
|
|
873
|
+
"Opens on click or tap",
|
|
874
|
+
"Only one menu open at a time",
|
|
875
|
+
"Opening one menu closes all other menus",
|
|
876
|
+
"Clicking away from menu closes it",
|
|
877
|
+
"Use for overflow actions when space limited",
|
|
878
|
+
"Use styled button for trigger",
|
|
879
|
+
"Ensure only one menu open at any time",
|
|
880
|
+
"Close menu on outside click"
|
|
881
|
+
]
|
|
882
|
+
},
|
|
883
|
+
"message-box": {
|
|
884
|
+
"id": "message-box",
|
|
885
|
+
"name": "Message Box",
|
|
886
|
+
"category": "Feedback & Status",
|
|
887
|
+
"description": "Message box displays a dialog with a simple message to the user. Unlike popover, it can relay messages unrelated to UI (e.g., technical errors). Inherits Dialog look/behavior (excluding drag/resize). Displays semantic colors and icons: Error, Warning, Success, Information, Confirmation.",
|
|
888
|
+
"whenToUse": [
|
|
889
|
+
"Display non-field-related messages",
|
|
890
|
+
"Interrupt user while performing an action",
|
|
891
|
+
"Display error, warning, success, confirmation, or information messages",
|
|
892
|
+
"Interrupt user for other reasons",
|
|
893
|
+
"User needs to acknowledge the message",
|
|
894
|
+
"User needs to make a decision (include two action buttons)"
|
|
895
|
+
],
|
|
896
|
+
"whenToAvoid": [
|
|
897
|
+
"Displaying short success message → Use Message Toast instead",
|
|
898
|
+
"Message can be shown directly in form field → Show in form field"
|
|
899
|
+
],
|
|
900
|
+
"bestPractices": [
|
|
901
|
+
"Include two action buttons when user decision is required before continuing",
|
|
902
|
+
"Primary action button explicitly displays the action in text",
|
|
903
|
+
"Secondary button provides cancel option",
|
|
904
|
+
"Use semantic colors and icons: error, warning, success, information, confirmation",
|
|
905
|
+
"Inherits Dialog look and behavior (no dragging/resizing)",
|
|
906
|
+
"Can relay messages unrelated to UI (technical errors, system messages)",
|
|
907
|
+
"Interrupts user flow - use appropriately",
|
|
908
|
+
"For short success messages, use Message Toast instead"
|
|
909
|
+
]
|
|
910
|
+
},
|
|
911
|
+
"message-page": {
|
|
912
|
+
"id": "message-page",
|
|
913
|
+
"name": "Message Page",
|
|
914
|
+
"category": "Feedback & Status",
|
|
915
|
+
"description": "Message page displays messages when an app/list is empty or an error occurs. Text and icon change by use case (filter no results, search no results, empty app, too many items, unavailable tile, error), but layout stays consistent. Responsive and adjusts to screen space.",
|
|
916
|
+
"whenToUse": [
|
|
917
|
+
"Filter with no results (mandatory `.sap-icon--filter` icon)",
|
|
918
|
+
"Search with no results (mandatory `.sap-icon--search` icon)",
|
|
919
|
+
"Empty app or no items available (mandatory `.sap-icon--product` or matching icon)",
|
|
920
|
+
"Too many items to display",
|
|
921
|
+
"Saved tile no longer available",
|
|
922
|
+
"Error occurred preventing content display (mandatory `.sap-icon--document` icon)",
|
|
923
|
+
"Add formatted text (bold, italic, underline, bullet points) and buttons to action area"
|
|
924
|
+
],
|
|
925
|
+
"whenToAvoid": [
|
|
926
|
+
"Short transient messages → Use message toast instead",
|
|
927
|
+
"Field-specific errors → Use form validation messages"
|
|
928
|
+
],
|
|
929
|
+
"bestPractices": [
|
|
930
|
+
"Icon is mandatory (varies by message type, default: `.sap-icon--documents`)",
|
|
931
|
+
"Title is mandatory; add description with details if needed",
|
|
932
|
+
"Keep message as concise as possible",
|
|
933
|
+
"Filter message: use `.sap-icon--filter` icon, prompt to remove/re-evaluate filter",
|
|
934
|
+
"Search message: use `.sap-icon--search` icon",
|
|
935
|
+
"No items message: use `.sap-icon--product` or appropriate icon",
|
|
936
|
+
"Error message: use `.sap-icon--document` icon, provide link to app start screen if possible",
|
|
937
|
+
"Formatted text variant: supports bold, italic, underline, bullet points, and buttons",
|
|
938
|
+
"Don't add more than two buttons (highly recommended)",
|
|
939
|
+
"Responsive layout adjusts to available screen space"
|
|
940
|
+
]
|
|
941
|
+
},
|
|
942
|
+
"message-popover": {
|
|
943
|
+
"id": "message-popover",
|
|
944
|
+
"name": "Message Popover",
|
|
945
|
+
"category": "Feedback & Status",
|
|
946
|
+
"description": "Message Popover displays a summarized list of different message types (error, warning, success, information) in one list. Provides systematic way to navigate and explore details for each message. Adaptive/responsive: renders as dialog with close button on phones, as popover on tablets+. Works with technical message manager to populate list.",
|
|
947
|
+
"whenToUse": [
|
|
948
|
+
"Display multiple messages to the user",
|
|
949
|
+
"Ensure all content is visible on any device",
|
|
950
|
+
"Centrally manage messages and show without interrupting user",
|
|
951
|
+
"Messages related to form entries or triggered by finalizing actions (e.g., Save)",
|
|
952
|
+
"Form fields are hidden when scrolling and issues may not be visible otherwise",
|
|
953
|
+
"Users can browse messages by type and navigate to details",
|
|
954
|
+
"Users can jump directly from message to affected field on UI"
|
|
955
|
+
],
|
|
956
|
+
"whenToAvoid": [
|
|
957
|
+
"Need to interrupt the user (technical problems like network errors) → Use message box instead",
|
|
958
|
+
"Using small dialog where message popover would obscure important information (e.g., form fields in focus) → Use highlighting and inline messages for form field validation instead"
|
|
959
|
+
],
|
|
960
|
+
"bestPractices": [
|
|
961
|
+
"Display multiple messages of different types in one list",
|
|
962
|
+
"Works with technical message manager (auto-populates message list)",
|
|
963
|
+
"Validation errors added automatically without interrupting user",
|
|
964
|
+
"Users browse messages by type and navigate to details",
|
|
965
|
+
"Allow users to jump from message to affected UI field",
|
|
966
|
+
"Adaptive rendering: dialog on phones, popover on tablets+",
|
|
967
|
+
"Does not interrupt user workflow",
|
|
968
|
+
"For interrupting messages (network errors), use message box",
|
|
969
|
+
"In small dialogs, use inline validation instead"
|
|
970
|
+
]
|
|
971
|
+
},
|
|
972
|
+
"message-strip": {
|
|
973
|
+
"id": "message-strip",
|
|
974
|
+
"name": "Message Strip",
|
|
975
|
+
"category": "Feedback & Status",
|
|
976
|
+
"description": "Message Strip enables embedding application-related messages in the application to draw user attention to important information in page context (warnings, state changes that could be easily missed). Used within detail areas and object contexts.",
|
|
977
|
+
"whenToUse": [
|
|
978
|
+
"Provide information within the detail area of an object",
|
|
979
|
+
"Inform user about status of an object",
|
|
980
|
+
"Warn user about an issue",
|
|
981
|
+
"Draw attention to important contextual information (warnings, state changes)",
|
|
982
|
+
"Display application-related messages in page context"
|
|
983
|
+
],
|
|
984
|
+
"whenToAvoid": [
|
|
985
|
+
"Displaying information within object page header → Use different component",
|
|
986
|
+
"Displaying within a control → Use different component",
|
|
987
|
+
"Displaying in master list → Use different component",
|
|
988
|
+
"Displaying above page header → Use different component"
|
|
989
|
+
],
|
|
990
|
+
"bestPractices": [
|
|
991
|
+
"Use within detail area of objects",
|
|
992
|
+
"Draw attention to important contextual information",
|
|
993
|
+
"Use for warnings or state changes that could be missed",
|
|
994
|
+
"Display application-related messages",
|
|
995
|
+
"Keep in context of page content",
|
|
996
|
+
"Not for use in object page header, controls, master list, or above page header",
|
|
997
|
+
"Use for contextual messages, not global notifications"
|
|
998
|
+
]
|
|
999
|
+
},
|
|
1000
|
+
"message-toast": {
|
|
1001
|
+
"id": "message-toast",
|
|
1002
|
+
"name": "Message Toast",
|
|
1003
|
+
"category": "Feedback & Status",
|
|
1004
|
+
"description": "Message Toast is a small, non-disruptive popup for short success messages that disappears automatically after a few seconds. Always centered horizontally at the bottom of screen, fades in/out automatically. Standard duration is 3000ms (can be longer, not recommended to be shorter).",
|
|
1005
|
+
"whenToUse": [
|
|
1006
|
+
"Display short success message",
|
|
1007
|
+
"Avoid interrupting user while performing an action",
|
|
1008
|
+
"Confirm successful action",
|
|
1009
|
+
"Non-disruptive feedback for completed operations"
|
|
1010
|
+
],
|
|
1011
|
+
"whenToAvoid": [
|
|
1012
|
+
"Displaying error or warning messages → Use message strip or message box instead",
|
|
1013
|
+
"Interrupting users while performing an action → Use message box instead",
|
|
1014
|
+
"Need to ensure users read message before leaving page → Use message box or message strip instead"
|
|
1015
|
+
],
|
|
1016
|
+
"bestPractices": [
|
|
1017
|
+
"Use for short success messages only",
|
|
1018
|
+
"Standard duration: 3000ms (can be longer, not shorter)",
|
|
1019
|
+
"Always centered horizontally at bottom of screen",
|
|
1020
|
+
"Fades in and out automatically",
|
|
1021
|
+
"Non-disruptive to user workflow",
|
|
1022
|
+
"Confirms successful actions without interruption",
|
|
1023
|
+
"Not for errors or warnings (use appropriate message components)",
|
|
1024
|
+
"Duration defined by application (minimum 3000ms recommended)"
|
|
1025
|
+
]
|
|
1026
|
+
},
|
|
1027
|
+
"notification": {
|
|
1028
|
+
"id": "notification",
|
|
1029
|
+
"name": "Notification",
|
|
1030
|
+
"category": "Feedback & Status",
|
|
1031
|
+
"description": "Notifications should be well-instrumented, timed to provide value without being intrusive. Should be brief, concise, conveying specific information or prompting action. Used for reminders, alerts, and updates.",
|
|
1032
|
+
"whenToUse": [
|
|
1033
|
+
"Reminders: upcoming events, appointments, deadlines, payments, tasks requiring attention/action",
|
|
1034
|
+
"Alerts: urgent information like business-critical alerts",
|
|
1035
|
+
"Updates: significant changes to user interests (status updates, workflow progress)",
|
|
1036
|
+
"Well-timed communication without interrupting user",
|
|
1037
|
+
"Action-oriented with clear call to action"
|
|
1038
|
+
],
|
|
1039
|
+
"whenToAvoid": [
|
|
1040
|
+
"Excessive notifications that frustrate users",
|
|
1041
|
+
"Overwhelming users with too many messages in short time span",
|
|
1042
|
+
"Non-relevant or non-useful information"
|
|
1043
|
+
],
|
|
1044
|
+
"bestPractices": [
|
|
1045
|
+
"Clear on purpose (update, reminder, or alert)",
|
|
1046
|
+
"Concise and to the point",
|
|
1047
|
+
"Relevant and useful for user",
|
|
1048
|
+
"Well-timed",
|
|
1049
|
+
"Personalized where possible",
|
|
1050
|
+
"Action-oriented with clear call to action",
|
|
1051
|
+
"Transparent on importance (use importance indicator consistently)",
|
|
1052
|
+
"Well-paced (avoid overwhelming with too many messages)",
|
|
1053
|
+
"Consider user's perspective and context",
|
|
1054
|
+
"Group notifications for similar event types when threshold reached (reduces overall count for non-critical events)",
|
|
1055
|
+
"Provide value and relevance without overwhelming or interrupting",
|
|
1056
|
+
"Avoid excessive notifications that diminish effectiveness"
|
|
1057
|
+
]
|
|
1058
|
+
},
|
|
1059
|
+
"popover": {
|
|
1060
|
+
"id": "popover",
|
|
1061
|
+
"name": "Popover",
|
|
1062
|
+
"category": "Feedback & Status",
|
|
1063
|
+
"description": "Popover displays additional information for an object in a compact way without leaving the page. Contains control (trigger) and body (content). Can be paired with Menu for dropdown functionality. Supports header, footer, and scrollable variants with flexible placement options.",
|
|
1064
|
+
"whenToUse": [
|
|
1065
|
+
"Show additional information on demand without navigation",
|
|
1066
|
+
"Define custom structure for supplementary content",
|
|
1067
|
+
"Display UI elements not available in Quick View",
|
|
1068
|
+
"Show contextual help or tooltips with rich content",
|
|
1069
|
+
"Trigger dropdown menus from buttons",
|
|
1070
|
+
"Display details for an object inline"
|
|
1071
|
+
],
|
|
1072
|
+
"whenToAvoid": [
|
|
1073
|
+
"Objects in master list → Use details area instead",
|
|
1074
|
+
"Critical information that should always be visible → Use inline content",
|
|
1075
|
+
"Complex forms or multi-step processes → Use Dialog instead",
|
|
1076
|
+
"Long-form content → Use separate page or panel"
|
|
1077
|
+
],
|
|
1078
|
+
"bestPractices": [
|
|
1079
|
+
"Only one popover visible at a time - opening one closes all others",
|
|
1080
|
+
"Use `fd-popover__body-header` for header section",
|
|
1081
|
+
"Use `fd-popover__body-footer` for footer with actions",
|
|
1082
|
+
"Add `fd-popover-body__wrapper` inside body for scrollable content",
|
|
1083
|
+
"Define explicit height when content may overflow",
|
|
1084
|
+
"Show status information as text fields with semantic colors",
|
|
1085
|
+
"Use placement modifiers to position popover relative to trigger",
|
|
1086
|
+
"Align arrow with trigger using alignment modifiers",
|
|
1087
|
+
"Close popover on outside click or Escape key",
|
|
1088
|
+
"Avoid multiple layered popovers - causes collisions",
|
|
1089
|
+
"Set max-height and enable scrolling for long content"
|
|
1090
|
+
]
|
|
1091
|
+
},
|
|
1092
|
+
"progress-indicator": {
|
|
1093
|
+
"id": "progress-indicator",
|
|
1094
|
+
"name": "Progress Indicator",
|
|
1095
|
+
"category": "Feedback & Status",
|
|
1096
|
+
"description": "Progress Indicator visualizes current advancement of a process or degree of accomplishment. Inside filled with color to indicate progress state. Shows progress as absolute numbers or percentages with progress bar. Supports semantic states (normal, success, warning, error, information).",
|
|
1097
|
+
"whenToUse": [
|
|
1098
|
+
"Visually show current status of a process",
|
|
1099
|
+
"Strengthen and communicate current status",
|
|
1100
|
+
"Make different states comparable at higher level",
|
|
1101
|
+
"Show custom values as well as percentages",
|
|
1102
|
+
"Display determinate progress (known completion percentage)",
|
|
1103
|
+
"Show progress between 0% and 100%"
|
|
1104
|
+
],
|
|
1105
|
+
"whenToAvoid": [
|
|
1106
|
+
"Ongoing operation needing visual feedback → Use Busy Indicator instead",
|
|
1107
|
+
"Indeterminate progress (unknown duration/completion) → Use Busy Indicator instead",
|
|
1108
|
+
"Single value in fillable shape describing context → Use Status Indicator instead",
|
|
1109
|
+
"Simple loading without progress tracking → Use Busy Indicator"
|
|
1110
|
+
],
|
|
1111
|
+
"bestPractices": [
|
|
1112
|
+
"Show progress as percentage (0-100%) or with custom text",
|
|
1113
|
+
"Display text on right of bar if progress ≤50%, right-aligned on bar if >50%",
|
|
1114
|
+
"Use semantic state modifiers: `fd-progress-indicator--positive`, `--negative`, `--critical`, `--informative`",
|
|
1115
|
+
"Use `fd-progress-indicator--display` for display-only variant",
|
|
1116
|
+
"Use `fd-progress-indicator--mobile` for mobile optimization",
|
|
1117
|
+
"Long text truncates - click shows popover with full text",
|
|
1118
|
+
"Show application-specific text in addition to or instead of percentage",
|
|
1119
|
+
"Use semantic colors for different value states",
|
|
1120
|
+
"If text exceeds space, ensure truncation and popover functionality",
|
|
1121
|
+
"Choose appropriate state color to match process status"
|
|
1122
|
+
]
|
|
1123
|
+
},
|
|
1124
|
+
"quick-view": {
|
|
1125
|
+
"id": "quick-view",
|
|
1126
|
+
"name": "Quick View",
|
|
1127
|
+
"category": "Feedback & Status",
|
|
1128
|
+
"description": "Quick View displays a concise overview of an object within a Popover. Shows information grouped into sections (e.g., contact details, company information). Inherits properties and responsiveness from Popover component.",
|
|
1129
|
+
"whenToUse": [
|
|
1130
|
+
"Display concise overview of an object",
|
|
1131
|
+
"Show information about employee, company, or business entity",
|
|
1132
|
+
"Split information into logical groups",
|
|
1133
|
+
"Provide quick access to key details without full navigation",
|
|
1134
|
+
"Display grouped object information (contact, company, details)"
|
|
1135
|
+
],
|
|
1136
|
+
"whenToAvoid": [
|
|
1137
|
+
"Information not organized in groups → Use plain Popover with custom structure",
|
|
1138
|
+
"Complex detailed information about object → Use full detail page or Dialog",
|
|
1139
|
+
"Single piece of ungrouped information → Use Popover or tooltip",
|
|
1140
|
+
"Extensive data requiring scrolling → Use detail page"
|
|
1141
|
+
],
|
|
1142
|
+
"bestPractices": [
|
|
1143
|
+
"Based on Popover - inherits same responsiveness",
|
|
1144
|
+
"Organize information into clear, logical groups",
|
|
1145
|
+
"Keep content concise - it's a \"quick\" view",
|
|
1146
|
+
"Use semantic grouping (e.g., Contact, Company, Address)",
|
|
1147
|
+
"Display most important information first",
|
|
1148
|
+
"Follow Popover best practices for positioning and behavior",
|
|
1149
|
+
"Provide link to full details if more information available",
|
|
1150
|
+
"Limit amount of information - avoid scrolling if possible",
|
|
1151
|
+
"Only show essential overview data"
|
|
1152
|
+
]
|
|
1153
|
+
},
|
|
1154
|
+
"rating-indicator": {
|
|
1155
|
+
"id": "rating-indicator",
|
|
1156
|
+
"name": "Rating Indicator",
|
|
1157
|
+
"category": "Feedback & Status",
|
|
1158
|
+
"description": "Rating Indicator enables users to rate content or display existing ratings on a numeric scale. Most commonly uses 1 (lowest) to 5 (highest) star scale. Can be interactive (for collecting ratings) or display-only (for showing ratings).",
|
|
1159
|
+
"whenToUse": [
|
|
1160
|
+
"Collect quantitative user feedback through star ratings",
|
|
1161
|
+
"User satisfaction surveys or product reviews",
|
|
1162
|
+
"Display popularity or quality of items, products, or content",
|
|
1163
|
+
"Showcase average ratings visually",
|
|
1164
|
+
"Enable users to rate items on numeric scale",
|
|
1165
|
+
"Show visual representation of ratings"
|
|
1166
|
+
],
|
|
1167
|
+
"whenToAvoid": [
|
|
1168
|
+
"Content that doesn't suit user ratings → Legal documents, terms of service, non-interactive content",
|
|
1169
|
+
"Adds unnecessary UI complexity with little anticipated interaction",
|
|
1170
|
+
"Binary feedback needed → Use thumbs up/down or like button instead",
|
|
1171
|
+
"Precise numeric input required → Use number input or slider"
|
|
1172
|
+
],
|
|
1173
|
+
"bestPractices": [
|
|
1174
|
+
"Use standard 5-star scale for familiarity",
|
|
1175
|
+
"Make interactive for collecting user ratings",
|
|
1176
|
+
"Make read-only for displaying existing ratings",
|
|
1177
|
+
"Show half-stars for displaying average ratings (e.g., 3.5 stars)",
|
|
1178
|
+
"Include rating count or number of reviews alongside display",
|
|
1179
|
+
"Provide clear visual distinction between rated and unrated stars",
|
|
1180
|
+
"Enable keyboard navigation for accessibility",
|
|
1181
|
+
"Show hover state for interactive ratings",
|
|
1182
|
+
"Consider whether rating functionality adds value to your content",
|
|
1183
|
+
"Display average ratings with sufficient sample size"
|
|
1184
|
+
]
|
|
1185
|
+
},
|
|
1186
|
+
"skeleton": {
|
|
1187
|
+
"id": "skeleton",
|
|
1188
|
+
"name": "Skeleton",
|
|
1189
|
+
"category": "Feedback & Status",
|
|
1190
|
+
"description": "Skeleton (Placeholder loading) is a busy indicator that provides users with a skeleton page as placeholder while content loads. Shows grey boxes with animations to indicate loading activity. Creates impression of speed and reliability, making app seem to load faster.",
|
|
1191
|
+
"whenToUse": [
|
|
1192
|
+
"Display loading placeholder while content is being fetched",
|
|
1193
|
+
"Show frame of final content without actual data",
|
|
1194
|
+
"Create impression of faster loading",
|
|
1195
|
+
"Improve perceived performance",
|
|
1196
|
+
"Provide generic preview of layout during load",
|
|
1197
|
+
"Replace actual content during data fetching",
|
|
1198
|
+
"Display loading state for cards, lists, tables"
|
|
1199
|
+
],
|
|
1200
|
+
"whenToAvoid": [
|
|
1201
|
+
"Very fast loading (< 300ms) → No indicator needed or use simple spinner",
|
|
1202
|
+
"Indeterminate wait times → Use Busy Indicator instead",
|
|
1203
|
+
"Full-page loading → Use page-level Busy Indicator",
|
|
1204
|
+
"Background updates → Use subtle progress indicator"
|
|
1205
|
+
],
|
|
1206
|
+
"bestPractices": [
|
|
1207
|
+
"Use Placeholder Shapes that match actual content layout",
|
|
1208
|
+
"Show grey boxes with loading animations",
|
|
1209
|
+
"Match skeleton structure to final content structure",
|
|
1210
|
+
"Use various shapes depending on content type being loaded",
|
|
1211
|
+
"Provide realistic preview of layout",
|
|
1212
|
+
"Improve perceived performance and user experience",
|
|
1213
|
+
"Use for content that takes time to load (images, data, lists)",
|
|
1214
|
+
"Replace skeleton with actual content smoothly",
|
|
1215
|
+
"Ensure skeleton layout matches final content structure",
|
|
1216
|
+
"Use for medium loading times (300ms - 3s)"
|
|
1217
|
+
]
|
|
1218
|
+
},
|
|
1219
|
+
"status-indicator": {
|
|
1220
|
+
"id": "status-indicator",
|
|
1221
|
+
"name": "Status Indicator",
|
|
1222
|
+
"category": "Feedback & Status",
|
|
1223
|
+
"description": "Status Indicator displays SVG images as pictorial representation of an object. Shows single value filled on numeric scale (1-100%) using filled shape with meaningful icon. Can be embedded in other controls and updated in real time.",
|
|
1224
|
+
"whenToUse": [
|
|
1225
|
+
"Display single value with icon describing its context",
|
|
1226
|
+
"Show single value that updates in real time without page reload",
|
|
1227
|
+
"Visualize single value in grids, tables, or dialog boxes",
|
|
1228
|
+
"Provide meaningful association through icon usage",
|
|
1229
|
+
"Display fillable shape representing status or progress"
|
|
1230
|
+
],
|
|
1231
|
+
"whenToAvoid": [
|
|
1232
|
+
"Displaying single value within table → Use Progress Indicator or Radial Micro Chart instead",
|
|
1233
|
+
"Showing rating → Use Rating Indicator instead",
|
|
1234
|
+
"Decorative purposes with no meaningful information",
|
|
1235
|
+
"Multiple related values → Use different visualization"
|
|
1236
|
+
],
|
|
1237
|
+
"bestPractices": [
|
|
1238
|
+
"Use filled shape to visualize single value (1-100%)",
|
|
1239
|
+
"Choose icon that provides meaningful context",
|
|
1240
|
+
"Can be embedded in other controls",
|
|
1241
|
+
"Enable real-time updates without page reload",
|
|
1242
|
+
"Use in grids, tables, or dialog boxes",
|
|
1243
|
+
"Provide clear visual indication of status through icon",
|
|
1244
|
+
"Ensure icon conveys meaningful information",
|
|
1245
|
+
"Icon should describe context, not be decorative only",
|
|
1246
|
+
"For table single values, consider Progress Indicator instead"
|
|
1247
|
+
]
|
|
1248
|
+
},
|
|
1249
|
+
"checkbox": {
|
|
1250
|
+
"id": "checkbox",
|
|
1251
|
+
"name": "Checkbox",
|
|
1252
|
+
"category": "Forms & Inputs",
|
|
1253
|
+
"description": "A checkbox lets users set a binary value (true/false). When selected, it toggles between checked (state applies), unchecked (state doesn't apply), and optionally tri-state/indeterminate (mixed selection of dependent fields). All options are visible, and users can make one or more independent selections.",
|
|
1254
|
+
"whenToUse": [
|
|
1255
|
+
"Only one option can be selected or deselected (e.g., accept terms of use) when meaning is obvious",
|
|
1256
|
+
"A group or list of options can be selected independently of each other",
|
|
1257
|
+
"Options are displayed immediately without user interaction",
|
|
1258
|
+
"Intermediate selection state (tri-state) is required when multiple sub-options are grouped under a parent option"
|
|
1259
|
+
],
|
|
1260
|
+
"whenToAvoid": [
|
|
1261
|
+
"User needs to choose multiple options from a large list → Use Combo Box Input instead",
|
|
1262
|
+
"User can choose only one option from a list → Use Radio Buttons, Select, or List instead",
|
|
1263
|
+
"User needs to perform instantaneous actions without reviewing or confirming → Use Switch instead",
|
|
1264
|
+
"Not enough space available on screen → Use Combo Box instead"
|
|
1265
|
+
],
|
|
1266
|
+
"bestPractices": [
|
|
1267
|
+
"Checked state means the described state applies or item is chosen",
|
|
1268
|
+
"Unchecked state means the described state doesn't apply",
|
|
1269
|
+
"Tri-state/indeterminate indicates neither checked nor unchecked (set via JavaScript `indeterminate` property)",
|
|
1270
|
+
"Use tri-state to represent mixed selection when some (but not all) dependent fields are selected",
|
|
1271
|
+
"All options visible without user interaction",
|
|
1272
|
+
"Tri-state is visual only and cannot be achieved by direct user interaction",
|
|
1273
|
+
"Use for independent selections where multiple options can be selected simultaneously"
|
|
1274
|
+
]
|
|
1275
|
+
},
|
|
1276
|
+
"combobox-input": {
|
|
1277
|
+
"id": "combobox-input",
|
|
1278
|
+
"name": "Combobox Input",
|
|
1279
|
+
"category": "Forms & Inputs",
|
|
1280
|
+
"description": "Combobox allows users to select item from predefined list. Provides editable input field for filtering list and dropdown menu with available options. If entries not validated by app, users can enter custom value. Combines input field with dropdown selection.",
|
|
1281
|
+
"whenToUse": [
|
|
1282
|
+
"Select single item from long list of items",
|
|
1283
|
+
"List items are secondary information not needing immediate display",
|
|
1284
|
+
"Need filtering capability for large lists",
|
|
1285
|
+
"Allow custom entry if not validated",
|
|
1286
|
+
"Searchable dropdown needed",
|
|
1287
|
+
"Select from many options (more than select can handle comfortably)"
|
|
1288
|
+
],
|
|
1289
|
+
"whenToAvoid": [
|
|
1290
|
+
"Only two options → Use Switch instead",
|
|
1291
|
+
"Short list of items → Use Select component instead",
|
|
1292
|
+
"More than 200 list items → Use input field with select dialog or value help dialog",
|
|
1293
|
+
"Simple selection without filtering → Use Select"
|
|
1294
|
+
],
|
|
1295
|
+
"bestPractices": [
|
|
1296
|
+
"Editable input field for filtering list",
|
|
1297
|
+
"Dropdown menu with available options",
|
|
1298
|
+
"Use for long lists of items",
|
|
1299
|
+
"Allow custom value entry if not validated by application",
|
|
1300
|
+
"List items are secondary - don't need immediate display",
|
|
1301
|
+
"Single item selection only",
|
|
1302
|
+
"Provide search/filter functionality",
|
|
1303
|
+
"Show filtered results as user types",
|
|
1304
|
+
"For 2 options, use Switch",
|
|
1305
|
+
"For short lists, Select is simpler",
|
|
1306
|
+
"For >200 items, use dialog-based selection"
|
|
1307
|
+
]
|
|
1308
|
+
},
|
|
1309
|
+
"date-picker": {
|
|
1310
|
+
"id": "date-picker",
|
|
1311
|
+
"name": "Date Picker",
|
|
1312
|
+
"category": "Forms & Inputs",
|
|
1313
|
+
"description": "Date Picker lets users select localized date using touch, mouse, or keyboard input. Responsive behavior for all devices - compact mode (smaller) and cozy mode (touch-friendly). Two parts: Input Field (direct entry or picker) and Date Picker (day/month/year/year ranges views).",
|
|
1314
|
+
"whenToUse": [
|
|
1315
|
+
"Users need to enter single date",
|
|
1316
|
+
"Navigate directly from one month or year to another",
|
|
1317
|
+
"Enter lots of data fast or primarily using keyboard",
|
|
1318
|
+
"Single date selection needed",
|
|
1319
|
+
"Responsive date input required",
|
|
1320
|
+
"Direct date entry or picker selection"
|
|
1321
|
+
],
|
|
1322
|
+
"whenToAvoid": [
|
|
1323
|
+
"Combined date and time input → Use Date/Time Picker instead",
|
|
1324
|
+
"Keep calendar visible and prominent → Use Calendar instead",
|
|
1325
|
+
"Enter date range → Use Date Range Picker instead",
|
|
1326
|
+
"Multiple dates selection → Use appropriate multi-date picker"
|
|
1327
|
+
],
|
|
1328
|
+
"bestPractices": [
|
|
1329
|
+
"Input field for direct date entry or picker selection",
|
|
1330
|
+
"Date picker shows day view, month view, year view, year ranges",
|
|
1331
|
+
"Compact mode: smaller size",
|
|
1332
|
+
"Cozy mode: touch-friendly size",
|
|
1333
|
+
"Responsive behavior for all devices",
|
|
1334
|
+
"Use touch, mouse, or keyboard input",
|
|
1335
|
+
"Navigate directly between months/years",
|
|
1336
|
+
"Single date selection",
|
|
1337
|
+
"Localized date format",
|
|
1338
|
+
"For date+time, use Date/Time Picker",
|
|
1339
|
+
"For ranges, use Date Range Picker"
|
|
1340
|
+
]
|
|
1341
|
+
},
|
|
1342
|
+
"fieldset": {
|
|
1343
|
+
"id": "fieldset",
|
|
1344
|
+
"name": "Fieldset",
|
|
1345
|
+
"category": "Forms & Inputs",
|
|
1346
|
+
"description": "A fieldset gives semantic meaning to a group of elements inside a form (e.g., Billing or Shipping Address). Grouping fields provides styling and accessibility benefits, and is especially important for checkbox groups and radio button groups.",
|
|
1347
|
+
"whenToUse": [
|
|
1348
|
+
"Group related form elements semantically (e.g., Billing Address, Shipping Address)",
|
|
1349
|
+
"Group checkbox groups for accessibility",
|
|
1350
|
+
"Group radio button groups for accessibility",
|
|
1351
|
+
"Provide semantic structure to form sections"
|
|
1352
|
+
],
|
|
1353
|
+
"whenToAvoid": [
|
|
1354
|
+
"Grouping unrelated form elements together",
|
|
1355
|
+
"Using fieldset when simpler grouping methods suffice for non-form content"
|
|
1356
|
+
],
|
|
1357
|
+
"bestPractices": [
|
|
1358
|
+
"Always use fieldset for checkbox groups (accessibility requirement)",
|
|
1359
|
+
"Always use fieldset for radio button groups (accessibility requirement)",
|
|
1360
|
+
"Use `<legend>` element to provide a label for the fieldset",
|
|
1361
|
+
"Provides both styling and accessibility benefits",
|
|
1362
|
+
"Use for semantic grouping of related form fields",
|
|
1363
|
+
"Checkbox and radio button groups should always be grouped with fieldset",
|
|
1364
|
+
"Essential for screen reader users to understand field relationships"
|
|
1365
|
+
]
|
|
1366
|
+
},
|
|
1367
|
+
"file-uploader": {
|
|
1368
|
+
"id": "file-uploader",
|
|
1369
|
+
"name": "File Uploader",
|
|
1370
|
+
"category": "Forms & Inputs",
|
|
1371
|
+
"description": "The file uploader lets users select and upload one or more files using their local file explorer. It's an opinionated composition of input and button components designed for simple upload tasks with automatic upload start upon file selection.",
|
|
1372
|
+
"whenToUse": [
|
|
1373
|
+
"Upload one or more files using local file explorer",
|
|
1374
|
+
"Upload files by dragging and dropping",
|
|
1375
|
+
"Simple upload tasks where file management isn't needed",
|
|
1376
|
+
"Uploading single files (works best for this case)"
|
|
1377
|
+
],
|
|
1378
|
+
"whenToAvoid": [
|
|
1379
|
+
"Uploading large files that may take a long time → Use upload collection instead",
|
|
1380
|
+
"Users need to see upload status → Use upload collection instead",
|
|
1381
|
+
"Users need a preview of uploaded files → Use upload collection instead",
|
|
1382
|
+
"Users may need to rename uploaded files → Use upload collection instead",
|
|
1383
|
+
"Users need to manage multiple uploads (delete, rearrange, rename files) → Use upload collection instead"
|
|
1384
|
+
],
|
|
1385
|
+
"bestPractices": [
|
|
1386
|
+
"Best suited for uploading single files",
|
|
1387
|
+
"Uploading starts automatically when files are selected",
|
|
1388
|
+
"Supports both file explorer selection and drag-and-drop",
|
|
1389
|
+
"Includes only input field or button for simplicity",
|
|
1390
|
+
"For multiple file management features, use upload collection component",
|
|
1391
|
+
"Not suitable for large files or when upload status visibility is required"
|
|
1392
|
+
]
|
|
1393
|
+
},
|
|
1394
|
+
"form-grid": {
|
|
1395
|
+
"id": "form-grid",
|
|
1396
|
+
"name": "Form Grid",
|
|
1397
|
+
"category": "Forms & Inputs",
|
|
1398
|
+
"description": "The form grid provides responsive layouts for forms on a 12-column grid with four breakpoints (Small <600px, Medium 601-1024px, Large 1025-1440px, Extra-large >1441px). It supports configurable label-field ratios (X:Y:Z format) and adapts layouts based on form width, not screen width.",
|
|
1399
|
+
"whenToUse": [
|
|
1400
|
+
"Create responsive form layouts that adapt to different form widths",
|
|
1401
|
+
"Balance form layout between labels, fields, and empty columns",
|
|
1402
|
+
"Single-column layouts for mobile/dialogs (Small size)",
|
|
1403
|
+
"Two-column layouts for larger screens (Large/Extra-large sizes)",
|
|
1404
|
+
"Split-screen or full-screen form views with specific label-field ratios",
|
|
1405
|
+
"Forms requiring vertical layout (labels above fields) or horizontal layout (labels beside fields)"
|
|
1406
|
+
],
|
|
1407
|
+
"whenToAvoid": [
|
|
1408
|
+
"Simple forms that don't need responsive grid behavior",
|
|
1409
|
+
"When a simpler form layout component suffices"
|
|
1410
|
+
],
|
|
1411
|
+
"bestPractices": [
|
|
1412
|
+
"Use single-column layout for small forms (mobile/dialogs) - labels above fields",
|
|
1413
|
+
"Use two-column layout for large/extra-large forms to avoid scrolling",
|
|
1414
|
+
"Adapt label-field ratio based on context: 2:10:0 (default medium), 4:7:1 (split-screen), 3:5:4 (full-screen)",
|
|
1415
|
+
"Use 4:8:0 ratio for long labels/input values at medium width",
|
|
1416
|
+
"All forms display vertical layout under Small breakpoint automatically",
|
|
1417
|
+
"Position form groups side-by-side in Z layout for large/extra-large sizes",
|
|
1418
|
+
"Use recommended column numbers to maximize screen space and avoid unnecessary scrolling",
|
|
1419
|
+
"Breakpoints depend on form width, not screen width",
|
|
1420
|
+
"Empty grid columns (Z in X:Y:Z ratio) prevent excessive input field stretching",
|
|
1421
|
+
"Change default label-field ratio according to your app's specific needs"
|
|
1422
|
+
]
|
|
1423
|
+
},
|
|
1424
|
+
"form-group": {
|
|
1425
|
+
"id": "form-group",
|
|
1426
|
+
"name": "Form Group",
|
|
1427
|
+
"category": "Forms & Inputs",
|
|
1428
|
+
"description": "Form groups assemble form elements with labels, messages, and help containers. Components like `fd-form__item` with label and control can be used independently when error messages aren't needed.",
|
|
1429
|
+
"whenToUse": [
|
|
1430
|
+
"Assemble complete form elements with labels, controls, messages, and help text",
|
|
1431
|
+
"Group related form fields with validation messages",
|
|
1432
|
+
"Create structured form layouts with consistent spacing",
|
|
1433
|
+
"Need error messages, help text, or validation feedback alongside form fields"
|
|
1434
|
+
],
|
|
1435
|
+
"whenToAvoid": [
|
|
1436
|
+
"Simple form fields that don't need error messages or help text → Use `fd-form__item` alone instead",
|
|
1437
|
+
"When minimal form structure suffices"
|
|
1438
|
+
],
|
|
1439
|
+
"bestPractices": [
|
|
1440
|
+
"Use full form group when error messages or help containers are needed",
|
|
1441
|
+
"Use `fd-form__item` with label and control alone for simpler fields without messages",
|
|
1442
|
+
"Components can be used independently based on needs",
|
|
1443
|
+
"Provides consistent structure for labels, controls, messages, and help text",
|
|
1444
|
+
"Not every form field needs the full form group structure",
|
|
1445
|
+
"Choose minimal necessary components to avoid over-engineering simple forms"
|
|
1446
|
+
]
|
|
1447
|
+
},
|
|
1448
|
+
"form-header": {
|
|
1449
|
+
"id": "form-header",
|
|
1450
|
+
"name": "Form Header",
|
|
1451
|
+
"category": "Forms & Inputs",
|
|
1452
|
+
"description": "Form headers are titles that provide context about a group of input fields. For example, \"Personal Information\" would categorize fields like Name, Address, etc.",
|
|
1453
|
+
"whenToUse": [
|
|
1454
|
+
"Provide context and categorization for groups of input fields",
|
|
1455
|
+
"Organize form sections with descriptive titles",
|
|
1456
|
+
"Help users understand what information belongs in each form section",
|
|
1457
|
+
"Create visual hierarchy in long or complex forms"
|
|
1458
|
+
],
|
|
1459
|
+
"whenToAvoid": [
|
|
1460
|
+
"Single input field that doesn't need categorization",
|
|
1461
|
+
"When field labels alone provide sufficient context"
|
|
1462
|
+
],
|
|
1463
|
+
"bestPractices": [
|
|
1464
|
+
"Use descriptive titles that clearly categorize the grouped fields (e.g., \"Personal Information\", \"Billing Address\")",
|
|
1465
|
+
"Place header before the related group of input fields",
|
|
1466
|
+
"Use for organizing complex forms into logical sections",
|
|
1467
|
+
"Helps users scan and navigate long forms efficiently",
|
|
1468
|
+
"Keep header text concise and meaningful",
|
|
1469
|
+
"Don't overuse - only when grouping provides real value"
|
|
1470
|
+
]
|
|
1471
|
+
},
|
|
1472
|
+
"form-item": {
|
|
1473
|
+
"id": "form-item",
|
|
1474
|
+
"name": "Form Item",
|
|
1475
|
+
"category": "Forms & Inputs",
|
|
1476
|
+
"description": "A form item combines a label and an input field. The label clearly describes the expected input and is associated with the input for accessibility.",
|
|
1477
|
+
"whenToUse": [
|
|
1478
|
+
"Combine label and input field as a single form element",
|
|
1479
|
+
"Optional inputs that don't require validation or indication (default)",
|
|
1480
|
+
"Required inputs that need visual and accessible indication (use `fd-form-label--required`)",
|
|
1481
|
+
"Ensure accessible association between label and input"
|
|
1482
|
+
],
|
|
1483
|
+
"whenToAvoid": [
|
|
1484
|
+
"Input without a label (fails accessibility requirements)",
|
|
1485
|
+
"When more complex form structure with messages is needed → Use Form Group instead"
|
|
1486
|
+
],
|
|
1487
|
+
"bestPractices": [
|
|
1488
|
+
"Use default form item for optional inputs without validation",
|
|
1489
|
+
"Mark required inputs with `fd-form-label--required` modifier class",
|
|
1490
|
+
"Set `aria-required=\"true\"` on required input fields for screen readers",
|
|
1491
|
+
"Associate label with input using `for` attribute and matching `id`",
|
|
1492
|
+
"Label clearly describes the expected input",
|
|
1493
|
+
"Always provide accessible labels for form inputs",
|
|
1494
|
+
"Required fields need both visual indicator (modifier) and ARIA attribute"
|
|
1495
|
+
]
|
|
1496
|
+
},
|
|
1497
|
+
"form-label": {
|
|
1498
|
+
"id": "form-label",
|
|
1499
|
+
"name": "Form Label",
|
|
1500
|
+
"category": "Forms & Inputs",
|
|
1501
|
+
"description": "Form labels identify form elements like input fields, checkboxes, and radio buttons. Best used as a child element of Form Item component.",
|
|
1502
|
+
"whenToUse": [
|
|
1503
|
+
"Identify any form element (input field, checkbox, radio button)",
|
|
1504
|
+
"Optional fields without special styling (default)",
|
|
1505
|
+
"Required fields with visual and programmatic indication (`fd-form-label--required`)",
|
|
1506
|
+
"Labels that need a colon displayed (`fd-form-label--colon`)",
|
|
1507
|
+
"Disabled form elements requiring visual indication"
|
|
1508
|
+
],
|
|
1509
|
+
"whenToAvoid": [
|
|
1510
|
+
"Form elements without labels (fails accessibility)",
|
|
1511
|
+
"Using label outside of form context"
|
|
1512
|
+
],
|
|
1513
|
+
"bestPractices": [
|
|
1514
|
+
"Use default form label for optional fields",
|
|
1515
|
+
"Add `fd-form-label--required` modifier for required fields",
|
|
1516
|
+
"Use `required` and `aria-required=\"true\"` attributes on input for required fields",
|
|
1517
|
+
"Add `fd-form-label--colon` modifier to display label with colon",
|
|
1518
|
+
"Show disabled state using one of three methods: `aria-disabled=\"true\"`, `is-disabled` class, or `fd-form-label--disabled` modifier",
|
|
1519
|
+
"Best used as child element of Form Item component",
|
|
1520
|
+
"Disabled labels need both visual (class/modifier) and programmatic (`aria-disabled=\"true\"`) indication",
|
|
1521
|
+
"Associate label with form element using `for` attribute"
|
|
1522
|
+
]
|
|
1523
|
+
},
|
|
1524
|
+
"form-message": {
|
|
1525
|
+
"id": "form-message",
|
|
1526
|
+
"name": "Form Message",
|
|
1527
|
+
"category": "Forms & Inputs",
|
|
1528
|
+
"description": "Form messages display value state text (success, error, warning, information) shown when focus is on the input field. They work with input control value states to provide feedback to users.",
|
|
1529
|
+
"whenToUse": [
|
|
1530
|
+
"Display validation feedback for form inputs",
|
|
1531
|
+
"Show success messages after successful input",
|
|
1532
|
+
"Display error messages for invalid input",
|
|
1533
|
+
"Show warning messages for potential issues",
|
|
1534
|
+
"Provide informational messages about input requirements",
|
|
1535
|
+
"Communicate value state to users when input has focus"
|
|
1536
|
+
],
|
|
1537
|
+
"whenToAvoid": [
|
|
1538
|
+
"Messages unrelated to form validation or input state",
|
|
1539
|
+
"Critical system messages → Use message strip or alert instead"
|
|
1540
|
+
],
|
|
1541
|
+
"bestPractices": [
|
|
1542
|
+
"Use `is-success`, `is-error`, `is-warning`, `is-information` classes on input element (`fd-input`)",
|
|
1543
|
+
"Use matching `fd-form-message--success`, `--error`, `--warning`, `--information` modifiers on message element",
|
|
1544
|
+
"Message appears when focus is on the input field",
|
|
1545
|
+
"Match input state class with corresponding message modifier",
|
|
1546
|
+
"Provide clear, actionable feedback in message text",
|
|
1547
|
+
"Four value states available: success, error, warning, information",
|
|
1548
|
+
"Input and message states must match for visual consistency"
|
|
1549
|
+
]
|
|
1550
|
+
},
|
|
1551
|
+
"input": {
|
|
1552
|
+
"id": "input",
|
|
1553
|
+
"name": "Input",
|
|
1554
|
+
"category": "Forms & Inputs",
|
|
1555
|
+
"description": "Text input fields allow users to enter and edit single-line text, numbers, dates, or times. They should always be paired with a label, and required fields should have an asterisk (*). Features include autocomplete, suggestions, and value help for valid data entry.",
|
|
1556
|
+
"whenToUse": [
|
|
1557
|
+
"Enter short, single-line text or numbers, dates, or times",
|
|
1558
|
+
"Enter password, URL, phone number, or email address",
|
|
1559
|
+
"Select a single item from a large dataset (more than 200 items)",
|
|
1560
|
+
"Find an object by searching multiple attributes (ID, city, customer name) - use with autocomplete and value help",
|
|
1561
|
+
"Select one or more items from a list (multi-input)",
|
|
1562
|
+
"Find items from a list by searching multiple attributes (combobox)"
|
|
1563
|
+
],
|
|
1564
|
+
"whenToAvoid": [
|
|
1565
|
+
"Entering dates and times → Use date picker, date range selection, or date/time picker instead",
|
|
1566
|
+
"Entering long texts → Use textarea instead",
|
|
1567
|
+
"Carrying out a search → Use search field instead",
|
|
1568
|
+
"Selecting multiple values → Use multi-combo box (<200 items) or multi-input field (>200 items) instead",
|
|
1569
|
+
"Selecting from small set of values (<20 items) → Consider select control instead"
|
|
1570
|
+
],
|
|
1571
|
+
"bestPractices": [
|
|
1572
|
+
"Always pair input with a label",
|
|
1573
|
+
"Mark required fields with asterisk (*) in label",
|
|
1574
|
+
"Use autocomplete and suggestions for better user experience",
|
|
1575
|
+
"Provide value help for complex data entry",
|
|
1576
|
+
"For small sets (<20 items), use select control",
|
|
1577
|
+
"For medium sets (20-200 items), use combo box",
|
|
1578
|
+
"For large sets (>200 items), use input with value help",
|
|
1579
|
+
"Single-line text only - use textarea for multi-line",
|
|
1580
|
+
"Required fields must have visual indicator (asterisk) in label"
|
|
1581
|
+
]
|
|
1582
|
+
},
|
|
1583
|
+
"input-group": {
|
|
1584
|
+
"id": "input-group",
|
|
1585
|
+
"name": "Input Group",
|
|
1586
|
+
"category": "Forms & Inputs",
|
|
1587
|
+
"description": "Input Group combines form inputs with add-ons (text, icons, or buttons) to help users understand the information being entered. Add-ons can be positioned before, after, or on both sides of the input field. Supports validation states (success, error, warning, information).",
|
|
1588
|
+
"whenToUse": [
|
|
1589
|
+
"Add text add-ons to clarify value format (e.g., currency, units)",
|
|
1590
|
+
"Add icon add-ons as visual cues (visibility toggles, status indicators)",
|
|
1591
|
+
"Add button add-ons for actions (submit, search, trigger)",
|
|
1592
|
+
"Display validation or feedback states visually",
|
|
1593
|
+
"Provide context about expected input format or units"
|
|
1594
|
+
],
|
|
1595
|
+
"whenToAvoid": [
|
|
1596
|
+
"Simple inputs that don't need additional context → Use basic input instead",
|
|
1597
|
+
"Complex actions that need more than a simple button → Consider separate action buttons"
|
|
1598
|
+
],
|
|
1599
|
+
"bestPractices": [
|
|
1600
|
+
"Position add-ons logically: before (prefix), after (suffix), or both sides",
|
|
1601
|
+
"Use text add-ons for units or currency symbols",
|
|
1602
|
+
"Use icon add-ons for visual cues (e.g., visibility toggle, status)",
|
|
1603
|
+
"Use button add-ons for actions like submit or search",
|
|
1604
|
+
"Apply state classes: `.is-success`, `.is-error`, `.is-warning`, `.is-information` on `.fd-input-group`",
|
|
1605
|
+
"Use `.is-focus` class on `.fd-input-group` for focused state",
|
|
1606
|
+
"Buttons can contain text or icons",
|
|
1607
|
+
"Add-ons should clarify or enhance input understanding, not clutter",
|
|
1608
|
+
"State modifiers must be applied to the input group container"
|
|
1609
|
+
]
|
|
1610
|
+
},
|
|
1611
|
+
"multi-combobox": {
|
|
1612
|
+
"id": "multi-combobox",
|
|
1613
|
+
"name": "Multi ComboBox",
|
|
1614
|
+
"category": "Forms & Inputs",
|
|
1615
|
+
"description": "Multi ComboBox enables users to select options from predefined list or enter custom text. Provides editable input field to filter list and dropdown arrow to open options. Select options have checkboxes permitting multiple selection. Combines filtering with multi-selection capability.",
|
|
1616
|
+
"whenToUse": [
|
|
1617
|
+
"Select one or more options from long list (no more than ~200)",
|
|
1618
|
+
"Values contain secondary information not needing immediate display",
|
|
1619
|
+
"Multiple selection from filtered list needed",
|
|
1620
|
+
"Editable input for filtering options",
|
|
1621
|
+
"Multi-select with search/filter capability"
|
|
1622
|
+
],
|
|
1623
|
+
"whenToAvoid": [
|
|
1624
|
+
"Select multiple ranges → Use appropriate range selector",
|
|
1625
|
+
"Select or search multiple business objects → Use specialized selector",
|
|
1626
|
+
"Short list of items → Use simpler multi-select component",
|
|
1627
|
+
"Add custom values → Use Multi Input instead",
|
|
1628
|
+
"List contains >200 items → Use dialog-based selection"
|
|
1629
|
+
],
|
|
1630
|
+
"bestPractices": [
|
|
1631
|
+
"Editable input field to filter list",
|
|
1632
|
+
"Dropdown arrow to open options list",
|
|
1633
|
+
"Checkboxes for multiple selection",
|
|
1634
|
+
"Use for long lists (up to ~200 items)",
|
|
1635
|
+
"Secondary information in values",
|
|
1636
|
+
"Filter as user types",
|
|
1637
|
+
"Show selected items as tokens",
|
|
1638
|
+
"Allow deselection of items",
|
|
1639
|
+
"Maximum ~200 items",
|
|
1640
|
+
"For custom values, use Multi Input"
|
|
1641
|
+
]
|
|
1642
|
+
},
|
|
1643
|
+
"multi-input": {
|
|
1644
|
+
"id": "multi-input",
|
|
1645
|
+
"name": "Multi Input",
|
|
1646
|
+
"category": "Forms & Inputs",
|
|
1647
|
+
"description": "Multi Input allows users to enter multiple values displayed as tokens. Provides editable input field for filtering list and dropdown menu with available options. If entries not validated, users can enter custom values. Supports value help for selecting/searching multiple business objects and ranges.",
|
|
1648
|
+
"whenToUse": [
|
|
1649
|
+
"Provide value help to select or search multiple business objects",
|
|
1650
|
+
"Let users select multiple ranges (with value help)",
|
|
1651
|
+
"Enable users to add custom values",
|
|
1652
|
+
"Multiple values displayed as tokens",
|
|
1653
|
+
"Editable input for custom entries",
|
|
1654
|
+
"Value help dialog for complex selection"
|
|
1655
|
+
],
|
|
1656
|
+
"whenToAvoid": [
|
|
1657
|
+
"Choose multiple options from large list → Use Multi ComboBox instead",
|
|
1658
|
+
"Not enough space on screen → Consider alternative",
|
|
1659
|
+
"Choose only one option → Use single-select component",
|
|
1660
|
+
"Simple multi-selection without custom values → Use Multi ComboBox"
|
|
1661
|
+
],
|
|
1662
|
+
"bestPractices": [
|
|
1663
|
+
"Multiple values displayed as tokens",
|
|
1664
|
+
"Editable input field for filtering",
|
|
1665
|
+
"Dropdown menu with available options",
|
|
1666
|
+
"Allow custom value entry if not validated",
|
|
1667
|
+
"Use value help for multiple business objects",
|
|
1668
|
+
"Support multiple range selection with value help",
|
|
1669
|
+
"Show selected values as removable tokens",
|
|
1670
|
+
"Enable custom value entry",
|
|
1671
|
+
"Provide value help dialog for complex scenarios",
|
|
1672
|
+
"For predefined-only options, use Multi ComboBox",
|
|
1673
|
+
"Requires adequate screen space"
|
|
1674
|
+
]
|
|
1675
|
+
},
|
|
1676
|
+
"radio": {
|
|
1677
|
+
"id": "radio",
|
|
1678
|
+
"name": "Radio",
|
|
1679
|
+
"category": "Forms & Inputs",
|
|
1680
|
+
"description": "Radio buttons provide mutually exclusive options, allowing users to select only one option from two or more choices. They only work in groups and are best for selecting from a small set of clearly different alternatives.",
|
|
1681
|
+
"whenToUse": [
|
|
1682
|
+
"Users need to choose only one option from different alternatives",
|
|
1683
|
+
"Users need to see all options at once without interacting with a dropdown",
|
|
1684
|
+
"Small set of options (no more than 8)",
|
|
1685
|
+
"Users need to trigger an immediate change without pressing Submit",
|
|
1686
|
+
"Users need to choose quickly between at least two clearly different choices"
|
|
1687
|
+
],
|
|
1688
|
+
"whenToAvoid": [
|
|
1689
|
+
"Users need to select more than one option → Use checkboxes instead",
|
|
1690
|
+
"Users need to select items in a list → Use checkboxes or direct tap selection",
|
|
1691
|
+
"Users are expected to go with the most common option → Use dropdown with default instead",
|
|
1692
|
+
"Users are choosing between just two options → Use single checkbox or toggle switch instead",
|
|
1693
|
+
"More than 8 options to present → Use dropdown box or list view instead",
|
|
1694
|
+
"Options are numbers with fixed steps → Use slider control instead",
|
|
1695
|
+
"Users need to select a value from a range → Use slider instead"
|
|
1696
|
+
],
|
|
1697
|
+
"bestPractices": [
|
|
1698
|
+
"Align radio buttons vertically, especially for long labels (easier to read and localize)",
|
|
1699
|
+
"Use horizontal alignment only for one-word labels (e.g., background color settings)",
|
|
1700
|
+
"Always align vertically in forms (label length varies across languages)",
|
|
1701
|
+
"Use group labels and padding to separate multiple radio button groups",
|
|
1702
|
+
"Default: long labels truncate with ellipsis",
|
|
1703
|
+
"Use `.fd-radio__label--wrap` modifier for labels that wrap to new line (set max-width on label)",
|
|
1704
|
+
"Use `.fd-radio__label--wrap-top-aligned` for top-left aligned wrapping labels",
|
|
1705
|
+
"Radio buttons only work in groups for mutually exclusive options",
|
|
1706
|
+
"Don't put two radio button groups next to each other without clear separation",
|
|
1707
|
+
"Maximum 8 options - use dropdown for more"
|
|
1708
|
+
]
|
|
1709
|
+
},
|
|
1710
|
+
"select": {
|
|
1711
|
+
"id": "select",
|
|
1712
|
+
"name": "Select",
|
|
1713
|
+
"category": "Forms & Inputs",
|
|
1714
|
+
"description": "Select component (dropdown) lets users pick one item from a small, predefined list. Can be placed in toolbars (chart, footer, header), forms, or tables. List stays hidden until opened.",
|
|
1715
|
+
"whenToUse": [
|
|
1716
|
+
"Choose only one item from short list (typically 2-12 items)",
|
|
1717
|
+
"Users don't need to see all options at once",
|
|
1718
|
+
"Helpful to start with default selection (especially if one option used most often)",
|
|
1719
|
+
"Predefined list instead of free-form text input",
|
|
1720
|
+
"Logically grouped list with common items first, others sorted",
|
|
1721
|
+
"Space-saving alternative to radio buttons"
|
|
1722
|
+
],
|
|
1723
|
+
"whenToAvoid": [
|
|
1724
|
+
"Only two options → Use switch instead",
|
|
1725
|
+
"Very large set of items → Use combo box instead",
|
|
1726
|
+
"Display multiple attributes or search on multiple attributes → Use input field with select dialog or value help dialog",
|
|
1727
|
+
"Need to display all options without interaction → Use radio buttons instead",
|
|
1728
|
+
"More than 12 options → Consider combo box with search"
|
|
1729
|
+
],
|
|
1730
|
+
"bestPractices": [
|
|
1731
|
+
"Keep texts concise, avoid complex content",
|
|
1732
|
+
"Define default selection whenever possible",
|
|
1733
|
+
"Sort values in meaningful order (common first, then alphabetical/numerical/topical)",
|
|
1734
|
+
"Use appropriate text for \"not selected\" option (not blank)",
|
|
1735
|
+
"Use fixed width (don't auto-adjust based on selection)",
|
|
1736
|
+
"In two-column layout, place most relevant value in first column",
|
|
1737
|
+
"Keep selection list items simple and scannable",
|
|
1738
|
+
"Avoid icons in selection list - if used, ensure they match text",
|
|
1739
|
+
"Avoid disabling selection options when possible"
|
|
1740
|
+
]
|
|
1741
|
+
},
|
|
1742
|
+
"slider": {
|
|
1743
|
+
"id": "slider",
|
|
1744
|
+
"name": "Slider",
|
|
1745
|
+
"category": "Forms & Inputs",
|
|
1746
|
+
"description": "Slider allows users to adjust a value along continuous or gradual range. Handles values that change smoothly (volume, brightness). Provides immediate visual feedback. Range Slider variant lets users select min/max value range within predefined interval.",
|
|
1747
|
+
"whenToUse": [
|
|
1748
|
+
"Adjust value along continuous or gradual range",
|
|
1749
|
+
"Handle values that change smoothly (volume, brightness, saturation, contrast)",
|
|
1750
|
+
"Allow quick adjustments without typing",
|
|
1751
|
+
"Provide immediate visual feedback as handle moves",
|
|
1752
|
+
"Select min/max value range (use Range Slider)",
|
|
1753
|
+
"Display and adjust settings visually"
|
|
1754
|
+
],
|
|
1755
|
+
"whenToAvoid": [
|
|
1756
|
+
"Making specific choices (categories, list items) → Use radio buttons or checklists",
|
|
1757
|
+
"Without full accessibility support → Use dropdown or input field instead",
|
|
1758
|
+
"Space is limited (small screens) → Use smaller input options",
|
|
1759
|
+
"Precise numeric input needed → Use number input field",
|
|
1760
|
+
"Single value selection when Range Slider used → Use standard Slider"
|
|
1761
|
+
],
|
|
1762
|
+
"bestPractices": [
|
|
1763
|
+
"Always label slider to indicate what selected value represents",
|
|
1764
|
+
"Keep custom slider labels short and meaningful",
|
|
1765
|
+
"Use steps that match required precision (smaller steps for exact values)",
|
|
1766
|
+
"Display unit of measurement (%, kg, °C) next to slider or input field",
|
|
1767
|
+
"Display current value near slider or in connected input field",
|
|
1768
|
+
"Choose appropriate size for use case",
|
|
1769
|
+
"Use stepped increments for predefined intervals",
|
|
1770
|
+
"Ensure values are clearly labeled for context",
|
|
1771
|
+
"Show current value as user interacts",
|
|
1772
|
+
"Ensure keyboard interaction support",
|
|
1773
|
+
"Provide visible value indicators and clear min/max labels",
|
|
1774
|
+
"Consider screen size - sliders take up space",
|
|
1775
|
+
"Match step size to precision requirements"
|
|
1776
|
+
]
|
|
1777
|
+
},
|
|
1778
|
+
"step-input": {
|
|
1779
|
+
"id": "step-input",
|
|
1780
|
+
"name": "Step Input",
|
|
1781
|
+
"category": "Forms & Inputs",
|
|
1782
|
+
"description": "Step Input allows users to adjust numeric values in predefined increments (steps) using buttons or direct input. Useful for quantities or measurements without manually typing every number. Supports keyboard and mouse interactions, customizable with min, max, and step values.",
|
|
1783
|
+
"whenToUse": [
|
|
1784
|
+
"Adjust amounts, quantities, or numeric values quickly",
|
|
1785
|
+
"Change values in defined increments (e.g., shopping cart quantities)",
|
|
1786
|
+
"Need increment/decrement buttons for numeric input",
|
|
1787
|
+
"Users benefit from predefined step values",
|
|
1788
|
+
"Quick numeric adjustments needed"
|
|
1789
|
+
],
|
|
1790
|
+
"whenToAvoid": [
|
|
1791
|
+
"Fixed numbers (postal code, phone number, ID) → Use regular input field",
|
|
1792
|
+
"Values that rarely change or don't follow steps (account number) → Use regular input field",
|
|
1793
|
+
"Entering dates or times → Use Date Picker, Time Picker, or Date/Time Picker",
|
|
1794
|
+
"Free-form numeric input without increments → Use number input"
|
|
1795
|
+
],
|
|
1796
|
+
"bestPractices": [
|
|
1797
|
+
"Provide increment/decrement buttons",
|
|
1798
|
+
"Allow direct input via keyboard",
|
|
1799
|
+
"Set appropriate min, max, and step values",
|
|
1800
|
+
"Support both keyboard and mouse interactions",
|
|
1801
|
+
"Use for quantities that change in defined steps",
|
|
1802
|
+
"Display current value clearly",
|
|
1803
|
+
"Disable buttons at min/max boundaries",
|
|
1804
|
+
"Use in shopping carts, quantity selectors, measurement adjustments",
|
|
1805
|
+
"Define reasonable step increments for use case",
|
|
1806
|
+
"Set min/max values to prevent invalid entries"
|
|
1807
|
+
]
|
|
1808
|
+
},
|
|
1809
|
+
"switch": {
|
|
1810
|
+
"id": "switch",
|
|
1811
|
+
"name": "Switch",
|
|
1812
|
+
"category": "Forms & Inputs",
|
|
1813
|
+
"description": "Switch mimics a physical switch, allowing users to toggle individual features on or off. Mainly used for settings, personalization, and cases where impact is directly recognizable. Changes take immediate effect.",
|
|
1814
|
+
"whenToUse": [
|
|
1815
|
+
"Set something as active or inactive (e.g., dialog, feature toggle)",
|
|
1816
|
+
"Clearly show mode or state of a setting",
|
|
1817
|
+
"Change takes immediate effect without confirmation",
|
|
1818
|
+
"Toggle between two mutually exclusive states (on/off)",
|
|
1819
|
+
"Settings and personalization options",
|
|
1820
|
+
"Binary choices with immediate impact"
|
|
1821
|
+
],
|
|
1822
|
+
"whenToAvoid": [
|
|
1823
|
+
"Additional steps required for changes to take effect → Use Checkbox instead",
|
|
1824
|
+
"Requires confirmation or Submit button → Use Checkbox instead",
|
|
1825
|
+
"Unclear if showing state or action → Use Checkbox instead",
|
|
1826
|
+
"More than two options → Use Radio buttons or Select",
|
|
1827
|
+
"Part of form requiring submission → Use Checkbox"
|
|
1828
|
+
],
|
|
1829
|
+
"bestPractices": [
|
|
1830
|
+
"Use for immediate on/off toggles",
|
|
1831
|
+
"Clearly show current mode or state",
|
|
1832
|
+
"Use for settings and personalization",
|
|
1833
|
+
"Ensure impact of toggle is directly recognizable",
|
|
1834
|
+
"Provide clear labels describing what is being toggled",
|
|
1835
|
+
"Show visual feedback for on/off states",
|
|
1836
|
+
"Changes take effect immediately without confirmation",
|
|
1837
|
+
"Don't use if change requires confirmation",
|
|
1838
|
+
"Ensure it's clear whether showing state or action"
|
|
1839
|
+
]
|
|
1840
|
+
},
|
|
1841
|
+
"textarea": {
|
|
1842
|
+
"id": "textarea",
|
|
1843
|
+
"name": "Textarea",
|
|
1844
|
+
"category": "Forms & Inputs",
|
|
1845
|
+
"description": "Textarea is an input component that allows users to enter multiple lines of unformatted text. Optionally includes a character counter displayed below the textarea.",
|
|
1846
|
+
"whenToUse": [
|
|
1847
|
+
"Users need to enter multiple lines of text",
|
|
1848
|
+
"Users need to enter unformatted text across several lines",
|
|
1849
|
+
"Display character count (entered or remaining) with counter feature",
|
|
1850
|
+
"Long-form text input without formatting requirements"
|
|
1851
|
+
],
|
|
1852
|
+
"whenToAvoid": [
|
|
1853
|
+
"Users only need to enter a single line of text → Use input component instead",
|
|
1854
|
+
"Users need to enter formatted text → Use rich text editor instead"
|
|
1855
|
+
],
|
|
1856
|
+
"bestPractices": [
|
|
1857
|
+
"Use for multi-line unformatted text entry",
|
|
1858
|
+
"Add counter to display number of characters entered or remaining",
|
|
1859
|
+
"Counter is displayed below the textarea",
|
|
1860
|
+
"Provide clear label describing expected content",
|
|
1861
|
+
"For single-line text, use input component instead",
|
|
1862
|
+
"For formatted text needs, use rich text editor"
|
|
1863
|
+
]
|
|
1864
|
+
},
|
|
1865
|
+
"time": {
|
|
1866
|
+
"id": "time",
|
|
1867
|
+
"name": "Time",
|
|
1868
|
+
"category": "Forms & Inputs",
|
|
1869
|
+
"description": "Time component is used to select a time value. Can choose hours, minutes, seconds, and/or period of day. Rarely used alone - typically paired with Time Picker pattern. Supports time selection, time ranges, and detailed durations.",
|
|
1870
|
+
"whenToUse": [
|
|
1871
|
+
"User needs to select a specific time",
|
|
1872
|
+
"User needs to select time range (start time and end time)",
|
|
1873
|
+
"User needs to select detailed duration (e.g., 1 minute 30 seconds)",
|
|
1874
|
+
"Precise time selection required",
|
|
1875
|
+
"Used within Time Picker pattern"
|
|
1876
|
+
],
|
|
1877
|
+
"whenToAvoid": [
|
|
1878
|
+
"Selecting simple duration (15min, 30min, 1hr, 2hr) → Use Select component instead",
|
|
1879
|
+
"Selecting date and time together → Use Date Picker (date/time variant) instead",
|
|
1880
|
+
"Approximate time needed → Consider simpler selection method",
|
|
1881
|
+
"Only hour selection needed → Use Select with hour options"
|
|
1882
|
+
],
|
|
1883
|
+
"bestPractices": [
|
|
1884
|
+
"Typically used within Time Picker pattern",
|
|
1885
|
+
"Can select hours, minutes, seconds, and period (AM/PM)",
|
|
1886
|
+
"Use for precise time selection",
|
|
1887
|
+
"Use two time pickers for time ranges (start and end)",
|
|
1888
|
+
"Support detailed duration selection (minutes and seconds)",
|
|
1889
|
+
"Provide clear labels for time fields",
|
|
1890
|
+
"Use 12-hour or 24-hour format based on locale",
|
|
1891
|
+
"Enable keyboard input for faster entry",
|
|
1892
|
+
"For simple durations, Select is more appropriate",
|
|
1893
|
+
"For date+time, use Date Picker instead"
|
|
1894
|
+
]
|
|
1895
|
+
},
|
|
1896
|
+
"time-picker": {
|
|
1897
|
+
"id": "time-picker",
|
|
1898
|
+
"name": "Time Picker",
|
|
1899
|
+
"category": "Forms & Inputs",
|
|
1900
|
+
"description": "Time Picker lets users select localized time using touch, mouse, or keyboard in 12/24-hour format. Users can type directly or use visual clock face for hours, minutes, seconds. Contains time input field and time picker popover with clock faces. Supports cozy and compact modes.",
|
|
1901
|
+
"whenToUse": [
|
|
1902
|
+
"Users need to select a time",
|
|
1903
|
+
"Users need to select time range (use two time pickers for start and end)",
|
|
1904
|
+
"Users need to select specific duration (e.g., 1 minute 30 seconds)",
|
|
1905
|
+
"Visual clock face selection is helpful",
|
|
1906
|
+
"Precise time input required"
|
|
1907
|
+
],
|
|
1908
|
+
"whenToAvoid": [
|
|
1909
|
+
"Selecting simple duration (15min, 30min, 1hr) → Use Select instead",
|
|
1910
|
+
"Selecting date and time together → Use Date Picker (date/time variant)",
|
|
1911
|
+
"Only approximate time needed → Simpler selection method"
|
|
1912
|
+
],
|
|
1913
|
+
"bestPractices": [
|
|
1914
|
+
"Time input field for direct entry or button to open popover",
|
|
1915
|
+
"Time picker popover with clock faces (hours, minutes, optional seconds)",
|
|
1916
|
+
"Hours clock face shows 12 or 24 hours based on format",
|
|
1917
|
+
"Optional seconds clock face (omit if not relevant)",
|
|
1918
|
+
"AM/PM switch using segmented button (12-hour format)",
|
|
1919
|
+
"Optional \"Now\" button (transparent icon button)",
|
|
1920
|
+
"Footer with Bar component and decisive buttons",
|
|
1921
|
+
"Cozy mode for larger touch targets, compact mode for dense UIs",
|
|
1922
|
+
"Mobile (size S): popover opens in subview, not below input field",
|
|
1923
|
+
"Two input methods: direct entry or clock face selection",
|
|
1924
|
+
"Enable keyboard, mouse, and touch input",
|
|
1925
|
+
"Use two time pickers for time ranges",
|
|
1926
|
+
"On mobile, time input field opens time input popover with touch keyboard",
|
|
1927
|
+
"Choose format (12/24-hour) based on locale"
|
|
1928
|
+
]
|
|
1929
|
+
},
|
|
1930
|
+
"token": {
|
|
1931
|
+
"id": "token",
|
|
1932
|
+
"name": "Token",
|
|
1933
|
+
"category": "Forms & Inputs",
|
|
1934
|
+
"description": "Tokens are small items of information (similar to tags) that visualize previously selected items. Tokenizer is the container that handles tokens. Tokens can be added, removed, selected, or deselected. Used only with Tokenizer container in multi-combo box, multi-input, or value help dialog.",
|
|
1935
|
+
"whenToUse": [
|
|
1936
|
+
"Visualize previously selected items",
|
|
1937
|
+
"Display multiple selections as removable tokens",
|
|
1938
|
+
"Used within Tokenizer container",
|
|
1939
|
+
"Multi-combo box implementation",
|
|
1940
|
+
"Multi-input control",
|
|
1941
|
+
"Value help dialog with multiple selections"
|
|
1942
|
+
],
|
|
1943
|
+
"whenToAvoid": [
|
|
1944
|
+
"Without Tokenizer container → Tokens require Tokenizer",
|
|
1945
|
+
"Single selection controls → Use other selection methods",
|
|
1946
|
+
"Outside multi-combo box, multi-input, or value help dialog → Not supported",
|
|
1947
|
+
"Static tags that cannot be removed → Use Generic Tag instead"
|
|
1948
|
+
],
|
|
1949
|
+
"bestPractices": [
|
|
1950
|
+
"Only use with Tokenizer as container",
|
|
1951
|
+
"Use Tokenizer only in multi-combo box, multi-input, or value help dialog",
|
|
1952
|
+
"Tokens can be added, removed, selected, or deselected",
|
|
1953
|
+
"Visualize selected items as small information chunks",
|
|
1954
|
+
"Allow users to remove tokens individually",
|
|
1955
|
+
"Provide clear visual feedback for selected/deselected state",
|
|
1956
|
+
"Similar to tags but specifically for selected items",
|
|
1957
|
+
"Tokens require Tokenizer container - cannot be used standalone",
|
|
1958
|
+
"Limited to specific components (multi-combo box, multi-input, value help dialog)"
|
|
1959
|
+
]
|
|
1960
|
+
},
|
|
1961
|
+
"tokenizer": {
|
|
1962
|
+
"id": "tokenizer",
|
|
1963
|
+
"name": "Tokenizer",
|
|
1964
|
+
"category": "Forms & Inputs",
|
|
1965
|
+
"description": "Tokenizer is a container that wraps multiple tokens. Used standalone or within input controls such as Multi Input. In cozy mode, users can swipe tokens left or right. Container for managing multiple token selections.",
|
|
1966
|
+
"whenToUse": [
|
|
1967
|
+
"Container for multiple tokens",
|
|
1968
|
+
"Within Multi Input control",
|
|
1969
|
+
"Within Multi Combobox control",
|
|
1970
|
+
"As standalone component for token management",
|
|
1971
|
+
"Managing multiple selected items as tokens",
|
|
1972
|
+
"Need to display and manage removable selections"
|
|
1973
|
+
],
|
|
1974
|
+
"whenToAvoid": [
|
|
1975
|
+
"Single selection → Use other single-selection controls",
|
|
1976
|
+
"Static non-removable items → Use List or other display component",
|
|
1977
|
+
"Without tokens → No need for tokenizer",
|
|
1978
|
+
"Simple tag display → Use Generic Tag component"
|
|
1979
|
+
],
|
|
1980
|
+
"bestPractices": [
|
|
1981
|
+
"Container that wraps multiple tokens",
|
|
1982
|
+
"Use in Multi Input, Multi Combobox, or standalone",
|
|
1983
|
+
"Cozy mode: users can swipe tokens left or right",
|
|
1984
|
+
"Allows adding, removing, selecting, deselecting tokens",
|
|
1985
|
+
"Provides container for token management",
|
|
1986
|
+
"Supports keyboard navigation between tokens",
|
|
1987
|
+
"Clear visual separation between tokens",
|
|
1988
|
+
"In cozy mode, enable swipe gestures for token interaction",
|
|
1989
|
+
"Ensure adequate space for token display"
|
|
1990
|
+
]
|
|
1991
|
+
},
|
|
1992
|
+
"upload-collection": {
|
|
1993
|
+
"id": "upload-collection",
|
|
1994
|
+
"name": "Upload Collection",
|
|
1995
|
+
"category": "Forms & Inputs",
|
|
1996
|
+
"description": "Upload Collection allows users to upload single or multiple files from device (desktop, tablet, phone) to SAP app. Shows list of uploaded files that can be modified. Users can add/remove files and change file names. Typically displayed in Attachments tab but can appear elsewhere.",
|
|
1997
|
+
"whenToUse": [
|
|
1998
|
+
"Show list of uploaded files that can be modified",
|
|
1999
|
+
"Allow users to add or remove files",
|
|
2000
|
+
"Allow users to change file names",
|
|
2001
|
+
"Multiple file uploads needed",
|
|
2002
|
+
"Display uploaded attachments",
|
|
2003
|
+
"Manage collection of uploaded files",
|
|
2004
|
+
"Replacing old sap.ca.ui.FileUpload control"
|
|
2005
|
+
],
|
|
2006
|
+
"whenToAvoid": [
|
|
2007
|
+
"User can upload only one file → Use File Uploader control instead",
|
|
2008
|
+
"Files are read-only (no modification needed) → Use simple List",
|
|
2009
|
+
"Simple file selection without upload management → Use File Uploader"
|
|
2010
|
+
],
|
|
2011
|
+
"bestPractices": [
|
|
2012
|
+
"Use for modifiable list of uploaded files",
|
|
2013
|
+
"Allow adding and removing files",
|
|
2014
|
+
"Allow changing file names",
|
|
2015
|
+
"Support single or multiple file uploads",
|
|
2016
|
+
"Works on desktop, tablet, and phone",
|
|
2017
|
+
"Typically display in Attachments tab",
|
|
2018
|
+
"Show file metadata (name, size, type, date)",
|
|
2019
|
+
"Provide delete/remove action for each file",
|
|
2020
|
+
"Allow file name editing",
|
|
2021
|
+
"Show upload progress for new files",
|
|
2022
|
+
"For single file upload, use File Uploader instead",
|
|
2023
|
+
"Consider file size limits and validation"
|
|
2024
|
+
]
|
|
2025
|
+
},
|
|
2026
|
+
"action-bar": {
|
|
2027
|
+
"id": "action-bar",
|
|
2028
|
+
"name": "Action Bar",
|
|
2029
|
+
"category": "Layout & Containers",
|
|
2030
|
+
"description": "The action bar displays at the top of the page, and includes the page's title, description, back button and action buttons. It provides page-level navigation and actions.",
|
|
2031
|
+
"whenToUse": [
|
|
2032
|
+
"Display the page title and description at the top of the page",
|
|
2033
|
+
"Provide a back button for navigation to the previous page",
|
|
2034
|
+
"Show page-level action buttons that affect all items or the entire view",
|
|
2035
|
+
"Control settings of the UI that apply globally to the page",
|
|
2036
|
+
"Display actions at the top of the screen that are always visible"
|
|
2037
|
+
],
|
|
2038
|
+
"whenToAvoid": [
|
|
2039
|
+
"Finalizing actions at the bottom of the screen → Use `fd-bar` with footer mode instead",
|
|
2040
|
+
"Item-specific actions → Use `fd-toolbar` for item-level controls",
|
|
2041
|
+
"Application-level navigation → Use `fd-shellbar` instead"
|
|
2042
|
+
],
|
|
2043
|
+
"bestPractices": [
|
|
2044
|
+
"Use the `fd-title` component with proper semantic heading levels (H1 styled as H3)",
|
|
2045
|
+
"Include a back button on the left side for navigation hierarchy",
|
|
2046
|
+
"Place page title and description prominently",
|
|
2047
|
+
"Position primary actions on the right side",
|
|
2048
|
+
"Use `fd-button--emphasized` for the primary page action",
|
|
2049
|
+
"Keep action buttons concise and clearly labeled",
|
|
2050
|
+
"Make the action bar sticky (fixed to top) for long scrolling pages",
|
|
2051
|
+
"Limit the number of action buttons (3-5 maximum)",
|
|
2052
|
+
"For accessibility, the page title must be an H1 (use `fd-title` with `--h3` for visual styling)"
|
|
2053
|
+
]
|
|
2054
|
+
},
|
|
2055
|
+
"bar": {
|
|
2056
|
+
"id": "bar",
|
|
2057
|
+
"name": "Bar",
|
|
2058
|
+
"category": "Layout & Containers",
|
|
2059
|
+
"description": "The bar is a container that can hold text, titles, buttons, and input elements. It provides a structured layout for page headers, subheaders, footers, and floating footers.",
|
|
2060
|
+
"whenToUse": [
|
|
2061
|
+
"Page headers, subheaders, footers, and floating footers used on a page, dialog, or popover",
|
|
2062
|
+
"Container for a small number of components",
|
|
2063
|
+
"Dialog headers and footers",
|
|
2064
|
+
"Page-level bars with title and actions",
|
|
2065
|
+
"Footer bars with action buttons"
|
|
2066
|
+
],
|
|
2067
|
+
"whenToAvoid": [
|
|
2068
|
+
"Container for a larger number of components with built-in overflow menu → Use `fd-toolbar` instead"
|
|
2069
|
+
],
|
|
2070
|
+
"bestPractices": [
|
|
2071
|
+
"Use `fd-bar--header` for header bars",
|
|
2072
|
+
"Use `fd-bar--subheader` for subheaders",
|
|
2073
|
+
"Use `fd-bar--footer` for footer bars",
|
|
2074
|
+
"Use `fd-bar--floating-footer` for floating footers",
|
|
2075
|
+
"Use `fd-bar__left` and `fd-bar__right` to position content",
|
|
2076
|
+
"Keep the number of components manageable (use toolbar for more complex layouts)",
|
|
2077
|
+
"Use `fd-bar__element` to wrap each component within the bar",
|
|
2078
|
+
"For many actions or overflow menus, use toolbar instead"
|
|
2079
|
+
]
|
|
2080
|
+
},
|
|
2081
|
+
"card": {
|
|
2082
|
+
"id": "card",
|
|
2083
|
+
"name": "Card",
|
|
2084
|
+
"category": "Layout & Containers",
|
|
2085
|
+
"description": "A card is a container that represents an app or page, providing easy access and content preview. It consists of optional building blocks: Header, Extended Header, Numeric Content, Content, Footer, and Media Block. Cards display various content types including charts, lists, tables, objects, and text.",
|
|
2086
|
+
"whenToUse": [
|
|
2087
|
+
"Give users easy access to an app or page relevant for a business task",
|
|
2088
|
+
"Show a KPI or preview of the most important content",
|
|
2089
|
+
"Let users complete a simple action without navigating to the underlying app",
|
|
2090
|
+
"Display content types like charts, lists, tables, objects, or informative text",
|
|
2091
|
+
"Offer cards on SAP Fiori launchpad or embed in other controls",
|
|
2092
|
+
"Focus on a single object/topic or a group of objects"
|
|
2093
|
+
],
|
|
2094
|
+
"whenToAvoid": [
|
|
2095
|
+
"Cards for the same application should have distinct information from one another",
|
|
2096
|
+
"Don't make cards editable - card sizes vary depending on layout and are fixed"
|
|
2097
|
+
],
|
|
2098
|
+
"bestPractices": [
|
|
2099
|
+
"Use optional building blocks: Header, Extended Header, Numeric Content, Content, Footer, Media Block",
|
|
2100
|
+
"Place Header either above or below Content (not separated with a line)",
|
|
2101
|
+
"Card width adapts to its parent container",
|
|
2102
|
+
"Each card should focus on either a single object/topic or a group of objects",
|
|
2103
|
+
"Ensure cards referencing the same application have distinct information",
|
|
2104
|
+
"Card sizes are not editable and vary depending on layout",
|
|
2105
|
+
"All building blocks (Header, Content, Footer, etc.) are optional"
|
|
2106
|
+
]
|
|
2107
|
+
},
|
|
2108
|
+
"dynamic-page": {
|
|
2109
|
+
"id": "dynamic-page",
|
|
2110
|
+
"name": "Dynamic Page",
|
|
2111
|
+
"category": "Layout & Containers",
|
|
2112
|
+
"description": "Dynamic Page is foundation for all SAP pages. Generic layout supporting various use cases with variable header and page content. Header is collapsible to help users focus on content while keeping important header info and actions readily available. Uses foundation layout components (dynamic page header, footer toolbar).",
|
|
2113
|
+
"whenToUse": [
|
|
2114
|
+
"Build freestyle application using SAP foundation layout components",
|
|
2115
|
+
"Need collapsible header for focus on page content",
|
|
2116
|
+
"Use dynamic page header and footer toolbar",
|
|
2117
|
+
"Standard SAP page layout required",
|
|
2118
|
+
"Variable content in header and page",
|
|
2119
|
+
"Multiple sections with collapsible header"
|
|
2120
|
+
],
|
|
2121
|
+
"whenToAvoid": [
|
|
2122
|
+
"Only small amount of information → Use Dialog instead",
|
|
2123
|
+
"Simple content that fits in dialog → Use Dialog",
|
|
2124
|
+
"If using Dynamic Page is unavoidable for small content → Use letterboxing to mitigate"
|
|
2125
|
+
],
|
|
2126
|
+
"bestPractices": [
|
|
2127
|
+
"Foundation for all SAP pages",
|
|
2128
|
+
"Generic layout supporting various use cases",
|
|
2129
|
+
"Variable content in header and page",
|
|
2130
|
+
"Collapsible header for content focus",
|
|
2131
|
+
"Important header info and actions remain readily available",
|
|
2132
|
+
"Use dynamic page header component",
|
|
2133
|
+
"Use footer toolbar component",
|
|
2134
|
+
"Use letterboxing when displaying small amounts of information",
|
|
2135
|
+
"Avoid for very small amounts of information",
|
|
2136
|
+
"Consider Dialog for simple content"
|
|
2137
|
+
]
|
|
2138
|
+
},
|
|
2139
|
+
"dynamic-side-content": {
|
|
2140
|
+
"id": "dynamic-side-content",
|
|
2141
|
+
"name": "Dynamic Side Content",
|
|
2142
|
+
"category": "Layout & Containers",
|
|
2143
|
+
"description": "Dynamic Side Content is layout control displaying supplemental content in separate area to support understanding of main content. Two elements: side content section (`.fd-dynamic-side__side`) and main content section (`.fd-dynamic-side__main`). Screen width ratio varies based on available space - side displays left/right or bottom if space limited.",
|
|
2144
|
+
"whenToUse": [
|
|
2145
|
+
"Display information enriching main content and helping users perform tasks",
|
|
2146
|
+
"Information only makes sense side-by-side with main container",
|
|
2147
|
+
"Content influences main content (filter for list, settings for chart, details for map)",
|
|
2148
|
+
"Supplemental content supports main content understanding",
|
|
2149
|
+
"Need adaptive layout based on screen size",
|
|
2150
|
+
"Side-by-side display of related information"
|
|
2151
|
+
],
|
|
2152
|
+
"whenToAvoid": [
|
|
2153
|
+
"Critical information that must always be visible → Include in main content",
|
|
2154
|
+
"Key functions needed even without side content → Put in main area",
|
|
2155
|
+
"Content not related to main area → Use separate section",
|
|
2156
|
+
"Small screens where side content is inaccessible → Ensure key info in main"
|
|
2157
|
+
],
|
|
2158
|
+
"bestPractices": [
|
|
2159
|
+
"Side content enriches main content",
|
|
2160
|
+
"Use `.fd-dynamic-side__side` for side content section",
|
|
2161
|
+
"Use `.fd-dynamic-side__main` for main content section",
|
|
2162
|
+
"Screen width ratio varies based on available space",
|
|
2163
|
+
"Display side content left or right (default)",
|
|
2164
|
+
"Display at bottom if space limited",
|
|
2165
|
+
"Users can access all key functions and critical info without side content",
|
|
2166
|
+
"Use for filters, settings, details supporting main content",
|
|
2167
|
+
"Information only makes sense displayed side-by-side",
|
|
2168
|
+
"Key functions must remain accessible without side content",
|
|
2169
|
+
"Critical information should not depend on side content visibility"
|
|
2170
|
+
]
|
|
2171
|
+
},
|
|
2172
|
+
"flexible-column-layout": {
|
|
2173
|
+
"id": "flexible-column-layout",
|
|
2174
|
+
"name": "Flexible Column Layout",
|
|
2175
|
+
"category": "Layout & Containers",
|
|
2176
|
+
"description": "Flexible Column Layout is layout control displaying multiple floorplans on single page. Enables faster, more fluid navigation between floorplans than page-by-page. Offers layouts with up to 3 columns (1, 2, 3). Users can resize columns, switch layouts, view rightmost column in full screen. Responsive for desktop and mobile.",
|
|
2177
|
+
"whenToUse": [
|
|
2178
|
+
"Create list-detail or list-detail-detail layout",
|
|
2179
|
+
"Enable drill-down or navigation between floorplans",
|
|
2180
|
+
"Faster navigation between multiple floorplans",
|
|
2181
|
+
"Display up to 3 columns of related content",
|
|
2182
|
+
"Allow users to resize columns and switch layouts",
|
|
2183
|
+
"Responsive design needed for desktop and mobile"
|
|
2184
|
+
],
|
|
2185
|
+
"whenToAvoid": [
|
|
2186
|
+
"Build workbench or tools layout → Not for main column with side columns",
|
|
2187
|
+
"Display additional content enriching main content → Use Dynamic Side Content instead",
|
|
2188
|
+
"Create dashboard with context-independent pages → Not appropriate",
|
|
2189
|
+
"Open multiple instances of same object type → Use multi-instance handling floorplan",
|
|
2190
|
+
"Split single object into multiple columns → Not designed for this",
|
|
2191
|
+
"Display only small amount of information → Overkill",
|
|
2192
|
+
"Embed SAP Fiori launchpad or overview page in columns → Not supported"
|
|
2193
|
+
],
|
|
2194
|
+
"bestPractices": [
|
|
2195
|
+
"Generic layout container - does not provide content itself",
|
|
2196
|
+
"Supports 1, 2, or 3 columns",
|
|
2197
|
+
"Users can freely resize columns",
|
|
2198
|
+
"Users can switch between different layouts",
|
|
2199
|
+
"Rightmost column viewable in full screen mode",
|
|
2200
|
+
"Responsive behavior for desktop and mobile",
|
|
2201
|
+
"Optimized layout loaded based on screen width",
|
|
2202
|
+
"Best for list-detail or list-detail-detail patterns",
|
|
2203
|
+
"Enables drill-down navigation",
|
|
2204
|
+
"Not meant for main column with side columns",
|
|
2205
|
+
"Use Dynamic Side Content for enriching main content"
|
|
2206
|
+
]
|
|
2207
|
+
},
|
|
2208
|
+
"layout-panel": {
|
|
2209
|
+
"id": "layout-panel",
|
|
2210
|
+
"name": "Layout Panel",
|
|
2211
|
+
"category": "Layout & Containers",
|
|
2212
|
+
"description": "Layout Panels encapsulate part of content, form elements, lists, collections on a page. Place patterns and interactions within panels to achieve focus and separation for tasks with information displayed inside panel. Organizes content into distinct sections.",
|
|
2213
|
+
"whenToUse": [
|
|
2214
|
+
"Encapsulate part of content on page",
|
|
2215
|
+
"Group form elements together",
|
|
2216
|
+
"Display lists or collections in contained area",
|
|
2217
|
+
"Achieve focus and separation for tasks",
|
|
2218
|
+
"Organize information into distinct sections",
|
|
2219
|
+
"Create visual boundaries between content areas",
|
|
2220
|
+
"Group related content and interactions"
|
|
2221
|
+
],
|
|
2222
|
+
"whenToAvoid": [
|
|
2223
|
+
"Single piece of content that doesn't need grouping → Use directly on page",
|
|
2224
|
+
"Full-page layouts → Use Dynamic Page or other layout controls",
|
|
2225
|
+
"Very small content that looks cramped in panel → Use directly on page",
|
|
2226
|
+
"Unnecessary visual separation → Avoid panel overhead"
|
|
2227
|
+
],
|
|
2228
|
+
"bestPractices": [
|
|
2229
|
+
"Encapsulate content, form elements, lists, collections",
|
|
2230
|
+
"Place patterns and interactions within panels",
|
|
2231
|
+
"Achieve focus and separation for tasks",
|
|
2232
|
+
"Display information inside panel with clear boundaries",
|
|
2233
|
+
"Group related content together",
|
|
2234
|
+
"Use for organizing page sections",
|
|
2235
|
+
"Provide visual separation between content areas",
|
|
2236
|
+
"Help users focus on specific task or information group",
|
|
2237
|
+
"Don't overuse - too many panels can fragment UI",
|
|
2238
|
+
"Ensure content benefits from panel encapsulation"
|
|
2239
|
+
]
|
|
2240
|
+
},
|
|
2241
|
+
"panel": {
|
|
2242
|
+
"id": "panel",
|
|
2243
|
+
"name": "Panel",
|
|
2244
|
+
"category": "Layout & Containers",
|
|
2245
|
+
"description": "Panel is a container for grouping and displaying information. Panels are responsive and can be collapsed to save screen space. Available in two types: fixed (always visible) and expandable (collapsible).",
|
|
2246
|
+
"whenToUse": [
|
|
2247
|
+
"Group or display related information together",
|
|
2248
|
+
"Give users option to hide information to save space",
|
|
2249
|
+
"Show additional information on demand (e.g., optional advanced search fields)",
|
|
2250
|
+
"Create collapsible sections for better content organization",
|
|
2251
|
+
"Display optional content that doesn't need to be visible at all times"
|
|
2252
|
+
],
|
|
2253
|
+
"whenToAvoid": [
|
|
2254
|
+
"In the content area of Dynamic Page → Use Dynamic Page's native sections instead",
|
|
2255
|
+
"For critical information that must always be visible → Use fixed container instead",
|
|
2256
|
+
"Single piece of content that doesn't need grouping → Use plain container"
|
|
2257
|
+
],
|
|
2258
|
+
"bestPractices": [
|
|
2259
|
+
"Use expandable type for optional or supplementary content",
|
|
2260
|
+
"Use fixed type for important information that should always be visible",
|
|
2261
|
+
"Provide clear panel titles that describe the grouped content",
|
|
2262
|
+
"Start with collapsed state for non-essential information",
|
|
2263
|
+
"Start with expanded state for frequently accessed content",
|
|
2264
|
+
"Keep panel content focused and related",
|
|
2265
|
+
"Use consistent panel styling throughout the application",
|
|
2266
|
+
"Avoid nesting too many panels (2 levels maximum)",
|
|
2267
|
+
"Don't hide critical information in collapsed panels"
|
|
2268
|
+
]
|
|
2269
|
+
},
|
|
2270
|
+
"settings": {
|
|
2271
|
+
"id": "settings",
|
|
2272
|
+
"name": "Settings",
|
|
2273
|
+
"category": "Layout & Containers",
|
|
2274
|
+
"description": "Settings Dialog allows users to personalize their Fiori experience by adjusting various settings. Standard dialog format with split layout: list of option groups on left, corresponding settings details on right. Built using Toolbar, IconTabBar, Bar, and form components.",
|
|
2275
|
+
"whenToUse": [
|
|
2276
|
+
"Allow users to personalize application experience",
|
|
2277
|
+
"Adjust various application settings",
|
|
2278
|
+
"Organize settings into logical groups",
|
|
2279
|
+
"Provide comprehensive settings management interface",
|
|
2280
|
+
"Split settings into categories for better organization"
|
|
2281
|
+
],
|
|
2282
|
+
"whenToAvoid": [
|
|
2283
|
+
"Single setting or preference → Use inline control or simple dialog",
|
|
2284
|
+
"Quick toggles needed → Use menu with switches",
|
|
2285
|
+
"Settings that affect single page only → Use page-level controls",
|
|
2286
|
+
"Simple on/off preferences → Use switch or checkbox in context"
|
|
2287
|
+
],
|
|
2288
|
+
"bestPractices": [
|
|
2289
|
+
"Use split layout: list area (left) and detail area (right)",
|
|
2290
|
+
"List area contains groups of settings",
|
|
2291
|
+
"Detail area shows settings for selected group",
|
|
2292
|
+
"Detail header varies based on selection (built with Toolbar, IconTabBar, Bar)",
|
|
2293
|
+
"Use forms in content area to lay out controls",
|
|
2294
|
+
"Make content area scrollable if needed",
|
|
2295
|
+
"Use standard Page Footer layout for actions",
|
|
2296
|
+
"Group related settings together logically",
|
|
2297
|
+
"Provide clear labels and descriptions for settings",
|
|
2298
|
+
"Save/Cancel actions in footer",
|
|
2299
|
+
"Organize settings into meaningful groups",
|
|
2300
|
+
"Consider providing search for many settings"
|
|
2301
|
+
]
|
|
2302
|
+
},
|
|
2303
|
+
"tool-layout": {
|
|
2304
|
+
"id": "tool-layout",
|
|
2305
|
+
"name": "Tool Layout",
|
|
2306
|
+
"category": "Layout & Containers",
|
|
2307
|
+
"description": "Tool Layout consists of three main areas: Tool Header (always present, top-aligned with global actions and navigation controls), Navigation (side navigation in expanded/snapped variants), and Content (empty container for any content). Complete layout structure for tool-based applications.",
|
|
2308
|
+
"whenToUse": [
|
|
2309
|
+
"Build tool-based applications",
|
|
2310
|
+
"Need top-aligned header with global actions",
|
|
2311
|
+
"Need side navigation control",
|
|
2312
|
+
"Structure with header, navigation, and content areas",
|
|
2313
|
+
"Applications requiring persistent navigation",
|
|
2314
|
+
"Tool or workspace layouts"
|
|
2315
|
+
],
|
|
2316
|
+
"whenToAvoid": [
|
|
2317
|
+
"Simple page layouts → Use Dynamic Page",
|
|
2318
|
+
"Content-focused pages without tools → Use other layout controls",
|
|
2319
|
+
"No navigation needed → Simpler layout appropriate",
|
|
2320
|
+
"Dashboard layouts → Use appropriate dashboard layout"
|
|
2321
|
+
],
|
|
2322
|
+
"bestPractices": [
|
|
2323
|
+
"Tool Header always present at top",
|
|
2324
|
+
"Header contains global actions and controls navigation",
|
|
2325
|
+
"Navigation is side navigation (expanded or snapped variants)",
|
|
2326
|
+
"Content is empty container that can hold any content",
|
|
2327
|
+
"Three main areas: header, navigation, content",
|
|
2328
|
+
"Top-aligned UI element for header",
|
|
2329
|
+
"Side navigation in all variants",
|
|
2330
|
+
"Flexible content area",
|
|
2331
|
+
"Tool Header is required - always present",
|
|
2332
|
+
"Ensure proper structure with all three areas"
|
|
2333
|
+
]
|
|
2334
|
+
},
|
|
2335
|
+
"wizard": {
|
|
2336
|
+
"id": "wizard",
|
|
2337
|
+
"name": "Wizard",
|
|
2338
|
+
"category": "Layout & Containers",
|
|
2339
|
+
"description": "Wizard guides user through long or unfamiliar task by dividing into sections, revealing information in digestible way. Consists of walkthrough screen (input required info) and summary page (read-only review before submission). Two types: standard (linear, known steps) and branching (non-linear, variable steps). Supports 3-8 steps, optional steps allowed.",
|
|
2340
|
+
"whenToUse": [
|
|
2341
|
+
"User has to accomplish long or unfamiliar task",
|
|
2342
|
+
"Task consists of minimum 3 and maximum 8 steps",
|
|
2343
|
+
"Linear progression through known steps (standard type)",
|
|
2344
|
+
"Non-linear progression with variable steps (branching type)",
|
|
2345
|
+
"Multi-step data entry or configuration",
|
|
2346
|
+
"Complex process needs guidance",
|
|
2347
|
+
"Final review before submission needed"
|
|
2348
|
+
],
|
|
2349
|
+
"whenToAvoid": [
|
|
2350
|
+
"Task has only 2 steps → Use simple two-page flow or dialog",
|
|
2351
|
+
"Task has more than 8 steps → Break into multiple smaller wizards",
|
|
2352
|
+
"Task format familiar to user → Use standard form",
|
|
2353
|
+
"Simple single-page form → No wizard needed"
|
|
2354
|
+
],
|
|
2355
|
+
"bestPractices": [
|
|
2356
|
+
"Standard type: total steps known, linear progression, fixed step count",
|
|
2357
|
+
"Branching type: steps not known, variable count, non-linear progression",
|
|
2358
|
+
"3-8 steps (minimum 3, maximum 8)",
|
|
2359
|
+
"Label optional steps as \"Optional\"",
|
|
2360
|
+
"Allow skipping optional steps",
|
|
2361
|
+
"Include walkthrough screen for input",
|
|
2362
|
+
"Include summary page for read-only review",
|
|
2363
|
+
"Use in full-screen or flexible column layout",
|
|
2364
|
+
"Navigate back to originating page after completion/cancellation",
|
|
2365
|
+
"No navigation to next page from wizard",
|
|
2366
|
+
"Show progress indicator (current step / total steps)",
|
|
2367
|
+
"Provide Next/Back navigation buttons",
|
|
2368
|
+
"For 2 steps, use simpler approach",
|
|
2369
|
+
"For >8 steps, split into multiple wizards"
|
|
2370
|
+
]
|
|
2371
|
+
},
|
|
2372
|
+
"breadcrumb": {
|
|
2373
|
+
"id": "breadcrumb",
|
|
2374
|
+
"name": "Breadcrumb",
|
|
2375
|
+
"category": "Navigation",
|
|
2376
|
+
"description": "A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically used for drilldown scenarios where users navigate through related object pages, tables, and charts.",
|
|
2377
|
+
"whenToUse": [
|
|
2378
|
+
"Show secondary navigation on the object page",
|
|
2379
|
+
"Show navigation in a table",
|
|
2380
|
+
"Show navigation in charts",
|
|
2381
|
+
"Support a user flow that involves drilling down through multiple related object pages (Parent → Child 1 → Child 2 → Child 3)",
|
|
2382
|
+
"Display the current location in a hierarchy",
|
|
2383
|
+
"Enable navigation back to parent pages"
|
|
2384
|
+
],
|
|
2385
|
+
"whenToAvoid": [
|
|
2386
|
+
"Your hierarchy contains only one level",
|
|
2387
|
+
"Linking to other floorplans, such as overview pages or list reports",
|
|
2388
|
+
"Navigating across applications to unrelated object pages",
|
|
2389
|
+
"Linking to standalone object pages, such as fact sheets → Use global navigation instead"
|
|
2390
|
+
],
|
|
2391
|
+
"bestPractices": [
|
|
2392
|
+
"Use separator modifiers: `fd-breadcrumb--backslash` or `fd-breadcrumb--double-greater-than`",
|
|
2393
|
+
"Current item can be displayed as non-interactive (without separator) or as a regular link",
|
|
2394
|
+
"Use overflow breadcrumb with `fd-popover` for long paths with insufficient horizontal space",
|
|
2395
|
+
"Make each breadcrumb item clickable to navigate to that level",
|
|
2396
|
+
"Display breadcrumbs horizontally in a single line",
|
|
2397
|
+
"Use overflow dropdown menu when there are too many levels",
|
|
2398
|
+
"Implement responsive behavior to collapse into dropdown on small screens",
|
|
2399
|
+
"Keep breadcrumb hierarchy meaningful and accurate"
|
|
2400
|
+
]
|
|
2401
|
+
},
|
|
2402
|
+
"icon-tab-bar": {
|
|
2403
|
+
"id": "icon-tab-bar",
|
|
2404
|
+
"name": "Icon Tab Bar",
|
|
2405
|
+
"category": "Navigation",
|
|
2406
|
+
"description": "Navigation and filtering control containing tabs that display icons, text, or both, linking to different content areas or views. Two key use cases: navigate between content sections or filter lists (showing all items or those matching specific attributes). Users switch tabs by clicking.",
|
|
2407
|
+
"whenToUse": [
|
|
2408
|
+
"Business objects need to show multiple facets simultaneously",
|
|
2409
|
+
"Allow users to browse through different facets",
|
|
2410
|
+
"Need prominent or visual filter on top of a list",
|
|
2411
|
+
"Clear-cut process steps need visualization",
|
|
2412
|
+
"Navigate between different content sections on screen",
|
|
2413
|
+
"Filter lists with option to display all or filtered items"
|
|
2414
|
+
],
|
|
2415
|
+
"whenToAvoid": [
|
|
2416
|
+
"Planning to use only one single tab",
|
|
2417
|
+
"Displaying tabs in responsive table or grid layout → Use table toolbar instead",
|
|
2418
|
+
"Displaying hierarchical navigation → Use tree or breadcrumb instead",
|
|
2419
|
+
"Navigating to unrelated pages → Use links or navigation components instead"
|
|
2420
|
+
],
|
|
2421
|
+
"bestPractices": [
|
|
2422
|
+
"Use for multiple facets of business objects",
|
|
2423
|
+
"Use for prominent visual filtering",
|
|
2424
|
+
"Each tab can display icon, text, or both",
|
|
2425
|
+
"Users switch between tabs by clicking",
|
|
2426
|
+
"Good for clear-cut process steps visualization",
|
|
2427
|
+
"Requires at least two tabs (not for single tab)",
|
|
2428
|
+
"For hierarchical navigation, use tree or breadcrumb instead"
|
|
2429
|
+
]
|
|
2430
|
+
},
|
|
2431
|
+
"link": {
|
|
2432
|
+
"id": "link",
|
|
2433
|
+
"name": "Link",
|
|
2434
|
+
"category": "Navigation",
|
|
2435
|
+
"description": "Link (hyperlink) is interactive text that allows users to navigate to another page or trigger events. Can include icons and supports touch target sizing for accessibility (WCAG 2.2 minimum touch target requirements).",
|
|
2436
|
+
"whenToUse": [
|
|
2437
|
+
"Navigate to another page",
|
|
2438
|
+
"Trigger an event",
|
|
2439
|
+
"Point to an object or person (navigate to details or display in quick view)",
|
|
2440
|
+
"Use meaningful link text indicating what happens when clicked (e.g., \"Open Sales Order\")",
|
|
2441
|
+
"Primary action inside interactive containers (table cells, list items) - use `fd-link--touch-target` modifier"
|
|
2442
|
+
],
|
|
2443
|
+
"whenToAvoid": [
|
|
2444
|
+
"Action could be triggered by Button instead → Use Button",
|
|
2445
|
+
"No target or reference to link to",
|
|
2446
|
+
"Inline text or dense text areas where increased line height disrupts flow → Don't use `fd-link--touch-target`"
|
|
2447
|
+
],
|
|
2448
|
+
"bestPractices": [
|
|
2449
|
+
"Use meaningful link text (e.g., \"Open Sales Order\" not \"Click Here\")",
|
|
2450
|
+
"Indicate purpose clearly (avoid generic texts like \"Link\" or \"Click Here\")",
|
|
2451
|
+
"Use `fd-link--touch-target` for links inside actionable containers (table rows, list items)",
|
|
2452
|
+
"`fd-link--touch-target` sets line height to 1.5rem (24px) for touch target requirements",
|
|
2453
|
+
"Can include icons",
|
|
2454
|
+
"Don't use `fd-link--touch-target` in inline text or dense areas (causes misalignment)",
|
|
2455
|
+
"Only use when there's a clear target or reference to link to"
|
|
2456
|
+
]
|
|
2457
|
+
},
|
|
2458
|
+
"menu": {
|
|
2459
|
+
"id": "menu",
|
|
2460
|
+
"name": "Menu",
|
|
2461
|
+
"category": "Navigation",
|
|
2462
|
+
"description": "Menu is a listing structure with optional headers for creating menus. Commonly used as contents for dropdowns, contextual menus, etc., when paired with the popover component.",
|
|
2463
|
+
"whenToUse": [
|
|
2464
|
+
"Offer more than one action",
|
|
2465
|
+
"Users need to stay in a certain context",
|
|
2466
|
+
"Small number of actions available",
|
|
2467
|
+
"Create dropdowns or contextual menus (pair with popover component)"
|
|
2468
|
+
],
|
|
2469
|
+
"whenToAvoid": [
|
|
2470
|
+
"Providing only one option → Use button instead",
|
|
2471
|
+
"Users would benefit from split button (easy-to-access default action with option for other actions) → Use split button instead"
|
|
2472
|
+
],
|
|
2473
|
+
"bestPractices": [
|
|
2474
|
+
"Use for multiple actions (not single action)",
|
|
2475
|
+
"Pair with popover component for dropdowns and contextual menus",
|
|
2476
|
+
"Include optional headers to organize menu items",
|
|
2477
|
+
"Keep number of actions small and manageable",
|
|
2478
|
+
"Helps users stay in context while choosing actions",
|
|
2479
|
+
"Requires more than one action (use button for single action)",
|
|
2480
|
+
"Consider split button when there's a clear default action"
|
|
2481
|
+
]
|
|
2482
|
+
},
|
|
2483
|
+
"pagination": {
|
|
2484
|
+
"id": "pagination",
|
|
2485
|
+
"name": "Pagination",
|
|
2486
|
+
"category": "Navigation",
|
|
2487
|
+
"description": "Pagination allows users to separate content into discrete pages, making it easier to digest and navigate through large sets of items. Commonly used for tables and tiles. Supports two display modes: standard (>9 pages with input) and short (<9 pages showing all).",
|
|
2488
|
+
"whenToUse": [
|
|
2489
|
+
"User needs to search through several related items (over 30 items)",
|
|
2490
|
+
"Content contains products users can choose from",
|
|
2491
|
+
"Allow users to bookmark specific pages",
|
|
2492
|
+
"Optimize content for search engines",
|
|
2493
|
+
"Navigate through large data sets or product listings",
|
|
2494
|
+
"Display tables or tile collections with many items"
|
|
2495
|
+
],
|
|
2496
|
+
"whenToAvoid": [
|
|
2497
|
+
"Small data sets (under 30 items) → Show all items or use scrolling instead",
|
|
2498
|
+
"Real-time data that updates frequently → Use infinite scroll or live updates",
|
|
2499
|
+
"Content that should be viewed sequentially → Use stepper or wizard instead"
|
|
2500
|
+
],
|
|
2501
|
+
"bestPractices": [
|
|
2502
|
+
"Use `fd-pagination--short` class for under 9 pages (shows all page buttons)",
|
|
2503
|
+
"For over 9 pages: show 9 elements (pages, more symbols, current page) with input field",
|
|
2504
|
+
"Highlight current page with active state button",
|
|
2505
|
+
"Include first/last page navigation buttons",
|
|
2506
|
+
"Show total number of items and current range",
|
|
2507
|
+
"Use input field for direct page navigation on large data sets",
|
|
2508
|
+
"Enable keyboard navigation (arrow keys, Enter)",
|
|
2509
|
+
"Maintain page state in URL for bookmarking",
|
|
2510
|
+
"Threshold of 30 items is a guideline - adjust based on item density",
|
|
2511
|
+
"Consider infinite scroll for mobile experiences"
|
|
2512
|
+
]
|
|
2513
|
+
},
|
|
2514
|
+
"shellbar": {
|
|
2515
|
+
"id": "shellbar",
|
|
2516
|
+
"name": "Shellbar",
|
|
2517
|
+
"category": "Navigation",
|
|
2518
|
+
"description": "Shellbar serves as the topmost section across all SAP products, helping users orient within SAP product landscape. Always visible, provides context about current location with product/brand details. Contains two container groups: Product (branding and product elements) and Actions (search, product links, user settings).",
|
|
2519
|
+
"whenToUse": [
|
|
2520
|
+
"Topmost navigation section across SAP products",
|
|
2521
|
+
"Display product and brand information",
|
|
2522
|
+
"Provide access to search functionality",
|
|
2523
|
+
"Show notifications, user profile, and settings",
|
|
2524
|
+
"Offer product switching and navigation",
|
|
2525
|
+
"Maintain consistent orientation across applications",
|
|
2526
|
+
"Display product context and user actions"
|
|
2527
|
+
],
|
|
2528
|
+
"whenToAvoid": [
|
|
2529
|
+
"Application-specific navigation → Use side navigation or tabs",
|
|
2530
|
+
"Page-level actions → Use Action Bar instead",
|
|
2531
|
+
"Non-SAP products → May not fit branding requirements",
|
|
2532
|
+
"Simple single-page apps → May be unnecessary overhead"
|
|
2533
|
+
],
|
|
2534
|
+
"bestPractices": [
|
|
2535
|
+
"Always visible at top of all pages",
|
|
2536
|
+
"Use Product container for branding and product elements",
|
|
2537
|
+
"Use Actions container for search, links, and user settings",
|
|
2538
|
+
"Include product name and logo",
|
|
2539
|
+
"Provide search access (if applicable)",
|
|
2540
|
+
"Show notifications icon with count badge",
|
|
2541
|
+
"Include user menu/profile access",
|
|
2542
|
+
"Add Product Switch for multi-product access",
|
|
2543
|
+
"Keep consistent across all pages in application",
|
|
2544
|
+
"Provide context about current product/location",
|
|
2545
|
+
"Don't overload with too many actions",
|
|
2546
|
+
"Maintain SAP branding guidelines"
|
|
2547
|
+
]
|
|
2548
|
+
},
|
|
2549
|
+
"toolbar": {
|
|
2550
|
+
"id": "toolbar",
|
|
2551
|
+
"name": "Toolbar",
|
|
2552
|
+
"category": "Navigation",
|
|
2553
|
+
"description": "Toolbar enables users to change UI or trigger actions (change views, manipulate data/objects, navigate, perform actions). Usually paired with buttons, which are always right-aligned. Actions can be independent, object-specific, apply to item sets, or control UI content settings.",
|
|
2554
|
+
"whenToUse": [
|
|
2555
|
+
"Change views or UI settings",
|
|
2556
|
+
"Manipulate data or objects",
|
|
2557
|
+
"Navigate to another page",
|
|
2558
|
+
"Perform generic actions",
|
|
2559
|
+
"Actions independent of current selection",
|
|
2560
|
+
"Actions specific to current object (one selected item)",
|
|
2561
|
+
"Actions applying to set of items (multiple selections)",
|
|
2562
|
+
"Control settings for UI content (e.g., all items in Table)"
|
|
2563
|
+
],
|
|
2564
|
+
"whenToAvoid": [
|
|
2565
|
+
"Page-level actions → Use Action Bar instead",
|
|
2566
|
+
"Form actions (Submit/Cancel) → Use form footer buttons",
|
|
2567
|
+
"Navigation-only actions → Use breadcrumb or side navigation",
|
|
2568
|
+
"Single isolated action → Use standalone button"
|
|
2569
|
+
],
|
|
2570
|
+
"bestPractices": [
|
|
2571
|
+
"Buttons are always right-aligned",
|
|
2572
|
+
"Support independent actions (not related to specific item)",
|
|
2573
|
+
"Support object-specific actions (one item selected)",
|
|
2574
|
+
"Support bulk actions (multiple items selected)",
|
|
2575
|
+
"Control settings for UI content portions (e.g., Table settings)",
|
|
2576
|
+
"Group related actions together",
|
|
2577
|
+
"Use icon buttons for common actions with tooltips",
|
|
2578
|
+
"Use text buttons for primary/emphasized actions",
|
|
2579
|
+
"Show/hide actions based on context (selection state)",
|
|
2580
|
+
"Disable unavailable actions rather than hiding when appropriate",
|
|
2581
|
+
"Keep action count reasonable (don't overcrowd)",
|
|
2582
|
+
"Consider overflow menu for many actions"
|
|
2583
|
+
]
|
|
2584
|
+
},
|
|
2585
|
+
"vertical-navigation": {
|
|
2586
|
+
"id": "vertical-navigation",
|
|
2587
|
+
"name": "Vertical Navigation",
|
|
2588
|
+
"category": "Navigation",
|
|
2589
|
+
"description": "Vertical Navigation is signature BTP Tools design element for page switching. Four variants: Expanded (default, logical grouping, two hierarchy levels), Snapped (reduced width, frees horizontal space), Popup (navigation in popup, 3-7 items without hierarchy), Horizontal (infinite levels via cascading menus). Use nouns for titles.",
|
|
2590
|
+
"whenToUse": [
|
|
2591
|
+
"Switch between different pages of tool",
|
|
2592
|
+
"Expanded for unknown users",
|
|
2593
|
+
"Persistence showing last state for known users",
|
|
2594
|
+
"Snapped variant for multi-column content relationships",
|
|
2595
|
+
"Popup variant for 3-7 navigation items without hierarchy",
|
|
2596
|
+
"Horizontal variant for more than two hierarchy levels",
|
|
2597
|
+
"Use nouns for navigation item titles"
|
|
2598
|
+
],
|
|
2599
|
+
"whenToAvoid": [
|
|
2600
|
+
"Switching between tools → Use mega menu instead",
|
|
2601
|
+
"Switching contexts or views → Use tabs or segmented buttons",
|
|
2602
|
+
"Using verbs for titles → Use nouns instead",
|
|
2603
|
+
"Navigation items for both navigation and groups → Use only one option",
|
|
2604
|
+
"More than three hierarchy levels in horizontal → Keep simpler",
|
|
2605
|
+
"Icons in secondary navigation and groups → Avoid",
|
|
2606
|
+
"Spacers to separate content → Use separators instead",
|
|
2607
|
+
"Dividers to separate groups → Use separators instead",
|
|
2608
|
+
"Bottom area for service info → Use settings and user menu"
|
|
2609
|
+
],
|
|
2610
|
+
"bestPractices": [
|
|
2611
|
+
"Expanded: default with logical grouping, two hierarchy levels",
|
|
2612
|
+
"Snapped: reduced width freeing horizontal space",
|
|
2613
|
+
"Popup: 3-7 items without hierarchy",
|
|
2614
|
+
"Horizontal: infinite levels via cascading menus",
|
|
2615
|
+
"Use persistence for known users (show last state)",
|
|
2616
|
+
"Expanded for unknown users",
|
|
2617
|
+
"Snapped for multi-column content relationships",
|
|
2618
|
+
"Use nouns for navigation item titles",
|
|
2619
|
+
"Use separators to separate content and groups",
|
|
2620
|
+
"Maximum three levels in horizontal variant",
|
|
2621
|
+
"Avoid icons in secondary navigation"
|
|
2622
|
+
]
|
|
2623
|
+
}
|
|
2624
|
+
}
|
|
2625
|
+
}
|