@patternfly/patternfly 6.0.0-alpha.165 → 6.0.0-alpha.167

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 (88) hide show
  1. package/components/Alert/alert-group.css +54 -3
  2. package/components/Alert/alert-group.scss +85 -0
  3. package/components/Alert/alert.scss +1 -1
  4. package/components/Button/button.css +33 -14
  5. package/components/Button/button.scss +36 -14
  6. package/components/_index.css +87 -17
  7. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  8. package/docs/components/ActionList/examples/ActionList.md +60 -20
  9. package/docs/components/Alert/examples/Alert.md +106 -62
  10. package/docs/components/BackToTop/examples/BackToTop.md +5 -3
  11. package/docs/components/Banner/examples/Banner.md +9 -3
  12. package/docs/components/Button/examples/Button.md +536 -367
  13. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  14. package/docs/components/Card/examples/Card.md +43 -29
  15. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +75 -33
  16. package/docs/components/CodeBlock/examples/CodeBlock.md +18 -6
  17. package/docs/components/CodeEditor/examples/CodeEditor.md +44 -22
  18. package/docs/components/ContextSelector/deprecated/context-selector.md +6 -8
  19. package/docs/components/DataList/examples/DataList.md +121 -63
  20. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  21. package/docs/components/DescriptionList/examples/DescriptionList.md +125 -75
  22. package/docs/components/Drawer/examples/Drawer.md +57 -19
  23. package/docs/components/DualListSelector/examples/DualListSelector.md +204 -100
  24. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  25. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  26. package/docs/components/Form/examples/Form.md +53 -19
  27. package/docs/components/Hint/examples/Hint.md +9 -9
  28. package/docs/components/InlineEdit/examples/InlineEdit.md +78 -26
  29. package/docs/components/InputGroup/examples/InputGroup.md +27 -9
  30. package/docs/components/JumpLinks/examples/JumpLinks.md +188 -68
  31. package/docs/components/Label/examples/Label.md +651 -217
  32. package/docs/components/LogViewer/examples/LogViewer.md +218 -86
  33. package/docs/components/Login/examples/Login.md +346 -282
  34. package/docs/components/Masthead/examples/masthead.md +27 -9
  35. package/docs/components/Menu/examples/Menu.md +35 -25
  36. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -1
  37. package/docs/components/ModalBox/examples/ModalBox.md +48 -16
  38. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +48 -16
  39. package/docs/components/Nav/examples/Navigation.md +12 -4
  40. package/docs/components/NotificationBadge/examples/NotificationBadge.md +78 -42
  41. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +6 -2
  42. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  43. package/docs/components/OverflowMenu/examples/overflow-menu.md +48 -16
  44. package/docs/components/Page/examples/Page.md +21 -7
  45. package/docs/components/Pagination/examples/Pagination.md +132 -44
  46. package/docs/components/Popover/examples/Popover.md +45 -15
  47. package/docs/components/Select/deprecated/Select.md +111 -55
  48. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  49. package/docs/components/Slider/examples/Slider.md +12 -4
  50. package/docs/components/Table/examples/Table.md +363 -208
  51. package/docs/components/Tabs/examples/Tabs.md +1230 -574
  52. package/docs/components/TextInputGroup/examples/TextInputGroup.md +132 -44
  53. package/docs/components/Toolbar/examples/Toolbar.md +120 -64
  54. package/docs/components/TreeView/examples/TreeView.md +12 -4
  55. package/docs/components/Wizard/examples/Wizard.md +105 -38
  56. package/docs/demos/AboutModal/examples/AboutModal.md +9 -3
  57. package/docs/demos/Alert/examples/Alert.md +39 -25
  58. package/docs/demos/BackToTop/examples/BackToTop.md +11 -5
  59. package/docs/demos/Banner/examples/Banner.md +12 -4
  60. package/docs/demos/Button/examples/Button.md +7 -7
  61. package/docs/demos/Card/examples/Card.md +106 -57
  62. package/docs/demos/CardView/examples/CardView.md +30 -13
  63. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -8
  64. package/docs/demos/Dashboard/examples/Dashboard.md +43 -28
  65. package/docs/demos/DataList/examples/DataList.md +255 -149
  66. package/docs/demos/DescriptionList/examples/DescriptionList.md +21 -7
  67. package/docs/demos/Drawer/examples/Drawer.md +89 -43
  68. package/docs/demos/Form/examples/BasicForms.md +141 -59
  69. package/docs/demos/JumpLinks/examples/JumpLinks.md +222 -109
  70. package/docs/demos/Masthead/examples/Masthead.md +63 -21
  71. package/docs/demos/Modal/examples/Modal.md +99 -37
  72. package/docs/demos/Nav/examples/Nav.md +45 -15
  73. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +58 -43
  74. package/docs/demos/Page/examples/Page.md +54 -21
  75. package/docs/demos/Page/examples/Penta.md +9 -6
  76. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  77. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +12 -4
  78. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +306 -133
  79. package/docs/demos/Skeleton/examples/Skeleton.md +6 -2
  80. package/docs/demos/Table/examples/Table.md +474 -210
  81. package/docs/demos/Tabs/examples/Tabs.md +60 -22
  82. package/docs/demos/Toolbar/examples/Toolbar.md +123 -72
  83. package/docs/demos/Wizard/examples/Wizard.md +179 -110
  84. package/package.json +1 -1
  85. package/patternfly-no-globals.css +87 -17
  86. package/patternfly.css +87 -17
  87. package/patternfly.min.css +1 -1
  88. package/patternfly.min.css.map +1 -1
