@patternfly/patternfly 6.0.0-alpha.200 → 6.0.0-alpha.202

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 (77) hide show
  1. package/base/normalize.scss +3 -3
  2. package/base/patternfly-variables.css +2 -6
  3. package/base/tokens/tokens-charts-dark.scss +1 -1
  4. package/base/tokens/tokens-charts.scss +1 -1
  5. package/base/tokens/tokens-dark.scss +1 -1
  6. package/base/tokens/tokens-default.scss +3 -3
  7. package/base/tokens/tokens-local.scss +0 -6
  8. package/base/tokens/tokens-palette.scss +1 -1
  9. package/components/Breadcrumb/breadcrumb.css +9 -6
  10. package/components/Breadcrumb/breadcrumb.scss +9 -6
  11. package/components/Button/button.css +16 -7
  12. package/components/Button/button.scss +17 -7
  13. package/components/Content/content.css +8 -5
  14. package/components/Content/content.scss +8 -5
  15. package/components/DescriptionList/description-list.css +10 -15
  16. package/components/DescriptionList/description-list.scss +10 -16
  17. package/components/JumpLinks/jump-links.css +1 -1
  18. package/components/JumpLinks/jump-links.scss +1 -2
  19. package/components/Label/label.css +15 -14
  20. package/components/Label/label.scss +16 -14
  21. package/components/Masthead/masthead.css +172 -95
  22. package/components/Masthead/masthead.scss +74 -49
  23. package/components/Nav/nav.css +5 -4
  24. package/components/Nav/nav.scss +5 -4
  25. package/components/Page/page.css +18 -12
  26. package/components/Page/page.scss +18 -12
  27. package/components/ProgressStepper/progress-stepper.css +8 -7
  28. package/components/ProgressStepper/progress-stepper.scss +8 -8
  29. package/components/SimpleList/simple-list.css +1 -1
  30. package/components/SimpleList/simple-list.scss +1 -2
  31. package/components/Tabs/tabs.css +1 -1
  32. package/components/Tabs/tabs.scss +1 -3
  33. package/components/Timestamp/timestamp.css +8 -17
  34. package/components/Timestamp/timestamp.scss +8 -18
  35. package/components/ToggleGroup/toggle-group.css +2 -2
  36. package/components/ToggleGroup/toggle-group.scss +2 -4
  37. package/components/_index.css +274 -187
  38. package/docs/components/Alert/examples/Alert.md +4 -4
  39. package/docs/components/Card/examples/Card.md +4 -4
  40. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +2 -2
  41. package/docs/components/DescriptionList/examples/DescriptionList.md +30 -5
  42. package/docs/components/Form/examples/Form.md +2 -2
  43. package/docs/components/Masthead/examples/masthead.md +506 -493
  44. package/docs/components/Nav/examples/Navigation.md +0 -1
  45. package/docs/components/Page/examples/Page.md +98 -89
  46. package/docs/components/Table/examples/Table.md +58 -58
  47. package/docs/components/Wizard/examples/Wizard.md +1 -1
  48. package/docs/demos/AboutModal/examples/AboutModal.md +87 -83
  49. package/docs/demos/Alert/examples/Alert.md +263 -251
  50. package/docs/demos/BackToTop/examples/BackToTop.md +87 -83
  51. package/docs/demos/Banner/examples/Banner.md +177 -173
  52. package/docs/demos/Card/examples/Card.md +12 -12
  53. package/docs/demos/CardView/examples/CardView.md +90 -88
  54. package/docs/demos/Dashboard/examples/Dashboard.md +92 -88
  55. package/docs/demos/DataList/examples/DataList.md +352 -344
  56. package/docs/demos/DescriptionList/examples/DescriptionList.md +262 -252
  57. package/docs/demos/Drawer/examples/Drawer.md +437 -423
  58. package/docs/demos/Form/examples/BasicForms.md +11 -11
  59. package/docs/demos/JumpLinks/examples/JumpLinks.md +524 -500
  60. package/docs/demos/Masthead/examples/Masthead.md +772 -736
  61. package/docs/demos/Modal/examples/Modal.md +522 -498
  62. package/docs/demos/Nav/examples/Nav.md +511 -487
  63. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +435 -425
  64. package/docs/demos/Page/examples/Page.md +959 -915
  65. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +611 -584
  66. package/docs/demos/Skeleton/examples/Skeleton.md +87 -83
  67. package/docs/demos/Table/examples/Table.md +1326 -1294
  68. package/docs/demos/Tabs/examples/Tabs.md +526 -504
  69. package/docs/demos/Toolbar/examples/Toolbar.md +174 -166
  70. package/docs/demos/Wizard/examples/Wizard.md +790 -767
  71. package/package.json +1 -1
  72. package/patternfly-base-no-globals.css +2 -6
  73. package/patternfly-base.css +5 -9
  74. package/patternfly-no-globals.css +276 -193
  75. package/patternfly.css +279 -196
  76. package/patternfly.min.css +1 -1
  77. package/patternfly.min.css.map +1 -1
