@patternfly/patternfly 6.0.0-alpha.86 → 6.0.0-alpha.88

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.
Files changed (34) hide show
  1. package/components/MenuToggle/menu-toggle.css +7 -22
  2. package/components/MenuToggle/menu-toggle.scss +8 -31
  3. package/docs/components/LogViewer/examples/LogViewer.md +30 -10
  4. package/docs/components/MenuToggle/examples/MenuToggle.md +132 -132
  5. package/docs/components/Toolbar/examples/Toolbar.md +21 -7
  6. package/docs/demos/AboutModal/examples/AboutModal.md +12 -4
  7. package/docs/demos/Alert/examples/Alert.md +36 -12
  8. package/docs/demos/BackToTop/examples/BackToTop.md +12 -4
  9. package/docs/demos/Banner/examples/Banner.md +24 -8
  10. package/docs/demos/CardView/examples/CardView.md +15 -5
  11. package/docs/demos/ContextSelector/examples/ContextSelector.md +36 -12
  12. package/docs/demos/Dashboard/examples/Dashboard.md +12 -4
  13. package/docs/demos/DataList/examples/DataList.md +57 -19
  14. package/docs/demos/DescriptionList/examples/DescriptionList.md +36 -12
  15. package/docs/demos/Drawer/examples/Drawer.md +60 -20
  16. package/docs/demos/JumpLinks/examples/JumpLinks.md +72 -24
  17. package/docs/demos/Masthead/examples/Masthead.md +48 -16
  18. package/docs/demos/Modal/examples/Modal.md +72 -24
  19. package/docs/demos/Nav/examples/Nav.md +72 -24
  20. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +60 -20
  21. package/docs/demos/Page/examples/Page.md +108 -36
  22. package/docs/demos/Page/examples/Penta.md +3 -1
  23. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +96 -32
  24. package/docs/demos/Skeleton/examples/Skeleton.md +12 -4
  25. package/docs/demos/Table/examples/Table.md +216 -72
  26. package/docs/demos/Tabs/examples/Tabs.md +75 -25
  27. package/docs/demos/Toolbar/examples/Toolbar.md +48 -16
  28. package/docs/demos/Wizard/examples/Wizard.md +108 -36
  29. package/package.json +1 -1
  30. package/patternfly-no-globals.css +7 -22
  31. package/patternfly-theme-dark-unversioned.css +7 -22
  32. package/patternfly.css +7 -22
  33. package/patternfly.min.css +1 -1
  34. package/patternfly.min.css.map +1 -1
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -206,49 +206,28 @@ cssPrefix: pf-v5-c-menu-toggle
206
206
  ### Plain
207
207
 
208
208
  ```html
209
- <div class="pf-v5-c-menu-toggle pf-m-plain">
210
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Actions">
211
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
212
- </button>
213
- </div>&nbsp;
214
209
  <button
215
210
  class="pf-v5-c-menu-toggle pf-m-plain"
216
211
  type="button"
217
212
  aria-expanded="false"
218
213
  aria-label="Actions"
219
214
  >
220
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
215
+ <span class="pf-v5-c-menu-toggle__icon">
216
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
217
+ </span>
221
218
  </button>
222
219
  &nbsp;
223
- <div class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded">
224
- <button
225
- class="pf-v5-c-button pf-m-expanded pf-m-plain"
226
- type="button"
227
- aria-expanded="true"
228
- aria-label="Actions"
229
- >
230
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
231
- </button>
232
- </div>&nbsp;
233
220
  <button
234
221
  class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
235
222
  type="button"
236
223
  aria-expanded="true"
237
224
  aria-label="Actions"
238
225
  >
239
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
226
+ <span class="pf-v5-c-menu-toggle__icon">
227
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
228
+ </span>
240
229
  </button>
241
230
  &nbsp;
242
- <div class="pf-v5-c-menu-toggle pf-m-plain pf-m-disabled">
243
- <button
244
- class="pf-v5-c-button pf-m-plain"
245
- type="button"
246
- aria-label="Actions"
247
- disabled
248
- >
249
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
250
- </button>
251
- </div>&nbsp;
252
231
  <button
253
232
  class="pf-v5-c-menu-toggle pf-m-plain pf-m-disabled"
254
233
  type="button"
@@ -256,7 +235,9 @@ cssPrefix: pf-v5-c-menu-toggle
256
235
  disabled
257
236
  aria-label="Actions"
258
237
  >
259
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
238
+ <span class="pf-v5-c-menu-toggle__icon">
239
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
240
+ </span>
260
241
  </button>
261
242
 
262
243
  ```
