@patternfly/patternfly 6.5.0-prerelease.63 → 6.5.0-prerelease.65

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 (41) hide show
  1. package/base/patternfly-svg-icons.css +6 -0
  2. package/base/patternfly-svg-icons.scss +6 -0
  3. package/components/ClipboardCopy/clipboard-copy.css +7 -1
  4. package/components/ClipboardCopy/clipboard-copy.scss +10 -1
  5. package/components/Page/page.css +83 -34
  6. package/components/Page/page.scss +94 -39
  7. package/components/Table/table.css +2 -2
  8. package/components/Table/table.scss +2 -2
  9. package/components/_index.css +92 -37
  10. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +39 -38
  11. package/docs/components/Page/examples/Page.md +62 -15
  12. package/docs/components/Table/examples/Table.md +1879 -151
  13. package/docs/demos/AboutModal/examples/AboutModal.md +8 -2
  14. package/docs/demos/Alert/examples/Alert.md +24 -6
  15. package/docs/demos/BackToTop/examples/BackToTop.md +8 -2
  16. package/docs/demos/Banner/examples/Banner.md +16 -4
  17. package/docs/demos/CardView/examples/CardView.md +8 -2
  18. package/docs/demos/Dashboard/examples/Dashboard.md +8 -2
  19. package/docs/demos/DataList/examples/DataList.md +32 -8
  20. package/docs/demos/DescriptionList/examples/DescriptionList.md +24 -6
  21. package/docs/demos/Drawer/examples/Drawer.md +24 -6
  22. package/docs/demos/JumpLinks/examples/JumpLinks.md +32 -8
  23. package/docs/demos/Masthead/examples/Masthead.md +72 -18
  24. package/docs/demos/Modal/examples/Modal.md +48 -12
  25. package/docs/demos/Nav/examples/Nav.md +80 -20
  26. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -10
  27. package/docs/demos/Page/examples/Page.md +113 -28
  28. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +56 -14
  29. package/docs/demos/Skeleton/examples/Skeleton.md +8 -2
  30. package/docs/demos/Table/examples/Table.md +496 -64
  31. package/docs/demos/Tabs/examples/Tabs.md +48 -12
  32. package/docs/demos/Toolbar/examples/Toolbar.md +16 -4
  33. package/docs/demos/Wizard/examples/Wizard.md +72 -18
  34. package/package.json +21 -1
  35. package/patternfly-base-no-globals.css +6 -0
  36. package/patternfly-base.css +6 -0
  37. package/patternfly-no-globals.css +99 -38
  38. package/patternfly.css +99 -38
  39. package/patternfly.min.css +1 -1
  40. package/patternfly.min.css.map +1 -1
  41. package/patternfly.scss +3 -1
package/docs/components/Page/examples/Page.md CHANGED
@@ -58,26 +58,38 @@ wrapperTag: div
58
58
  </div>
59
59
  <div class="pf-v6-c-page__main-container" tabindex="-1">
60
60
  <main class="pf-v6-c-page__main" tabindex="-1">
61
- <section class="pf-v6-c-page__main-section">
61
+ <section
62
+ class="pf-v6-c-page__main-section"
63
+ aria-label="Default main section example 1"
64
+ >
62
65
  <div class="pf-v6-c-page__main-body">
63
66
  This is a default
64
67
  <code>.pf-v6-c-page__main-section</code>.
65
68
  </div>
66
69
  </section>
67
- <section class="pf-v6-c-page__main-section pf-m-secondary">
70
+ <section
71
+ class="pf-v6-c-page__main-section pf-m-secondary"
72
+ aria-label="Secondary main section example 1"
73
+ >
68
74
  <div class="pf-v6-c-page__main-body">
69
75
  This
70
76
  <code>.pf-v6-c-page__main-section</code> uses
71
77
  <code>.pf-m-secondary</code>.
72
78
  </div>
73
79
  </section>
74
- <section class="pf-v6-c-page__main-section">
80
+ <section
81
+ class="pf-v6-c-page__main-section"
82
+ aria-label="Default main section example 2"
83
+ >
75
84
  <div class="pf-v6-c-page__main-body">
76
85
  This is a default
77
86
  <code>.pf-v6-c-page__main-section</code>.
78
87
  </div>
79
88
  </section>
80
- <section class="pf-v6-c-page__main-section pf-m-secondary">
89
+ <section
90
+ class="pf-v6-c-page__main-section pf-m-secondary"
91
+ aria-label="Multiple main body section example"
92
+ >
81
93
  <div
82
94
  class="pf-v6-c-page__main-body"
83
95
  >This is a page__main-body, one of three within one page__main-section.</div>
@@ -140,20 +152,29 @@ wrapperTag: div
140
152
  </header>
141
153
  <div class="pf-v6-c-page__main-container" tabindex="-1">
142
154
  <main class="pf-v6-c-page__main" tabindex="-1">
143
- <section class="pf-v6-c-page__main-section">
155
+ <section
156
+ class="pf-v6-c-page__main-section"
157
+ aria-label="Horizontal nav default main section example 1"
158
+ >
144
159
  <div class="pf-v6-c-page__main-body">
145
160
  This is a default
146
161
  <code>.pf-v6-c-page__main-section</code>.
147
162
  </div>
148
163
  </section>
149
- <section class="pf-v6-c-page__main-section pf-m-secondary">
164
+ <section
165
+ class="pf-v6-c-page__main-section pf-m-secondary"
166
+ aria-label="Horizontal nav secondary main section example"
167
+ >
150
168
  <div class="pf-v6-c-page__main-body">
