@patternfly/patternfly 6.0.0-alpha.103 → 6.0.0-alpha.105

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 (49) hide show
  1. package/base/patternfly-variables.css +22 -19
  2. package/base/tokens/_tokens-charts.scss +6 -6
  3. package/base/tokens/_tokens-dark.scss +4 -3
  4. package/base/tokens/_tokens-default.scss +20 -18
  5. package/base/tokens/_tokens-palette.scss +1 -1
  6. package/components/Drawer/drawer.css +5 -4
  7. package/components/Drawer/drawer.scss +7 -6
  8. package/components/FormControl/form-control.scss +1 -1
  9. package/components/MenuToggle/menu-toggle.css +24 -0
  10. package/components/MenuToggle/menu-toggle.scss +36 -0
  11. package/components/Page/page.css +24 -23
  12. package/components/Page/page.scss +24 -23
  13. package/docs/components/Drawer/examples/Drawer.md +2 -1
  14. package/docs/components/MenuToggle/examples/MenuToggle.md +64 -0
  15. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  16. package/docs/components/Page/examples/Page.md +114 -100
  17. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  18. package/docs/demos/Alert/examples/Alert.md +551 -524
  19. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  20. package/docs/demos/Banner/examples/Banner.md +420 -412
  21. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  22. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  23. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  24. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  25. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  26. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  27. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  28. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  29. package/docs/demos/Modal/examples/Modal.md +486 -474
  30. package/docs/demos/Nav/examples/Nav.md +528 -510
  31. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  32. package/docs/demos/Page/examples/Page.md +1656 -1633
  33. package/docs/demos/Page/examples/Penta.md +632 -577
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  35. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  36. package/docs/demos/Table/examples/Table.md +14137 -13972
  37. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  38. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  39. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  40. package/package.json +1 -1
  41. package/patternfly-base-no-globals-theme-dark-unversioned.css +22 -19
  42. package/patternfly-base-no-globals.css +22 -19
  43. package/patternfly-base-theme-dark-unversioned.css +22 -19
  44. package/patternfly-base.css +22 -19
  45. package/patternfly-no-globals.css +75 -46
  46. package/patternfly-theme-dark-unversioned.css +75 -46
  47. package/patternfly.css +75 -46
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
package/docs/components/Page/examples/Page.md CHANGED
@@ -31,21 +31,23 @@ wrapperTag: div
31
31
  <div class="pf-v6-c-page__sidebar">
32
32
  <div class="pf-v6-c-page__sidebar-body">Navigation</div>
33
33
  </div>
34
- <main class="pf-v6-c-page__main" tabindex="-1">
35
- <section class="pf-v6-c-page__main-section">
36
- This is a default
37
- <code>.pf-v6-c-page__main-section</code>.
38
- </section>
39
- <section class="pf-v6-c-page__main-section pf-m-secondary">
40
- This
41
- <code>.pf-v6-c-page__main-section</code> uses
42
- <code>.pf-m-secondary</code>.
43
- </section>
44
- <section class="pf-v6-c-page__main-section">
45
- This is a default
46
- <code>.pf-v6-c-page__main-section</code>.
47
- </section>
48
- </main>
34
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
35
+ <main class="pf-v6-c-page__main" tabindex="-1">
36
+ <section class="pf-v6-c-page__main-section">
37
+ This is a default
38
+ <code>.pf-v6-c-page__main-section</code>.
39
+ </section>
40
+ <section class="pf-v6-c-page__main-section pf-m-secondary">
41
+ This
42
+ <code>.pf-v6-c-page__main-section</code> uses
43
+ <code>.pf-m-secondary</code>.
44
+ </section>
45
+ <section class="pf-v6-c-page__main-section">
46
+ This is a default
47
+ <code>.pf-v6-c-page__main-section</code>.
48
+ </section>
49
+ </main>
50
+ </div>
49
51
  </div>
50
52
 