@@ -265,12 +246,11 @@ cssPrefix: pf-v5-c-menu-toggle
265
246
 
266
247
  ```html
267
248
  <button
268
- class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-disabled"
249
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
269
250
  type="button"
270
251
  aria-expanded="false"
271
- disabled
272
252
  >
273
- <span class="pf-v5-c-menu-toggle__text">Disabled</span>
253
+ <span class="pf-v5-c-menu-toggle__text">Custom text</span>
274
254
  <span class="pf-v5-c-menu-toggle__controls">
275
255
  <span class="pf-v5-c-menu-toggle__toggle-icon">
276
256
  <i class="fas fa-caret-down" aria-hidden="true"></i>
@@ -280,9 +260,9 @@ cssPrefix: pf-v5-c-menu-toggle
280
260
 
281
261
  &nbsp;
282
262
  <button
283
- class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
263
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-expanded"
284
264
  type="button"
285
- aria-expanded="false"
265
+ aria-expanded="true"
286
266
  >
287
267
  <span class="pf-v5-c-menu-toggle__text">Custom text</span>
288
268
  <span class="pf-v5-c-menu-toggle__controls">
@@ -294,11 +274,12 @@ cssPrefix: pf-v5-c-menu-toggle
294
274
 
295
275
  &nbsp;
296
276
  <button
297
- class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-expanded"
277
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-disabled"
298
278
  type="button"
299
- aria-expanded="true"
279
+ aria-expanded="false"
280
+ disabled
300
281
  >
301
- <span class="pf-v5-c-menu-toggle__text">Custom text</span>
282
+ <span class="pf-v5-c-menu-toggle__text">Disabled</span>
302
283
  <span class="pf-v5-c-menu-toggle__controls">
303
284
  <span class="pf-v5-c-menu-toggle__toggle-icon">
304
285
  <i class="fas fa-caret-down" aria-hidden="true"></i>
@@ -312,27 +293,25 @@ cssPrefix: pf-v5-c-menu-toggle
312
293
 
313
294
  ```html
314
295
  <div
315
- class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled"
316
- id="split-button-checkbox-disabled-example"
296
+ class="pf-v5-c-menu-toggle pf-m-split-button"
297
+ id="split-button-checkbox-example"
317
298
  >
318
299
  <label
319
300
  class="pf-v5-c-check pf-m-standalone"
320
- for="split-button-checkbox-disabled-example-input"
301
+ for="split-button-checkbox-example-input"
321
302
  >
322
303
  <input
323
304
  class="pf-v5-c-check__input"
324
305
  type="checkbox"
325
306
  aria-label="Standalone check"
326
- disabled
327
307
  />
328
308
  </label>
329
309
  <button
330
310
  class="pf-v5-c-menu-toggle__button"
331
311
  type="button"
332
312
  aria-expanded="false"
333
- id="split-button-checkbox-disabled-example-toggle-button"
313
+ id="split-button-checkbox-example-toggle-button"
334
314
  aria-label="Menu toggle"
335
- disabled
336
315
  >
337
316
  <span class="pf-v5-c-menu-toggle__controls">
338
317
  <span class="pf-v5-c-menu-toggle__toggle-icon">
@@ -343,12 +322,12 @@ cssPrefix: pf-v5-c-menu-toggle
343
322
  </div>
344
323
  &nbsp;