package/docs/demos/Card/examples/Card.md CHANGED
@@ -19,8 +19,10 @@ wrapperTag: div
19
19
  id="card-demo-horizontal-grid-collapsed-example-toggle"
20
20
  aria-labelledby="card-demo-horizontal-grid-collapsed-example-title card-demo-horizontal-grid-collapsed-example-toggle"
21
21
  >
22
- <span class="pf-v6-c-card__header-toggle-icon">
23
- <i class="fas fa-angle-right" aria-hidden="true"></i>
22
+ <span class="pf-v6-c-button__text">
23
+ <span class="pf-v6-c-card__header-toggle-icon">
24
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
25
+ </span>
24
26
  </span>
25
27
  </button>
26
28
  </div>
@@ -160,8 +162,10 @@ wrapperTag: div
160
162
  id="card-demo-horizontal-grid-expanded-example-toggle"
161
163
  aria-labelledby="card-demo-horizontal-grid-expanded-example-title card-demo-horizontal-grid-expanded-example-toggle"
162
164
  >
163
- <span class="pf-v6-c-card__header-toggle-icon">
164
- <i class="fas fa-angle-right" aria-hidden="true"></i>
165
+ <span class="pf-v6-c-button__text">
166
+ <span class="pf-v6-c-card__header-toggle-icon">
167
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
168
+ </span>
165
169
  </span>
166
170
  </button>
167
171
  </div>
@@ -262,13 +266,15 @@ wrapperTag: div
262
266
  </ul>
263
267
  </div>
264
268
  <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
265
- View all set up cluster steps
266
- <span
267
- class="pf-v6-c-button__icon pf-m-end"
268
- >
269
- <span class="pf-v6-c-icon pf-v6-m-mirror-inline-rtl">
270
- <span class="pf-v6-c-icon__content">
271
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
269
+ <span class="pf-v6-c-button__text">
270
+ View all set up cluster steps
271
+ <span
272
+ class="pf-v6-c-button__icon pf-m-start pf-m-end"
273
+ >
274
+ <span class="pf-v6-c-icon pf-v6-m-mirror-inline-rtl">
275
+ <span class="pf-v6-c-icon__content">
276
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
277
+ </span>
272
278
  </span>
273
279
  </span>
274
280
  </span>
@@ -299,11 +305,15 @@ wrapperTag: div
299
305
  </ul>
300
306
  </div>
301
307
  <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
