@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/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -227,223 +227,225 @@ cssPrefix: pf-d-back-to-top
227
227
  </nav>
228
228
  </div>
229
229
  </div>
230
- <main
231
- class="pf-v6-c-page__main"
232
- tabindex="-1"
233
- id="main-content-back-to-top-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>
230
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
231
+ <main
232
+ class="pf-v6-c-page__main"
233
+ tabindex="-1"
234
+ id="main-content-back-to-top-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>
246
247
 
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>
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>
253
254
 
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>
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>
260
261
 
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>
269
- </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>
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>
276
270
  </div>
277
- </div>
278
- </section>
279
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
280
- <div class="pf-v6-c-page__main-body">
281
- <div class="pf-v6-l-gallery pf-m-gutter">
282
- <div class="pf-v6-c-card">
283
- <div class="pf-v6-c-card__body">This is a card</div>
284
- </div>
285
- <div class="pf-v6-c-card">
286
- <div class="pf-v6-c-card__body">This is a card</div>
287
- </div>
288
- <div class="pf-v6-c-card">
289
- <div class="pf-v6-c-card__body">This is a card</div>
290
- </div>
291
- <div class="pf-v6-c-card">
292
- <div class="pf-v6-c-card__body">This is a card</div>
293
- </div>
294
- <div class="pf-v6-c-card">
295
- <div class="pf-v6-c-card__body">This is a card</div>
296
- </div>
297
- <div class="pf-v6-c-card">
298
- <div class="pf-v6-c-card__body">This is a card</div>
299
- </div>
300
- <div class="pf-v6-c-card">
301
- <div class="pf-v6-c-card__body">This is a card</div>
302
- </div>
303
- <div class="pf-v6-c-card">
304
- <div class="pf-v6-c-card__body">This is a card</div>
305
- </div>
306
- <div class="pf-v6-c-card">
307
- <div class="pf-v6-c-card__body">This is a card</div>
308
- </div>
309
- <div class="pf-v6-c-card">
310
- <div class="pf-v6-c-card__body">This is a card</div>
311
- </div>
312
- <div class="pf-v6-c-card">
313
- <div class="pf-v6-c-card__body">This is a card</div>
314
- </div>
315
- <div class="pf-v6-c-card">
316
- <div class="pf-v6-c-card__body">This is a card</div>
317
- </div>
318
- <div class="pf-v6-c-card">
319
- <div class="pf-v6-c-card__body">This is a card</div>
320
- </div>
321
- <div class="pf-v6-c-card">
322
- <div class="pf-v6-c-card__body">This is a card</div>
323
- </div>
324
- <div class="pf-v6-c-card">
325
- <div class="pf-v6-c-card__body">This is a card</div>
326
- </div>
327
- <div class="pf-v6-c-card">
328
- <div class="pf-v6-c-card__body">This is a card</div>
329
- </div>
330
- <div class="pf-v6-c-card">
331
- <div class="pf-v6-c-card__body">This is a card</div>
332
- </div>
333
- <div class="pf-v6-c-card">
334
- <div class="pf-v6-c-card__body">This is a card</div>
335
- </div>
336
- <div class="pf-v6-c-card">
337
- <div class="pf-v6-c-card__body">This is a card</div>
338
- </div>
339
- <div class="pf-v6-c-card">
340
- <div class="pf-v6-c-card__body">This is a card</div>
341
- </div>
342
- <div class="pf-v6-c-card">
343
- <div class="pf-v6-c-card__body">This is a card</div>
344
- </div>
345
- <div class="pf-v6-c-card">
346
- <div class="pf-v6-c-card__body">This is a card</div>
347
- </div>
348
- <div class="pf-v6-c-card">
349
- <div class="pf-v6-c-card__body">This is a card</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>
350
277
  </div>