345
324
  <div
346
- class="pf-v5-c-menu-toggle pf-m-split-button"
347
- id="split-button-checkbox-example"
325
+ class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button"
326
+ id="split-button-checkbox-expanded-example"
348
327
  >
349
328
  <label
350
329
  class="pf-v5-c-check pf-m-standalone"
351
- for="split-button-checkbox-example-input"
330
+ for="split-button-checkbox-expanded-example-input"
352
331
  >
353
332
  <input
354
333
  class="pf-v5-c-check__input"
@@ -359,8 +338,8 @@ cssPrefix: pf-v5-c-menu-toggle
359
338
  <button
360
339
  class="pf-v5-c-menu-toggle__button"
361
340
  type="button"
362
- aria-expanded="false"
363
- id="split-button-checkbox-example-toggle-button"
341
+ aria-expanded="true"
342
+ id="split-button-checkbox-expanded-example-toggle-button"
364
343
  aria-label="Menu toggle"
365
344
  >
366
345
  <span class="pf-v5-c-menu-toggle__controls">
@@ -372,25 +351,27 @@ cssPrefix: pf-v5-c-menu-toggle
372
351
  </div>
373
352
  &nbsp;
374
353
  <div
375
- class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button"
376
- id="split-button-checkbox-expanded-example"
354
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled"
355
+ id="split-button-checkbox-disabled-example"
377
356
  >
378
357
  <label
379
358
  class="pf-v5-c-check pf-m-standalone"
380
- for="split-button-checkbox-expanded-example-input"
359
+ for="split-button-checkbox-disabled-example-input"
381
360
  >
382
361
  <input
383
362
  class="pf-v5-c-check__input"
384
363
  type="checkbox"
385
364
  aria-label="Standalone check"
365
+ disabled
386
366
  />
387
367
  </label>
388
368
  <button
389
369
  class="pf-v5-c-menu-toggle__button"
390
370
  type="button"
391
- aria-expanded="true"
392
- id="split-button-checkbox-expanded-example-toggle-button"
371
+ aria-expanded="false"
372
+ id="split-button-checkbox-disabled-example-toggle-button"
393
373
  aria-label="Menu toggle"
374
+ disabled
394
375
  >
395
376
  <span class="pf-v5-c-menu-toggle__controls">
396
377
  <span class="pf-v5-c-menu-toggle__toggle-icon">
@@ -405,33 +386,6 @@ cssPrefix: pf-v5-c-menu-toggle
405
386
  ### Split button (checkbox with toggle text)
406
387
 