51
53
  ```
@@ -71,21 +73,23 @@ wrapperTag: div
71
73
  <span>Content</span>
72
74
  </div>
73
75
  </header>
74
- <main class="pf-v6-c-page__main" tabindex="-1">
75
- <section class="pf-v6-c-page__main-section">
76
- This is a default
77
- <code>.pf-v6-c-page__main-section</code>.
78
- </section>
79
- <section class="pf-v6-c-page__main-section pf-m-secondary">
80
- This
81
- <code>.pf-v6-c-page__main-section</code> uses
82
- <code>.pf-m-secondary</code>.
83
- </section>
84
- <section class="pf-v6-c-page__main-section">
85
- This is a default
86
- <code>.pf-v6-c-page__main-section</code>.
87
- </section>
88
- </main>
76
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
77
+ <main class="pf-v6-c-page__main" tabindex="-1">
78
+ <section class="pf-v6-c-page__main-section">
79
+ This is a default
80
+ <code>.pf-v6-c-page__main-section</code>.
81
+ </section>
82
+ <section class="pf-v6-c-page__main-section pf-m-secondary">
83
+ This
84
+ <code>.pf-v6-c-page__main-section</code> uses
85
+ <code>.pf-m-secondary</code>.
86
+ </section>
87
+ <section class="pf-v6-c-page__main-section">
88
+ This is a default
89
+ <code>.pf-v6-c-page__main-section</code>.
90
+ </section>
91
+ </main>
92
+ </div>
89
93
  </div>
90
94
 
91
95
  ```
@@ -118,9 +122,11 @@ wrapperTag: div
118
122
  >inset content</div>
119
123
  <div class="pf-v6-c-page__sidebar-body pf-m-page-insets">footer content</div>
120
124
  </div>
121
- <main class="pf-v6-c-page__main" tabindex="-1">
122
- <section class="pf-v6-c-page__main-section"></section>
123
- </main>
125
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
126
+ <main class="pf-v6-c-page__main" tabindex="-1">
127
+ <section class="pf-v6-c-page__main-section"></section>
128
+ </main>
129
+ </div>
124
130
  </div>
125
131
 
126
132
  ```
@@ -146,17 +152,19 @@ wrapperTag: div
146
152
  <span>Content</span>
147
153
  </div>
148
154
  </header>
149
- <main class="pf-v6-c-page__main" tabindex="-1">
150
- <section class="pf-v6-c-page__main-section">A regular page section.</section>
151
- <section class="pf-v6-c-page__main-section pf-m-fill">
152
- This section uses
153
- <code>.pf-m-fill</code> to fill the available space.
154
- </section>
155
- <section class="pf-v6-c-page__main-section pf-m-no-fill">
156
- This section uses
157
- <code>.pf-m-no-fill</code> to not fill the available space.
158
- </section>
159
- </main>
155
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
156
+ <main class="pf-v6-c-page__main" tabindex="-1">
157
+ <section class="pf-v6-c-page__main-section">A regular page section.</section>
158
+ <section class="pf-v6-c-page__main-section pf-m-fill">
159
+ This section uses
160
+ <code>.pf-m-fill</code> to fill the available space.
161
+ </section>
162
+ <section class="pf-v6-c-page__main-section pf-m-no-fill">
163
+ This section uses
164
+ <code>.pf-m-no-fill</code> to not fill the available space.
165
+ </section>
166
+ </main>
167
+ </div>
160
168
  </div>
161
169
 
162
170
  ```
@@ -185,25 +193,27 @@ wrapperTag: div
185
193
  <div class="pf-v6-c-page__sidebar">
186
194
  <div class="pf-v6-c-page__sidebar-body">Navigation</div>
187
195
  </div>
