@patternfly/patternfly 6.0.0-alpha.38 → 6.0.0-alpha.39

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 (36) hide show
  1. package/components/Divider/divider.css +97 -177
  2. package/components/Divider/divider.scss +60 -79
  3. package/components/Masthead/masthead.css +267 -435
  4. package/components/Masthead/masthead.scss +118 -233
  5. package/docs/components/Divider/examples/Divider.css +3 -1
  6. package/docs/components/Divider/examples/Divider.md +4 -5
  7. package/docs/components/Masthead/examples/masthead.md +441 -16
  8. package/docs/demos/AboutModal/examples/AboutModal.md +40 -42
  9. package/docs/demos/Alert/examples/Alert.md +120 -126
  10. package/docs/demos/BackToTop/examples/BackToTop.md +40 -42
  11. package/docs/demos/Banner/examples/Banner.md +79 -80
  12. package/docs/demos/CardView/examples/CardView.md +40 -42
  13. package/docs/demos/ContextSelector/examples/ContextSelector.md +129 -146
  14. package/docs/demos/Dashboard/examples/Dashboard.md +40 -42
  15. package/docs/demos/DataList/examples/DataList.md +160 -279
  16. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -126
  17. package/docs/demos/Drawer/examples/Drawer.md +200 -210
  18. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -252
  19. package/docs/demos/Masthead/examples/Masthead.md +143 -224
  20. package/docs/demos/Modal/examples/Modal.md +240 -252
  21. package/docs/demos/Nav/examples/Nav.md +320 -336
  22. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +200 -210
  23. package/docs/demos/Page/examples/Page.md +360 -378
  24. package/docs/demos/Page/examples/Penta.md +8 -15
  25. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -294
  26. package/docs/demos/Skeleton/examples/Skeleton.md +40 -42
  27. package/docs/demos/Table/examples/Table.md +617 -647
  28. package/docs/demos/Tabs/examples/Tabs.md +240 -252
  29. package/docs/demos/Toolbar/examples/Toolbar.md +80 -84
  30. package/docs/demos/Wizard/examples/Wizard.md +360 -378
  31. package/package.json +1 -1
  32. package/patternfly-no-globals.css +363 -611
  33. package/patternfly-theme-dark-unversioned.css +363 -611
  34. package/patternfly.css +363 -611
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
@@ -25,20 +25,16 @@ cssPrefix: pf-d-description-list
25
25
  </button>
26
26
  </span>
27
27
  <div class="pf-v5-c-masthead__main">
28
- <a
29
- class="pf-v5-c-masthead__brand"
30
- href="#"
31
- style="--pf-v5-c-brand--Height: 36px;"
32
- >
33
- <svg height="36px" viewBox="0 0 679 158" role="img">
34
- <title>Patternfly logo</title>
28
+ <a class="pf-v5-c-masthead__brand" href="#">
29
+ <svg height="40px" viewBox="0 0 679 158">
30
+ <title>PF-HorizontalLogo-Color</title>
35
31
  <defs>
36
32
  <linearGradient
37
33
  x1="68%"
38
34
  y1="2.25860997e-13%"
39
35
  x2="32%"
40
36
  y2="100%"
41
- id="linearGradient-1"
37
+ id="linearGradient-description-list-basic-example-masthead"
42
38
  >
43
39
  <stop stop-color="#2B9AF3" offset="0%" />
44
40
  <stop
@@ -48,13 +44,7 @@ cssPrefix: pf-d-description-list
48
44
  />
49
45
  </linearGradient>
50
46
  </defs>
51
- <g
52
- id="PF-HorizontalLogo-Color"
53
- stroke="none"
54
- stroke-width="1"
55
- fill="none"
56
- fill-rule="evenodd"
57
- >
47
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
58
48
  <g
59
49
  transform="translate(206.000000, 45.750000)"
60
50
  fill="var(--pf-t--global--text--color--regular)"
@@ -89,19 +79,18 @@ cssPrefix: pf-d-description-list
89
79
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
90
80
  />