407
388
  ```html
408
- <div
409
- class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled"
410
- id="split-button-checkbox-with-toggle-text-disabled-example"
411
- >
412
- <label
413
- class="pf-v5-c-check"
414
- for="split-button-checkbox-with-toggle-text-disabled-example-input"
415
- >
416
- <input class="pf-v5-c-check__input" type="checkbox" disabled />
417
- <label class="pf-v5-c-check__label pf-m-disabled" for="-input">10 selected</label>
418
- </label>
419
- <button
420
- class="pf-v5-c-menu-toggle__button"
421
- type="button"
422
- aria-expanded="false"
423
- id="split-button-checkbox-with-toggle-text-disabled-example-toggle-button"
424
- aria-label="Menu toggle"
425
- disabled
426
- >
427
- <span class="pf-v5-c-menu-toggle__controls">
428
- <span class="pf-v5-c-menu-toggle__toggle-icon">
429
- <i class="fas fa-caret-down" aria-hidden="true"></i>
430
- </span>
431
- </span>
432
- </button>
433
- </div>
434
- &nbsp;
435
389
  <div
436
390
  class="pf-v5-c-menu-toggle pf-m-split-button"
437
391
  id="split-button-checkbox-with-toggle-text-example"
@@ -483,19 +437,14 @@ cssPrefix: pf-v5-c-menu-toggle
483
437
  </span>
484
438
  </button>
485
439
  </div>
486
-
487
- ```
488
-
489
- ### Split button, primary
490
-
491
- ```html
440
+ &nbsp;
492
441
  <div
493
- class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary"
494
- id="split-button-checkbox-primary-disabled-example"
442
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled"
443
+ id="split-button-checkbox-with-toggle-text-disabled-example"
495
444
  >
496
445
  <label
497
446
  class="pf-v5-c-check"
498
- for="split-button-checkbox-primary-disabled-example-input"
447
+ for="split-button-checkbox-with-toggle-text-disabled-example-input"
499
448
  >
500
449
  <input class="pf-v5-c-check__input" type="checkbox" disabled />
501
450
  <label class="pf-v5-c-check__label pf-m-disabled" for="-input">10 selected</label>
@@ -504,7 +453,7 @@ cssPrefix: pf-v5-c-menu-toggle
504
453
  class="pf-v5-c-menu-toggle__button"
505
454
  type="button"
506
455
  aria-expanded="false"
507
- id="split-button-checkbox-primary-disabled-example-toggle-button"
456
+ id="split-button-checkbox-with-toggle-text-disabled-example-toggle-button"
508
457
  aria-label="Menu toggle"
509
458
  disabled
510
459
  >
@@ -515,7 +464,12 @@ cssPrefix: pf-v5-c-menu-toggle
515
464
  </span>
516
465
  </button>
517
466
  </div>
518
- &nbsp;
467
+
468
+ ```
469
+
470
+ ### Split button, primary
471
+
472
+ ```html
519
473
  <div
520
474
  class="pf-v5-c-menu-toggle pf-m-split-button pf-m-primary"
521
475
  id="split-button-checkbox-primary-example"
@@ -567,19 +521,14 @@ cssPrefix: pf-v5-c-menu-toggle
567
521
  </span>
568
522
  </button>
569
523
  </div>
570
-
571
- ```
572
-
573
- ### Split button, secondary
574
-
575
- ```html
524
+ &nbsp;
576
525
  <div
577
- class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary"
578
- id="split-button-checkbox-secondary-disabled-example"
526
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary"
527
+ id="split-button-checkbox-primary-disabled-example"
579
528
  >
580
529
  <label
581
530
  class="pf-v5-c-check"
582
- for="split-button-checkbox-secondary-disabled-example-input"
531
+ for="split-button-checkbox-primary-disabled-example-input"
583
532
  >
584
533
  <input class="pf-v5-c-check__input" type="checkbox" disabled />
585
534
  <label class="pf-v5-c-check__label pf-m-disabled" for="-input">10 selected</label>
@@ -588,7 +537,7 @@ cssPrefix: pf-v5-c-menu-toggle
588
537
  class="pf-v5-c-menu-toggle__button"
589
538
  type="button"
590
539
  aria-expanded="false"
591
- id="split-button-checkbox-secondary-disabled-example-toggle-button"
540
+ id="split-button-checkbox-primary-disabled-example-toggle-button"
592
541
  aria-label="Menu toggle"
593
542
  disabled
594
543
  >
@@ -599,7 +548,12 @@ cssPrefix: pf-v5-c-menu-toggle
599
548
  </span>
600
549
  </button>
601
550
  </div>
602
- &nbsp;
551
+
552
+ ```
553
+
554
+ ### Split button, secondary
555
+
556
+ ```html
603
557
  <div
604
558
  class="pf-v5-c-menu-toggle pf-m-split-button pf-m-secondary"
605
559
  id="split-button-checkbox-secondary-example"
@@ -651,22 +605,23 @@ cssPrefix: pf-v5-c-menu-toggle
651
605
  </span>
652
606
  </button>
653
607
  </div>
654
-
655
- ```
656
-
657
- ### Split button (action)
658
-
659
- ```html
608
+ &nbsp;
660
609
  <div
661
- class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled"
662
- id="split-button-checkbox-with-toggle-action-disabled-example"
610
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary"
611
+ id="split-button-checkbox-secondary-disabled-example"
663
612
  >
664
- <button class="pf-v5-c-menu-toggle__button" type="button" disabled>Action</button>
613
+ <label
614
+ class="pf-v5-c-check"
615
+ for="split-button-checkbox-secondary-disabled-example-input"
616
+ >
617
+ <input class="pf-v5-c-check__input" type="checkbox" disabled />
618
+ <label class="pf-v5-c-check__label pf-m-disabled" for="-input">10 selected</label>
619
+ </label>
665
620
  <button
666
621
  class="pf-v5-c-menu-toggle__button"
667
622
  type="button"
668
623
  aria-expanded="false"
669
- id="split-button-checkbox-with-toggle-action-disabled-example-toggle-button"
624
+ id="split-button-checkbox-secondary-disabled-example-toggle-button"
670
625
  aria-label="Menu toggle"
671
626
  disabled
672
627
  >
@@ -677,7 +632,12 @@ cssPrefix: pf-v5-c-menu-toggle
677
632
  </span>
678
633
  </button>
679
634
  </div>
680
- &nbsp;
635
+
636
+ ```
637
+
638
+ ### Split button (action)
639
+
640
+ ```html
681
641
  <div
682
642
  class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action"
683
643
  id="split-button-checkbox-with-toggle-action-example"
@@ -717,22 +677,17 @@ cssPrefix: pf-v5-c-menu-toggle
717
677
  </span>
718
678
  </button>
719
679
  </div>
720
-
721
- ```
722
-
723
- ### Split button, primary (action)
724
-
725
- ```html
680
+ &nbsp;
726
681
  <div
727
- class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-primary"
728
- id="split-button-checkbox-with-toggle-action-primary-disabled-example"
682
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled"
683
+ id="split-button-checkbox-with-toggle-action-disabled-example"
729
684
  >
730
685
  <button class="pf-v5-c-menu-toggle__button" type="button" disabled>Action</button>
731
686
  <button
732
687
  class="pf-v5-c-menu-toggle__button"
733
688
  type="button"
734
689
  aria-expanded="false"
735
- id="split-button-checkbox-with-toggle-action-primary-disabled-example-toggle-button"
690
+ id="split-button-checkbox-with-toggle-action-disabled-example-toggle-button"
736
691
  aria-label="Menu toggle"
737
692
  disabled
738
693
  >
@@ -743,7 +698,12 @@ cssPrefix: pf-v5-c-menu-toggle
743
698
  </span>
744
699
  </button>
745
700
  </div>
746
- &nbsp;
701
+
702
+ ```
703
+
704
+ ### Split button, primary (action)
705
+
706
+ ```html
747
707
  <div
748
708
  class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-primary"
749
709
  id="split-button-checkbox-with-toggle-action-primary-example"
@@ -783,22 +743,17 @@ cssPrefix: pf-v5-c-menu-toggle
783
743
  </span>
784
744
  </button>
785
745
  </div>
786
-
787
- ```
788
-
789
- ### Split button, secondary (action)
790
-
791
- ```html
746
+ &nbsp;
792
747
  <div
793
- class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-secondary"
794
- id="split-button-checkbox-with-toggle-action-secondary-disabled-example"
748
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-primary"
749
+ id="split-button-checkbox-with-toggle-action-primary-disabled-example"
795
750
  >
796
751
  <button class="pf-v5-c-menu-toggle__button" type="button" disabled>Action</button>
797
752
  <button
798
753
  class="pf-v5-c-menu-toggle__button"
799
754
  type="button"
800
755
  aria-expanded="false"
801
- id="split-button-checkbox-with-toggle-action-secondary-disabled-example-toggle-button"
756
+ id="split-button-checkbox-with-toggle-action-primary-disabled-example-toggle-button"
802
757
  aria-label="Menu toggle"
803
758
  disabled
804
759
  >
@@ -809,7 +764,12 @@ cssPrefix: pf-v5-c-menu-toggle
809
764
  </span>
810
765
  </button>
811
766
  </div>
812
- &nbsp;
767
+
768
+ ```
769
+
770
+ ### Split button, secondary (action)
771
+
772
+ ```html
813
773
  <div
814
774
  class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-secondary"
815
775
  id="split-button-checkbox-with-toggle-action-secondary-example"
@@ -849,6 +809,27 @@ cssPrefix: pf-v5-c-menu-toggle
849
809
  </span>
850
810
  </button>
851
811
  </div>
812
+ &nbsp;
813
+ <div
814
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-secondary"
815
+ id="split-button-checkbox-with-toggle-action-secondary-disabled-example"
816
+ >
817
+ <button class="pf-v5-c-menu-toggle__button" type="button" disabled>Action</button>
818
+ <button
819
+ class="pf-v5-c-menu-toggle__button"
820
+ type="button"
821
+ aria-expanded="false"
822
+ id="split-button-checkbox-with-toggle-action-secondary-disabled-example-toggle-button"
823
+ aria-label="Menu toggle"
824
+ disabled
825
+ >
826
+ <span class="pf-v5-c-menu-toggle__controls">
827
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
828
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
829
+ </span>
830
+ </span>
831
+ </button>
832
+ </div>
852
833
 
853
834
  ```
