@patternfly/patternfly 4.180.0 → 4.182.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/images/status-icon-sprite.svg +38 -0
- package/components/FormControl/form-control.css +26 -0
- package/components/FormControl/form-control.scss +30 -1
- package/components/Masthead/masthead.css +21 -27
- package/components/Masthead/masthead.scss +21 -27
- package/components/Menu/menu.css +10 -0
- package/components/Menu/menu.scss +14 -0
- package/components/MenuToggle/menu-toggle.css +141 -7
- package/components/MenuToggle/menu-toggle.scss +208 -8
- package/docs/components/FormControl/examples/FormControl.md +151 -0
- package/docs/components/Menu/examples/Menu.md +67 -2
- package/docs/components/MenuToggle/examples/MenuToggle.md +552 -20
- package/docs/components/Page/examples/Page.md +11 -2
- package/docs/components/Table/examples/Table.md +8 -0
- package/docs/components/Wizard/examples/Wizard.md +6 -6
- package/docs/demos/Alert/examples/Alert.md +20 -40
- package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
- package/docs/demos/ContextSelector/examples/ContextSelector.md +86 -166
- package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
- package/docs/demos/Drawer/examples/Drawer.md +60 -120
- package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
- package/docs/demos/Masthead/examples/Masthead.md +144 -284
- package/docs/demos/Nav/examples/Nav.md +203 -343
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
- package/docs/demos/Page/examples/Page.md +589 -1137
- package/docs/demos/Table/examples/Table.md +26 -26
- package/docs/demos/Tabs/examples/Tabs.md +11 -19
- package/docs/demos/Wizard/examples/Wizard.md +6 -2
- package/package.json +1 -1
- package/patternfly-no-reset.css +198 -34
- package/patternfly.css +198 -34
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -249,6 +249,534 @@ cssPrefix: pf-c-menu-toggle
|
|
|
249
249
|
|
|
250
250
|
```
|
|
251
251
|
|
|
252
|
+
### Split button (checkbox)
|
|
253
|
+
|
|
254
|
+
```html
|
|
255
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-disabled">
|
|
256
|
+
<label class="pf-c-check pf-m-standalone">
|
|
257
|
+
<input
|
|
258
|
+
class="pf-c-check__input"
|
|
259
|
+
type="checkbox"
|
|
260
|
+
id="split-button-checkbox-disabled-example-input"
|
|
261
|
+
name="split-button-checkbox-disabled-example-input"
|
|
262
|
+
aria-label="Standalone input"
|
|
263
|
+
disabled
|
|
264
|
+
/>
|
|
265
|
+
</label>
|
|
266
|
+
<button
|
|
267
|
+
class="pf-c-menu-toggle__button"
|
|
268
|
+
type="button"
|
|
269
|
+
aria-expanded="false"
|
|
270
|
+
id="split-button-checkbox-disabled-example-toggle-button"
|
|
271
|
+
aria-label="Menu toggle"
|
|
272
|
+
disabled
|
|
273
|
+
>
|
|
274
|
+
<span class="pf-c-menu-toggle__controls">
|
|
275
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
276
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
277
|
+
</span>
|
|
278
|
+
</span>
|
|
279
|
+
</button>
|
|
280
|
+
</div>
|
|
281
|
+
|
|
282
|
+
<div class="pf-c-menu-toggle pf-m-split-button">
|
|
283
|
+
<label class="pf-c-check pf-m-standalone">
|
|
284
|
+
<input
|
|
285
|
+
class="pf-c-check__input"
|
|
286
|
+
type="checkbox"
|
|
287
|
+
id="split-button-checkbox-example-input"
|
|
288
|
+
name="split-button-checkbox-example-input"
|
|
289
|
+
aria-label="Standalone input"
|
|
290
|
+
/>
|
|
291
|
+
</label>
|
|
292
|
+
<button
|
|
293
|
+
class="pf-c-menu-toggle__button"
|
|
294
|
+
type="button"
|
|
295
|
+
aria-expanded="false"
|
|
296
|
+
id="split-button-checkbox-example-toggle-button"
|
|
297
|
+
aria-label="Menu toggle"
|
|
298
|
+
>
|
|
299
|
+
<span class="pf-c-menu-toggle__controls">
|
|
300
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
301
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
302
|
+
</span>
|
|
303
|
+
</span>
|
|
304
|
+
</button>
|
|
305
|
+
</div>
|
|
306
|
+
|
|
307
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-split-button">
|
|
308
|
+
<label class="pf-c-check pf-m-standalone">
|
|
309
|
+
<input
|
|
310
|
+
class="pf-c-check__input"
|
|
311
|
+
type="checkbox"
|
|
312
|
+
id="split-button-checkbox-expanded-example-input"
|
|
313
|
+
name="split-button-checkbox-expanded-example-input"
|
|
314
|
+
aria-label="Standalone input"
|
|
315
|
+
/>
|
|
316
|
+
</label>
|
|
317
|
+
<button
|
|
318
|
+
class="pf-c-menu-toggle__button"
|
|
319
|
+
type="button"
|
|
320
|
+
aria-expanded="true"
|
|
321
|
+
id="split-button-checkbox-expanded-example-toggle-button"
|
|
322
|
+
aria-label="Menu toggle"
|
|
323
|
+
>
|
|
324
|
+
<span class="pf-c-menu-toggle__controls">
|
|
325
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
326
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
327
|
+
</span>
|
|
328
|
+
</span>
|
|
329
|
+
</button>
|
|
330
|
+
</div>
|
|
331
|
+
|
|
332
|
+
```
|
|
333
|
+
|
|
334
|
+
### Split button (checkbox with toggle text)
|
|
335
|
+
|
|
336
|
+
```html
|
|
337
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-disabled">
|
|
338
|
+
<label
|
|
339
|
+
class="pf-c-check"
|
|
340
|
+
for="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
341
|
+
>
|
|
342
|
+
<input
|
|
343
|
+
class="pf-c-check__input"
|
|
344
|
+
type="checkbox"
|
|
345
|
+
id="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
346
|
+
name="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
347
|
+
disabled
|
|
348
|
+
/>
|
|
349
|
+
<span class="pf-c-check__label pf-m-disabled">10 selected</span>
|
|
350
|
+
</label>
|
|
351
|
+
<button
|
|
352
|
+
class="pf-c-menu-toggle__button"
|
|
353
|
+
type="button"
|
|
354
|
+
aria-expanded="false"
|
|
355
|
+
id="split-button-checkbox-with-toggle-text-disabled-example-toggle-button"
|
|
356
|
+
aria-label="Menu toggle"
|
|
357
|
+
disabled
|
|
358
|
+
>
|
|
359
|
+
<span class="pf-c-menu-toggle__controls">
|
|
360
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
361
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
362
|
+
</span>
|
|
363
|
+
</span>
|
|
364
|
+
</button>
|
|
365
|
+
</div>
|
|
366
|
+
|
|
367
|
+
<div class="pf-c-menu-toggle pf-m-split-button">
|
|
368
|
+
<label
|
|
369
|
+
class="pf-c-check"
|
|
370
|
+
for="split-button-checkbox-with-toggle-text-example-input"
|
|
371
|
+
>
|
|
372
|
+
<input
|
|
373
|
+
class="pf-c-check__input"
|
|
374
|
+
type="checkbox"
|
|
375
|
+
id="split-button-checkbox-with-toggle-text-example-input"
|
|
376
|
+
name="split-button-checkbox-with-toggle-text-example-input"
|
|
377
|
+
/>
|
|
378
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
379
|
+
</label>
|
|
380
|
+
<button
|
|
381
|
+
class="pf-c-menu-toggle__button"
|
|
382
|
+
type="button"
|
|
383
|
+
aria-expanded="false"
|
|
384
|
+
id="split-button-checkbox-with-toggle-text-example-toggle-button"
|
|
385
|
+
aria-label="Menu toggle"
|
|
386
|
+
>
|
|
387
|
+
<span class="pf-c-menu-toggle__controls">
|
|
388
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
389
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
390
|
+
</span>
|
|
391
|
+
</span>
|
|
392
|
+
</button>
|
|
393
|
+
</div>
|
|
394
|
+
|
|
395
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-split-button">
|
|
396
|
+
<label
|
|
397
|
+
class="pf-c-check"
|
|
398
|
+
for="split-button-checkbox-with-toggle-text-expanded-example-input"
|
|
399
|
+
>
|
|
400
|
+
<input
|
|
401
|
+
class="pf-c-check__input"
|
|
402
|
+
type="checkbox"
|
|
403
|
+
id="split-button-checkbox-with-toggle-text-expanded-example-input"
|
|
404
|
+
name="split-button-checkbox-with-toggle-text-expanded-example-input"
|
|
405
|
+
/>
|
|
406
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
407
|
+
</label>
|
|
408
|
+
<button
|
|
409
|
+
class="pf-c-menu-toggle__button"
|
|
410
|
+
type="button"
|
|
411
|
+
aria-expanded="true"
|
|
412
|
+
id="split-button-checkbox-with-toggle-text-expanded-example-toggle-button"
|
|
413
|
+
aria-label="Menu toggle"
|
|
414
|
+
>
|
|
415
|
+
<span class="pf-c-menu-toggle__controls">
|
|
416
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
417
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
418
|
+
</span>
|
|
419
|
+
</span>
|
|
420
|
+
</button>
|
|
421
|
+
</div>
|
|
422
|
+
|
|
423
|
+
```
|
|
424
|
+
|
|
425
|
+
### Split button, primary
|
|
426
|
+
|
|
427
|
+
```html
|
|
428
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary">
|
|
429
|
+
<label
|
|
430
|
+
class="pf-c-check"
|
|
431
|
+
for="split-button-checkbox-primary-disabled-example-input"
|
|
432
|
+
>
|
|
433
|
+
<input
|
|
434
|
+
class="pf-c-check__input"
|
|
435
|
+
type="checkbox"
|
|
436
|
+
id="split-button-checkbox-primary-disabled-example-input"
|
|
437
|
+
name="split-button-checkbox-primary-disabled-example-input"
|
|
438
|
+
disabled
|
|
439
|
+
/>
|
|
440
|
+
<span class="pf-c-check__label pf-m-disabled">10 selected</span>
|
|
441
|
+
</label>
|
|
442
|
+
<button
|
|
443
|
+
class="pf-c-menu-toggle__button"
|
|
444
|
+
type="button"
|
|
445
|
+
aria-expanded="false"
|
|
446
|
+
id="split-button-checkbox-primary-disabled-example-toggle-button"
|
|
447
|
+
aria-label="Menu toggle"
|
|
448
|
+
disabled
|
|
449
|
+
>
|
|
450
|
+
<span class="pf-c-menu-toggle__controls">
|
|
451
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
452
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
453
|
+
</span>
|
|
454
|
+
</span>
|
|
455
|
+
</button>
|
|
456
|
+
</div>
|
|
457
|
+
|
|
458
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-primary">
|
|
459
|
+
<label class="pf-c-check" for="split-button-checkbox-primary-example-input">
|
|
460
|
+
<input
|
|
461
|
+
class="pf-c-check__input"
|
|
462
|
+
type="checkbox"
|
|
463
|
+
id="split-button-checkbox-primary-example-input"
|
|
464
|
+
name="split-button-checkbox-primary-example-input"
|
|
465
|
+
/>
|
|
466
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
467
|
+
</label>
|
|
468
|
+
<button
|
|
469
|
+
class="pf-c-menu-toggle__button"
|
|
470
|
+
type="button"
|
|
471
|
+
aria-expanded="false"
|
|
472
|
+
id="split-button-checkbox-primary-example-toggle-button"
|
|
473
|
+
aria-label="Menu toggle"
|
|
474
|
+
>
|
|
475
|
+
<span class="pf-c-menu-toggle__controls">
|
|
476
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
477
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
478
|
+
</span>
|
|
479
|
+
</span>
|
|
480
|
+
</button>
|
|
481
|
+
</div>
|
|
482
|
+
|
|
483
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary">
|
|
484
|
+
<label
|
|
485
|
+
class="pf-c-check"
|
|
486
|
+
for="split-button-checkbox-primary-expanded-example-input"
|
|
487
|
+
>
|
|
488
|
+
<input
|
|
489
|
+
class="pf-c-check__input"
|
|
490
|
+
type="checkbox"
|
|
491
|
+
id="split-button-checkbox-primary-expanded-example-input"
|
|
492
|
+
name="split-button-checkbox-primary-expanded-example-input"
|
|
493
|
+
/>
|
|
494
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
495
|
+
</label>
|
|
496
|
+
<button
|
|
497
|
+
class="pf-c-menu-toggle__button"
|
|
498
|
+
type="button"
|
|
499
|
+
aria-expanded="true"
|
|
500
|
+
id="split-button-checkbox-primary-expanded-example-toggle-button"
|
|
501
|
+
aria-label="Menu toggle"
|
|
502
|
+
>
|
|
503
|
+
<span class="pf-c-menu-toggle__controls">
|
|
504
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
505
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
506
|
+
</span>
|
|
507
|
+
</span>
|
|
508
|
+
</button>
|
|
509
|
+
</div>
|
|
510
|
+
|
|
511
|
+
```
|
|
512
|
+
|
|
513
|
+
### Split button, secondary
|
|
514
|
+
|
|
515
|
+
```html
|
|
516
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary">
|
|
517
|
+
<label
|
|
518
|
+
class="pf-c-check"
|
|
519
|
+
for="split-button-checkbox-secondary-disabled-example-input"
|
|
520
|
+
>
|
|
521
|
+
<input
|
|
522
|
+
class="pf-c-check__input"
|
|
523
|
+
type="checkbox"
|
|
524
|
+
id="split-button-checkbox-secondary-disabled-example-input"
|
|
525
|
+
name="split-button-checkbox-secondary-disabled-example-input"
|
|
526
|
+
disabled
|
|
527
|
+
/>
|
|
528
|
+
<span class="pf-c-check__label pf-m-disabled">10 selected</span>
|
|
529
|
+
</label>
|
|
530
|
+
<button
|
|
531
|
+
class="pf-c-menu-toggle__button"
|
|
532
|
+
type="button"
|
|
533
|
+
aria-expanded="false"
|
|
534
|
+
id="split-button-checkbox-secondary-disabled-example-toggle-button"
|
|
535
|
+
aria-label="Menu toggle"
|
|
536
|
+
disabled
|
|
537
|
+
>
|
|
538
|
+
<span class="pf-c-menu-toggle__controls">
|
|
539
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
540
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
541
|
+
</span>
|
|
542
|
+
</span>
|
|
543
|
+
</button>
|
|
544
|
+
</div>
|
|
545
|
+
|
|
546
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-secondary">
|
|
547
|
+
<label class="pf-c-check" for="split-button-checkbox-secondary-example-input">
|
|
548
|
+
<input
|
|
549
|
+
class="pf-c-check__input"
|
|
550
|
+
type="checkbox"
|
|
551
|
+
id="split-button-checkbox-secondary-example-input"
|
|
552
|
+
name="split-button-checkbox-secondary-example-input"
|
|
553
|
+
/>
|
|
554
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
555
|
+
</label>
|
|
556
|
+
<button
|
|
557
|
+
class="pf-c-menu-toggle__button"
|
|
558
|
+
type="button"
|
|
559
|
+
aria-expanded="false"
|
|
560
|
+
id="split-button-checkbox-secondary-example-toggle-button"
|
|
561
|
+
aria-label="Menu toggle"
|
|
562
|
+
>
|
|
563
|
+
<span class="pf-c-menu-toggle__controls">
|
|
564
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
565
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
566
|
+
</span>
|
|
567
|
+
</span>
|
|
568
|
+
</button>
|
|
569
|
+
</div>
|
|
570
|
+
|
|
571
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary">
|
|
572
|
+
<label
|
|
573
|
+
class="pf-c-check"
|
|
574
|
+
for="split-button-checkbox-secondary-expanded-example-input"
|
|
575
|
+
>
|
|
576
|
+
<input
|
|
577
|
+
class="pf-c-check__input"
|
|
578
|
+
type="checkbox"
|
|
579
|
+
id="split-button-checkbox-secondary-expanded-example-input"
|
|
580
|
+
name="split-button-checkbox-secondary-expanded-example-input"
|
|
581
|
+
/>
|
|
582
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
583
|
+
</label>
|
|
584
|
+
<button
|
|
585
|
+
class="pf-c-menu-toggle__button"
|
|
586
|
+
type="button"
|
|
587
|
+
aria-expanded="true"
|
|
588
|
+
id="split-button-checkbox-secondary-expanded-example-toggle-button"
|
|
589
|
+
aria-label="Menu toggle"
|
|
590
|
+
>
|
|
591
|
+
<span class="pf-c-menu-toggle__controls">
|
|
592
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
593
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
594
|
+
</span>
|
|
595
|
+
</span>
|
|
596
|
+
</button>
|
|
597
|
+
</div>
|
|
598
|
+
|
|
599
|
+
```
|
|
600
|
+
|
|
601
|
+
### Split button (action)
|
|
602
|
+
|
|
603
|
+
```html
|
|
604
|
+
<div class="pf-c-menu-toggle pf-m-action pf-m-split-button pf-m-disabled">
|
|
605
|
+
<button class="pf-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
606
|
+
<button
|
|
607
|
+
class="pf-c-menu-toggle__button"
|
|
608
|
+
type="button"
|
|
609
|
+
aria-expanded="false"
|
|
610
|
+
id="split-button-checkbox-with-toggle-action-disabled-example-toggle-button"
|
|
611
|
+
aria-label="Menu toggle"
|
|
612
|
+
disabled
|
|
613
|
+
>
|
|
614
|
+
<span class="pf-c-menu-toggle__controls">
|
|
615
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
616
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
617
|
+
</span>
|
|
618
|
+
</span>
|
|
619
|
+
</button>
|
|
620
|
+
</div>
|
|
621
|
+
|
|
622
|
+
<div class="pf-c-menu-toggle pf-m-action pf-m-split-button">
|
|
623
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
624
|
+
<button
|
|
625
|
+
class="pf-c-menu-toggle__button"
|
|
626
|
+
type="button"
|
|
627
|
+
aria-expanded="false"
|
|
628
|
+
id="split-button-checkbox-with-toggle-action-example-toggle-button"
|
|
629
|
+
aria-label="Menu toggle"
|
|
630
|
+
>
|
|
631
|
+
<span class="pf-c-menu-toggle__controls">
|
|
632
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
633
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
634
|
+
</span>
|
|
635
|
+
</span>
|
|
636
|
+
</button>
|
|
637
|
+
</div>
|
|
638
|
+
|
|
639
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-action pf-m-split-button">
|
|
640
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
641
|
+
<button
|
|
642
|
+
class="pf-c-menu-toggle__button"
|
|
643
|
+
type="button"
|
|
644
|
+
aria-expanded="true"
|
|
645
|
+
id="split-button-checkbox-with-toggle-action-expanded-example-toggle-button"
|
|
646
|
+
aria-label="Menu toggle"
|
|
647
|
+
>
|
|
648
|
+
<span class="pf-c-menu-toggle__controls">
|
|
649
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
650
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
651
|
+
</span>
|
|
652
|
+
</span>
|
|
653
|
+
</button>
|
|
654
|
+
</div>
|
|
655
|
+
|
|
656
|
+
```
|
|
657
|
+
|
|
658
|
+
### Split button, primary (action)
|
|
659
|
+
|
|
660
|
+
```html
|
|
661
|
+
<div
|
|
662
|
+
class="pf-c-menu-toggle pf-m-action pf-m-split-button pf-m-disabled pf-m-primary"
|
|
663
|
+
>
|
|
664
|
+
<button class="pf-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
665
|
+
<button
|
|
666
|
+
class="pf-c-menu-toggle__button"
|
|
667
|
+
type="button"
|
|
668
|
+
aria-expanded="false"
|
|
669
|
+
id="split-button-checkbox-with-toggle-action-primary-disabled-example-toggle-button"
|
|
670
|
+
aria-label="Menu toggle"
|
|
671
|
+
disabled
|
|
672
|
+
>
|
|
673
|
+
<span class="pf-c-menu-toggle__controls">
|
|
674
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
675
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
676
|
+
</span>
|
|
677
|
+
</span>
|
|
678
|
+
</button>
|
|
679
|
+
</div>
|
|
680
|
+
|
|
681
|
+
<div class="pf-c-menu-toggle pf-m-action pf-m-split-button pf-m-primary">
|
|
682
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
683
|
+
<button
|
|
684
|
+
class="pf-c-menu-toggle__button"
|
|
685
|
+
type="button"
|
|
686
|
+
aria-expanded="false"
|
|
687
|
+
id="split-button-checkbox-with-toggle-action-primary-example-toggle-button"
|
|
688
|
+
aria-label="Menu toggle"
|
|
689
|
+
>
|
|
690
|
+
<span class="pf-c-menu-toggle__controls">
|
|
691
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
692
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
693
|
+
</span>
|
|
694
|
+
</span>
|
|
695
|
+
</button>
|
|
696
|
+
</div>
|
|
697
|
+
|
|
698
|
+
<div
|
|
699
|
+
class="pf-c-menu-toggle pf-m-expanded pf-m-action pf-m-split-button pf-m-primary"
|
|
700
|
+
>
|
|
701
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
702
|
+
<button
|
|
703
|
+
class="pf-c-menu-toggle__button"
|
|
704
|
+
type="button"
|
|
705
|
+
aria-expanded="true"
|
|
706
|
+
id="split-button-checkbox-with-toggle-action-primary-expanded-example-toggle-button"
|
|
707
|
+
aria-label="Menu toggle"
|
|
708
|
+
>
|
|
709
|
+
<span class="pf-c-menu-toggle__controls">
|
|
710
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
711
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
712
|
+
</span>
|
|
713
|
+
</span>
|
|
714
|
+
</button>
|
|
715
|
+
</div>
|
|
716
|
+
|
|
717
|
+
```
|
|
718
|
+
|
|
719
|
+
### Split button, secondary (action)
|
|
720
|
+
|
|
721
|
+
```html
|
|
722
|
+
<div
|
|
723
|
+
class="pf-c-menu-toggle pf-m-action pf-m-split-button pf-m-disabled pf-m-secondary"
|
|
724
|
+
>
|
|
725
|
+
<button class="pf-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
726
|
+
<button
|
|
727
|
+
class="pf-c-menu-toggle__button"
|
|
728
|
+
type="button"
|
|
729
|
+
aria-expanded="false"
|
|
730
|
+
id="split-button-checkbox-with-toggle-action-secondary-disabled-example-toggle-button"
|
|
731
|
+
aria-label="Menu toggle"
|
|
732
|
+
disabled
|
|
733
|
+
>
|
|
734
|
+
<span class="pf-c-menu-toggle__controls">
|
|
735
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
736
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
737
|
+
</span>
|
|
738
|
+
</span>
|
|
739
|
+
</button>
|
|
740
|
+
</div>
|
|
741
|
+
|
|
742
|
+
<div class="pf-c-menu-toggle pf-m-action pf-m-split-button pf-m-secondary">
|
|
743
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
744
|
+
<button
|
|
745
|
+
class="pf-c-menu-toggle__button"
|
|
746
|
+
type="button"
|
|
747
|
+
aria-expanded="false"
|
|
748
|
+
id="split-button-checkbox-with-toggle-action-secondary-example-toggle-button"
|
|
749
|
+
aria-label="Menu toggle"
|
|
750
|
+
>
|
|
751
|
+
<span class="pf-c-menu-toggle__controls">
|
|
752
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
753
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
754
|
+
</span>
|
|
755
|
+
</span>
|
|
756
|
+
</button>
|
|
757
|
+
</div>
|
|
758
|
+
|
|
759
|
+
<div
|
|
760
|
+
class="pf-c-menu-toggle pf-m-expanded pf-m-action pf-m-split-button pf-m-secondary"
|
|
761
|
+
>
|
|
762
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
763
|
+
<button
|
|
764
|
+
class="pf-c-menu-toggle__button"
|
|
765
|
+
type="button"
|
|
766
|
+
aria-expanded="true"
|
|
767
|
+
id="split-button-checkbox-with-toggle-action-secondary-expanded-example-toggle-button"
|
|
768
|
+
aria-label="Menu toggle"
|
|
769
|
+
>
|
|
770
|
+
<span class="pf-c-menu-toggle__controls">
|
|
771
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
772
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
773
|
+
</span>
|
|
774
|
+
</span>
|
|
775
|
+
</button>
|
|
776
|
+
</div>
|
|
777
|
+
|
|
778
|
+
```
|
|
779
|
+
|
|
252
780
|
### With icon/image and text
|
|
253
781
|
|
|
254
782
|
```html
|
|
@@ -372,26 +900,30 @@ cssPrefix: pf-c-menu-toggle
|
|
|
372
900
|
|
|
373
901
|
### Accessibility
|
|
374
902
|
|
|
375
|
-
| Class | Applied to
|
|
376
|
-
| ------------------------------- |
|
|
377
|
-
| `aria-expanded="true"` | `.pf-c-menu-toggle`
|
|
378
|
-
| `aria-expanded="false"` | `.pf-c-menu-toggle`
|
|
379
|
-
| `aria-label="Descriptive text"` | `.pf-c-menu-toggle.pf-m-plain`
|
|
380
|
-
| `disabled` | `.pf-c-menu-toggle`
|
|
903
|
+
| Class | Applied to | Outcome |
|
|
904
|
+
| ------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------- |
|
|
905
|
+
| `aria-expanded="true"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. |
|
|
906
|
+
| `aria-expanded="false"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. |
|
|
907
|
+
| `aria-label="Descriptive text"` | `.pf-c-menu-toggle.pf-m-plain` | Gives the plain menu toggle component an accessible label. |
|
|
908
|
+
| `disabled` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. |
|
|
381
909
|
|
|
382
910
|
### Usage
|
|
383
911
|
|
|
384
|
-
| Class | Applied
|
|
385
|
-
| -------------------------------- |
|
|
386
|
-
| `.pf-c-menu-toggle` | `<button>`
|
|
387
|
-
| `.pf-c-menu-toggle__icon` | `<span>`
|
|
388
|
-
| `.pf-c-menu-toggle__text` | `<span>`
|
|
389
|
-
| `.pf-c-menu-toggle__count` | `<span>`
|
|
390
|
-
| `.pf-c-menu-toggle__controls` | `<span>`
|
|
391
|
-
| `.pf-c-menu-toggle__toggle-icon` | `<span>`
|
|
392
|
-
| `.pf-
|
|
393
|
-
| `.pf-m-
|
|
394
|
-
| `.pf-m-
|
|
395
|
-
| `.pf-m-
|
|
396
|
-
| `.pf-m-
|
|
397
|
-
| `.pf-m-
|
|
912
|
+
| Class | Applied | Outcome |
|
|
913
|
+
| -------------------------------- | ------------------------------------- | -------------------------------------------------------------------------- |
|
|
914
|
+
| `.pf-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
|
|
915
|
+
| `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon/image. |
|
|
916
|
+
| `.pf-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
|
|
917
|
+
| `.pf-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
|
|
918
|
+
| `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
|
|
919
|
+
| `.pf-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
|
|
920
|
+
| `.pf-c-menu-toggle__button` | `<button>` | Initiates the menu toggle button. |
|
|
921
|
+
| `.pf-m-split-button` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the split button variation. |
|
|
922
|
+
| `.pf-m-action` | `.pf-c-menu-toggle.pf-m-split-button` | Modifies the menu toggle component for the action, split button variation. |
|
|
923
|
+
| `.pf-m-disabled` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the disabled variation. |
|
|
924
|
+
| `.pf-m-primary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
|
|
925
|
+
| `.pf-m-secondary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
|
|
926
|
+
| `.pf-m-text` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
|
|
927
|
+
| `.pf-m-plain` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
|
|
928
|
+
| `.pf-m-expanded` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
|
|
929
|
+
| `.pf-m-full-height` | `.pf-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
|
|
@@ -136,7 +136,7 @@ wrapperTag: div
|
|
|
136
136
|
|
|
137
137
|
```
|
|
138
138
|
|
|
139
|
-
### Centered
|
|
139
|
+
### Centered section
|
|
140
140
|
|
|
141
141
|
```html
|
|
142
142
|
<div class="pf-c-page">
|
|
@@ -149,7 +149,16 @@ wrapperTag: div
|
|
|
149
149
|
</header>
|
|
150
150
|
<main class="pf-c-page__main" tabindex="-1">
|
|
151
151
|
<section class="pf-c-page__main-section pf-m-limit-width pf-m-align-center">
|
|
152
|
-
<div class="pf-c-page__main-body">
|
|
152
|
+
<div class="pf-c-page__main-body">
|
|
153
|
+
<div class="pf-c-card">
|
|
154
|
+
<div class="pf-c-card__body">
|
|
155
|
+
When a width limited page section is wider than the value of
|
|
156
|
+
<code>--pf-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
|
|
157
|
+
<br />
|
|
158
|
+
<br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
153
162
|
</section>
|
|
154
163
|
</main>
|
|
155
164
|
</div>
|
|
@@ -19965,6 +19965,14 @@ Add a [width modifier](#width-modifiers) to `thead th` to limit string length or
|
|
|
19965
19965
|
|
|
19966
19966
|
## Sticky table modifiers
|
|
19967
19967
|
|
|
19968
|
+
**Note:** Sticky table headers and columns have a higher `z-index` than the `z-index` used for menus (dropdown, select, etc). The intent is that the contents of a scrollable table will scroll under the sticky header/column, including any expanded menus. However, there may be use cases where a menu needs to appear on top of a sticky header/column, such as an expanded menu in a toolbar above a table with a sticky header.
|
|
19969
|
+
|
|
19970
|
+
There are a few ways this can be handled:
|
|
19971
|
+
|
|
19972
|
+
- Manipulate the `z-index` of the menu and/or table headers/columns manually.
|
|
19973
|
+
- Use the `menuAppendTo` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the `<body>` element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.
|
|
19974
|
+
- In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `z-index` than the `z-index` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.
|
|
19975
|
+
|
|
19968
19976
|
### Sticky header
|
|
19969
19977
|
|
|
19970
19978
|
```html
|