91
81
  </g>
92
- <g id="Logo" transform="translate(0.000000, 0.000000)">
82
+ <g transform="translate(0.000000, 0.000000)">
93
83
  <path
94
84
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
95
- id="Rectangle-Copy-17"
96
- fill="var(--pf-t--global--color--brand--200)"
85
+ fill="#0066CC"
97
86
  />
98
87
  <path
99
88
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
100
- fill="url(#linearGradient-1)"
89
+ fill="url(#linearGradient-description-list-basic-example-masthead)"
101
90
  />
102
91
  <path
103
92
  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"
104
- fill="url(#linearGradient-1)"
93
+ fill="url(#linearGradient-description-list-basic-example-masthead)"
105
94
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
106
95
  />
107
96
  </g>
@@ -116,8 +105,38 @@ cssPrefix: pf-d-description-list
116
105
  >
117
106
  <div class="pf-v5-c-toolbar__content">
118
107
  <div class="pf-v5-c-toolbar__content-section">
108
+ <div class="pf-v5-c-toolbar__item">
109
+ <button
110
+ class="pf-v5-c-menu-toggle"
111
+ type="button"
112
+ aria-expanded="false"
113
+ >
114
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
115
+ <span class="pf-v5-c-menu-toggle__controls">
116
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
117
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
118
+ </span>
119
+ </span>
120
+ </button>
121
+ </div>
122
+
123
+ <div class="pf-v5-c-toolbar__item">
124
+ <button
125
+ class="pf-v5-c-menu-toggle"
126
+ type="button"
127
+ aria-expanded="false"
128
+ >
129
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
130
+ <span class="pf-v5-c-menu-toggle__controls">
131
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
132
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
133
+ </span>
134
+ </span>
135
+ </button>
136
+ </div>
137
+
119
138
  <div
120
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
139
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
121
140
  >
122
141
  <div
123
142
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -164,27 +183,6 @@ cssPrefix: pf-d-description-list
164
183
  </button>
165
184
  </div>
166
185
  </div>
167
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
168
- <button
169
- class="pf-v5-c-menu-toggle pf-m-full-height"
170
- type="button"
171
- aria-expanded="false"
172
- >
173
- <span class="pf-v5-c-menu-toggle__icon">
174
- <img
175
- class="pf-v5-c-avatar"
176
- alt="Avatar image"
177
- src="/assets/images/img_avatar-light.svg"
178
- />
179
- </span>
180
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
181
- <span class="pf-v5-c-menu-toggle__controls">
182
- <span class="pf-v5-c-menu-toggle__toggle-icon">
183
- <i class="fas fa-angle-down" aria-hidden="true"></i>
184
- </span>
185
- </span>
186
- </button>
187
- </div>
188
186
  </div>
189
187
  </div>
190
188
  </div>
@@ -395,20 +393,16 @@ cssPrefix: pf-d-description-list
395
393
  </button>
396
394
  </span>
397
395
  <div class="pf-v5-c-masthead__main">
398
- <a
399
- class="pf-v5-c-masthead__brand"
400
- href="#"
401
- style="--pf-v5-c-brand--Height: 36px;"
402
- >
403
- <svg height="36px" viewBox="0 0 679 158" role="img">
404
- <title>Patternfly logo</title>
396
+ <a class="pf-v5-c-masthead__brand" href="#">
397
+ <svg height="40px" viewBox="0 0 679 158">
398
+ <title>PF-HorizontalLogo-Color</title>
405
399
  <defs>
406
400
  <linearGradient
407
401
  x1="68%"
408
402
  y1="2.25860997e-13%"
409
403
  x2="32%"
410
404
  y2="100%"
411
- id="linearGradient-1"
405
+ id="linearGradient-description-list-in-drawer-example-masthead"
412
406
  >
413
407
  <stop stop-color="#2B9AF3" offset="0%" />
414
408
  <stop
@@ -418,13 +412,7 @@ cssPrefix: pf-d-description-list
418
412
  />
419
413
  </linearGradient>