854
835
 
@@ -973,6 +954,24 @@ cssPrefix: pf-v5-c-menu-toggle
973
954
 
974
955
  ```
975
956
 
957
+ ### Full width
958
+
959
+ ```html
960
+ <button
961
+ class="pf-v5-c-menu-toggle pf-m-full-width"
962
+ type="button"
963
+ aria-expanded="false"
964
+ >
965
+ <span class="pf-v5-c-menu-toggle__text">Full width</span>
966
+ <span class="pf-v5-c-menu-toggle__controls">
967
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
968
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
969
+ </span>
970
+ </span>
971
+ </button>
972
+
973
+ ```
974
+
976
975
  ### Typeahead
977
976
 
978
977
  ```html
@@ -1047,3 +1046,4 @@ cssPrefix: pf-v5-c-menu-toggle
1047
1046
  | `.pf-m-plain` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
1048
1047
  | `.pf-m-expanded` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
1049
1048
  | `.pf-m-full-height` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
1049
+ | `.pf-m-full-width` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component to full width of parent. |
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -289,7 +289,9 @@ Several components in the following examples do not include functional and/or ac
289
289
  aria-label="Show filters"
290
290
  aria-controls="toolbar-toggle-group-example-expandable-content"
291
291
  >
292
- <i class="fas fa-filter" aria-hidden="true"></i>
292
+ <span class="pf-v5-c-menu-toggle__icon">
293
+ <i class="fas fa-filter" aria-hidden="true"></i>
294
+ </span>
293
295
  </button>
