@patternfly/patternfly 6.5.0-prerelease.31 → 6.5.0-prerelease.32

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 (44) hide show
  1. package/components/Compass/compass.css +14 -4
  2. package/components/Compass/compass.scss +16 -4
  3. package/components/Masthead/masthead.css +40 -0
  4. package/components/Masthead/masthead.scss +47 -0
  5. package/components/Nav/nav.css +55 -0
  6. package/components/Nav/nav.scss +70 -3
  7. package/components/Page/page.css +20 -0
  8. package/components/Page/page.scss +27 -0
  9. package/components/Toolbar/toolbar.css +32 -6
  10. package/components/Toolbar/toolbar.scss +28 -4
  11. package/components/_index.css +161 -10
  12. package/docs/components/Compass/examples/Compass.css +8 -2
  13. package/docs/components/Compass/examples/Compass.md +22 -1
  14. package/docs/components/Masthead/examples/masthead.md +67 -0
  15. package/docs/components/Nav/examples/Navigation.md +44 -0
  16. package/docs/components/Page/examples/Page.md +37 -0
  17. package/docs/components/Toolbar/examples/Toolbar.md +28 -0
  18. package/docs/demos/AboutModal/examples/AboutModal.md +5 -5
  19. package/docs/demos/Alert/examples/Alert.md +15 -15
  20. package/docs/demos/BackToTop/examples/BackToTop.md +5 -5
  21. package/docs/demos/Banner/examples/Banner.md +10 -10
  22. package/docs/demos/CardView/examples/CardView.md +5 -5
  23. package/docs/demos/Compass/examples/Compass.md +208 -0
  24. package/docs/demos/Dashboard/examples/Dashboard.md +5 -5
  25. package/docs/demos/DataList/examples/DataList.md +20 -23
  26. package/docs/demos/DescriptionList/examples/DescriptionList.md +15 -15
  27. package/docs/demos/Drawer/examples/Drawer.md +25 -25
  28. package/docs/demos/JumpLinks/examples/JumpLinks.md +30 -30
  29. package/docs/demos/Masthead/examples/Masthead.md +55 -58
  30. package/docs/demos/Modal/examples/Modal.md +30 -33
  31. package/docs/demos/Nav/examples/Nav.md +299 -62
  32. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +25 -25
  33. package/docs/demos/Page/examples/Page.md +70 -79
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +35 -35
  35. package/docs/demos/Skeleton/examples/Skeleton.md +5 -5
  36. package/docs/demos/Table/examples/Table.md +75 -78
  37. package/docs/demos/Tabs/examples/Tabs.md +30 -30
  38. package/docs/demos/Toolbar/examples/Toolbar.md +10 -10
  39. package/docs/demos/Wizard/examples/Wizard.md +45 -48
  40. package/package.json +1 -1
  41. package/patternfly-no-globals.css +161 -10
  42. package/patternfly.css +161 -10
  43. package/patternfly.min.css +1 -1
  44. package/patternfly.min.css.map +1 -1
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -18,7 +18,7 @@ wrapperTag: div
18
18
  </div>
19
19
  <header
20
20
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
21
- id="primary-detail-expanded-example-masthead"
21
+ id="primary-detail-expanded-example-docked"
22
22
  >
23
23
  <div class="pf-v6-c-masthead__main">
24
24
  <span class="pf-v6-c-masthead__toggle">
@@ -61,7 +61,7 @@ wrapperTag: div
61
61
  y1="2.25860997e-13%"
62
62
  x2="32%"
63
63
  y2="100%"
64
- id="linearGradient-primary-detail-expanded-example-masthead"
64
+ id="linearGradient-primary-detail-expanded-example-docked"
65
65
  >
66
66
  <stop stop-color="#2B9AF3" offset="0%" />
67
67
  <stop
@@ -115,11 +115,11 @@ wrapperTag: div
115
115
  />
116
116
  <path
117
117
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
118
- fill="url(#linearGradient-primary-detail-expanded-example-masthead)"
118
+ fill="url(#linearGradient-primary-detail-expanded-example-docked)"
119
119
  />
120
120
  <path
121
121
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
122
- fill="url(#linearGradient-primary-detail-expanded-example-masthead)"
122
+ fill="url(#linearGradient-primary-detail-expanded-example-docked)"
123
123
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
124
124
  />
125
125
  </g>
@@ -131,7 +131,7 @@ wrapperTag: div
131
131
  <div class="pf-v6-c-masthead__content">
132
132
  <div
133
133
  class="pf-v6-c-toolbar pf-m-static"
134
- id="primary-detail-expanded-example-masthead-toolbar"
134
+ id="primary-detail-expanded-example-docked-toolbar"
135
135
  >
136
136
  <div class="pf-v6-c-toolbar__content">
137
137
  <div class="pf-v6-c-toolbar__content-section">