351
- <div class="pf-v6-c-card">
352
- <div class="pf-v6-c-card__body">This is a card</div>
353
- </div>
354
- <div class="pf-v6-c-card">
355
- <div class="pf-v6-c-card__body">This is a card</div>
356
- </div>
357
- <div class="pf-v6-c-card">
358
- <div class="pf-v6-c-card__body">This is a card</div>
359
- </div>
360
- <div class="pf-v6-c-card">
361
- <div class="pf-v6-c-card__body">This is a card</div>
362
- </div>
363
- <div class="pf-v6-c-card">
364
- <div class="pf-v6-c-card__body">This is a card</div>
365
- </div>
366
- <div class="pf-v6-c-card">
367
- <div class="pf-v6-c-card__body">This is a card</div>
368
- </div>
369
- <div class="pf-v6-c-card">
370
- <div class="pf-v6-c-card__body">This is a card</div>
371
- </div>
372
- <div class="pf-v6-c-card">
373
- <div class="pf-v6-c-card__body">This is a card</div>
374
- </div>
375
- <div class="pf-v6-c-card">
376
- <div class="pf-v6-c-card__body">This is a card</div>
377
- </div>
378
- <div class="pf-v6-c-card">
379
- <div class="pf-v6-c-card__body">This is a card</div>
380
- </div>
381
- <div class="pf-v6-c-card">
382
- <div class="pf-v6-c-card__body">This is a card</div>
383
- </div>
384
- <div class="pf-v6-c-card">
385
- <div class="pf-v6-c-card__body">This is a card</div>
386
- </div>
387
- <div class="pf-v6-c-card">
388
- <div class="pf-v6-c-card__body">This is a card</div>
389
- </div>
390
- <div class="pf-v6-c-card">
391
- <div class="pf-v6-c-card__body">This is a card</div>
392
- </div>
393
- <div class="pf-v6-c-card">
394
- <div class="pf-v6-c-card__body">This is a card</div>
395
- </div>
396
- <div class="pf-v6-c-card">
397
- <div class="pf-v6-c-card__body">This is a card</div>
398
- </div>
399
- <div class="pf-v6-c-card">
400
- <div class="pf-v6-c-card__body">This is a card</div>
401
- </div>
402
- <div class="pf-v6-c-card">
403
- <div class="pf-v6-c-card__body">This is a card</div>
404
- </div>
405
- <div class="pf-v6-c-card">
406
- <div class="pf-v6-c-card__body">This is a card</div>
407
- </div>
408
- <div class="pf-v6-c-card">
409
- <div class="pf-v6-c-card__body">This is a card</div>
410
- </div>
411
- <div class="pf-v6-c-card">
412
- <div class="pf-v6-c-card__body">This is a card</div>
413
- </div>
414
- <div class="pf-v6-c-card">
415
- <div class="pf-v6-c-card__body">This is a card</div>
416
- </div>
417
- <div class="pf-v6-c-card">
418
- <div class="pf-v6-c-card__body">This is a card</div>
419
- </div>
420
- <div class="pf-v6-c-card">
421
- <div class="pf-v6-c-card__body">This is a card</div>
422
- </div>
423
- <div class="pf-v6-c-card">
424
- <div class="pf-v6-c-card__body">This is a card</div>
425
- </div>
426
- <div class="pf-v6-c-card">
427
- <div class="pf-v6-c-card__body">This is a card</div>
428
- </div>
429
- <div class="pf-v6-c-card">
430
- <div class="pf-v6-c-card__body">This is a card</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>
309
+ </div>
310
+ <div class="pf-v6-c-card">
311
+ <div class="pf-v6-c-card__body">This is a card</div>
312
+ </div>
313
+ <div class="pf-v6-c-card">
314
+ <div class="pf-v6-c-card__body">This is a card</div>
315
+ </div>
316
+ <div class="pf-v6-c-card">
317
+ <div class="pf-v6-c-card__body">This is a card</div>
318
+ </div>
319
+ <div class="pf-v6-c-card">
320
+ <div class="pf-v6-c-card__body">This is a card</div>
321
+ </div>
322
+ <div class="pf-v6-c-card">
323
+ <div class="pf-v6-c-card__body">This is a card</div>
324
+ </div>
325
+ <div class="pf-v6-c-card">
326
+ <div class="pf-v6-c-card__body">This is a card</div>
327
+ </div>
328
+ <div class="pf-v6-c-card">
329
+ <div class="pf-v6-c-card__body">This is a card</div>
330
+ </div>
331
+ <div class="pf-v6-c-card">
332
+ <div class="pf-v6-c-card__body">This is a card</div>
333
+ </div>
334
+ <div class="pf-v6-c-card">
335
+ <div class="pf-v6-c-card__body">This is a card</div>
336
+ </div>
337
+ <div class="pf-v6-c-card">
338
+ <div class="pf-v6-c-card__body">This is a card</div>
339
+ </div>
340
+ <div class="pf-v6-c-card">
341
+ <div class="pf-v6-c-card__body">This is a card</div>
342
+ </div>
343
+ <div class="pf-v6-c-card">
344
+ <div class="pf-v6-c-card__body">This is a card</div>
345
+ </div>
346
+ <div class="pf-v6-c-card">
347
+ <div class="pf-v6-c-card__body">This is a card</div>
348
+ </div>
349
+ <div class="pf-v6-c-card">
350
+ <div class="pf-v6-c-card__body">This is a card</div>
351
+ </div>
352
+ <div class="pf-v6-c-card">
353
+ <div class="pf-v6-c-card__body">This is a card</div>
354
+ </div>
355
+ <div class="pf-v6-c-card">
356
+ <div class="pf-v6-c-card__body">This is a card</div>
357
+ </div>
358
+ <div class="pf-v6-c-card">
359
+ <div class="pf-v6-c-card__body">This is a card</div>
360
+ </div>
361
+ <div class="pf-v6-c-card">
362
+ <div class="pf-v6-c-card__body">This is a card</div>
363
+ </div>
364
+ <div class="pf-v6-c-card">
365
+ <div class="pf-v6-c-card__body">This is a card</div>
366
+ </div>
367
+ <div class="pf-v6-c-card">
368
+ <div class="pf-v6-c-card__body">This is a card</div>
369
+ </div>
370
+ <div class="pf-v6-c-card">
371
+ <div class="pf-v6-c-card__body">This is a card</div>
372
+ </div>
373
+ <div class="pf-v6-c-card">
374
+ <div class="pf-v6-c-card__body">This is a card</div>
375
+ </div>
376
+ <div class="pf-v6-c-card">
377
+ <div class="pf-v6-c-card__body">This is a card</div>
378
+ </div>
379
+ <div class="pf-v6-c-card">
380
+ <div class="pf-v6-c-card__body">This is a card</div>
381
+ </div>
382
+ <div class="pf-v6-c-card">
383
+ <div class="pf-v6-c-card__body">This is a card</div>
384
+ </div>
385
+ <div class="pf-v6-c-card">
386
+ <div class="pf-v6-c-card__body">This is a card</div>
387
+ </div>
388
+ <div class="pf-v6-c-card">
389
+ <div class="pf-v6-c-card__body">This is a card</div>
390
+ </div>
391
+ <div class="pf-v6-c-card">
392
+ <div class="pf-v6-c-card__body">This is a card</div>
393
+ </div>
394
+ <div class="pf-v6-c-card">
395
+ <div class="pf-v6-c-card__body">This is a card</div>
396
+ </div>
397
+ <div class="pf-v6-c-card">
398
+ <div class="pf-v6-c-card__body">This is a card</div>
399
+ </div>
400
+ <div class="pf-v6-c-card">
401
+ <div class="pf-v6-c-card__body">This is a card</div>
402
+ </div>
403
+ <div class="pf-v6-c-card">
404
+ <div class="pf-v6-c-card__body">This is a card</div>
405
+ </div>
406
+ <div class="pf-v6-c-card">
407
+ <div class="pf-v6-c-card__body">This is a card</div>
408
+ </div>
409
+ <div class="pf-v6-c-card">
410
+ <div class="pf-v6-c-card__body">This is a card</div>
411
+ </div>
412
+ <div class="pf-v6-c-card">
413
+ <div class="pf-v6-c-card__body">This is a card</div>
414
+ </div>
415
+ <div class="pf-v6-c-card">
416
+ <div class="pf-v6-c-card__body">This is a card</div>
417
+ </div>
418
+ <div class="pf-v6-c-card">
419
+ <div class="pf-v6-c-card__body">This is a card</div>
420
+ </div>
421
+ <div class="pf-v6-c-card">
422
+ <div class="pf-v6-c-card__body">This is a card</div>
423
+ </div>
424
+ <div class="pf-v6-c-card">
425
+ <div class="pf-v6-c-card__body">This is a card</div>
426
+ </div>
427
+ <div class="pf-v6-c-card">
428
+ <div class="pf-v6-c-card__body">This is a card</div>
429
+ </div>
430
+ <div class="pf-v6-c-card">
431
+ <div class="pf-v6-c-card__body">This is a card</div>
432
+ </div>
431
433
  </div>
432
434
  </div>
435
+ </section>
436
+ <div class="pf-v6-c-back-to-top">
437
+ <a
438
+ class="pf-v6-c-button pf-m-primary"
439
+ href="#main-content-back-to-top-basic-example"
440
+ >
441
+ Back to top
442
+ <span class="pf-v6-c-button__icon pf-m-end">
443
+ <i class="fas fa-angle-up" aria-hidden="true"></i>
444
+ </span>
445
+ </a>
433
446
  </div>
434
- </section>
435
- <div class="pf-v6-c-back-to-top">
436
- <a
437
- class="pf-v6-c-button pf-m-primary"
438
- href="#main-content-back-to-top-basic-example"
439
- >
440
- Back to top
441
- <span class="pf-v6-c-button__icon pf-m-end">
442
- <i class="fas fa-angle-up" aria-hidden="true"></i>
443
- </span>
444
- </a>
445
- </div>
446
- </main>
447
+ </main>
448
+ </div>
447
449
  </div>
448
450
 
449
451
  ```