294
296
  </div>
295
297
  <div class="pf-v5-c-toolbar__item pf-m-search-filter">
@@ -395,7 +397,9 @@ Several components in the following examples do not include functional and/or ac
395
397
  aria-label="Show filters"
396
398
  aria-controls="toolbar-toggle-group-collapsed-example-expandable-content"
397
399
  >
398
- <i class="fas fa-filter" aria-hidden="true"></i>
400
+ <span class="pf-v5-c-menu-toggle__icon">
401
+ <i class="fas fa-filter" aria-hidden="true"></i>
402
+ </span>
399
403
  </button>
400
404
  </div>
401
405
  </div>
@@ -566,7 +570,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
566
570
  aria-label="Show filters"
567
571
  aria-controls="toolbar-selected-filters-toggle-group-collapsed-example-expandable-content"
568
572
  >
569
- <i class="fas fa-filter" aria-hidden="true"></i>
573
+ <span class="pf-v5-c-menu-toggle__icon">
574
+ <i class="fas fa-filter" aria-hidden="true"></i>
575
+ </span>
570
576
  </button>
571
577
  </div>
572
578
  <div class="pf-v5-c-toolbar__item pf-m-search-filter">
@@ -933,7 +939,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
933
939
  aria-label="Show filters"
934
940
  aria-controls="toolbar-selected-filters-toggle-group-expanded-example-expandable-content"