@@ -1289,7 +1289,7 @@ wrapperTag: div
1289
1289
  </div>
1290
1290
  <header
1291
1291
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
1292
- id="primary-detail-collapsed-example-masthead"
1292
+ id="primary-detail-collapsed-example-docked"
1293
1293
  >
1294
1294
  <div class="pf-v6-c-masthead__main">
1295
1295
  <span class="pf-v6-c-masthead__toggle">
@@ -1332,7 +1332,7 @@ wrapperTag: div
1332
1332
  y1="2.25860997e-13%"
1333
1333
  x2="32%"
1334
1334
  y2="100%"
1335
- id="linearGradient-primary-detail-collapsed-example-masthead"
1335
+ id="linearGradient-primary-detail-collapsed-example-docked"
1336
1336
  >
1337
1337
  <stop stop-color="#2B9AF3" offset="0%" />
1338
1338
  <stop
@@ -1386,11 +1386,11 @@ wrapperTag: div
1386
1386
  />
1387
1387
  <path
1388
1388
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1389
- fill="url(#linearGradient-primary-detail-collapsed-example-masthead)"
1389
+ fill="url(#linearGradient-primary-detail-collapsed-example-docked)"
1390
1390
  />
1391
1391
  <path
1392
1392
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1393
- fill="url(#linearGradient-primary-detail-collapsed-example-masthead)"
1393
+ fill="url(#linearGradient-primary-detail-collapsed-example-docked)"
1394
1394
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1395
1395
  />
1396
1396
  </g>
@@ -1402,7 +1402,7 @@ wrapperTag: div
1402
1402
  <div class="pf-v6-c-masthead__content">
1403
1403
  <div
1404
1404
  class="pf-v6-c-toolbar pf-m-static"
1405
- id="primary-detail-collapsed-example-masthead-toolbar"
1405
+ id="primary-detail-collapsed-example-docked-toolbar"
1406
1406
  >
1407
1407
  <div class="pf-v6-c-toolbar__content">
1408
1408
  <div class="pf-v6-c-toolbar__content-section">
@@ -2473,7 +2473,7 @@ wrapperTag: div
2473
2473
  </div>
2474
2474
  <header
2475
2475
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
2476
- id="primary-detail-content-body-padding-example-masthead"
2476
+ id="primary-detail-content-body-padding-example-docked"
2477
2477
  >
2478
2478
  <div class="pf-v6-c-masthead__main">
2479
2479
  <span class="pf-v6-c-masthead__toggle">
@@ -2516,7 +2516,7 @@ wrapperTag: div
2516
2516
  y1="2.25860997e-13%"
2517
2517
  x2="32%"
2518
2518
  y2="100%"
2519
- id="linearGradient-primary-detail-content-body-padding-example-masthead"
2519
+ id="linearGradient-primary-detail-content-body-padding-example-docked"
2520
2520
  >
2521
2521
  <stop stop-color="#2B9AF3" offset="0%" />
2522
2522
  <stop
@@ -2570,11 +2570,11 @@ wrapperTag: div
2570
2570
  />
2571
2571
  <path
2572
2572
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2573
- fill="url(#linearGradient-primary-detail-content-body-padding-example-masthead)"
2573
+ fill="url(#linearGradient-primary-detail-content-body-padding-example-docked)"
2574
2574
  />
2575
2575
  <path
2576
2576
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2577
- fill="url(#linearGradient-primary-detail-content-body-padding-example-masthead)"
2577
+ fill="url(#linearGradient-primary-detail-content-body-padding-example-docked)"
2578
2578
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2579
2579
  />
2580
2580
  </g>
@@ -2586,7 +2586,7 @@ wrapperTag: div
2586
2586
  <div class="pf-v6-c-masthead__content">
2587
2587
  <div
2588
2588
  class="pf-v6-c-toolbar pf-m-static"
2589
- id="primary-detail-content-body-padding-example-masthead-toolbar"
2589
+ id="primary-detail-content-body-padding-example-docked-toolbar"
2590
2590
  >
2591
2591
  <div class="pf-v6-c-toolbar__content">
2592
2592
  <div class="pf-v6-c-toolbar__content-section">
@@ -3601,7 +3601,7 @@ wrapperTag: div
3601
3601
  </div>
3602
3602
  <header
3603
3603
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
3604
- id="primary-detail-card-view-expanded-example-masthead"
3604
+ id="primary-detail-card-view-expanded-example-docked"
3605
3605
  >
3606
3606
  <div class="pf-v6-c-masthead__main">
3607
3607
  <span class="pf-v6-c-masthead__toggle">
@@ -3644,7 +3644,7 @@ wrapperTag: div
3644
3644
  y1="2.25860997e-13%"
3645
3645
  x2="32%"
3646
3646
  y2="100%"