package/docs/components/Nav/examples/Navigation.md CHANGED
@@ -2511,7 +2511,6 @@ The navigation system relies on several different sub-components:
2511
2511
  | `.pf-v6-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
2512
2512
  | `.pf-m-horizontal` | `.pf-v6-c-nav` | Modifies nav for the horizontal variation. |
2513
2513
  | `.pf-m-horizontal-subnav` | `.pf-v6-c-nav` | Modifies nav for the horizontal subnav variation. |
2514
- | `.pf-m-full-width` | `.pf-v6-c-nav` | Modifies nav for to full width of parent. |
2515
2514
  | `.pf-m-flyout` | `.pf-v6-c-nav__item` | Modifies nav item for the flyout variation. |
2516
2515
  | `.pf-m-scrollable` | `.pf-v6-c-nav` | Modifies nav for the scrollable state. |
2517
2516
  | `.pf-m-expanded` | `.pf-v6-c-nav__item` | Modifies for the expanded state. |
package/docs/components/Page/examples/Page.md CHANGED
@@ -12,19 +12,21 @@ wrapperTag: div
12
12
  ```html
13
13
  <div class="pf-v6-c-page">
14
14
  <header class="pf-v6-c-masthead">
15
- <span class="pf-v6-c-masthead__toggle">
16
- <button
17
- class="pf-v6-c-button pf-m-plain"
18
- type="button"
19
- aria-label="Global navigation"
20
- >
21
- <span class="pf-v6-c-button__icon">
22
- <i class="fas fa-bars" aria-hidden="true"></i>
23
- </span>
24
- </button>
25
- </span>
26
15
  <div class="pf-v6-c-masthead__main">
27
- <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
16
+ <span class="pf-v6-c-masthead__toggle">
17
+ <button
18
+ class="pf-v6-c-button pf-m-plain"
19
+ type="button"
20
+ aria-label="Global navigation"
21
+ >
22
+ <span class="pf-v6-c-button__icon">
23
+ <i class="fas fa-bars" aria-hidden="true"></i>
24
+ </span>
25
+ </button>
26
+ </span>
27
+ <div class="pf-v6-c-masthead__brand">
28
+ <a class="pf-v6-c-masthead__logo" href="#">Logo</a>
29
+ </div>
28
30
  </div>
29
31
  <div class="pf-v6-c-masthead__content">
30
32
  <span>Content</span>
@@ -76,19 +78,21 @@ wrapperTag: div
76
78
  ```html
77
79
  <div class="pf-v6-c-page">
78
80
  <header class="pf-v6-c-masthead">
79
- <span class="pf-v6-c-masthead__toggle">
80
- <button
81
- class="pf-v6-c-button pf-m-plain"
82
- type="button"
83
- aria-label="Global navigation"
84
- >
85
- <span class="pf-v6-c-button__icon">
86
- <i class="fas fa-bars" aria-hidden="true"></i>
87
- </span>
88
- </button>
89
- </span>
90
81
  <div class="pf-v6-c-masthead__main">
91
- <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
82
+ <span class="pf-v6-c-masthead__toggle">
83
+ <button
84
+ class="pf-v6-c-button pf-m-plain"
85
+ type="button"
86
+ aria-label="Global navigation"
87
+ >
88
+ <span class="pf-v6-c-button__icon">
89
+ <i class="fas fa-bars" aria-hidden="true"></i>
90
+ </span>
91
+ </button>
92
+ </span>
93
+ <div class="pf-v6-c-masthead__brand">
94
+ <a class="pf-v6-c-masthead__logo" href="#">Logo</a>
95
+ </div>
92
96
  </div>
93
97
  <div class="pf-v6-c-masthead__content">
94
98
  <span>Content</span>
@@ -126,19 +130,21 @@ wrapperTag: div
126
130
  ```html