151
169
  This
152
170
  <code>.pf-v6-c-page__main-section</code> uses
153
171
  <code>.pf-m-secondary</code>.
154
172
  </div>
155
173
  </section>
156
- <section class="pf-v6-c-page__main-section">
174
+ <section
175
+ class="pf-v6-c-page__main-section"
176
+ aria-label="Horizontal nav default main section example 2"
177
+ >
157
178
  <div class="pf-v6-c-page__main-body">
158
179
  This is a default
159
180
  <code>.pf-v6-c-page__main-section</code>.
@@ -221,7 +242,10 @@ wrapperTag: div
221
242
  </div>
222
243
  <div class="pf-v6-c-page__main-container" tabindex="-1">
223
244
  <main class="pf-v6-c-page__main" tabindex="-1">
224
- <section class="pf-v6-c-page__main-section">
245
+ <section
246
+ class="pf-v6-c-page__main-section"
247
+ aria-label="Sidebar body layout section"
248
+ >
225
249
  <div class="pf-v6-c-page__main-body"></div>
226
250
  </section>
227
251
  </main>
@@ -276,10 +300,16 @@ wrapperTag: div
276
300
  </header>
277
301
  <div class="pf-v6-c-page__main-container pf-m-fill" tabindex="-1">
278
302
  <main class="pf-v6-c-page__main" tabindex="-1">
279
- <section class="pf-v6-c-page__main-section">
303
+ <section
304
+ class="pf-v6-c-page__main-section"
305
+ aria-label="Regular page section example"
306
+ >
280
307
  <div class="pf-v6-c-page__main-body">A regular page section.</div>
281
308
  </section>
282
- <section class="pf-v6-c-page__main-section pf-m-fill">
309
+ <section
310
+ class="pf-v6-c-page__main-section pf-m-fill"
311
+ aria-label="Fill page section example"
312
+ >
283
313
  <div class="pf-v6-c-page__main-body">
284
314
  This section uses
285
315
  <code>.pf-m-fill</code> to fill the available space. The
@@ -287,7 +317,10 @@ wrapperTag: div
287
317
  <code>.pf-m-fill</code> in order for the section to have space to stretch to full height.
288
318
  </div>
289
319
  </section>
290
- <section class="pf-v6-c-page__main-section pf-m-no-fill">
320
+ <section
321
+ class="pf-v6-c-page__main-section pf-m-no-fill"
322
+ aria-label="No fill page section example"
323
+ >
291
324
  <div class="pf-v6-c-page__main-body">
292
325
  This section uses
293
326
  <code>.pf-m-no-fill</code> and will not fill the available space.
@@ -350,13 +383,19 @@ wrapperTag: div
350
383
  </div>
351
384
  <div class="pf-v6-c-page__main-container" tabindex="-1">
352
385
  <main class="pf-v6-c-page__main" tabindex="-1">
353
- <section class="pf-v6-c-page__main-section">
386
+ <section
387
+ class="pf-v6-c-page__main-section"
388
+ aria-label="Default padding main section example"
389
+ >
354
390
  <div class="pf-v6-c-page__main-body">
355
391
  This
356
392
  <code>.pf-v6-c-page__main-section</code> has default padding.
357
393
  </div>
358
394
  </section>
359
- <section class="pf-v6-c-page__main-section pf-m-no-padding">
395
+ <section
396
+ class="pf-v6-c-page__main-section pf-m-no-padding"
397
+ aria-label="No padding main section example"
398
+ >
360
399
  <div class="pf-v6-c-page__main-body">
361
400
  This
362
401
  <code>.pf-v6-c-page__main-section</code> uses
@@ -365,6 +404,7 @@ wrapperTag: div
365
404
  </section>
366
405
  <section
367
406
  class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
407
+ aria-label="Responsive padding main section example"
368
408
  >
369
409
  <div class="pf-v6-c-page__main-body">
370
410
  This
@@ -442,7 +482,10 @@ wrapperTag: div
442
482
  <section class="pf-v6-c-page__main-breadcrumb">
443
483
  <code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
444
484
  </section>
445
- <section class="pf-v6-c-page__main-section">
485
+ <section
486
+ class="pf-v6-c-page__main-section"
487
+ aria-label="Main section variations example"
488
+ >
446
489
  <div class="pf-v6-c-page__main-body">
447
490
  <code>.pf-v6-c-page__main-section</code> for main sections
448
491
  </div>
@@ -504,6 +547,7 @@ wrapperTag: div
504
547
  <main class="pf-v6-c-page__main" tabindex="-1">
505
548
  <section
506
549
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
550
+ aria-label="Centered section example"
507
551
  >
508
552
  <div class="pf-v6-c-page__main-body">
509
553
  <div class="pf-v6-c-card">
@@ -560,7 +604,10 @@ wrapperTag: div
560
604
  </div>
561
605
  <div class="pf-v6-c-page__main-container" tabindex="-1">
562
606
  <main class="pf-v6-c-page__main" tabindex="-1">
563
- <section class="pf-v6-c-page__main-section">
607
+ <section
608
+ class="pf-v6-c-page__main-section"
609
+ aria-label="Dock main section example"
610
+ >
564
611
  <div class="pf-v6-c-page__main-body">
565
612
  This is a default
566
613
  <code>.pf-v6-c-page__main-section</code>.