302
- View all guided tours
303
- <span class="pf-v6-c-button__icon pf-m-end">
304
- <span class="pf-v6-c-icon pf-v6-m-mirror-inline-rtl">
305
- <span class="pf-v6-c-icon__content">
306
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
308
+ <span class="pf-v6-c-button__text">
309
+ View all guided tours
310
+ <span
311
+ class="pf-v6-c-button__icon pf-m-start pf-m-end"
312
+ >
313
+ <span class="pf-v6-c-icon pf-v6-m-mirror-inline-rtl">
314
+ <span class="pf-v6-c-icon__content">
315
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
316
+ </span>
307
317
  </span>
308
318
  </span>
309
319
  </span>
@@ -337,11 +347,15 @@ wrapperTag: div
337
347
  </ul>
338
348
  </div>
339
349
  <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
340
- View all quick starts
341
- <span class="pf-v6-c-button__icon pf-m-end">
342
- <span class="pf-v6-c-icon pf-v6-m-mirror-inline-rtl">
343
- <span class="pf-v6-c-icon__content">
344
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
350
+ <span class="pf-v6-c-button__text">
351
+ View all quick starts
352
+ <span
353
+ class="pf-v6-c-button__icon pf-m-start pf-m-end"
354
+ >
355
+ <span class="pf-v6-c-icon pf-v6-m-mirror-inline-rtl">
356
+ <span class="pf-v6-c-icon__content">
357
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
358
+ </span>
345
359
  </span>
346
360
  </span>
347
361
  </span>
@@ -378,13 +392,15 @@ wrapperTag: div
378
392
  </ul>
379
393
  </div>
380
394
  <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
381
- View all learning resources
382
- <span
383
- class="pf-v6-c-button__icon pf-m-end"
384
- >
385
- <span class="pf-v6-c-icon pf-v6-m-mirror-inline-rtl">
386
- <span class="pf-v6-c-icon__content">
387
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
395
+ <span class="pf-v6-c-button__text">
396
+ View all learning resources
397
+ <span
398
+ class="pf-v6-c-button__icon pf-m-start pf-m-end"
399
+ >
400
+ <span class="pf-v6-c-icon pf-v6-m-mirror-inline-rtl">
401
+ <span class="pf-v6-c-icon__content">
402
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
403
+ </span>
388
404
  </span>
389
405
  </span>
390
406
  </span>
@@ -414,10 +430,9 @@ wrapperTag: div
414
430
  class="pf-v6-c-card__body"
415
431
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu purus, lobortis nec euismod eu, tristique ut sapien. Nullam turpis lectus, aliquet sit amet volutpat eu, semper eget quam. Maecenas in tempus diam. Aenean interdum velit sed massa aliquet, sit amet malesuada nulla hendrerit. Aenean non faucibus odio. Etiam non metus turpis. Praesent sollicitudin elit neque, id ullamcorper nibh faucibus eget.</div>
416
432
  <div class="pf-v6-c-card__footer">
417
- <button
418
- class="pf-v6-c-button pf-m-tertiary"
419
- type="button"
420
- >Call to action</button>
433
+ <button class="pf-v6-c-button pf-m-tertiary" type="button">
434
+ <span class="pf-v6-c-button__text">Call to action</span>
435
+ </button>
421
436
  </div>
422
437
  </div>
423
438
  </div>
@@ -1431,7 +1446,9 @@ wrapperTag: div
1431
1446
  type="button"
1432
1447
  aria-label="Close"
1433
1448
  >
1434
- <i class="fas fa-times" aria-hidden="true"></i>
1449
+ <span class="pf-v6-c-button__text">
1450
+ <i class="fas fa-times" aria-hidden="true"></i>
1451
+ </span>
1435
1452
  </button>
1436
1453
  </div>
1437
1454
  <header class="pf-v6-c-popover__header">
@@ -1479,9 +1496,14 @@ wrapperTag: div
1479
1496
  aria-expanded="true"
1480
1497
  aria-label="Toggle row"