935
941
  >
936
- <i class="fas fa-filter" aria-hidden="true"></i>
942
+ <span class="pf-v5-c-menu-toggle__icon">
943
+ <i class="fas fa-filter" aria-hidden="true"></i>
944
+ </span>
937
945
  </button>
938
946
  </div>
939
947
  </div>
@@ -1285,7 +1293,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1285
1293
  aria-label="Show filters"
1286
1294
  aria-controls="toolbar-selected-filters-example-expandable-content"
1287
1295
  >
1288
- <i class="fas fa-filter" aria-hidden="true"></i>
1296
+ <span class="pf-v5-c-menu-toggle__icon">
1297
+ <i class="fas fa-filter" aria-hidden="true"></i>
1298
+ </span>
1289
1299
  </button>
1290
1300
  </div>
1291
1301
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
@@ -1602,7 +1612,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1602
1612
  aria-label="Show filters"
1603
1613
  aria-controls="toolbar-stacked-example-expandable-content"
1604
1614
  >
1605
- <i class="fas fa-filter" aria-hidden="true"></i>
1615
+ <span class="pf-v5-c-menu-toggle__icon">
1616
+ <i class="fas fa-filter" aria-hidden="true"></i>
1617
+ </span>
1606
1618
  </button>
1607
1619
  </div>
1608
1620
  <div class="pf-v5-c-toolbar__group">
@@ -1939,7 +1951,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1939
1951
  aria-label="Show filters"
1940
1952
  aria-controls="toolbar-stacked-collapsed-example-expandable-content"
1941
1953
  >
1942
- <i class="fas fa-filter" aria-hidden="true"></i>
1954
+ <span class="pf-v5-c-menu-toggle__icon">
1955
+ <i class="fas fa-filter" aria-hidden="true"></i>
1956
+ </span>
1943
1957
  </button>
1944
1958
  </div>
1945
1959
  </div>
package/docs/demos/AboutModal/examples/AboutModal.md CHANGED
@@ -149,7 +149,9 @@ This demo implements the about modal, including the backdrop.
149
149
  aria-expanded="false"
150
150
  aria-label="Application launcher"
151
151
  >
152
- <i class="fas fa-th" aria-hidden="true"></i>
152
+ <span class="pf-v5-c-menu-toggle__icon">
153
+ <i class="fas fa-th" aria-hidden="true"></i>
154
+ </span>
153
155
  </button>
154
156
  </div>
155
157
  <div class="pf-v5-c-toolbar__item">
@@ -159,7 +161,9 @@ This demo implements the about modal, including the backdrop.
159
161
  aria-expanded="false"
160
162
  aria-label="Settings"
161
163
  >
162
- <i class="fas fa-cog" aria-hidden="true"></i>
164
+ <span class="pf-v5-c-menu-toggle__icon">
165
+ <i class="fas fa-cog" aria-hidden="true"></i>
166
+ </span>
163
167
  </button>
164
168
  </div>
165
169
  <div class="pf-v5-c-toolbar__item">
@@ -169,7 +173,9 @@ This demo implements the about modal, including the backdrop.
169
173
  aria-expanded="false"
170
174
  aria-label="Help"
171
175
  >
172
- <i class="fas fa-question-circle" aria-hidden="true"></i>
176
+ <span class="pf-v5-c-menu-toggle__icon">
177
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
178
+ </span>
173
179
  </button>
174
180
  </div>
175
181
  </div>
@@ -180,7 +186,9 @@ This demo implements the about modal, including the backdrop.
180
186
  aria-expanded="false"
181
187
  aria-label="Actions"
182
188
  >
183
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
189
+ <span class="pf-v5-c-menu-toggle__icon">
190
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
191
+ </span>
184
192
  </button>
185
193
  </div>
186
194
  </div>