188
- <main class="pf-v6-c-page__main" tabindex="-1">
189
- <section class="pf-v6-c-page__main-section">
190
- This
191
- <code>.pf-v6-c-page__main-section</code> has default padding.
192
- </section>
193
- <section class="pf-v6-c-page__main-section pf-m-no-padding">
194
- This
195
- <code>.pf-v6-c-page__main-section</code> uses
196
- <code>.pf-m-no-padding</code> to remove all padding.
197
- </section>
198
- <section
199
- class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
200
- >
201
- This
202
- <code>.pf-v6-c-page__main-section</code> uses
203
- <code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
204
- <code>md</code> breakpoint.
205
- </section>
206
- </main>
196
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
197
+ <main class="pf-v6-c-page__main" tabindex="-1">
198
+ <section class="pf-v6-c-page__main-section">
199
+ This
200
+ <code>.pf-v6-c-page__main-section</code> has default padding.
201
+ </section>
202
+ <section class="pf-v6-c-page__main-section pf-m-no-padding">
203
+ This
204
+ <code>.pf-v6-c-page__main-section</code> uses
205
+ <code>.pf-m-no-padding</code> to remove all padding.
206
+ </section>
207
+ <section
208
+ class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
209
+ >
210
+ This
211
+ <code>.pf-v6-c-page__main-section</code> uses
212
+ <code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
213
+ <code>md</code> breakpoint.
214
+ </section>
215
+ </main>
216
+ </div>
207
217
  </div>
208
218
 
209
219
  ```
@@ -232,29 +242,31 @@ wrapperTag: div
232
242
  <div class="pf-v6-c-page__sidebar">
233
243
  <div class="pf-v6-c-page__sidebar-body">Navigation</div>
234
244
  </div>
235
- <main class="pf-v6-c-page__main" tabindex="-1">
236
- <section class="pf-v6-c-page__main-subnav">
237
- <code>.pf-v6-c-page__main-subnav</code> for horizontal subnav navigation
238
- </section>
239
- <section class="pf-v6-c-page__main-nav">
240
- <code>.pf-v6-c-page__main-nav</code> for tertiary navigation
241
- </section>
242
- <section class="pf-v6-c-page__main-tabs">
243
- <code>.pf-v6-c-page__main-tabs</code> for tabs
244
- </section>
245
- <div class="pf-v6-c-page__main-group">
246
- <code>.pf-v6-c-page__main-group</code> for a group of page sections
247
- </div>
248
- <section class="pf-v6-c-page__main-breadcrumb">
249
- <code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
250
- </section>
251
- <section class="pf-v6-c-page__main-section">
252
- <code>.pf-v6-c-page__main-section</code> for main sections
253
- </section>
254
- <section class="pf-v6-c-page__main-wizard">
255
- <code>.pf-v6-c-page__main-wizard</code> for wizards
256
- </section>
257
- </main>
245
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
246
+ <main class="pf-v6-c-page__main" tabindex="-1">
247
+ <section class="pf-v6-c-page__main-subnav">
248
+ <code>.pf-v6-c-page__main-subnav</code> for horizontal subnav navigation
249
+ </section>
250
+ <section class="pf-v6-c-page__main-nav">
251
+ <code>.pf-v6-c-page__main-nav</code> for tertiary navigation
252
+ </section>
253
+ <section class="pf-v6-c-page__main-tabs">
254
+ <code>.pf-v6-c-page__main-tabs</code> for tabs
255
+ </section>
256
+ <div class="pf-v6-c-page__main-group">
257
+ <code>.pf-v6-c-page__main-group</code> for a group of page sections
258
+ </div>
259
+ <section class="pf-v6-c-page__main-breadcrumb">
260
+ <code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
261
+ </section>
262
+ <section class="pf-v6-c-page__main-section">
263
+ <code>.pf-v6-c-page__main-section</code> for main sections
264
+ </section>
265
+ <section class="pf-v6-c-page__main-wizard">
266
+ <code>.pf-v6-c-page__main-wizard</code> for wizards
267
+ </section>
268
+ </main>
269
+ </div>
258
270
  </div>
259
271
 
260
272
  ```