1481
1498
  >
1482
- <div class="pf-v6-c-table__toggle-icon">
1483
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1484
- </div>
1499
+ <span class="pf-v6-c-button__text">
1500
+ <div class="pf-v6-c-table__toggle-icon">
1501
+ <i
1502
+ class="fas fa-angle-down"
1503
+ aria-hidden="true"
1504
+ ></i>
1505
+ </div>
1506
+ </span>
1485
1507
  </button>
1486
1508
  </td>
1487
1509
 
@@ -1551,9 +1573,14 @@ wrapperTag: div
1551
1573
  type="button"
1552
1574
  aria-label="Toggle row"
1553
1575
  >
1554
- <div class="pf-v6-c-table__toggle-icon">
1555
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1556
- </div>
1576
+ <span class="pf-v6-c-button__text">
1577
+ <div class="pf-v6-c-table__toggle-icon">
1578
+ <i
1579
+ class="fas fa-angle-down"
1580
+ aria-hidden="true"
1581
+ ></i>
1582
+ </div>
1583
+ </span>
1557
1584
  </button>
1558
1585
  </td>
1559
1586
 
@@ -1609,9 +1636,14 @@ wrapperTag: div
1609
1636
  type="button"
1610
1637
  aria-label="Toggle row"
1611
1638
  >
1612
- <div class="pf-v6-c-table__toggle-icon">
1613
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1614
- </div>
1639
+ <span class="pf-v6-c-button__text">
1640
+ <div class="pf-v6-c-table__toggle-icon">
1641
+ <i
1642
+ class="fas fa-angle-down"
1643
+ aria-hidden="true"
1644
+ ></i>
1645
+ </div>
1646
+ </span>
1615
1647
  </button>
1616
1648
  </td>
1617
1649
 
@@ -1665,9 +1697,14 @@ wrapperTag: div
1665
1697
  type="button"
1666
1698
  aria-label="Toggle row"
1667
1699
  >
1668
- <div class="pf-v6-c-table__toggle-icon">
1669
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1670
- </div>
1700
+ <span class="pf-v6-c-button__text">
1701
+ <div class="pf-v6-c-table__toggle-icon">
1702
+ <i
1703
+ class="fas fa-angle-down"
1704
+ aria-hidden="true"
1705
+ ></i>
1706
+ </div>
1707
+ </span>
1671
1708
  </button>
1672
1709
  </td>
1673
1710
 
@@ -2106,8 +2143,10 @@ wrapperTag: div
2106
2143
  id="nested-cards-toggle-right-example-group-1-toggle"
2107
2144
  aria-labelledby="nested-cards-toggle-right-example-group-1-title nested-cards-toggle-right-example-group-1-toggle"
2108
2145
  >
2109
- <span class="pf-v6-c-card__header-toggle-icon">
2110
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2146
+ <span class="pf-v6-c-button__text">
2147
+ <span class="pf-v6-c-card__header-toggle-icon">
2148
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2149
+ </span>
2111
2150
  </span>
2112
2151
  </button>
2113
2152
  </div>
@@ -2217,8 +2256,10 @@ wrapperTag: div
2217
2256
  id="nested-cards-toggle-right-example-group-2-toggle"
2218
2257
  aria-labelledby="nested-cards-toggle-right-example-group-2-title nested-cards-toggle-right-example-group-2-toggle"
2219
2258
  >
2220
- <span class="pf-v6-c-card__header-toggle-icon">
2221
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2259
+ <span class="pf-v6-c-button__text">
2260
+ <span class="pf-v6-c-card__header-toggle-icon">
2261
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2262
+ </span>
2222
2263
  </span>
2223
2264
  </button>
2224
2265
  </div>
@@ -2245,8 +2286,10 @@ wrapperTag: div
2245
2286
  id="nested-cards-toggle-right-example-group-3-toggle"
2246
2287
  aria-labelledby="nested-cards-toggle-right-example-group-3-title nested-cards-toggle-right-example-group-3-toggle"
2247
2288
  >
