@fundamental-styles/mcp 0.41.7-rc.7 → 0.41.7-rc.9
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
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.41.7-rc.9](https://github.com/SAP/fundamental-styles/compare/v0.41.7-rc.8...v0.41.7-rc.9) (2026-06-02)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **styles:** add header content area to User Menu [ci visual] ([#6321](https://github.com/SAP/fundamental-styles/issues/6321)) ([38df315](https://github.com/SAP/fundamental-styles/commit/38df3159af475c470477eab1cd0d70b4f7cf59fa))
|
|
11
|
+
|
|
12
|
+
## [0.41.7-rc.8](https://github.com/SAP/fundamental-styles/compare/v0.41.7-rc.7...v0.41.7-rc.8) (2026-05-29)
|
|
13
|
+
|
|
14
|
+
**Note:** Version bump only for package fundamental-styles
|
|
15
|
+
|
|
6
16
|
## [0.41.7-rc.7](https://github.com/SAP/fundamental-styles/compare/v0.41.7-rc.6...v0.41.7-rc.7) (2026-05-27)
|
|
7
17
|
|
|
8
18
|
**Note:** Version bump only for package fundamental-styles
|
|
@@ -6897,9 +6907,9 @@ Co-authored-by: droshev <mladen.droshev@sap.com>
|
|
|
6897
6907
|
|
|
6898
6908
|
- added a new modifier class to fd-row to achieve even alignment of its elements:fd-row--top in a form.
|
|
6899
6909
|
Before:
|
|
6900
|
-
|
|
6901
|
-
|
|
6902
|
-
|
|
6910
|
+
<div class="fd-row">
|
|
6911
|
+
After:
|
|
6912
|
+
<div class="fd-row fd-row--top">
|
|
6903
6913
|
|
|
6904
6914
|
### Bug Fixes
|
|
6905
6915
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div class="fddocs-container" style="margin-bottom: 500px; flex-wrap: wrap; gap: 5rem
|
|
1
|
+
<div class="fddocs-container" style="margin-bottom: 500px; flex-wrap: wrap; gap: 5rem">
|
|
2
2
|
<div class="fd-popover fd-popover--right fd-user-menu">
|
|
3
3
|
<div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="userMenu1">
|
|
4
4
|
<div class="fd-popover__wrapper fd-user-menu__popover-wrapper">
|
|
@@ -7,8 +7,14 @@
|
|
|
7
7
|
<span
|
|
8
8
|
class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--thumbnail"
|
|
9
9
|
aria-label="Avatar"
|
|
10
|
-
style="background-image: url('/assets/images/portraits/L_80x80_F3.png')
|
|
11
|
-
|
|
10
|
+
style="background-image: url('/assets/images/portraits/L_80x80_F3.png')"
|
|
11
|
+
>
|
|
12
|
+
<i
|
|
13
|
+
class="fd-avatar__zoom-icon sap-icon--edit"
|
|
14
|
+
aria-label="Edit"
|
|
15
|
+
role="presentation"
|
|
16
|
+
aria-hidden="true"
|
|
17
|
+
></i>
|
|
12
18
|
</span>
|
|
13
19
|
<div class="fd-user-menu__header-container">
|
|
14
20
|
<div class="fd-user-menu__user-name">Lisa Miller</div>
|
|
@@ -16,6 +22,11 @@
|
|
|
16
22
|
<div class="fd-user-menu__subline">User Experience Designer</div>
|
|
17
23
|
<div class="fd-user-menu__subline">Primary Employment</div>
|
|
18
24
|
</div>
|
|
25
|
+
<div class="fd-user-menu__header-content-area" style="background-color: aquamarine">
|
|
26
|
+
<div style="display: flex; align-items: center; justify-content: center">
|
|
27
|
+
Header Content Area
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
19
30
|
</div>
|
|
20
31
|
<div class="fd-user-menu__content-container">
|
|
21
32
|
<nav class="fd-menu fd-menu--icons fd-user-menu__menu">
|
|
@@ -28,28 +39,36 @@
|
|
|
28
39
|
<span class="fd-menu__title">Settings</span>
|
|
29
40
|
</a>
|
|
30
41
|
</li>
|
|
31
|
-
|
|
42
|
+
|
|
32
43
|
<li class="fd-menu__item" role="presentation">
|
|
33
44
|
<span
|
|
34
45
|
class="fd-menu__link has-child is-expanded"
|
|
35
46
|
aria-controls="EX100M2A"
|
|
36
47
|
aria-expanded="true"
|
|
37
48
|
aria-haspopup="true"
|
|
38
|
-
role="menuitem"
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
</
|
|
46
|
-
|
|
49
|
+
role="menuitem"
|
|
50
|
+
>
|
|
51
|
+
<span class="fd-menu__addon-before">
|
|
52
|
+
<i class="sap-icon--card" role="presentation"></i>
|
|
53
|
+
</span>
|
|
54
|
+
<div class="fd-menu__content">
|
|
55
|
+
<span class="fd-menu__title">Menu Item</span>
|
|
56
|
+
<span class="fd-menu__subtitle">Sub-menu List Item</span>
|
|
57
|
+
</div>
|
|
58
|
+
<span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
|
|
47
59
|
</span>
|
|
48
|
-
|
|
49
|
-
<ul
|
|
60
|
+
|
|
61
|
+
<ul
|
|
62
|
+
class="fd-menu__sublist fd-menu__sublist--icons"
|
|
63
|
+
id="EX100M2A"
|
|
64
|
+
aria-hidden="false"
|
|
65
|
+
role="menu"
|
|
66
|
+
>
|
|
50
67
|
<li class="fd-menu__item" role="presentation">
|
|
51
68
|
<a class="fd-menu__link" href="#" role="menuitem">
|
|
52
|
-
<span class="fd-menu__addon-before"
|
|
69
|
+
<span class="fd-menu__addon-before"
|
|
70
|
+
><i class="sap-icon--card" role="presentation"></i
|
|
71
|
+
></span>
|
|
53
72
|
<span class="fd-menu__title">Sub-menu Item</span>
|
|
54
73
|
</a>
|
|
55
74
|
</li>
|
|
@@ -69,7 +88,7 @@
|
|
|
69
88
|
<span class="fd-menu__title">Legal Information</span>
|
|
70
89
|
</a>
|
|
71
90
|
</li>
|
|
72
|
-
|
|
91
|
+
|
|
73
92
|
<li class="fd-menu__item" role="presentation">
|
|
74
93
|
<a class="fd-menu__link" href="#" role="menuitem">
|
|
75
94
|
<span class="fd-menu__addon-before">
|
|
@@ -78,9 +97,8 @@
|
|
|
78
97
|
<span class="fd-menu__title">About</span>
|
|
79
98
|
</a>
|
|
80
99
|
</li>
|
|
81
|
-
|
|
82
100
|
</ul>
|
|
83
|
-
</nav>
|
|
101
|
+
</nav>
|
|
84
102
|
</div>
|
|
85
103
|
</div>
|
|
86
104
|
</div>
|
|
@@ -98,7 +116,7 @@
|
|
|
98
116
|
</div>
|
|
99
117
|
</div>
|
|
100
118
|
|
|
101
|
-
<div class="fddocs-container" style="margin-bottom: 900px; flex-wrap: wrap; gap: 5rem
|
|
119
|
+
<div class="fddocs-container" style="margin-bottom: 900px; flex-wrap: wrap; gap: 5rem">
|
|
102
120
|
<div class="fd-popover fd-popover--right fd-user-menu">
|
|
103
121
|
<div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="userMenu1">
|
|
104
122
|
<div class="fd-popover__wrapper fd-user-menu__popover-wrapper">
|
|
@@ -107,8 +125,14 @@
|
|
|
107
125
|
<span
|
|
108
126
|
class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--thumbnail"
|
|
109
127
|
aria-label="Avatar"
|
|
110
|
-
style="background-image: url('/assets/images/portraits/L_80x80_F3.png')
|
|
111
|
-
|
|
128
|
+
style="background-image: url('/assets/images/portraits/L_80x80_F3.png')"
|
|
129
|
+
>
|
|
130
|
+
<i
|
|
131
|
+
class="fd-avatar__zoom-icon sap-icon--edit"
|
|
132
|
+
aria-label="Edit"
|
|
133
|
+
role="presentation"
|
|
134
|
+
aria-hidden="true"
|
|
135
|
+
></i>
|
|
112
136
|
</span>
|
|
113
137
|
<div class="fd-user-menu__header-container">
|
|
114
138
|
<div class="fd-user-menu__user-name">Lisa Miller</div>
|
|
@@ -116,6 +140,29 @@
|
|
|
116
140
|
<div class="fd-user-menu__subline">User Experience Designer</div>
|
|
117
141
|
<div class="fd-user-menu__subline">Primary Employment</div>
|
|
118
142
|
</div>
|
|
143
|
+
<div class="fd-user-menu__header-content-area">
|
|
144
|
+
<div
|
|
145
|
+
role="note"
|
|
146
|
+
aria-labelledby="message-strip-hidden-text-2 message-strip-text-2"
|
|
147
|
+
class="fd-message-strip fd-message-strip--information"
|
|
148
|
+
>
|
|
149
|
+
<span class="fd-message-strip__sr-only" id="message-strip-hidden-text-2"
|
|
150
|
+
>Information Bar Closable</span
|
|
151
|
+
>
|
|
152
|
+
|
|
153
|
+
<div class="fd-message-strip__icon-container" aria-hidden="true">
|
|
154
|
+
<span
|
|
155
|
+
class="sap-icon sap-icon--message-information"
|
|
156
|
+
role="presentation"
|
|
157
|
+
aria-hidden="true"
|
|
158
|
+
></span>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<p class="fd-message-strip__text" id="message-strip-text-2">
|
|
162
|
+
This is an information massage.
|
|
163
|
+
</p>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
119
166
|
<button aria-label="Manage Account" class="fd-button">
|
|
120
167
|
<i class="sap-icon--user-settings"></i>
|
|
121
168
|
<span class="fd-button__text">Manage Account</span>
|
|
@@ -125,23 +172,43 @@
|
|
|
125
172
|
<div class="fd-panel fd-user-menu__panel" aria-labelledby="__panel-title-8" role="form">
|
|
126
173
|
<div class="fd-panel__header">
|
|
127
174
|
<div class="fd-panel__expand">
|
|
128
|
-
<button
|
|
129
|
-
|
|
175
|
+
<button
|
|
176
|
+
class="fd-button fd-button--transparent fd-panel__button"
|
|
177
|
+
aria-expanded="true"
|
|
178
|
+
aria-haspopup="true"
|
|
179
|
+
aria-label="expand/collapse panel"
|
|
180
|
+
aria-controls="__panel-8"
|
|
181
|
+
>
|
|
130
182
|
<i class="sap-icon--slim-arrow-down"></i>
|
|
131
183
|
</button>
|
|
132
184
|
</div>
|
|
133
185
|
<h4 class="fd-panel__title" id="__panel-title-8">Accounts (3)</h4>
|
|
134
186
|
<div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
|
|
135
187
|
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
|
|
136
|
-
<button
|
|
188
|
+
<button
|
|
189
|
+
class="fd-button fd-button--transparent"
|
|
190
|
+
aria-label="Add Account"
|
|
191
|
+
title="Add Account"
|
|
192
|
+
>
|
|
137
193
|
<i class="sap-icon--user-edit"></i>
|
|
138
194
|
</button>
|
|
139
195
|
</div>
|
|
140
196
|
</div>
|
|
141
|
-
<div
|
|
197
|
+
<div
|
|
198
|
+
role="region"
|
|
199
|
+
aria-labelledby="__panel-title-8"
|
|
200
|
+
class="fd-panel__content fd-panel__content--no-padding"
|
|
201
|
+
aria-hidden="false"
|
|
202
|
+
id="__panel-8"
|
|
203
|
+
>
|
|
142
204
|
<ul class="fd-list fd-list--subline" role="list">
|
|
143
205
|
<li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
|
|
144
|
-
<span
|
|
206
|
+
<span
|
|
207
|
+
class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail"
|
|
208
|
+
style="background-image: url('/assets/images/portraits/L_80x80_F3.png')"
|
|
209
|
+
role="img"
|
|
210
|
+
aria-label="Jane Doe"
|
|
211
|
+
></span>
|
|
145
212
|
<div class="fd-list__content">
|
|
146
213
|
<div class="fd-list__title">Lisa Miller Lorem</div>
|
|
147
214
|
<div class="fd-list__subline">lisa.miller@test.com</div>
|
|
@@ -150,16 +217,25 @@
|
|
|
150
217
|
<span class="fd-list__active-indicator sap-icon--sys-enter-2"></span>
|
|
151
218
|
</li>
|
|
152
219
|
<li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
|
|
153
|
-
<span
|
|
220
|
+
<span
|
|
221
|
+
class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail"
|
|
222
|
+
style="background-image: url('/assets/images/portraits/L_80x80_M1.png')"
|
|
223
|
+
role="img"
|
|
224
|
+
aria-label="John Doe"
|
|
225
|
+
></span>
|
|
154
226
|
<div class="fd-list__content">
|
|
155
227
|
<div class="fd-list__title">John Doe</div>
|
|
156
228
|
<div class="fd-list__subline">john.doe@test.com</div>
|
|
157
229
|
<div class="fd-list__subline">Project Manager</div>
|
|
158
230
|
</div>
|
|
159
|
-
|
|
160
231
|
</li>
|
|
161
232
|
<li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
|
|
162
|
-
<span
|
|
233
|
+
<span
|
|
234
|
+
class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10"
|
|
235
|
+
aria-role="img"
|
|
236
|
+
aria-label="Jane Doe"
|
|
237
|
+
>JD</span
|
|
238
|
+
>
|
|
163
239
|
<div class="fd-list__content">
|
|
164
240
|
<div class="fd-list__title">Jane Doe</div>
|
|
165
241
|
<div class="fd-list__subline">jane.doe@test.com</div>
|
|
@@ -167,7 +243,6 @@
|
|
|
167
243
|
</div>
|
|
168
244
|
</li>
|
|
169
245
|
</ul>
|
|
170
|
-
|
|
171
246
|
</div>
|
|
172
247
|
</div>
|
|
173
248
|
<nav class="fd-menu fd-menu--icons fd-user-menu__menu">
|
|
@@ -180,37 +255,52 @@
|
|
|
180
255
|
<span class="fd-menu__title">Settings</span>
|
|
181
256
|
</a>
|
|
182
257
|
</li>
|
|
183
|
-
|
|
258
|
+
|
|
184
259
|
<li class="fd-menu__item" role="presentation">
|
|
185
260
|
<span
|
|
186
261
|
class="fd-menu__link has-child is-expanded"
|
|
187
262
|
aria-controls="EX100M2B"
|
|
188
263
|
aria-expanded="true"
|
|
189
264
|
aria-haspopup="true"
|
|
190
|
-
role="menuitem"
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
265
|
+
role="menuitem"
|
|
266
|
+
>
|
|
267
|
+
<span class="fd-menu__addon-before">
|
|
268
|
+
<i class="sap-icon--card" role="presentation"></i>
|
|
269
|
+
</span>
|
|
270
|
+
<div class="fd-menu__content">
|
|
271
|
+
<span class="fd-menu__title"
|
|
272
|
+
>Menu Item Lorem ipsum dolor sit amet consectetur, adipisicing
|
|
273
|
+
elit.</span
|
|
274
|
+
>
|
|
275
|
+
<span class="fd-menu__subtitle"
|
|
276
|
+
>Sub-menu List Item Consectetur reprehenderit, cumque iusto molestiae
|
|
277
|
+
doloribus assumenda omnis eveniet</span
|
|
278
|
+
>
|
|
279
|
+
</div>
|
|
280
|
+
|
|
281
|
+
<span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
|
|
200
282
|
</span>
|
|
201
|
-
|
|
283
|
+
|
|
202
284
|
<ul class="fd-menu__sublist" id="EX100M2B" aria-hidden="false" role="menu">
|
|
203
285
|
<li class="fd-menu__item" role="presentation">
|
|
204
286
|
<a class="fd-menu__link" href="#" role="menuitem">
|
|
205
287
|
<div class="fd-menu__content">
|
|
206
|
-
<span class="fd-menu__title"
|
|
288
|
+
<span class="fd-menu__title"
|
|
289
|
+
>Sub-menu Item 1 Consectetur reprehenderit, cumque iusto
|
|
290
|
+
molestiae doloribus assumenda omnis eveniet</span
|
|
291
|
+
>
|
|
207
292
|
</div>
|
|
208
|
-
<span class="fd-menu__addon-after fd-menu__addon-after--active"
|
|
293
|
+
<span class="fd-menu__addon-after fd-menu__addon-after--active"
|
|
294
|
+
><i class="sap-icon--accept" role="presentation"></i
|
|
295
|
+
></span>
|
|
209
296
|
</a>
|
|
210
297
|
</li>
|
|
211
298
|
<li class="fd-menu__item" role="presentation">
|
|
212
299
|
<a class="fd-menu__link" href="#" role="menuitem">
|
|
213
|
-
<span class="fd-menu__title fd-menu__title--truncate"
|
|
300
|
+
<span class="fd-menu__title fd-menu__title--truncate"
|
|
301
|
+
>Sub-menu Item 2 Consectetur reprehenderit, cumque iusto molestiae
|
|
302
|
+
doloribus assumenda omnis eveniet</span
|
|
303
|
+
>
|
|
214
304
|
</a>
|
|
215
305
|
</li>
|
|
216
306
|
</ul>
|
|
@@ -222,12 +312,18 @@
|
|
|
222
312
|
<i class="sap-icon--official-service" role="presentation"></i>
|
|
223
313
|
</span>
|
|
224
314
|
<div class="fd-menu__content">
|
|
225
|
-
|
|
226
|
-
|
|
315
|
+
<span class="fd-menu__title fd-menu__title--truncate"
|
|
316
|
+
>Menu Item Lorem ipsum dolor sit amet consectetur, adipisicing
|
|
317
|
+
elit.</span
|
|
318
|
+
>
|
|
319
|
+
<span class="fd-menu__subtitle fd-menu__subtitle--truncate"
|
|
320
|
+
>Sub-menu List Item Consectetur reprehenderit, cumque iusto molestiae
|
|
321
|
+
doloribus assumenda omnis eveniet</span
|
|
322
|
+
>
|
|
227
323
|
</div>
|
|
228
324
|
</a>
|
|
229
325
|
</li>
|
|
230
|
-
|
|
326
|
+
|
|
231
327
|
<li class="fd-menu__item" role="presentation">
|
|
232
328
|
<a class="fd-menu__link" href="#" role="menuitem">
|
|
233
329
|
<span class="fd-menu__addon-before">
|
|
@@ -236,9 +332,8 @@
|
|
|
236
332
|
<span class="fd-menu__title">About</span>
|
|
237
333
|
</a>
|
|
238
334
|
</li>
|
|
239
|
-
|
|
240
335
|
</ul>
|
|
241
|
-
</nav>
|
|
336
|
+
</nav>
|
|
242
337
|
</div>
|
|
243
338
|
</div>
|
|
244
339
|
</div>
|
|
@@ -256,7 +351,7 @@
|
|
|
256
351
|
</div>
|
|
257
352
|
</div>
|
|
258
353
|
|
|
259
|
-
<div class="fddocs-container" style="margin-bottom: 1000px; flex-wrap: wrap; gap: 5rem
|
|
354
|
+
<div class="fddocs-container" style="margin-bottom: 1000px; flex-wrap: wrap; gap: 5rem">
|
|
260
355
|
<div class="fd-popover fd-popover--right fd-user-menu">
|
|
261
356
|
<div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="userMenu1">
|
|
262
357
|
<div class="fd-popover__wrapper fd-user-menu__popover-wrapper">
|
|
@@ -265,14 +360,31 @@
|
|
|
265
360
|
<span
|
|
266
361
|
class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--thumbnail"
|
|
267
362
|
aria-label="Avatar"
|
|
268
|
-
style="background-image: url('/assets/images/portraits/L_80x80_F3.png')
|
|
269
|
-
|
|
363
|
+
style="background-image: url('/assets/images/portraits/L_80x80_F3.png')"
|
|
364
|
+
>
|
|
365
|
+
<i
|
|
366
|
+
class="fd-avatar__zoom-icon sap-icon--edit"
|
|
367
|
+
aria-label="Edit"
|
|
368
|
+
role="presentation"
|
|
369
|
+
aria-hidden="true"
|
|
370
|
+
></i>
|
|
270
371
|
</span>
|
|
271
372
|
<div class="fd-user-menu__header-container">
|
|
272
|
-
<div class="fd-user-menu__user-name">
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
373
|
+
<div class="fd-user-menu__user-name">
|
|
374
|
+
Lisa Miller Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa consequuntur
|
|
375
|
+
cum voluptate iure tenetu!
|
|
376
|
+
</div>
|
|
377
|
+
<div class="fd-user-menu__subline">
|
|
378
|
+
lisa.miller@test.com Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
|
|
379
|
+
quod accusamus quis magnam, reprehenderit anim.
|
|
380
|
+
</div>
|
|
381
|
+
<div class="fd-user-menu__subline">
|
|
382
|
+
A very long subline 2 that can be displayed by wrapping behaviour in the subtitle like
|
|
383
|
+
this.
|
|
384
|
+
</div>
|
|
385
|
+
<div class="fd-user-menu__subline fd-user-menu__subline--truncate">
|
|
386
|
+
A very long subline 3 that can be truncated with ellipsis
|
|
387
|
+
</div>
|
|
276
388
|
</div>
|
|
277
389
|
<button aria-label="Manage Account" class="fd-button">
|
|
278
390
|
<i class="sap-icon--user-settings"></i>
|
|
@@ -283,41 +395,88 @@
|
|
|
283
395
|
<div class="fd-panel fd-user-menu__panel" aria-labelledby="__panel-title-8" role="form">
|
|
284
396
|
<div class="fd-panel__header">
|
|
285
397
|
<div class="fd-panel__expand">
|
|
286
|
-
<button
|
|
287
|
-
|
|
398
|
+
<button
|
|
399
|
+
class="fd-button fd-button--transparent fd-panel__button"
|
|
400
|
+
aria-expanded="true"
|
|
401
|
+
aria-haspopup="true"
|
|
402
|
+
aria-label="expand/collapse panel"
|
|
403
|
+
aria-controls="__panel-8"
|
|
404
|
+
>
|
|
288
405
|
<i class="sap-icon--slim-arrow-down"></i>
|
|
289
406
|
</button>
|
|
290
407
|
</div>
|
|
291
408
|
<h4 class="fd-panel__title" id="__panel-title-8">Accounts (3)</h4>
|
|
292
409
|
<div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
|
|
293
410
|
<span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
|
|
294
|
-
<button
|
|
411
|
+
<button
|
|
412
|
+
class="fd-button fd-button--transparent"
|
|
413
|
+
aria-label="Add Account"
|
|
414
|
+
title="Add Account"
|
|
415
|
+
>
|
|
295
416
|
<i class="sap-icon--user-edit"></i>
|
|
296
417
|
</button>
|
|
297
418
|
</div>
|
|
298
419
|
</div>
|
|
299
|
-
<div
|
|
420
|
+
<div
|
|
421
|
+
role="region"
|
|
422
|
+
aria-labelledby="__panel-title-8"
|
|
423
|
+
class="fd-panel__content fd-panel__content--no-padding"
|
|
424
|
+
aria-hidden="false"
|
|
425
|
+
id="__panel-8"
|
|
426
|
+
>
|
|
300
427
|
<ul class="fd-list fd-list--subline" role="list">
|
|
301
428
|
<li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
|
|
302
|
-
<span
|
|
429
|
+
<span
|
|
430
|
+
class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail"
|
|
431
|
+
style="background-image: url('/assets/images/portraits/L_80x80_F3.png')"
|
|
432
|
+
role="img"
|
|
433
|
+
aria-label="Jane Doe"
|
|
434
|
+
></span>
|
|
303
435
|
<div class="fd-list__content">
|
|
304
|
-
<div class="fd-list__title">
|
|
305
|
-
|
|
306
|
-
|
|
436
|
+
<div class="fd-list__title">
|
|
437
|
+
Lisa Miller Lorem, ipsum dolor sit amet consectetur adipisicing elit.
|
|
438
|
+
Autem minima ex distinctio dolores vitae!
|
|
439
|
+
</div>
|
|
440
|
+
<div class="fd-list__subline">
|
|
441
|
+
lisa.miller@test.com Lorem, ipsum dolor sit amet consectetur adipisicing
|
|
442
|
+
elit.
|
|
443
|
+
</div>
|
|
444
|
+
<div class="fd-list__subline">
|
|
445
|
+
Delivery Manager Lorem ipsum dolor sit amet consectetur adipisicing
|
|
446
|
+
elit.
|
|
447
|
+
</div>
|
|
307
448
|
</div>
|
|
308
449
|
<span class="fd-list__active-indicator sap-icon--sys-enter-2"></span>
|
|
309
450
|
</li>
|
|
310
451
|
<li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
|
|
311
|
-
<span
|
|
452
|
+
<span
|
|
453
|
+
class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail"
|
|
454
|
+
style="background-image: url('/assets/images/portraits/L_80x80_M1.png')"
|
|
455
|
+
role="img"
|
|
456
|
+
aria-label="John Doe"
|
|
457
|
+
></span>
|
|
312
458
|
<div class="fd-list__content">
|
|
313
|
-
<div class="fd-list__title fd-list__title--truncate">
|
|
314
|
-
|
|
315
|
-
|
|
459
|
+
<div class="fd-list__title fd-list__title--truncate">
|
|
460
|
+
John Doe Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem
|
|
461
|
+
minima ex distinctio dolores vitae!
|
|
462
|
+
</div>
|
|
463
|
+
<div class="fd-list__subline fd-list__subline--truncate">
|
|
464
|
+
john.doe@test.com ipsum dolor sit amet consectetur adipisicing elit.
|
|
465
|
+
Autem minima ex distinctio dolores vitae!
|
|
466
|
+
</div>
|
|
467
|
+
<div class="fd-list__subline fd-list__subline--truncate">
|
|
468
|
+
Project Manager ipsum dolor sit amet consectetur adipisicing elit. Autem
|
|
469
|
+
minima ex distinctio dolores vitae!
|
|
470
|
+
</div>
|
|
316
471
|
</div>
|
|
317
|
-
|
|
318
472
|
</li>
|
|
319
473
|
<li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
|
|
320
|
-
<span
|
|
474
|
+
<span
|
|
475
|
+
class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10"
|
|
476
|
+
aria-role="img"
|
|
477
|
+
aria-label="Jane Doe"
|
|
478
|
+
>JD</span
|
|
479
|
+
>
|
|
321
480
|
<div class="fd-list__content">
|
|
322
481
|
<div class="fd-list__title">Jane Doe</div>
|
|
323
482
|
<div class="fd-list__subline">jane.doe@test.com</div>
|
|
@@ -325,7 +484,6 @@
|
|
|
325
484
|
</div>
|
|
326
485
|
</li>
|
|
327
486
|
</ul>
|
|
328
|
-
|
|
329
487
|
</div>
|
|
330
488
|
</div>
|
|
331
489
|
<nav class="fd-menu fd-menu--icons fd-user-menu__menu">
|
|
@@ -338,18 +496,19 @@
|
|
|
338
496
|
<span class="fd-menu__title">Settings</span>
|
|
339
497
|
</a>
|
|
340
498
|
</li>
|
|
341
|
-
|
|
499
|
+
|
|
342
500
|
<li class="fd-menu__item" role="presentation">
|
|
343
501
|
<span
|
|
344
502
|
class="fd-menu__link has-child"
|
|
345
503
|
aria-expanded="false"
|
|
346
504
|
aria-haspopup="true"
|
|
347
|
-
role="menuitem"
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
505
|
+
role="menuitem"
|
|
506
|
+
>
|
|
507
|
+
<span class="fd-menu__addon-before">
|
|
508
|
+
<i class="sap-icon--card" role="presentation"></i>
|
|
509
|
+
</span>
|
|
510
|
+
<span class="fd-menu__title">Menu Item</span>
|
|
511
|
+
<span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
|
|
353
512
|
</span>
|
|
354
513
|
</li>
|
|
355
514
|
|
|
@@ -361,7 +520,7 @@
|
|
|
361
520
|
<span class="fd-menu__title">Legal Information</span>
|
|
362
521
|
</a>
|
|
363
522
|
</li>
|
|
364
|
-
|
|
523
|
+
|
|
365
524
|
<li class="fd-menu__item" role="presentation">
|
|
366
525
|
<a class="fd-menu__link" href="#" role="menuitem">
|
|
367
526
|
<span class="fd-menu__addon-before">
|
|
@@ -370,9 +529,8 @@
|
|
|
370
529
|
<span class="fd-menu__title">About</span>
|
|
371
530
|
</a>
|
|
372
531
|
</li>
|
|
373
|
-
|
|
374
532
|
</ul>
|
|
375
|
-
</nav>
|
|
533
|
+
</nav>
|
|
376
534
|
</div>
|
|
377
535
|
</div>
|
|
378
536
|
</div>
|
package/package.json
CHANGED