@@ -280,22 +292,24 @@ wrapperTag: div
280
292
  <span>Content</span>
281
293
  </div>
282
294
  </header>
283
- <main class="pf-v6-c-page__main" tabindex="-1">
284
- <section
285
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
286
- >
287
- <div class="pf-v6-c-page__main-body">
288
- <div class="pf-v6-c-card">
289
- <div class="pf-v6-c-card__body">
290
- When a width limited page section is wider than the value of
291
- <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
292
- <br />
293
- <br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
295
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
296
+ <main class="pf-v6-c-page__main" tabindex="-1">
297
+ <section
298
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
299
+ >
300
+ <div class="pf-v6-c-page__main-body">
301
+ <div class="pf-v6-c-card">
302
+ <div class="pf-v6-c-card__body">
303
+ When a width limited page section is wider than the value of
304
+ <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
305
+ <br />
306
+ <br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
307
+ </div>
294
308
  </div>
295
309
  </div>
296
- </div>
297
- </section>
298
- </main>
310
+ </section>
311
+ </main>
312
+ </div>
299
313
  </div>
300
314
 
301
315
  ```
package/docs/demos/AboutModal/examples/AboutModal.md CHANGED
@@ -228,92 +228,94 @@ This demo implements the about modal, including the backdrop.
228
228
  </nav>
229
229
  </div>
230
230
  </div>
231
- <main
232
- class="pf-v6-c-page__main"
233
- tabindex="-1"
234
- id="main-content-modal-basic-example"
235
- >
236
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
237
- <div class="pf-v6-c-page__main-body">
238
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
239
- <ol class="pf-v6-c-breadcrumb__list" role="list">
240
- <li class="pf-v6-c-breadcrumb__item">
241
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
242
- </li>
243
- <li class="pf-v6-c-breadcrumb__item">
244
- <span class="pf-v6-c-breadcrumb__item-divider">
245
- <i class="fas fa-angle-right" aria-hidden="true"></i>
246
- </span>
231
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
232
+ <main
233
+ class="pf-v6-c-page__main"
234
+ tabindex="-1"
235
+ id="main-content-modal-basic-example"
236
+ >
237
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
238
+ <div class="pf-v6-c-page__main-body">
239
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
240
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
241
+ <li class="pf-v6-c-breadcrumb__item">
242
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
243
+ </li>
244
+ <li class="pf-v6-c-breadcrumb__item">
245
+ <span class="pf-v6-c-breadcrumb__item-divider">
246
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
247
+ </span>
247
248
 
248
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
249
- </li>
250
- <li class="pf-v6-c-breadcrumb__item">
251
- <span class="pf-v6-c-breadcrumb__item-divider">
252
- <i class="fas fa-angle-right" aria-hidden="true"></i>
253
- </span>
249
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
250
+ </li>
251
+ <li class="pf-v6-c-breadcrumb__item">
252
+ <span class="pf-v6-c-breadcrumb__item-divider">
253
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
254
+ </span>
254
255
 
255
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
256
- </li>
257
- <li class="pf-v6-c-breadcrumb__item">
258
- <span class="pf-v6-c-breadcrumb__item-divider">
259
- <i class="fas fa-angle-right" aria-hidden="true"></i>
260
- </span>
256
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
257
+ </li>
258
+ <li class="pf-v6-c-breadcrumb__item">
259
+ <span class="pf-v6-c-breadcrumb__item-divider">
260
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
261
+ </span>
261
262
 
262
- <a
263
- href="#"
264
- class="pf-v6-c-breadcrumb__link pf-m-current"
265
- aria-current="page"
266
- >Section landing</a>
267
- </li>
268
- </ol>
269
- </nav>
270
- </div>
271
- </section>
272
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
273
- <div class="pf-v6-c-page__main-body">
274
- <div class="pf-v6-c-content">
275
- <h1>Main title</h1>
276
- <p>This is a full page demo.</p>
263
+ <a
264
+ href="#"
265
+ class="pf-v6-c-breadcrumb__link pf-m-current"
266
+ aria-current="page"
267
+ >Section landing</a>
268
+ </li>
269
+ </ol>
270
+ </nav>
277
271
  </div>
278
- </div>
279
- </section>
280
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
281
- <div class="pf-v6-c-page__main-body">
282
- <div class="pf-v6-l-gallery pf-m-gutter">
283
- <div class="pf-v6-c-card">
284
- <div class="pf-v6-c-card__body">This is a card</div>
285
- </div>
286
- <div class="pf-v6-c-card">
287
- <div class="pf-v6-c-card__body">This is a card</div>
288
- </div>
289
- <div class="pf-v6-c-card">
290
- <div class="pf-v6-c-card__body">This is a card</div>
291
- </div>
292
- <div class="pf-v6-c-card">
293
- <div class="pf-v6-c-card__body">This is a card</div>
294
- </div>
295
- <div class="pf-v6-c-card">
296
- <div class="pf-v6-c-card__body">This is a card</div>
297
- </div>
298
- <div class="pf-v6-c-card">
299
- <div class="pf-v6-c-card__body">This is a card</div>
300
- </div>
301
- <div class="pf-v6-c-card">
302
- <div class="pf-v6-c-card__body">This is a card</div>
303
- </div>
304
- <div class="pf-v6-c-card">
305
- <div class="pf-v6-c-card__body">This is a card</div>
306
- </div>
307
- <div class="pf-v6-c-card">
308
- <div class="pf-v6-c-card__body">This is a card</div>
272
+ </section>
273
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
274
+ <div class="pf-v6-c-page__main-body">
275
+ <div class="pf-v6-c-content">
276
+ <h1>Main title</h1>
277
+ <p>This is a full page demo.</p>
309
278
  </div>
310
- <div class="pf-v6-c-card">
311
- <div class="pf-v6-c-card__body">This is a card</div>
279
+ </div>
280
+ </section>
281
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
282
+ <div class="pf-v6-c-page__main-body">
283
+ <div class="pf-v6-l-gallery pf-m-gutter">
284
+ <div class="pf-v6-c-card">
285
+ <div class="pf-v6-c-card__body">This is a card</div>
286
+ </div>
287
+ <div class="pf-v6-c-card">
288
+ <div class="pf-v6-c-card__body">This is a card</div>
289
+ </div>
290
+ <div class="pf-v6-c-card">
291
+ <div class="pf-v6-c-card__body">This is a card</div>
292
+ </div>
293
+ <div class="pf-v6-c-card">
294
+ <div class="pf-v6-c-card__body">This is a card</div>
295
+ </div>
296
+ <div class="pf-v6-c-card">
297
+ <div class="pf-v6-c-card__body">This is a card</div>
298
+ </div>
299
+ <div class="pf-v6-c-card">
300
+ <div class="pf-v6-c-card__body">This is a card</div>
301
+ </div>
302
+ <div class="pf-v6-c-card">
303
+ <div class="pf-v6-c-card__body">This is a card</div>
304
+ </div>
305
+ <div class="pf-v6-c-card">
306
+ <div class="pf-v6-c-card__body">This is a card</div>
307
+ </div>
308
+ <div class="pf-v6-c-card">
309
+ <div class="pf-v6-c-card__body">This is a card</div>
310
+ </div>
311
+ <div class="pf-v6-c-card">
312
+ <div class="pf-v6-c-card__body">This is a card</div>
313
+ </div>
312
314
  </div>
313
315
  </div>
314
- </div>
315
- </section>
316
- </main>
316
+ </section>
317
+ </main>
318
+ </div>
317
319
  </div>
318
320
  <div class="pf-v6-c-backdrop">
319
321
  <div class="pf-v6-l-bullseye">