2248
- <span class="pf-v6-c-card__header-toggle-icon">
2249
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2289
+ <span class="pf-v6-c-button__text">
2290
+ <span class="pf-v6-c-card__header-toggle-icon">
2291
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2292
+ </span>
2250
2293
  </span>
2251
2294
  </button>
2252
2295
  </div>
@@ -2288,8 +2331,10 @@ wrapperTag: div
2288
2331
  id="nested-cards-example-group-1-toggle"
2289
2332
  aria-labelledby="nested-cards-example-group-1-title nested-cards-example-group-1-toggle"
2290
2333
  >
2291
- <span class="pf-v6-c-card__header-toggle-icon">
2292
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2334
+ <span class="pf-v6-c-button__text">
2335
+ <span class="pf-v6-c-card__header-toggle-icon">
2336
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2337
+ </span>
2293
2338
  </span>
2294
2339
  </button>
2295
2340
  </div>
@@ -2396,8 +2441,10 @@ wrapperTag: div
2396
2441
  id="nested-cards-example-group-2-toggle"
2397
2442
  aria-labelledby="nested-cards-example-group-2-title nested-cards-example-group-2-toggle"
2398
2443
  >
2399
- <span class="pf-v6-c-card__header-toggle-icon">
2400
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2444
+ <span class="pf-v6-c-button__text">
2445
+ <span class="pf-v6-c-card__header-toggle-icon">
2446
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2447
+ </span>
2401
2448
  </span>
2402
2449
  </button>
2403
2450
  </div>
@@ -2421,8 +2468,10 @@ wrapperTag: div
2421
2468
  id="nested-cards-example-group-3-toggle"
2422
2469
  aria-labelledby="nested-cards-example-group-3-title nested-cards-example-group-3-toggle"
2423
2470
  >
2424
- <span class="pf-v6-c-card__header-toggle-icon">
2425
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2471
+ <span class="pf-v6-c-button__text">
2472
+ <span class="pf-v6-c-card__header-toggle-icon">
2473
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2474
+ </span>
2426
2475
  </span>
2427
2476
  </button>
2428
2477
  </div>
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -11,7 +11,9 @@ section: patterns
11
11
  <a
12
12
  class="pf-v6-c-button pf-m-primary"
13
13
  href="#main-content-card-view-basic-example"
14
- >Skip to content</a>
14
+ >
15
+ <span class="pf-v6-c-button__text">Skip to content</span>
16
+ </a>
15
17
  </div>
16
18
  <header class="pf-v6-c-masthead" id="card-view-basic-example-masthead">
17
19
  <span class="pf-v6-c-masthead__toggle">
@@ -20,7 +22,9 @@ section: patterns
20
22
  type="button"
21
23
  aria-label="Global navigation"
22
24
  >
23
- <i class="fas fa-bars" aria-hidden="true"></i>
25
+ <span class="pf-v6-c-button__text">
26
+ <i class="fas fa-bars" aria-hidden="true"></i>
27
+ </span>
24
28
  </button>
25
29
  </span>
26
30
  <div class="pf-v6-c-masthead__main">
@@ -555,7 +559,9 @@ section: patterns
555
559
  <button
556
560
  class="pf-v6-c-button pf-m-primary"
557
561
  type="button"
558
- >Create instance</button>
562
+ >
563
+ <span class="pf-v6-c-button__text">Create instance</span>
564
+ </button>
559
565
  </div>
560
566
  </div>
561
567
  </div>
@@ -606,7 +612,9 @@ section: patterns
606
612
  disabled
607
613
  aria-label="Go to previous page"
608
614
  >
609
- <i class="fas fa-angle-left" aria-hidden="true"></i>
615
+ <span class="pf-v6-c-button__text">
616
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
617
+ </span>
610
618
  </button>
611
619
  </div>
612
620
  <div class="pf-v6-c-pagination__nav-control pf-m-next">
@@ -615,7 +623,9 @@ section: patterns
615
623
  type="button"
616
624
  aria-label="Go to next page"
