superdesk-ui-framework 3.1.29 → 4.0.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/app-typescript/components/Dropdown.tsx +120 -165
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +9 -4
- package/app-typescript/components/Layouts/AuthoringMain.tsx +2 -0
- package/app-typescript/components/Layouts/Panel.tsx +3 -2
- package/app-typescript/components/Menu.tsx +3 -4
- package/app-typescript/components/Modal.tsx +4 -2
- package/app-typescript/components/MultiSelect.tsx +3 -2
- package/app-typescript/components/Popover.tsx +0 -2
- package/app-typescript/components/SelectWithTemplate.tsx +3 -1
- package/app-typescript/components/ShowPopup.tsx +9 -5
- package/app-typescript/components/SubNav.tsx +5 -6
- package/app-typescript/components/TreeMenu.tsx +3 -2
- package/app-typescript/components/TreeSelect/TreeSelect.tsx +3 -2
- package/app-typescript/components/WithPopover.tsx +0 -2
- package/app-typescript/components/_Positioner.tsx +3 -4
- package/app-typescript/components/avatar/avatar-group.tsx +0 -3
- package/app-typescript/index.ts +1 -0
- package/app-typescript/zIndex.tsx +5 -0
- package/dist/components/CreateButton.tsx +2 -2
- package/dist/components/Dropdowns.tsx +4 -483
- package/dist/components/Modal.tsx +0 -12
- package/dist/components/MultiSelect.tsx +0 -2
- package/dist/components/NavButtons.tsx +4 -4
- package/dist/components/Panel.tsx +0 -1
- package/dist/components/Popover.tsx +0 -3
- package/dist/components/SubNav.tsx +9 -10
- package/dist/components/TableList.tsx +1 -1
- package/dist/design-patterns/ThreePaneLayoutPattern.tsx +3 -3
- package/dist/examples.bundle.js +3115 -3481
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +2 -3
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/Multiedit.tsx +1 -2
- package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +2 -2
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +3 -10
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +2 -3
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +0 -4
- package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +2 -3
- package/dist/superdesk-ui.bundle.js +2411 -2402
- package/dist/vendor.bundle.js +21 -21
- package/examples/pages/components/CreateButton.tsx +2 -2
- package/examples/pages/components/Dropdowns.tsx +4 -483
- package/examples/pages/components/Modal.tsx +0 -12
- package/examples/pages/components/MultiSelect.tsx +0 -2
- package/examples/pages/components/NavButtons.tsx +4 -4
- package/examples/pages/components/Panel.tsx +0 -1
- package/examples/pages/components/Popover.tsx +0 -3
- package/examples/pages/components/SubNav.tsx +9 -10
- package/examples/pages/components/TableList.tsx +1 -1
- package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +3 -3
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +2 -3
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +1 -2
- package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +2 -2
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +3 -10
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +2 -3
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +0 -4
- package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +2 -3
- package/package.json +1 -1
- package/react/components/Dropdown.d.ts +1 -3
- package/react/components/Dropdown.js +31 -60
- package/react/components/Layouts/AuthoringInnerHeader.d.ts +1 -0
- package/react/components/Layouts/AuthoringInnerHeader.js +4 -2
- package/react/components/Layouts/AuthoringMain.d.ts +1 -0
- package/react/components/Layouts/AuthoringMain.js +1 -1
- package/react/components/Layouts/Panel.d.ts +1 -1
- package/react/components/Layouts/Panel.js +5 -2
- package/react/components/Menu.d.ts +1 -1
- package/react/components/Menu.js +3 -3
- package/react/components/Modal.d.ts +1 -1
- package/react/components/Modal.js +5 -2
- package/react/components/MultiSelect.d.ts +1 -1
- package/react/components/MultiSelect.js +3 -1
- package/react/components/Popover.d.ts +0 -1
- package/react/components/Popover.js +1 -1
- package/react/components/SelectWithTemplate.d.ts +3 -0
- package/react/components/SelectWithTemplate.js +3 -0
- package/react/components/ShowPopup.d.ts +20 -1
- package/react/components/ShowPopup.js +12 -5
- package/react/components/SubNav.d.ts +0 -1
- package/react/components/SubNav.js +1 -4
- package/react/components/TreeMenu.d.ts +1 -1
- package/react/components/TreeMenu.js +3 -1
- package/react/components/TreeSelect/TreeSelect.d.ts +1 -1
- package/react/components/TreeSelect/TreeSelect.js +3 -1
- package/react/components/WithPopover.d.ts +0 -1
- package/react/components/WithPopover.js +1 -1
- package/react/components/_Positioner.d.ts +0 -1
- package/react/components/_Positioner.js +3 -3
- package/react/components/avatar/avatar-group.d.ts +0 -1
- package/react/components/avatar/avatar-group.js +2 -3
- package/react/index.d.ts +1 -0
- package/react/index.js +4 -1
- package/react/zIndex.d.ts +2 -0
- package/react/zIndex.js +8 -0
@@ -23,7 +23,6 @@ export default class DropdownDoc extends React.Component {
|
|
23
23
|
<Markup.ReactMarkup>
|
24
24
|
<Markup.ReactMarkupPreview>
|
25
25
|
<Dropdown
|
26
|
-
append
|
27
26
|
items={[
|
28
27
|
{ label: 'Action 1', onSelect: () => 1 },
|
29
28
|
{ label: 'Action 2', onSelect: () => 1 },
|
@@ -64,481 +63,6 @@ export default class DropdownDoc extends React.Component {
|
|
64
63
|
</Markup.ReactMarkupCode>
|
65
64
|
</Markup.ReactMarkup>
|
66
65
|
|
67
|
-
<h3 className="docs-page__h3">Dropdown Append To Body</h3>
|
68
|
-
<p className='docs-page__paragraph'>Add prop value <code>append = true</code> to the dropdown element to append to the inner dropdown menu to the body. This is useful when the dropdown button is inside a div with overflow: hidden, and the menu would otherwise be hidden.</p>
|
69
|
-
<Markup.ReactMarkup>
|
70
|
-
<Markup.ReactMarkupPreview>
|
71
|
-
<Dropdown
|
72
|
-
append={true}
|
73
|
-
header={[
|
74
|
-
{
|
75
|
-
type: 'group',
|
76
|
-
label: 'Create new',
|
77
|
-
items: [
|
78
|
-
{
|
79
|
-
type: 'submenu',
|
80
|
-
label: 'Rundown',
|
81
|
-
icon: 'plus-sign',
|
82
|
-
items: [
|
83
|
-
{
|
84
|
-
type: 'submenu',
|
85
|
-
label: 'Show 1',
|
86
|
-
icon: 'plus-sign',
|
87
|
-
items: [
|
88
|
-
{
|
89
|
-
type: 'submenu',
|
90
|
-
label: 'Show 2',
|
91
|
-
icon: 'plus-sign',
|
92
|
-
items: []
|
93
|
-
}
|
94
|
-
],
|
95
|
-
},
|
96
|
-
{
|
97
|
-
type: 'submenu',
|
98
|
-
label: 'Show 1',
|
99
|
-
icon: 'plus-sign',
|
100
|
-
|
101
|
-
items: [
|
102
|
-
|
103
|
-
],
|
104
|
-
},
|
105
|
-
],
|
106
|
-
},
|
107
|
-
],
|
108
|
-
},
|
109
|
-
]}
|
110
|
-
items={[
|
111
|
-
{
|
112
|
-
type: 'group',
|
113
|
-
label: 'Create new',
|
114
|
-
items: [
|
115
|
-
{
|
116
|
-
type: 'submenu',
|
117
|
-
label: 'Rundown',
|
118
|
-
icon: 'plus-sign',
|
119
|
-
|
120
|
-
items: [
|
121
|
-
{
|
122
|
-
type: 'submenu',
|
123
|
-
label: 'Show 1',
|
124
|
-
icon: 'plus-sign',
|
125
|
-
items: [
|
126
|
-
|
127
|
-
],
|
128
|
-
},
|
129
|
-
{
|
130
|
-
type: 'submenu',
|
131
|
-
label: 'Show 2',
|
132
|
-
icon: 'plus-sign',
|
133
|
-
items: [
|
134
|
-
|
135
|
-
],
|
136
|
-
},
|
137
|
-
],
|
138
|
-
},
|
139
|
-
{
|
140
|
-
type: 'submenu',
|
141
|
-
label: 'Rundown',
|
142
|
-
icon: 'plus-sign',
|
143
|
-
|
144
|
-
items: [
|
145
|
-
{
|
146
|
-
type: 'submenu',
|
147
|
-
label: 'Show 1',
|
148
|
-
icon: 'plus-sign',
|
149
|
-
items: [
|
150
|
-
|
151
|
-
],
|
152
|
-
},
|
153
|
-
{
|
154
|
-
type: 'submenu',
|
155
|
-
label: 'Show 2',
|
156
|
-
icon: 'plus-sign',
|
157
|
-
items: [
|
158
|
-
|
159
|
-
],
|
160
|
-
},
|
161
|
-
],
|
162
|
-
},
|
163
|
-
{
|
164
|
-
type: 'submenu',
|
165
|
-
label: 'Rundown',
|
166
|
-
icon: 'plus-sign',
|
167
|
-
|
168
|
-
items: [
|
169
|
-
{
|
170
|
-
type: 'submenu',
|
171
|
-
label: 'Show 1',
|
172
|
-
icon: 'plus-sign',
|
173
|
-
items: [
|
174
|
-
|
175
|
-
],
|
176
|
-
},
|
177
|
-
{
|
178
|
-
type: 'submenu',
|
179
|
-
label: 'Show 2',
|
180
|
-
icon: 'plus-sign',
|
181
|
-
items: [
|
182
|
-
|
183
|
-
],
|
184
|
-
},
|
185
|
-
],
|
186
|
-
},
|
187
|
-
{
|
188
|
-
type: 'submenu',
|
189
|
-
label: 'Rundown',
|
190
|
-
icon: 'plus-sign',
|
191
|
-
|
192
|
-
items: [
|
193
|
-
{
|
194
|
-
type: 'submenu',
|
195
|
-
label: 'Show 1',
|
196
|
-
icon: 'plus-sign',
|
197
|
-
items: [
|
198
|
-
|
199
|
-
],
|
200
|
-
},
|
201
|
-
{
|
202
|
-
type: 'submenu',
|
203
|
-
label: 'Show 2',
|
204
|
-
icon: 'plus-sign',
|
205
|
-
items: [
|
206
|
-
|
207
|
-
],
|
208
|
-
},
|
209
|
-
],
|
210
|
-
},
|
211
|
-
{
|
212
|
-
type: 'submenu',
|
213
|
-
label: 'Rundown',
|
214
|
-
icon: 'plus-sign',
|
215
|
-
|
216
|
-
items: [
|
217
|
-
{
|
218
|
-
type: 'submenu',
|
219
|
-
label: 'Show 1',
|
220
|
-
icon: 'plus-sign',
|
221
|
-
items: [
|
222
|
-
|
223
|
-
],
|
224
|
-
},
|
225
|
-
{
|
226
|
-
type: 'submenu',
|
227
|
-
label: 'Show 2',
|
228
|
-
icon: 'plus-sign',
|
229
|
-
items: [
|
230
|
-
|
231
|
-
],
|
232
|
-
},
|
233
|
-
],
|
234
|
-
},
|
235
|
-
{
|
236
|
-
type: 'submenu',
|
237
|
-
label: 'Rundown',
|
238
|
-
icon: 'plus-sign',
|
239
|
-
|
240
|
-
items: [
|
241
|
-
{
|
242
|
-
type: 'submenu',
|
243
|
-
label: 'Show 1',
|
244
|
-
icon: 'plus-sign',
|
245
|
-
items: [
|
246
|
-
|
247
|
-
],
|
248
|
-
},
|
249
|
-
{
|
250
|
-
type: 'submenu',
|
251
|
-
label: 'Show 2',
|
252
|
-
icon: 'plus-sign',
|
253
|
-
items: [
|
254
|
-
|
255
|
-
],
|
256
|
-
},
|
257
|
-
],
|
258
|
-
},
|
259
|
-
{
|
260
|
-
type: 'submenu',
|
261
|
-
label: 'Rundown',
|
262
|
-
icon: 'plus-sign',
|
263
|
-
|
264
|
-
items: [
|
265
|
-
{
|
266
|
-
type: 'submenu',
|
267
|
-
label: 'Show 1',
|
268
|
-
icon: 'plus-sign',
|
269
|
-
items: [
|
270
|
-
|
271
|
-
],
|
272
|
-
},
|
273
|
-
{
|
274
|
-
type: 'submenu',
|
275
|
-
label: 'Show 2',
|
276
|
-
icon: 'plus-sign',
|
277
|
-
items: [
|
278
|
-
|
279
|
-
],
|
280
|
-
},
|
281
|
-
],
|
282
|
-
},
|
283
|
-
{
|
284
|
-
type: 'submenu',
|
285
|
-
label: 'Rundown',
|
286
|
-
icon: 'plus-sign',
|
287
|
-
|
288
|
-
items: [
|
289
|
-
{
|
290
|
-
type: 'submenu',
|
291
|
-
label: 'Show 1',
|
292
|
-
icon: 'plus-sign',
|
293
|
-
items: [
|
294
|
-
|
295
|
-
],
|
296
|
-
},
|
297
|
-
{
|
298
|
-
type: 'submenu',
|
299
|
-
label: 'Show 2',
|
300
|
-
icon: 'plus-sign',
|
301
|
-
items: [
|
302
|
-
|
303
|
-
],
|
304
|
-
},
|
305
|
-
],
|
306
|
-
},
|
307
|
-
{
|
308
|
-
type: 'submenu',
|
309
|
-
label: 'Rundown',
|
310
|
-
icon: 'plus-sign',
|
311
|
-
|
312
|
-
items: [
|
313
|
-
{
|
314
|
-
type: 'submenu',
|
315
|
-
label: 'Show 1',
|
316
|
-
icon: 'plus-sign',
|
317
|
-
items: [
|
318
|
-
|
319
|
-
],
|
320
|
-
},
|
321
|
-
{
|
322
|
-
type: 'submenu',
|
323
|
-
label: 'Show 2',
|
324
|
-
icon: 'plus-sign',
|
325
|
-
items: [
|
326
|
-
|
327
|
-
],
|
328
|
-
},
|
329
|
-
],
|
330
|
-
},
|
331
|
-
{
|
332
|
-
type: 'submenu',
|
333
|
-
label: 'Rundown',
|
334
|
-
icon: 'plus-sign',
|
335
|
-
|
336
|
-
items: [
|
337
|
-
{
|
338
|
-
type: 'submenu',
|
339
|
-
label: 'Show 1',
|
340
|
-
icon: 'plus-sign',
|
341
|
-
items: [
|
342
|
-
|
343
|
-
],
|
344
|
-
},
|
345
|
-
{
|
346
|
-
type: 'submenu',
|
347
|
-
label: 'Show 2',
|
348
|
-
icon: 'plus-sign',
|
349
|
-
items: [
|
350
|
-
|
351
|
-
],
|
352
|
-
},
|
353
|
-
],
|
354
|
-
},
|
355
|
-
{
|
356
|
-
type: 'submenu',
|
357
|
-
label: 'Rundown',
|
358
|
-
icon: 'plus-sign',
|
359
|
-
|
360
|
-
items: [
|
361
|
-
{
|
362
|
-
type: 'submenu',
|
363
|
-
label: 'Show 1',
|
364
|
-
icon: 'plus-sign',
|
365
|
-
items: [
|
366
|
-
|
367
|
-
],
|
368
|
-
},
|
369
|
-
{
|
370
|
-
type: 'submenu',
|
371
|
-
label: 'Show 2',
|
372
|
-
icon: 'plus-sign',
|
373
|
-
items: [
|
374
|
-
|
375
|
-
],
|
376
|
-
},
|
377
|
-
],
|
378
|
-
},
|
379
|
-
{
|
380
|
-
type: 'submenu',
|
381
|
-
label: 'Rundown',
|
382
|
-
icon: 'plus-sign',
|
383
|
-
|
384
|
-
items: [
|
385
|
-
{
|
386
|
-
type: 'submenu',
|
387
|
-
label: 'Show 1',
|
388
|
-
icon: 'plus-sign',
|
389
|
-
items: [
|
390
|
-
|
391
|
-
],
|
392
|
-
},
|
393
|
-
{
|
394
|
-
type: 'submenu',
|
395
|
-
label: 'Show 2',
|
396
|
-
icon: 'plus-sign',
|
397
|
-
items: [
|
398
|
-
|
399
|
-
],
|
400
|
-
},
|
401
|
-
],
|
402
|
-
},
|
403
|
-
{
|
404
|
-
type: 'submenu',
|
405
|
-
label: 'Rundown',
|
406
|
-
icon: 'plus-sign',
|
407
|
-
|
408
|
-
items: [
|
409
|
-
{
|
410
|
-
type: 'submenu',
|
411
|
-
label: 'Show 1',
|
412
|
-
icon: 'plus-sign',
|
413
|
-
items: [
|
414
|
-
|
415
|
-
],
|
416
|
-
},
|
417
|
-
{
|
418
|
-
type: 'submenu',
|
419
|
-
label: 'Show 2',
|
420
|
-
icon: 'plus-sign',
|
421
|
-
items: [
|
422
|
-
|
423
|
-
],
|
424
|
-
},
|
425
|
-
],
|
426
|
-
},
|
427
|
-
{
|
428
|
-
type: 'submenu',
|
429
|
-
label: 'Rundown',
|
430
|
-
icon: 'plus-sign',
|
431
|
-
|
432
|
-
items: [
|
433
|
-
{
|
434
|
-
type: 'submenu',
|
435
|
-
label: 'Show 1',
|
436
|
-
icon: 'plus-sign',
|
437
|
-
|
438
|
-
items: [
|
439
|
-
|
440
|
-
],
|
441
|
-
},
|
442
|
-
{
|
443
|
-
type: 'submenu',
|
444
|
-
label: 'Show 2',
|
445
|
-
icon: 'plus-sign',
|
446
|
-
items: [
|
447
|
-
|
448
|
-
],
|
449
|
-
},
|
450
|
-
],
|
451
|
-
},
|
452
|
-
{
|
453
|
-
type: 'submenu',
|
454
|
-
label: 'Rundown',
|
455
|
-
icon: 'plus-sign',
|
456
|
-
|
457
|
-
items: [
|
458
|
-
{
|
459
|
-
type: 'submenu',
|
460
|
-
label: 'Show 1',
|
461
|
-
icon: 'plus-sign',
|
462
|
-
items: [
|
463
|
-
|
464
|
-
],
|
465
|
-
},
|
466
|
-
{
|
467
|
-
type: 'submenu',
|
468
|
-
label: 'Show 2',
|
469
|
-
icon: 'plus-sign',
|
470
|
-
items: [
|
471
|
-
|
472
|
-
],
|
473
|
-
},
|
474
|
-
],
|
475
|
-
},
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
],
|
480
|
-
},
|
481
|
-
]}
|
482
|
-
footer={[
|
483
|
-
{
|
484
|
-
type: 'group',
|
485
|
-
items: [
|
486
|
-
{
|
487
|
-
icon: 'rundown',
|
488
|
-
label: 'Create new Show',
|
489
|
-
onSelect: () => false,
|
490
|
-
},
|
491
|
-
],
|
492
|
-
},
|
493
|
-
{
|
494
|
-
type: 'group',
|
495
|
-
label: 'Create new',
|
496
|
-
items: [
|
497
|
-
{
|
498
|
-
type: 'submenu',
|
499
|
-
label: 'Rundown',
|
500
|
-
icon: 'plus-sign',
|
501
|
-
items: [
|
502
|
-
{
|
503
|
-
type: 'submenu',
|
504
|
-
label: 'Show 1',
|
505
|
-
icon: 'plus-sign',
|
506
|
-
items: [
|
507
|
-
|
508
|
-
],
|
509
|
-
},
|
510
|
-
{
|
511
|
-
type: 'submenu',
|
512
|
-
label: 'Show 2',
|
513
|
-
icon: 'plus-sign',
|
514
|
-
items: [
|
515
|
-
|
516
|
-
],
|
517
|
-
},
|
518
|
-
],
|
519
|
-
},
|
520
|
-
],
|
521
|
-
},
|
522
|
-
]}
|
523
|
-
>
|
524
|
-
</Dropdown>
|
525
|
-
</Markup.ReactMarkupPreview>
|
526
|
-
<Markup.ReactMarkupCode>{`
|
527
|
-
<Dropdown
|
528
|
-
items={[
|
529
|
-
{ label: 'Action 1', onSelect: () => 1 },
|
530
|
-
{ label: 'Action 2', onSelect: () => 1 },
|
531
|
-
{ label: 'Action 3', onSelect: () => 1 },
|
532
|
-
{ label: 'Action 4', onSelect: () => 1 },
|
533
|
-
{ label: 'Action 5', onSelect: () => 1 },
|
534
|
-
{ label: 'Action 6', onSelect: () => 1 },
|
535
|
-
]}>
|
536
|
-
Drop append to body
|
537
|
-
</Dropdown>
|
538
|
-
`}
|
539
|
-
</Markup.ReactMarkupCode>
|
540
|
-
</Markup.ReactMarkup>
|
541
|
-
|
542
66
|
<h3 className="docs-page__h3">Multilevel dropdown</h3>
|
543
67
|
<p className='docs-page__paragraph'>To create a second level in the dropdown menu add item with props <code>type = 'submenu'</code> and <code>item</code>.
|
544
68
|
The submenu opens by default on the right side of the parent menu.</p>
|
@@ -685,11 +209,10 @@ export default class DropdownDoc extends React.Component {
|
|
685
209
|
<p className='docs-page__paragraph'>Example of a dropdown inside a subnavigation element.</p>
|
686
210
|
<Markup.ReactMarkup>
|
687
211
|
<Markup.ReactMarkupPreview>
|
688
|
-
<SubNav
|
212
|
+
<SubNav color='darker'>
|
689
213
|
<h3 className="subnav__page-title">Subnav title</h3>
|
690
214
|
<Dropdown
|
691
215
|
//align='right'
|
692
|
-
append
|
693
216
|
header={[
|
694
217
|
{
|
695
218
|
type: 'group', label: 'actions', items: [
|
@@ -747,7 +270,7 @@ export default class DropdownDoc extends React.Component {
|
|
747
270
|
</SubNav>
|
748
271
|
</Markup.ReactMarkupPreview>
|
749
272
|
<Markup.ReactMarkupCode>{`
|
750
|
-
<SubNav
|
273
|
+
<SubNav color='darker'>
|
751
274
|
<h3 className="subnav__page-title">Subnav title</h3>
|
752
275
|
<Dropdown
|
753
276
|
items={[
|
@@ -781,10 +304,9 @@ export default class DropdownDoc extends React.Component {
|
|
781
304
|
<p className='docs-page__paragraph'></p>
|
782
305
|
<Markup.ReactMarkup>
|
783
306
|
<Markup.ReactMarkupPreview>
|
784
|
-
<SubNav
|
307
|
+
<SubNav color='darker'>
|
785
308
|
<h3 className="subnav__page-title">Subnav title</h3>
|
786
309
|
<Dropdown
|
787
|
-
append={true}
|
788
310
|
header={[
|
789
311
|
{
|
790
312
|
type: 'group',
|
@@ -894,7 +416,7 @@ export default class DropdownDoc extends React.Component {
|
|
894
416
|
</SubNav>
|
895
417
|
</Markup.ReactMarkupPreview>
|
896
418
|
<Markup.ReactMarkupCode>{`
|
897
|
-
<SubNav
|
419
|
+
<SubNav color='darker'>
|
898
420
|
<h3 className="subnav__page-title">Subnav title</h3>
|
899
421
|
<Dropdown
|
900
422
|
header={[
|
@@ -945,7 +467,6 @@ export default class DropdownDoc extends React.Component {
|
|
945
467
|
<PropsList>
|
946
468
|
<Prop name='label' isRequired={false} type='string' default='/' description='Text value of label.'/>
|
947
469
|
<Prop name='align' isRequired={false} type='left | right' default='left' description='Position of dropdown menu based on button'/>
|
948
|
-
<Prop name='append' isRequired={false} type='boolean' default='false' description='Append inner dropdown menu to the body'/>
|
949
470
|
<Prop name='items' isRequired={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of dropdown menu'/>
|
950
471
|
<Prop name='children' isRequired={true} type='React.ReactNode' default='/' description='If children is "string" type than button have default style with arrow, also children can be custom styled buttons'/>
|
951
472
|
</PropsList>
|
@@ -79,7 +79,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
79
79
|
</ButtonGroup>
|
80
80
|
|
81
81
|
<Modal headerTemplate="Basic modal"
|
82
|
-
zIndex={10000}
|
83
82
|
maximizable
|
84
83
|
visible={this.state.modalBasic}
|
85
84
|
onHide={() => {this.setState({modalBasic: false})}}>
|
@@ -240,7 +239,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
240
239
|
<Markup.ReactMarkupPreview>
|
241
240
|
<Button text="Maximizable modal" onClick={() => this.setState({maximizableModal: true})} />
|
242
241
|
<Modal headerTemplate="Maximizable modal"
|
243
|
-
zIndex={1000}
|
244
242
|
maximizable
|
245
243
|
visible={this.state.maximizableModal}
|
246
244
|
size="small"
|
@@ -261,7 +259,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
261
259
|
<Button text="Maximizable modal" onClick={() => this.setState({maximizableModal: true})} />
|
262
260
|
<Modal
|
263
261
|
headerTemplate="Maximizable modal"
|
264
|
-
zIndex={1000}
|
265
262
|
maximizable
|
266
263
|
visible={this.state.maximizableModal}
|
267
264
|
size="small"
|
@@ -284,7 +281,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
284
281
|
|
285
282
|
<Modal headerTemplate="Modal with position top"
|
286
283
|
position="top"
|
287
|
-
zIndex={10000}
|
288
284
|
visible={this.state.top}
|
289
285
|
onHide={() => {this.setState({top: false})}}>
|
290
286
|
<p>This modal has position top.</p>
|
@@ -292,7 +288,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
292
288
|
|
293
289
|
<Modal headerTemplate="Modal with position bottom"
|
294
290
|
position="bottom"
|
295
|
-
zIndex={10000}
|
296
291
|
visible={this.state.bottom}
|
297
292
|
onHide={() => {this.setState({bottom: false})}}>
|
298
293
|
<p>This modal has position bottom.</p>
|
@@ -300,7 +295,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
300
295
|
|
301
296
|
<Modal headerTemplate="Modal with position left"
|
302
297
|
position="left"
|
303
|
-
zIndex={10000}
|
304
298
|
visible={this.state.left}
|
305
299
|
onHide={() => {this.setState({left: false})}}>
|
306
300
|
<p>This modal has position left.</p>
|
@@ -308,7 +302,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
308
302
|
|
309
303
|
<Modal headerTemplate="Modal with position right"
|
310
304
|
position="right"
|
311
|
-
zIndex={10000}
|
312
305
|
visible={this.state.right}
|
313
306
|
onHide={() => {this.setState({right: false})}}>
|
314
307
|
<p>This modal has position right.</p>
|
@@ -317,7 +310,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
317
310
|
<Markup.ReactMarkupCode>{`
|
318
311
|
<Modal headerTemplate="Modal with position top"
|
319
312
|
position="top"
|
320
|
-
zIndex={10000}
|
321
313
|
visible={this.state.top}
|
322
314
|
onHide={() => {this.setState({top: false})}}>
|
323
315
|
<p>This modal has position top.</p>
|
@@ -325,7 +317,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
325
317
|
|
326
318
|
<Modal headerTemplate="Modal with position bottom"
|
327
319
|
position="bottom"
|
328
|
-
zIndex={10000}
|
329
320
|
visible={this.state.bottom}
|
330
321
|
onHide={() => {this.setState({bottom: false})}}>
|
331
322
|
<p>This modal has position bottom.</p>
|
@@ -333,7 +324,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
333
324
|
|
334
325
|
<Modal headerTemplate="Modal with position left"
|
335
326
|
position="left"
|
336
|
-
zIndex={10000}
|
337
327
|
visible={this.state.left}
|
338
328
|
onHide={() => {this.setState({left: false})}}>
|
339
329
|
<p>This modal has position left.</p>
|
@@ -341,7 +331,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
341
331
|
|
342
332
|
<Modal headerTemplate="Modal with position right"
|
343
333
|
position="right"
|
344
|
-
zIndex={10000}
|
345
334
|
visible={this.state.right}
|
346
335
|
onHide={() => {this.setState({right: false})}}>
|
347
336
|
<p>This modal has position right.</p>
|
@@ -358,7 +347,6 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
358
347
|
<Prop name='size' isRequired={false} type='small | medium | large | x-large' default='/' description='Size of the modal. If not defined it will adapt to the width of the content.' />
|
359
348
|
<Prop name='position' isRequired={false} type="center | top | bottom | left | right | top-left | top-right | bottom-left | bottom-right" default='center' description='Position of the dialog.' />
|
360
349
|
<Prop name='visible' isRequired={true} type='boolean' default='false' description='Specifies the visibility of the dialog' />
|
361
|
-
<Prop name='zIndex' isRequired={true} type='number' default='false' description='zIndex of modal' />
|
362
350
|
<Prop name='contentPadding' isRequired={true} type="'none' | 'small' | 'medium' | 'large'" default='false' description='Padding of content' />
|
363
351
|
<Prop name='contentBg' isRequired={true} type="'default' | 'medium' | 'dark'" default='false' description='Background of content' />
|
364
352
|
<Prop name='headerTemplate' isRequired={false} type='element' default='null' description='Label of header' />
|
@@ -71,7 +71,6 @@ export class MultiselectDocs extends React.Component<{}, IState> {
|
|
71
71
|
placeholder='Select a color'
|
72
72
|
filter
|
73
73
|
showSelectAll
|
74
|
-
zIndex={2000}
|
75
74
|
onChange={(e: any) => this.setState({value: e})}
|
76
75
|
/>
|
77
76
|
</div>
|
@@ -88,7 +87,6 @@ export class MultiselectDocs extends React.Component<{}, IState> {
|
|
88
87
|
placeholder='Select a color'
|
89
88
|
filter
|
90
89
|
showSelectAll
|
91
|
-
zIndex={2000}
|
92
90
|
onChange={(e: any) => this.setState({value: e})}
|
93
91
|
/>
|
94
92
|
`}</Markup.ReactMarkupCode>
|