420
414
  </defs>
421
- <g
422
- id="PF-HorizontalLogo-Color"
423
- stroke="none"
424
- stroke-width="1"
425
- fill="none"
426
- fill-rule="evenodd"
427
- >
415
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
428
416
  <g
429
417
  transform="translate(206.000000, 45.750000)"
430
418
  fill="var(--pf-t--global--text--color--regular)"
@@ -459,19 +447,18 @@ cssPrefix: pf-d-description-list
459
447
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
460
448
  />
461
449
  </g>
462
- <g id="Logo" transform="translate(0.000000, 0.000000)">
450
+ <g transform="translate(0.000000, 0.000000)">
463
451
  <path
464
452
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
465
- id="Rectangle-Copy-17"
466
- fill="var(--pf-t--global--color--brand--200)"
453
+ fill="#0066CC"
467
454
  />
468
455
  <path
469
456
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
470
- fill="url(#linearGradient-1)"
457
+ fill="url(#linearGradient-description-list-in-drawer-example-masthead)"
471
458
  />
472
459
  <path
473
460
  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"
474
- fill="url(#linearGradient-1)"
461
+ fill="url(#linearGradient-description-list-in-drawer-example-masthead)"
475
462
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
476
463
  />
477
464
  </g>
@@ -486,8 +473,38 @@ cssPrefix: pf-d-description-list
486
473
  >
487
474
  <div class="pf-v5-c-toolbar__content">
488
475
  <div class="pf-v5-c-toolbar__content-section">
476
+ <div class="pf-v5-c-toolbar__item">
477
+ <button
478
+ class="pf-v5-c-menu-toggle"
479
+ type="button"
480
+ aria-expanded="false"
481
+ >
482
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
483
+ <span class="pf-v5-c-menu-toggle__controls">
484
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
485
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
486
+ </span>
487
+ </span>
488
+ </button>
489
+ </div>
490
+
491
+ <div class="pf-v5-c-toolbar__item">
492
+ <button
493
+ class="pf-v5-c-menu-toggle"
494
+ type="button"
495
+ aria-expanded="false"
496
+ >
497
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
498
+ <span class="pf-v5-c-menu-toggle__controls">
499
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
500
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
501
+ </span>
502
+ </span>
503
+ </button>
504
+ </div>
505
+
489
506
  <div
490
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
507
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
491
508
  >
492
509
  <div
493
510
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -534,27 +551,6 @@ cssPrefix: pf-d-description-list
534
551
  </button>
535
552
  </div>
536
553
  </div>
537
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
538
- <button
539
- class="pf-v5-c-menu-toggle pf-m-full-height"
540
- type="button"
541
- aria-expanded="false"
542
- >
543
- <span class="pf-v5-c-menu-toggle__icon">
544
- <img
545
- class="pf-v5-c-avatar"
546
- alt="Avatar image"
547
- src="/assets/images/img_avatar-light.svg"
548
- />
549
- </span>
550
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
551
- <span class="pf-v5-c-menu-toggle__controls">
552
- <span class="pf-v5-c-menu-toggle__toggle-icon">
553
- <i class="fas fa-angle-down" aria-hidden="true"></i>
554
- </span>
555
- </span>
556
- </button>
557
- </div>
558
554
  </div>
559
555
  </div>
560
556
  </div>
@@ -1080,20 +1076,16 @@ cssPrefix: pf-d-description-list
1080
1076
  </button>
1081
1077
  </span>
1082
1078
  <div class="pf-v5-c-masthead__main">
1083
- <a
1084
- class="pf-v5-c-masthead__brand"
1085
- href="#"
1086
- style="--pf-v5-c-brand--Height: 36px;"
1087
- >
1088
- <svg height="36px" viewBox="0 0 679 158" role="img">
1089
- <title>Patternfly logo</title>
1079
+ <a class="pf-v5-c-masthead__brand" href="#">
1080
+ <svg height="40px" viewBox="0 0 679 158">
1081
+ <title>PF-HorizontalLogo-Color</title>
1090
1082
  <defs>