617
625
  >
618
- <i class="fas fa-angle-right" aria-hidden="true"></i>
626
+ <span class="pf-v6-c-button__text">
627
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
628
+ </span>
619
629
  </button>
620
630
  </div>
621
631
  </nav>
@@ -648,10 +658,9 @@ section: patterns
648
658
  class="pf-v6-c-card__title-text pf-m-md"
649
659
  >Add a new card to your page</h2>
650
660
  </div>
651
- <button
652
- class="pf-v6-c-button pf-m-link"
653
- type="button"
654
- >Add card</button>
661
+ <button class="pf-v6-c-button pf-m-link" type="button">
662
+ <span class="pf-v6-c-button__text">Add card</span>
663
+ </button>
655
664
  </div>
656
665
  </div>
657
666
  </div>
@@ -1152,7 +1161,9 @@ section: patterns
1152
1161
  disabled
1153
1162
  aria-label="Go to first page"
1154
1163
  >
1155
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1164
+ <span class="pf-v6-c-button__text">
1165
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1166
+ </span>
1156
1167
  </button>
1157
1168
  </div>
1158
1169
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
@@ -1162,7 +1173,9 @@ section: patterns
1162
1173
  disabled
1163
1174
  aria-label="Go to previous page"
1164
1175
  >
1165
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1176
+ <span class="pf-v6-c-button__text">
1177
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1178
+ </span>
1166
1179
  </button>
1167
1180
  </div>
1168
1181
  <div class="pf-v6-c-pagination__nav-page-select">
@@ -1183,7 +1196,9 @@ section: patterns
1183
1196
  type="button"
1184
1197
  aria-label="Go to next page"
1185
1198
  >
1186
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1199
+ <span class="pf-v6-c-button__text">
1200
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1201
+ </span>
1187
1202
  </button>
1188
1203
  </div>
1189
1204
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
@@ -1192,7 +1207,9 @@ section: patterns
1192
1207
  type="button"
1193
1208
  aria-label="Go to last page"
1194
1209
  >
1195
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
1210
+ <span class="pf-v6-c-button__text">
1211
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
1212
+ </span>
1196
1213
  </button>
1197
1214
  </div>
1198
1215
  </nav>
package/docs/demos/ContextSelector/examples/ContextSelector.md CHANGED
@@ -13,7 +13,9 @@ deprecated: true
13
13
  <a
14
14
  class="pf-v6-c-button pf-m-primary"
15
15
  href="#main-content-context-selector-in-masthead"
16
- >Skip to content</a>
16
+ >
17
+ <span class="pf-v6-c-button__text">Skip to content</span>
18
+ </a>
17
19
  </div>
18
20
  <header class="pf-v6-c-masthead" id="context-selector-in-masthead-masthead">
19
21
  <span class="pf-v6-c-masthead__toggle">
@@ -22,7 +24,9 @@ deprecated: true
22
24
  type="button"
23
25
  aria-label="Global navigation"
24
26
  >
25
- <i class="fas fa-bars" aria-hidden="true"></i>
27
+ <span class="pf-v6-c-button__text">
28
+ <i class="fas fa-bars" aria-hidden="true"></i>
29
+ </span>
26
30
  </button>
27
31
  </span>
28
32
  <div class="pf-v6-c-masthead__main">
@@ -266,7 +270,9 @@ deprecated: true
266
270
  <a
267
271
  class="pf-v6-c-button pf-m-primary"
268
272
  href="#main-content-context-selector-in-sidebar-example"
269
- >Skip to content</a>
273
+ >
274
+ <span class="pf-v6-c-button__text">Skip to content</span>
275
+ </a>
270
276
  </div>
271
277
  <header
272
278
  class="pf-v6-c-masthead"
@@ -278,7 +284,9 @@ deprecated: true
278
284
  type="button"
279
285
  aria-label="Global navigation"
280
286
  >