127
131
  <div class="pf-v6-c-page">
128
132
  <header class="pf-v6-c-masthead">
129
- <span class="pf-v6-c-masthead__toggle">
130
- <button
131
- class="pf-v6-c-button pf-m-plain"
132
- type="button"
133
- aria-label="Global navigation"
134
- >
135
- <span class="pf-v6-c-button__icon">
136
- <i class="fas fa-bars" aria-hidden="true"></i>
137
- </span>
138
- </button>
139
- </span>
140
133
  <div class="pf-v6-c-masthead__main">
141
- <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
134
+ <span class="pf-v6-c-masthead__toggle">
135
+ <button
136
+ class="pf-v6-c-button pf-m-plain"
137
+ type="button"
138
+ aria-label="Global navigation"
139
+ >
140
+ <span class="pf-v6-c-button__icon">
141
+ <i class="fas fa-bars" aria-hidden="true"></i>
142
+ </span>
143
+ </button>
144
+ </span>
145
+ <div class="pf-v6-c-masthead__brand">
146
+ <a class="pf-v6-c-masthead__logo" href="#">Logo</a>
147
+ </div>
142
148
  </div>
143
149
  <div class="pf-v6-c-masthead__content">
144
150
  <span>Content</span>
@@ -167,19 +173,21 @@ wrapperTag: div
167
173
  ```html
168
174
  <div class="pf-v6-c-page">
169
175
  <header class="pf-v6-c-masthead">
170
- <span class="pf-v6-c-masthead__toggle">
171
- <button
172
- class="pf-v6-c-button pf-m-plain"
173
- type="button"
174
- aria-label="Global navigation"
175
- >
176
- <span class="pf-v6-c-button__icon">
177
- <i class="fas fa-bars" aria-hidden="true"></i>
178
- </span>
179
- </button>
180
- </span>
181
176
  <div class="pf-v6-c-masthead__main">
182
- <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
177
+ <span class="pf-v6-c-masthead__toggle">
178
+ <button
179
+ class="pf-v6-c-button pf-m-plain"
180
+ type="button"
181
+ aria-label="Global navigation"
182
+ >
183
+ <span class="pf-v6-c-button__icon">
184
+ <i class="fas fa-bars" aria-hidden="true"></i>
185
+ </span>
186
+ </button>
187
+ </span>
188
+ <div class="pf-v6-c-masthead__brand">
189
+ <a class="pf-v6-c-masthead__logo" href="#">Logo</a>
190
+ </div>
183
191
  </div>
184
192
  <div class="pf-v6-c-masthead__content">
185
193
  <span>Content</span>
@@ -213,19 +221,21 @@ wrapperTag: div
213
221
  ```html
214
222
  <div class="pf-v6-c-page">
215
223
  <header class="pf-v6-c-masthead">
216
- <span class="pf-v6-c-masthead__toggle">
217
- <button
218
- class="pf-v6-c-button pf-m-plain"
219
- type="button"
220
- aria-label="Global navigation"
221
- >
222
- <span class="pf-v6-c-button__icon">
223
- <i class="fas fa-bars" aria-hidden="true"></i>
224
- </span>
225
- </button>
226
- </span>
227
224
  <div class="pf-v6-c-masthead__main">
228
- <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
225
+ <span class="pf-v6-c-masthead__toggle">
226
+ <button
227
+ class="pf-v6-c-button pf-m-plain"
228
+ type="button"
229
+ aria-label="Global navigation"
230
+ >
231
+ <span class="pf-v6-c-button__icon">
232
+ <i class="fas fa-bars" aria-hidden="true"></i>
233
+ </span>
234
+ </button>
235
+ </span>
236
+ <div class="pf-v6-c-masthead__brand">
237
+ <a class="pf-v6-c-masthead__logo" href="#">Logo</a>
238
+ </div>
229
239
  </div>