3647
- id="linearGradient-primary-detail-card-view-expanded-example-masthead"
3647
+ id="linearGradient-primary-detail-card-view-expanded-example-docked"
3648
3648
  >
3649
3649
  <stop stop-color="#2B9AF3" offset="0%" />
3650
3650
  <stop
@@ -3698,11 +3698,11 @@ wrapperTag: div
3698
3698
  />
3699
3699
  <path
3700
3700
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3701
- fill="url(#linearGradient-primary-detail-card-view-expanded-example-masthead)"
3701
+ fill="url(#linearGradient-primary-detail-card-view-expanded-example-docked)"
3702
3702
  />
3703
3703
  <path
3704
3704
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3705
- fill="url(#linearGradient-primary-detail-card-view-expanded-example-masthead)"
3705
+ fill="url(#linearGradient-primary-detail-card-view-expanded-example-docked)"
3706
3706
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3707
3707
  />
3708
3708
  </g>
@@ -3714,7 +3714,7 @@ wrapperTag: div
3714
3714
  <div class="pf-v6-c-masthead__content">
3715
3715
  <div
3716
3716
  class="pf-v6-c-toolbar pf-m-static"
3717
- id="primary-detail-card-view-expanded-example-masthead-toolbar"
3717
+ id="primary-detail-card-view-expanded-example-docked-toolbar"
3718
3718
  >
3719
3719
  <div class="pf-v6-c-toolbar__content">
3720
3720
  <div class="pf-v6-c-toolbar__content-section">
@@ -4728,7 +4728,7 @@ wrapperTag: div
4728
4728
  </div>
4729
4729
  <header
4730
4730
  class="pf-v6-c-masthead"
4731
- id="primary-detail-card-simple-list-on-mobile-example-masthead"
4731
+ id="primary-detail-card-simple-list-on-mobile-example-docked"
4732
4732
  >
4733
4733
  <div class="pf-v6-c-masthead__main">
4734
4734
  <span class="pf-v6-c-masthead__toggle">
@@ -4771,7 +4771,7 @@ wrapperTag: div
4771
4771
  y1="2.25860997e-13%"
4772
4772
  x2="32%"
4773
4773
  y2="100%"
4774
- id="linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead"
4774
+ id="linearGradient-primary-detail-card-simple-list-on-mobile-example-docked"
4775
4775
  >
4776
4776
  <stop stop-color="#2B9AF3" offset="0%" />
4777
4777
  <stop
@@ -4825,11 +4825,11 @@ wrapperTag: div
4825
4825
  />
4826
4826
  <path
4827
4827
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4828
- fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead)"
4828
+ fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-docked)"
4829
4829
  />
4830
4830
  <path
4831
4831
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
4832
- fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead)"
4832
+ fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-docked)"
4833
4833
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4834
4834
  />
4835
4835
  </g>
@@ -4841,7 +4841,7 @@ wrapperTag: div
4841
4841
  <div class="pf-v6-c-masthead__content">
4842
4842
  <div
4843
4843
  class="pf-v6-c-toolbar pf-m-static"
4844
- id="primary-detail-card-simple-list-on-mobile-example-masthead-toolbar"
4844
+ id="primary-detail-card-simple-list-on-mobile-example-docked-toolbar"
4845
4845
  >
4846
4846
  <div class="pf-v6-c-toolbar__content">
4847
4847
  <div class="pf-v6-c-toolbar__content-section">
@@ -5201,7 +5201,7 @@ wrapperTag: div
5201
5201
  </div>
5202
5202
  <header
5203
5203
  class="pf-v6-c-masthead"
5204
- id="primary-detail-card-data-list-example-masthead"
5204
+ id="primary-detail-card-data-list-example-docked"
5205
5205
  >
5206
5206
  <div class="pf-v6-c-masthead__main">
5207
5207
  <span class="pf-v6-c-masthead__toggle">
@@ -5244,7 +5244,7 @@ wrapperTag: div
5244
5244
  y1="2.25860997e-13%"
5245
5245
  x2="32%"
5246
5246
  y2="100%"
5247
- id="linearGradient-primary-detail-card-data-list-example-masthead"
5247
+ id="linearGradient-primary-detail-card-data-list-example-docked"
5248
5248
  >
5249
5249
  <stop stop-color="#2B9AF3" offset="0%" />
5250
5250
  <stop
@@ -5298,11 +5298,11 @@ wrapperTag: div
5298
5298
  />
5299
5299
  <path
5300
5300
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
5301
- fill="url(#linearGradient-primary-detail-card-data-list-example-masthead)"
5301
+ fill="url(#linearGradient-primary-detail-card-data-list-example-docked)"
5302
5302
  />
5303
5303
  <path