1091
1083
  <linearGradient
1092
1084
  x1="68%"
1093
1085
  y1="2.25860997e-13%"
1094
1086
  x2="32%"
1095
1087
  y2="100%"
1096
- id="linearGradient-1"
1088
+ id="linearGradient-description-list-complex-content-example-masthead"
1097
1089
  >
1098
1090
  <stop stop-color="#2B9AF3" offset="0%" />
1099
1091
  <stop
@@ -1103,13 +1095,7 @@ cssPrefix: pf-d-description-list
1103
1095
  />
1104
1096
  </linearGradient>
1105
1097
  </defs>
1106
- <g
1107
- id="PF-HorizontalLogo-Color"
1108
- stroke="none"
1109
- stroke-width="1"
1110
- fill="none"
1111
- fill-rule="evenodd"
1112
- >
1098
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1113
1099
  <g
1114
1100
  transform="translate(206.000000, 45.750000)"
1115
1101
  fill="var(--pf-t--global--text--color--regular)"
@@ -1144,19 +1130,18 @@ cssPrefix: pf-d-description-list
1144
1130
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1145
1131
  />
1146
1132
  </g>
1147
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1133
+ <g transform="translate(0.000000, 0.000000)">
1148
1134
  <path
1149
1135
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1150
- id="Rectangle-Copy-17"
1151
- fill="var(--pf-t--global--color--brand--200)"
1136
+ fill="#0066CC"
1152
1137
  />
1153
1138
  <path
1154
1139
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1155
- fill="url(#linearGradient-1)"
1140
+ fill="url(#linearGradient-description-list-complex-content-example-masthead)"
1156
1141
  />
1157
1142
  <path
1158
1143
  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"
1159
- fill="url(#linearGradient-1)"
1144
+ fill="url(#linearGradient-description-list-complex-content-example-masthead)"
1160
1145
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1161
1146
  />
1162
1147
  </g>
@@ -1171,8 +1156,38 @@ cssPrefix: pf-d-description-list
1171
1156
  >
1172
1157
  <div class="pf-v5-c-toolbar__content">
1173
1158
  <div class="pf-v5-c-toolbar__content-section">
1159
+ <div class="pf-v5-c-toolbar__item">
1160
+ <button
1161
+ class="pf-v5-c-menu-toggle"
1162
+ type="button"
1163
+ aria-expanded="false"
1164
+ >
1165
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1166
+ <span class="pf-v5-c-menu-toggle__controls">
1167
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1168
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1169
+ </span>
1170
+ </span>
1171
+ </button>
1172
+ </div>
1173
+
1174
+ <div class="pf-v5-c-toolbar__item">
1175
+ <button
1176
+ class="pf-v5-c-menu-toggle"
1177
+ type="button"
1178
+ aria-expanded="false"
1179
+ >
1180
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1181
+ <span class="pf-v5-c-menu-toggle__controls">
1182
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1183
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1184
+ </span>
1185
+ </span>
1186
+ </button>
1187
+ </div>
1188
+
1174
1189
  <div
1175
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1190
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1176
1191
  >
1177
1192
  <div
1178
1193
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1219,27 +1234,6 @@ cssPrefix: pf-d-description-list
1219
1234
  </button>
1220
1235
  </div>
1221
1236
  </div>
1222
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1223
- <button
1224
- class="pf-v5-c-menu-toggle pf-m-full-height"
1225
- type="button"
1226
- aria-expanded="false"
1227
- >
1228
- <span class="pf-v5-c-menu-toggle__icon">
1229
- <img
1230
- class="pf-v5-c-avatar"
1231
- alt="Avatar image"
1232
- src="/assets/images/img_avatar-light.svg"
1233
- />
1234
- </span>
1235
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1236
- <span class="pf-v5-c-menu-toggle__controls">
1237
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1238
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1239
- </span>
1240
- </span>
1241
- </button>
1242
- </div>
1243
1237
  </div>
1244
1238
  </div>
1245
1239
  </div>