230
240
  <div class="pf-v6-c-masthead__content">
231
241
  <span>Content</span>
@@ -270,19 +280,21 @@ wrapperTag: div
270
280
  ```html
271
281
  <div class="pf-v6-c-page">
272
282
  <header class="pf-v6-c-masthead">
273
- <span class="pf-v6-c-masthead__toggle">
274
- <button
275
- class="pf-v6-c-button pf-m-plain"
276
- type="button"
277
- aria-label="Global navigation"
278
- >
279
- <span class="pf-v6-c-button__icon">
280
- <i class="fas fa-bars" aria-hidden="true"></i>
281
- </span>
282
- </button>
283
- </span>
284
283
  <div class="pf-v6-c-masthead__main">
285
- <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
284
+ <span class="pf-v6-c-masthead__toggle">
285
+ <button
286
+ class="pf-v6-c-button pf-m-plain"
287
+ type="button"
288
+ aria-label="Global navigation"
289
+ >
290
+ <span class="pf-v6-c-button__icon">
291
+ <i class="fas fa-bars" aria-hidden="true"></i>
292
+ </span>
293
+ </button>
294
+ </span>
295
+ <div class="pf-v6-c-masthead__brand">
296
+ <a class="pf-v6-c-masthead__logo" href="#">Logo</a>
297
+ </div>
286
298
  </div>
287
299
  <div class="pf-v6-c-masthead__content">
288
300
  <span>Content</span>
@@ -324,19 +336,21 @@ wrapperTag: div
324
336
  ```html
325
337
  <div class="pf-v6-c-page">
326
338
  <header class="pf-v6-c-masthead">
327
- <span class="pf-v6-c-masthead__toggle">
328
- <button
329
- class="pf-v6-c-button pf-m-plain"
330
- type="button"
331
- aria-label="Global navigation"
332
- >
333
- <span class="pf-v6-c-button__icon">
334
- <i class="fas fa-bars" aria-hidden="true"></i>
335
- </span>
336
- </button>
337
- </span>
338
339
  <div class="pf-v6-c-masthead__main">
339
- <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
340
+ <span class="pf-v6-c-masthead__toggle">
341
+ <button
342
+ class="pf-v6-c-button pf-m-plain"
343
+ type="button"
344
+ aria-label="Global navigation"
345
+ >
346
+ <span class="pf-v6-c-button__icon">
347
+ <i class="fas fa-bars" aria-hidden="true"></i>
348
+ </span>
349
+ </button>
350
+ </span>
351
+ <div class="pf-v6-c-masthead__brand">
352
+ <a class="pf-v6-c-masthead__logo" href="#">Logo</a>
353
+ </div>
340
354
  </div>
341
355
  <div class="pf-v6-c-masthead__content">
342
356
  <span>Content</span>
@@ -400,11 +414,6 @@ This component provides the basic chrome for a page, including sidebar and main
400
414
  | `.pf-m-page-insets` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body padding/inset to visually match padding of page elements. |
401
415
  | `.pf-m-context-selector` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body to contain a context selector. |
402
416
  | `.pf-m-inset-none` | `.pf-v6-c-page__sidebar-body` | Removes a sidebar body left/right inset. |
403
- | `.pf-m-light` | `.pf-v6-c-page__sidebar` | Modifies the sidebar the light variation. **Note: for use with a light themed nav component** |
404
- | `.pf-m-light` | `.pf-v6-c-page__main-section` | Modifies a main page section to have a light theme. |
405
- | `.pf-m-dark-200` | `.pf-v6-c-page__main-section` | Modifies a main page section to have a dark theme and a dark transparent background. |
406
- | `.pf-m-dark-100` | `.pf-v6-c-page__main-section` | Modifies a main page section to have a dark theme and a darker transparent background. |
407
- | `.pf-m-light-200` | `.pf-v6-c-page__main-wizard` | Modifies a wizard page section to have a light 200 theme. |
408
417
  | `.pf-m-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Should be used with pf-m-no-padding. |
409
418
  | `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
410
419
  | `.pf-m-fill` | `.pf-v6-c-page__main-container`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element to grow to fill the available space. |