@patternfly/patternfly 6.0.0-alpha.102 → 6.0.0-alpha.104

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 (40) hide show
  1. package/components/Check/check.css +2 -2
  2. package/components/Check/check.scss +2 -2
  3. package/components/Drawer/drawer.css +5 -4
  4. package/components/Drawer/drawer.scss +7 -6
  5. package/components/Page/page.css +24 -23
  6. package/components/Page/page.scss +24 -23
  7. package/components/Table/table.css +0 -37
  8. package/components/Table/table.scss +0 -49
  9. package/docs/components/Drawer/examples/Drawer.md +2 -1
  10. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  11. package/docs/components/Page/examples/Page.md +114 -100
  12. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  13. package/docs/demos/Alert/examples/Alert.md +551 -524
  14. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  15. package/docs/demos/Banner/examples/Banner.md +420 -412
  16. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  17. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  18. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  19. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  20. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  21. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  22. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  23. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  24. package/docs/demos/Modal/examples/Modal.md +486 -474
  25. package/docs/demos/Nav/examples/Nav.md +528 -510
  26. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  27. package/docs/demos/Page/examples/Page.md +1656 -1633
  28. package/docs/demos/Page/examples/Penta.md +632 -577
  29. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  30. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  31. package/docs/demos/Table/examples/Table.md +14137 -13972
  32. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  33. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  34. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  35. package/package.json +1 -1
  36. package/patternfly-no-globals.css +31 -66
  37. package/patternfly-theme-dark-unversioned.css +31 -66
  38. package/patternfly.css +31 -66
  39. package/patternfly.min.css +1 -1
  40. package/patternfly.min.css.map +1 -1
package/docs/demos/Skeleton/examples/Skeleton.md CHANGED
@@ -226,207 +226,209 @@ section: components
226
226
  </nav>
227
227
  </div>
228
228
  </div>
229
- <main
230
- class="pf-v6-c-page__main"
231
- tabindex="-1"
232
- id="main-content-skeleton-basic-example"
233
- >
234
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
235
- <div class="pf-v6-c-page__main-body">
236
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
237
- <ol class="pf-v6-c-breadcrumb__list" role="list">
238
- <li class="pf-v6-c-breadcrumb__item">
239
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
240
- </li>
241
- <li class="pf-v6-c-breadcrumb__item">
242
- <span class="pf-v6-c-breadcrumb__item-divider">
243
- <i class="fas fa-angle-right" aria-hidden="true"></i>
244
- </span>
229
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
230
+ <main
231
+ class="pf-v6-c-page__main"
232
+ tabindex="-1"
233
+ id="main-content-skeleton-basic-example"
234
+ >
235
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
236
+ <div class="pf-v6-c-page__main-body">
237
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
238
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
239
+ <li class="pf-v6-c-breadcrumb__item">
240
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
241
+ </li>
242
+ <li class="pf-v6-c-breadcrumb__item">
243
+ <span class="pf-v6-c-breadcrumb__item-divider">
244
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
245
+ </span>
245
246
 
246
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
247
- </li>
248
- <li class="pf-v6-c-breadcrumb__item">
249
- <span class="pf-v6-c-breadcrumb__item-divider">
250
- <i class="fas fa-angle-right" aria-hidden="true"></i>
251
- </span>
247
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
248
+ </li>
249
+ <li class="pf-v6-c-breadcrumb__item">
250
+ <span class="pf-v6-c-breadcrumb__item-divider">
251
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
252
+ </span>
252
253
 
253
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
254
- </li>
255
- <li class="pf-v6-c-breadcrumb__item">
256
- <span class="pf-v6-c-breadcrumb__item-divider">
257
- <i class="fas fa-angle-right" aria-hidden="true"></i>
258
- </span>
254
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
255
+ </li>
256
+ <li class="pf-v6-c-breadcrumb__item">
257
+ <span class="pf-v6-c-breadcrumb__item-divider">
258
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
259
+ </span>
259
260
 
260
- <a
261
- href="#"
262
- class="pf-v6-c-breadcrumb__link pf-m-current"
263
- aria-current="page"
264
- >Section landing</a>
265
- </li>
266
- </ol>
267
- </nav>
268
- </div>
269
- </section>
270
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
271
- <div class="pf-v6-c-page__main-body">
272
- <div class="pf-v6-c-content">
273
- <h1>Main title</h1>
274
- <p>This is a full page demo.</p>
261
+ <a
262
+ href="#"
263
+ class="pf-v6-c-breadcrumb__link pf-m-current"
264
+ aria-current="page"
265
+ >Section landing</a>
266
+ </li>
267
+ </ol>
268
+ </nav>
275
269
  </div>
