@patternfly/patternfly 6.0.0-alpha.160 → 6.0.0-alpha.162
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.
- package/components/Nav/nav.css +1 -0
- package/components/Nav/nav.scss +1 -0
- package/components/Page/page.css +38 -54
- package/components/Page/page.scss +19 -32
- package/components/Toolbar/toolbar.css +1 -0
- package/components/Toolbar/toolbar.scss +1 -0
- package/components/_index.css +40 -54
- package/docs/components/Page/examples/Page.css +5 -9
- package/docs/components/Page/examples/Page.md +71 -32
- package/docs/demos/Alert/examples/Alert.md +393 -374
- package/docs/demos/CardView/examples/CardView.md +717 -708
- package/docs/demos/DataList/examples/DataList.md +2574 -2500
- package/docs/demos/Drawer/examples/Drawer.md +190 -182
- package/docs/demos/JumpLinks/examples/JumpLinks.md +642 -612
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +3608 -3490
- package/docs/demos/Skeleton/examples/Skeleton.md +128 -126
- package/docs/demos/Table/examples/Table.md +9458 -9105
- package/docs/demos/Tabs/examples/Tabs.md +889 -885
- package/docs/demos/Toolbar/examples/Toolbar.md +1254 -1147
- package/package.json +1 -1
- package/patternfly-no-globals.css +40 -54
- package/patternfly.css +40 -54
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -287,151 +287,153 @@ section: components
|
|
|
287
287
|
</div>
|
|
288
288
|
</section>
|
|
289
289
|
<section class="pf-v6-c-page__main-section">
|
|
290
|
-
<div class="pf-v6-
|
|
291
|
-
<div class="pf-v6-
|
|
292
|
-
<div class="pf-v6-c-
|
|
293
|
-
<div class="pf-v6-
|
|
294
|
-
<div class="pf-v6-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
290
|
+
<div class="pf-v6-c-page__main-body">
|
|
291
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
292
|
+
<div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
|
|
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-66"></div>
|
|
297
|
+
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
298
|
+
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
299
|
+
</div>
|
|
298
300
|
</div>
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
|
|
302
|
-
</div>
|
|
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-25"></div>
|
|
307
|
-
<div class="pf-v6-c-skeleton pf-m-width-75"></div>
|
|
308
|
-
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
301
|
+
<div class="pf-v6-c-card__body">
|
|
302
|
+
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
|
|
309
303
|
</div>
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
318
|
-
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
304
|
+
<div class="pf-v6-c-card__body">
|
|
305
|
+
<div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
|
|
306
|
+
<div class="pf-v6-c-skeleton"></div>
|
|
307
|
+
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
308
|
+
<div class="pf-v6-c-skeleton pf-m-width-75"></div>
|
|
309
|
+
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
310
|
+
</div>
|
|
319
311
|
</div>
|
|
320
312
|
</div>
|
|
321
|
-
<div class="pf-v6-c-
|
|
322
|
-
<div class="pf-v6-c-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
313
|
+
<div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
|
|
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-66"></div>
|
|
318
|
+
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
319
|
+
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
320
|
+
</div>
|
|
330
321
|
</div>
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
<div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
|
|
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-66"></div>
|
|
338
|
-
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
339
|
-
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
322
|
+
<div class="pf-v6-c-card__body">
|
|
323
|
+
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
|
|
340
324
|
</div>
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
349
|
-
<div class="pf-v6-c-skeleton pf-m-width-75"></div>
|
|
350
|
-
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
325
|
+
<div class="pf-v6-c-card__body">
|
|
326
|
+
<div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
|
|
327
|
+
<div class="pf-v6-c-skeleton"></div>
|
|
328
|
+
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
329
|
+
<div class="pf-v6-c-skeleton pf-m-width-75"></div>
|
|
330
|
+
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
331
|
+
</div>
|
|
351
332
|
</div>
|
|
352
333
|
</div>
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
334
|
+
<div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
|
|
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-66"></div>
|
|
339
|
+
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
340
|
+
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
341
|
+
</div>
|
|
361
342
|
</div>
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
|
|
365
|
-
</div>
|
|
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-25"></div>
|
|
370
|
-
<div class="pf-v6-c-skeleton pf-m-width-75"></div>
|
|
371
|
-
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
343
|
+
<div class="pf-v6-c-card__body">
|
|
344
|
+
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
|
|
372
345
|
</div>
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
381
|
-
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
346
|
+
<div class="pf-v6-c-card__body">
|
|
347
|
+
<div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
|
|
348
|
+
<div class="pf-v6-c-skeleton"></div>
|
|
349
|
+
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
350
|
+
<div class="pf-v6-c-skeleton pf-m-width-75"></div>
|
|
351
|
+
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
352
|
+
</div>
|
|
382
353
|
</div>
|
|
383
354
|
</div>
|
|
384
|
-
<div class="pf-v6-c-
|
|
385
|
-
<div class="pf-v6-c-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
355
|
+
<div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
|
|
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-66"></div>
|
|
360
|
+
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
361
|
+
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
362
|
+
</div>
|
|
393
363
|
</div>
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
<div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
|
|
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-66"></div>
|
|
401
|
-
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
402
|
-
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
364
|
+
<div class="pf-v6-c-card__body">
|
|
365
|
+
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
|
|
403
366
|
</div>
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
412
|
-
<div class="pf-v6-c-skeleton pf-m-width-75"></div>
|
|
413
|
-
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
367
|
+
<div class="pf-v6-c-card__body">
|
|
368
|
+
<div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
|
|
369
|
+
<div class="pf-v6-c-skeleton"></div>
|
|
370
|
+
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
371
|
+
<div class="pf-v6-c-skeleton pf-m-width-75"></div>
|
|
372
|
+
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
373
|
+
</div>
|
|
414
374
|
</div>
|
|
415
375
|
</div>
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
376
|
+
<div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
|
|
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-66"></div>
|
|
381
|
+
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
382
|
+
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
383
|
+
</div>
|
|
384
|
+
</div>
|
|
385
|
+
<div class="pf-v6-c-card__body">
|
|
386
|
+
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
|
|
387
|
+
</div>
|
|
388
|
+
<div class="pf-v6-c-card__body">
|
|
389
|
+
<div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
|
|
390
|
+
<div class="pf-v6-c-skeleton"></div>
|
|
391
|
+
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
392
|
+
<div class="pf-v6-c-skeleton pf-m-width-75"></div>
|
|
393
|
+
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
394
|
+
</div>
|
|
424
395
|
</div>
|
|
425
396
|
</div>
|
|
426
|
-
<div class="pf-v6-c-
|
|
427
|
-
<div class="pf-v6-c-
|
|
397
|
+
<div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
|
|
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-66"></div>
|
|
402
|
+
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
403
|
+
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
406
|
+
<div class="pf-v6-c-card__body">
|
|
407
|
+
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
|
|
408
|
+
</div>
|
|
409
|
+
<div class="pf-v6-c-card__body">
|
|
410
|
+
<div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
|
|
411
|
+
<div class="pf-v6-c-skeleton"></div>
|
|
412
|
+
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
413
|
+
<div class="pf-v6-c-skeleton pf-m-width-75"></div>
|
|
414
|
+
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
415
|
+
</div>
|
|
416
|
+
</div>
|
|
428
417
|
</div>
|
|
429
|
-
<div class="pf-v6-c-
|
|
430
|
-
<div class="pf-v6-
|
|
431
|
-
<div class="pf-v6-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
418
|
+
<div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
|
|
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-66"></div>
|
|
423
|
+
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
424
|
+
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
425
|
+
</div>
|
|
426
|
+
</div>
|
|
427
|
+
<div class="pf-v6-c-card__body">
|
|
428
|
+
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
|
|
429
|
+
</div>
|
|
430
|
+
<div class="pf-v6-c-card__body">
|
|
431
|
+
<div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
|
|
432
|
+
<div class="pf-v6-c-skeleton"></div>
|
|
433
|
+
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
434
|
+
<div class="pf-v6-c-skeleton pf-m-width-75"></div>
|
|
435
|
+
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
436
|
+
</div>
|
|
435
437
|
</div>
|
|
436
438
|
</div>
|
|
437
439
|
</div>
|