281
- <i class="fas fa-bars" aria-hidden="true"></i>
287
+ <span class="pf-v6-c-button__text">
288
+ <i class="fas fa-bars" aria-hidden="true"></i>
289
+ </span>
282
290
  </button>
283
291
  </span>
284
292
  <div class="pf-v6-c-masthead__main">
@@ -736,7 +744,9 @@ deprecated: true
736
744
  <a
737
745
  class="pf-v6-c-button pf-m-primary"
738
746
  href="#main-content-context-selector-in-sidebar-expanded-example"
739
- >Skip to content</a>
747
+ >
748
+ <span class="pf-v6-c-button__text">Skip to content</span>
749
+ </a>
740
750
  </div>
741
751
  <header
742
752
  class="pf-v6-c-masthead"
@@ -748,7 +758,9 @@ deprecated: true
748
758
  type="button"
749
759
  aria-label="Global navigation"
750
760
  >
751
- <i class="fas fa-bars" aria-hidden="true"></i>
761
+ <span class="pf-v6-c-button__text">
762
+ <i class="fas fa-bars" aria-hidden="true"></i>
763
+ </span>
752
764
  </button>
753
765
  </span>
754
766
  <div class="pf-v6-c-masthead__main">
@@ -1208,7 +1220,9 @@ deprecated: true
1208
1220
  <a
1209
1221
  class="pf-v6-c-button pf-m-primary"
1210
1222
  href="#main-content-context-selector-in-page-content-example"
1211
- >Skip to content</a>
1223
+ >
1224
+ <span class="pf-v6-c-button__text">Skip to content</span>
1225
+ </a>
1212
1226
  </div>
1213
1227
  <header
1214
1228
  class="pf-v6-c-masthead"
@@ -1220,7 +1234,9 @@ deprecated: true
1220
1234
  type="button"
1221
1235
  aria-label="Global navigation"
1222
1236
  >
1223
- <i class="fas fa-bars" aria-hidden="true"></i>
1237
+ <span class="pf-v6-c-button__text">
1238
+ <i class="fas fa-bars" aria-hidden="true"></i>
1239
+ </span>
1224
1240
  </button>
1225
1241
  </span>