276
- </div>
277
- </section>
278
- <section class="pf-v6-c-page__main-section">
279
- <div class="pf-v6-l-gallery pf-m-gutter">
280
- <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
281
- <div class="pf-v6-c-card__body">
282
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
283
- <div class="pf-v6-c-skeleton"></div>
284
- <div class="pf-v6-c-skeleton pf-m-width-66"></div>
285
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
286
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
287
- </div>
288
- </div>
289
- <div class="pf-v6-c-card__body">
290
- <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
291
- </div>
292
- <div class="pf-v6-c-card__body">
293
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
294
- <div class="pf-v6-c-skeleton"></div>
295
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
296
- <div class="pf-v6-c-skeleton pf-m-width-75"></div>
297
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
298
- </div>
270
+ </section>
271
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
272
+ <div class="pf-v6-c-page__main-body">
273
+ <div class="pf-v6-c-content">
274
+ <h1>Main title</h1>
275
+ <p>This is a full page demo.</p>
299
276
  </div>
300
277
  </div>
301
- <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
302
- <div class="pf-v6-c-card__body">
303
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
304
- <div class="pf-v6-c-skeleton"></div>
305
- <div class="pf-v6-c-skeleton pf-m-width-66"></div>
306
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
307
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
278
+ </section>
279
+ <section class="pf-v6-c-page__main-section">
280
+ <div class="pf-v6-l-gallery pf-m-gutter">
281
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
282
+ <div class="pf-v6-c-card__body">
283
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
284
+ <div class="pf-v6-c-skeleton"></div>
285
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
286
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
287
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
288
+ </div>
308
289
  </div>
309
- </div>
310
- <div class="pf-v6-c-card__body">
311
- <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
312
- </div>
313
- <div class="pf-v6-c-card__body">
314
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
315
- <div class="pf-v6-c-skeleton"></div>
316
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
317
- <div class="pf-v6-c-skeleton pf-m-width-75"></div>
318
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
290
+ <div class="pf-v6-c-card__body">
291
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
319
292
  </div>
320
- </div>
321
- </div>
322
- <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
323
- <div class="pf-v6-c-card__body">
324
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
325
- <div class="pf-v6-c-skeleton"></div>
326
- <div class="pf-v6-c-skeleton pf-m-width-66"></div>
327
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
328
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
293
+ <div class="pf-v6-c-card__body">
294
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
295
+ <div class="pf-v6-c-skeleton"></div>
296
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
297
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
298
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
299
+ </div>
329
300
  </div>
330
301
  </div>
331
- <div class="pf-v6-c-card__body">
332
- <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
333
- </div>
334
- <div class="pf-v6-c-card__body">
335
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
336
- <div class="pf-v6-c-skeleton"></div>
337
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
338
- <div class="pf-v6-c-skeleton pf-m-width-75"></div>
339
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
302
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
303
+ <div class="pf-v6-c-card__body">
304
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
305
+ <div class="pf-v6-c-skeleton"></div>
306
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
307
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
308
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
309
+ </div>
340
310
  </div>
341
- </div>
342
- </div>
343
- <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
344
- <div class="pf-v6-c-card__body">
345
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
346
- <div class="pf-v6-c-skeleton"></div>
347
- <div class="pf-v6-c-skeleton pf-m-width-66"></div>
348
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
349
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
311
+ <div class="pf-v6-c-card__body">
312
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
350
313
  </div>
351
- </div>
352
- <div class="pf-v6-c-card__body">
353
- <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
354
- </div>
355
- <div class="pf-v6-c-card__body">
356
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
357
- <div class="pf-v6-c-skeleton"></div>
358
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
359
- <div class="pf-v6-c-skeleton pf-m-width-75"></div>
360
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
314
+ <div class="pf-v6-c-card__body">
315
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
316
+ <div class="pf-v6-c-skeleton"></div>
317
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
318
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
319
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
320
+ </div>
361
321
  </div>
362
322
  </div>
