@patternfly/patternfly 6.0.0-alpha.103 → 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 (36) hide show
  1. package/components/Drawer/drawer.css +5 -4
  2. package/components/Drawer/drawer.scss +7 -6
  3. package/components/Page/page.css +24 -23
  4. package/components/Page/page.scss +24 -23
  5. package/docs/components/Drawer/examples/Drawer.md +2 -1
  6. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  7. package/docs/components/Page/examples/Page.md +114 -100
  8. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  9. package/docs/demos/Alert/examples/Alert.md +551 -524
  10. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  11. package/docs/demos/Banner/examples/Banner.md +420 -412
  12. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  13. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  14. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  15. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  16. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  17. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  18. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  19. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  20. package/docs/demos/Modal/examples/Modal.md +486 -474
  21. package/docs/demos/Nav/examples/Nav.md +528 -510
  22. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  23. package/docs/demos/Page/examples/Page.md +1656 -1633
  24. package/docs/demos/Page/examples/Penta.md +632 -577
  25. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  26. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  27. package/docs/demos/Table/examples/Table.md +14137 -13972
  28. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  29. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  30. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  31. package/package.json +1 -1
  32. package/patternfly-no-globals.css +29 -27
  33. package/patternfly-theme-dark-unversioned.css +29 -27
  34. package/patternfly.css +29 -27
  35. package/patternfly.min.css +1 -1
  36. 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
  ```