1226
1242
  <div class="pf-v6-c-masthead__main">
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -9,10 +9,9 @@ cssPrefix: pf-d-dashboard
9
9
  ```html isFullscreen
10
10
  <div class="pf-v6-c-page" id="dashboard-demo">
11
11
  <div class="pf-v6-c-skip-to-content">
12
- <a
13
- class="pf-v6-c-button pf-m-primary"
14
- href="#main-content-dashboard-demo"
15
- >Skip to content</a>
12
+ <a class="pf-v6-c-button pf-m-primary" href="#main-content-dashboard-demo">
13
+ <span class="pf-v6-c-button__text">Skip to content</span>
14
+ </a>
16
15
  </div>
17
16
  <header class="pf-v6-c-masthead" id="dashboard-demo-masthead">
18
17
  <span class="pf-v6-c-masthead__toggle">
@@ -21,7 +20,9 @@ cssPrefix: pf-d-dashboard
21
20
  type="button"
22
21
  aria-label="Global navigation"
23
22
  >
24
- <i class="fas fa-bars" aria-hidden="true"></i>
23
+ <span class="pf-v6-c-button__text">
24
+ <i class="fas fa-bars" aria-hidden="true"></i>
25
+ </span>
25
26
  </button>
26
27
  </span>
27
28
  <div class="pf-v6-c-masthead__main">
@@ -300,8 +301,10 @@ cssPrefix: pf-d-dashboard
300
301
  id="dashboard-demo-expandable-status-card-1-toggle"
301
302
  aria-labelledby="dashboard-demo-expandable-status-card-1-title dashboard-demo-expandable-status-card-1-toggle"
302
303
  >
303
- <span class="pf-v6-c-card__header-toggle-icon">
304
- <i class="fas fa-angle-right" aria-hidden="true"></i>
304
+ <span class="pf-v6-c-button__text">
305
+ <span class="pf-v6-c-card__header-toggle-icon">
306
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
307
+ </span>
305
308
  </span>
306
309
  </button>
307
310
  </div>
@@ -406,11 +409,13 @@ cssPrefix: pf-d-dashboard
406
409
  class="pf-v6-c-button pf-m-link pf-m-inline"
407
410
  href="#"
408
411
  >
409
- View pathway
410
- <span
411
- class="pf-v6-c-button__icon pf-m-end"
412
- >
413
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
412
+ <span class="pf-v6-c-button__text">
413
+ View pathway
414
+ <span
415
+ class="pf-v6-c-button__icon pf-m-start pf-m-end"
416
+ >
417
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
418
+ </span>
414
419
  </span>
415
420
  </a>
416
421
  </div>
@@ -498,11 +503,13 @@ cssPrefix: pf-d-dashboard
498
503
  class="pf-v6-c-button pf-m-link pf-m-inline"
499
504
  href="#"
500
505
  >
501
- View pathway
502
- <span
503
- class="pf-v6-c-button__icon pf-m-end"
504
- >
505
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
506
+ <span class="pf-v6-c-button__text">
507
+ View pathway
508
+ <span
509
+ class="pf-v6-c-button__icon pf-m-start pf-m-end"
510
+ >
511
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
512
+ </span>
506
513
  </span>
507
514
  </a>
508
515
  </div>
@@ -590,11 +597,13 @@ cssPrefix: pf-d-dashboard
590
597
  class="pf-v6-c-button pf-m-link pf-m-inline"
591
598
  href="#"
592
599
  >
593
- View pathway
594
- <span
595
- class="pf-v6-c-button__icon pf-m-end"
596
- >
597
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
600
+ <span class="pf-v6-c-button__text">
601
+ View pathway
602
+ <span
603
+ class="pf-v6-c-button__icon pf-m-start pf-m-end"
604
+ >
605
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
606
+ </span>
598
607
  </span>
599
608
  </a>
600
609
  </div>
@@ -985,8 +994,10 @@ cssPrefix: pf-d-dashboard
985
994
  id="dashboard-demo-line-chart-card-1-group-1-toggle"
986
995
  aria-labelledby="dashboard-demo-line-chart-card-1-group-1-title dashboard-demo-line-chart-card-1-group-1-toggle"
987
996
  >
988
- <span class="pf-v6-c-card__header-toggle-icon">
989
- <i class="fas fa-angle-right" aria-hidden="true"></i>
997
+ <span class="pf-v6-c-button__text">
998
+ <span class="pf-v6-c-card__header-toggle-icon">
999
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1000
+ </span>
990
1001
  </span>
991
1002
  </button>
992
1003
  </div>
@@ -1094,8 +1105,10 @@ cssPrefix: pf-d-dashboard
1094
1105
  id="dashboard-demo-line-chart-card-1-group-2-toggle"
1095
1106
  aria-labelledby="dashboard-demo-line-chart-card-1-group-2-title dashboard-demo-line-chart-card-1-group-2-toggle"
1096
1107
  >
1097
- <span class="pf-v6-c-card__header-toggle-icon">
1098
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1108
+ <span class="pf-v6-c-button__text">
1109
+ <span class="pf-v6-c-card__header-toggle-icon">
1110
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1111
+ </span>
1099
1112
  </span>
1100
1113
  </button>
1101
1114
  </div>
@@ -1120,8 +1133,10 @@ cssPrefix: pf-d-dashboard
1120
1133
  id="dashboard-demo-line-chart-card-1-group-3-toggle"
1121
1134
  aria-labelledby="dashboard-demo-line-chart-card-1-group-3-title dashboard-demo-line-chart-card-1-group-3-toggle"
1122
1135
  >
1123
- <span class="pf-v6-c-card__header-toggle-icon">
1124
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1136
+ <span class="pf-v6-c-button__text">
1137
+ <span class="pf-v6-c-card__header-toggle-icon">
1138
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1139
+ </span>
1125
1140
  </span>
1126
1141
  </button>
1127
1142
  </div>