5304
5304
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
5305
- fill="url(#linearGradient-primary-detail-card-data-list-example-masthead)"
5305
+ fill="url(#linearGradient-primary-detail-card-data-list-example-docked)"
5306
5306
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5307
5307
  />
5308
5308
  </g>
@@ -5314,7 +5314,7 @@ wrapperTag: div
5314
5314
  <div class="pf-v6-c-masthead__content">
5315
5315
  <div
5316
5316
  class="pf-v6-c-toolbar pf-m-static"
5317
- id="primary-detail-card-data-list-example-masthead-toolbar"
5317
+ id="primary-detail-card-data-list-example-docked-toolbar"
5318
5318
  >
5319
5319
  <div class="pf-v6-c-toolbar__content">
5320
5320
  <div class="pf-v6-c-toolbar__content-section">
@@ -5806,7 +5806,7 @@ wrapperTag: div
5806
5806
  </div>
5807
5807
  <header
5808
5808
  class="pf-v6-c-masthead"
5809
- id="primary-detail-inline-modifier-example-masthead"
5809
+ id="primary-detail-inline-modifier-example-docked"
5810
5810
  >
5811
5811
  <div class="pf-v6-c-masthead__main">
5812
5812
  <span class="pf-v6-c-masthead__toggle">
@@ -5849,7 +5849,7 @@ wrapperTag: div
5849
5849
  y1="2.25860997e-13%"
5850
5850
  x2="32%"
5851
5851
  y2="100%"
5852
- id="linearGradient-primary-detail-inline-modifier-example-masthead"
5852
+ id="linearGradient-primary-detail-inline-modifier-example-docked"
5853
5853
  >
5854
5854
  <stop stop-color="#2B9AF3" offset="0%" />
5855
5855
  <stop
@@ -5903,11 +5903,11 @@ wrapperTag: div
5903
5903
  />
5904
5904
  <path
5905
5905
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
5906
- fill="url(#linearGradient-primary-detail-inline-modifier-example-masthead)"
5906
+ fill="url(#linearGradient-primary-detail-inline-modifier-example-docked)"
5907
5907
  />
5908
5908
  <path
5909
5909
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
5910
- fill="url(#linearGradient-primary-detail-inline-modifier-example-masthead)"
5910
+ fill="url(#linearGradient-primary-detail-inline-modifier-example-docked)"
5911
5911
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5912
5912
  />
5913
5913
  </g>
@@ -5919,7 +5919,7 @@ wrapperTag: div
5919
5919
  <div class="pf-v6-c-masthead__content">
5920
5920
  <div
5921
5921
  class="pf-v6-c-toolbar pf-m-static"
5922
- id="primary-detail-inline-modifier-example-masthead-toolbar"
5922
+ id="primary-detail-inline-modifier-example-docked-toolbar"
5923
5923
  >
5924
5924
  <div class="pf-v6-c-toolbar__content">
5925
5925
  <div class="pf-v6-c-toolbar__content-section">
package/docs/demos/Skeleton/examples/Skeleton.md CHANGED
@@ -15,7 +15,7 @@ section: components
15
15
  <span class="pf-v6-c-button__text">Skip to content</span>
16
16
  </a>
17
17
  </div>
18
- <header class="pf-v6-c-masthead" id="skeleton-basic-example-masthead">
18
+ <header class="pf-v6-c-masthead" id="skeleton-basic-example-docked">
19
19
  <div class="pf-v6-c-masthead__main">
20
20
  <span class="pf-v6-c-masthead__toggle">
21
21
  <button
@@ -57,7 +57,7 @@ section: components
57
57
  y1="2.25860997e-13%"
58
58
  x2="32%"
59
59
  y2="100%"
60
- id="linearGradient-skeleton-basic-example-masthead"
60
+ id="linearGradient-skeleton-basic-example-docked"
61
61
  >
62
62
  <stop stop-color="#2B9AF3" offset="0%" />
63
63
  <stop
@@ -111,11 +111,11 @@ section: components
111
111
  />
112
112
  <path
113
113
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
114
- fill="url(#linearGradient-skeleton-basic-example-masthead)"
114
+ fill="url(#linearGradient-skeleton-basic-example-docked)"
115
115
  />
116
116
  <path
117
117
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
118
- fill="url(#linearGradient-skeleton-basic-example-masthead)"
118
+ fill="url(#linearGradient-skeleton-basic-example-docked)"
119
119
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
120
120
  />
121
121
  </g>
@@ -127,7 +127,7 @@ section: components
127
127
  <div class="pf-v6-c-masthead__content">
128
128
  <div
129
129
  class="pf-v6-c-toolbar pf-m-static"
130
- id="skeleton-basic-example-masthead-toolbar"
130
+ id="skeleton-basic-example-docked-toolbar"
131
131
  >
132
132
  <div class="pf-v6-c-toolbar__content">
133
133
  <div class="pf-v6-c-toolbar__content-section">