363
- </div>
364
- <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
365
- <div class="pf-v6-c-card__body">
366
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
367
- <div class="pf-v6-c-skeleton"></div>
368
- <div class="pf-v6-c-skeleton pf-m-width-66"></div>
369
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
370
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
323
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
324
+ <div class="pf-v6-c-card__body">
325
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
326
+ <div class="pf-v6-c-skeleton"></div>
327
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
328
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
329
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
330
+ </div>
371
331
  </div>
372
- </div>
373
- <div class="pf-v6-c-card__body">
374
- <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
375
- </div>
376
- <div class="pf-v6-c-card__body">
377
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
378
- <div class="pf-v6-c-skeleton"></div>
379
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
380
- <div class="pf-v6-c-skeleton pf-m-width-75"></div>
381
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
332
+ <div class="pf-v6-c-card__body">
333
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
382
334
  </div>
383
- </div>
384
- </div>
385
- <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
386
- <div class="pf-v6-c-card__body">
387
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
388
- <div class="pf-v6-c-skeleton"></div>
389
- <div class="pf-v6-c-skeleton pf-m-width-66"></div>
390
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
391
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
335
+ <div class="pf-v6-c-card__body">
336
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
337
+ <div class="pf-v6-c-skeleton"></div>
338
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
339
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
340
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
341
+ </div>
392
342
  </div>
393
343
  </div>
394
- <div class="pf-v6-c-card__body">
395
- <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
396
- </div>
397
- <div class="pf-v6-c-card__body">
398
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
399
- <div class="pf-v6-c-skeleton"></div>
400
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
401
- <div class="pf-v6-c-skeleton pf-m-width-75"></div>
402
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
344
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
345
+ <div class="pf-v6-c-card__body">
346
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
347
+ <div class="pf-v6-c-skeleton"></div>
348
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
349
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
350
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
351
+ </div>
352
+ </div>
353
+ <div class="pf-v6-c-card__body">
354
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
355
+ </div>
356
+ <div class="pf-v6-c-card__body">
357
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
358
+ <div class="pf-v6-c-skeleton"></div>
359
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
360
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
361
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
362
+ </div>
403
363
  </div>
404
364
  </div>
405
- </div>
406
- <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
407
- <div class="pf-v6-c-card__body">
408
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
409
- <div class="pf-v6-c-skeleton"></div>
410
- <div class="pf-v6-c-skeleton pf-m-width-66"></div>
411
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
412
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
365
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
366
+ <div class="pf-v6-c-card__body">
367
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
368
+ <div class="pf-v6-c-skeleton"></div>
369
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
370
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
371
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
372
+ </div>
373
+ </div>
374
+ <div class="pf-v6-c-card__body">
375
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
376
+ </div>
377
+ <div class="pf-v6-c-card__body">
378
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
379
+ <div class="pf-v6-c-skeleton"></div>
380
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
381
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
382
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
383
+ </div>
413
384
  </div>
414
385
  </div>
415
- <div class="pf-v6-c-card__body">
416
- <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
386
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
387
+ <div class="pf-v6-c-card__body">
388
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
389
+ <div class="pf-v6-c-skeleton"></div>
390
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
391
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
392
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
393
+ </div>
394
+ </div>
395
+ <div class="pf-v6-c-card__body">
396
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
397
+ </div>
398
+ <div class="pf-v6-c-card__body">
399
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
400
+ <div class="pf-v6-c-skeleton"></div>
401
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
402
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
403
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
404
+ </div>
405
+ </div>
417
406
  </div>
418
- <div class="pf-v6-c-card__body">
419
- <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
420
- <div class="pf-v6-c-skeleton"></div>
421
- <div class="pf-v6-c-skeleton pf-m-width-25"></div>
422
- <div class="pf-v6-c-skeleton pf-m-width-75"></div>
423
- <div class="pf-v6-c-skeleton pf-m-width-50"></div>
407
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
408
+ <div class="pf-v6-c-card__body">
409
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
410
+ <div class="pf-v6-c-skeleton"></div>
411
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
412
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
413
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
414
+ </div>
415
+ </div>
416
+ <div class="pf-v6-c-card__body">
417
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
418
+ </div>
419
+ <div class="pf-v6-c-card__body">
420
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
421
+ <div class="pf-v6-c-skeleton"></div>
422
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
423
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
424
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
425
+ </div>
424
426
  </div>
425
427
  </div>
426
428
  </div>
427
- </div>
428
- </section>
429
- </main>
429
+ </section>
430
+ </main>
431
+ </div>
430
432
  </div>
431
433
 
432
434
  ```