@patternfly/patternfly 6.5.0-prerelease.23 → 6.5.0-prerelease.25

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 (10) hide show
  1. package/components/Compass/compass.css +42 -6
  2. package/components/Compass/compass.scss +43 -7
  3. package/components/_index.css +42 -6
  4. package/docs/components/Compass/examples/Compass.md +22 -5
  5. package/docs/demos/Compass/examples/Compass.md +1048 -708
  6. package/package.json +2 -2
  7. package/patternfly-no-globals.css +42 -6
  8. package/patternfly.css +42 -6
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.23",
4
+ "version": "6.5.0-prerelease.25",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -48,7 +48,7 @@
48
48
  "@commitlint/config-conventional": "^19.1.0",
49
49
  "@fortawesome/fontawesome": "^1.1.8",
50
50
  "@octokit/rest": "^20.1.0",
51
- "@patternfly/documentation-framework": "6.29.0",
51
+ "@patternfly/documentation-framework": "6.31.2",
52
52
  "@patternfly/patternfly-a11y": "5.1.0",
53
53
  "@patternfly/react-code-editor": "6.4.0",
54
54
  "@patternfly/react-core": "6.4.0",
package/patternfly-no-globals.css CHANGED
@@ -12270,6 +12270,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12270
12270
  --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--xl);
12271
12271
  --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
12272
12272
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
12273
+ --pf-v6-c-compass__nav--PaddingBlockStart: 0;
12274
+ --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
12275
+ --pf-v6-c-compass__nav--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12276
+ --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12277
+ --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12278
+ --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12273
12279
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
12274
12280
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
12275
12281
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
@@ -12278,7 +12284,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12278
12284
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12279
12285
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12280
12286
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
12281
- --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
12287
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
12288
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
12289
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
12290
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
12282
12291
  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
12283
12292
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
12284
12293
  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -12289,9 +12298,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12289
12298
 
12290
12299
  .pf-v6-c-compass {
12291
12300
  display: grid;
12292
- grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
12293
- grid-template-rows: auto 1fr auto;
12301
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
12302
+ grid-template-rows: auto 1fr;
12294
12303
  grid-template-columns: auto 1fr auto;
12304
+ grid-auto-rows: auto;
12295
12305
  gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
12296
12306
  align-items: center;
12297
12307
  justify-content: center;
@@ -12322,6 +12332,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12322
12332
  }
12323
12333
 
12324
12334
  .pf-v6-c-compass__nav {
12335
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
12336
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
12337
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
12338
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
12325
12339
  display: flex;
12326
12340
  flex-direction: column;
12327
12341
  gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -12329,8 +12343,21 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12329
12343
  justify-self: stretch;
12330
12344
  }
12331
12345
 
12346
+ .pf-v6-c-compass__nav-content {
12347
+ display: flex;
12348
+ align-items: center;
12349
+ }
12350
+
12351
+ .pf-v6-c-compass__nav-main {
12352
+ padding-inline-start: var(--pf-v6-c-compass__nav-main--PaddingInlineStart);
12353
+ padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
12354
+ }
12355
+
12332
12356
  .pf-v6-c-compass__sidebar {
12333
- --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
12357
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
12358
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
12359
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
12360
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
12334
12361
  }
12335
12362
  .pf-v6-c-compass__sidebar.pf-m-start {
12336
12363
  grid-area: sidebar-start;
@@ -12366,6 +12393,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12366
12393
  max-height: 100%;
12367
12394
  }
12368
12395
 
12396
+ .pf-v6-c-compass__main-footer {
12397
+ display: flex;
12398
+ justify-content: center;
12399
+ margin-block-start: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
12400
+ }
12401
+
12369
12402
  .pf-v6-c-compass__sidebar.pf-m-end {
12370
12403
  grid-area: sidebar-end;
12371
12404
  padding: var(--pf-t--global--spacer--sm);
@@ -12373,7 +12406,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12373
12406
 
12374
12407
  .pf-v6-c-compass__footer {
12375
12408
  display: flex;
12376
- grid-area: footer;
12409
+ grid-column: 1/-1;
12377
12410
  justify-content: center;
12378
12411
  }
12379
12412
 
@@ -12384,7 +12417,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12384
12417
  }
12385
12418
 
12386
12419
  .pf-v6-c-compass__panel {
12387
- padding: var(--pf-v6-c-compass__panel--Padding);
12420
+ padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
12421
+ padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
12422
+ padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
12423
+ padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
12388
12424
  background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
12389
12425
  backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
12390
12426
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
package/patternfly.css CHANGED
@@ -12417,6 +12417,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12417
12417
  --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--xl);
12418
12418
  --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
12419
12419
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
12420
+ --pf-v6-c-compass__nav--PaddingBlockStart: 0;
12421
+ --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
12422
+ --pf-v6-c-compass__nav--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12423
+ --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12424
+ --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12425
+ --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12420
12426
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
12421
12427
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
12422
12428
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
@@ -12425,7 +12431,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12425
12431
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12426
12432
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12427
12433
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
12428
- --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
12434
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
12435
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
12436
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
12437
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
12429
12438
  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
12430
12439
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
12431
12440
  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -12436,9 +12445,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12436
12445
 
12437
12446
  .pf-v6-c-compass {
12438
12447
  display: grid;
12439
- grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
12440
- grid-template-rows: auto 1fr auto;
12448
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
12449
+ grid-template-rows: auto 1fr;
12441
12450
  grid-template-columns: auto 1fr auto;
12451
+ grid-auto-rows: auto;
12442
12452
  gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
12443
12453
  align-items: center;
12444
12454
  justify-content: center;
@@ -12469,6 +12479,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12469
12479
  }
12470
12480
 
12471
12481
  .pf-v6-c-compass__nav {
12482
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
12483
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
12484
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
12485
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
12472
12486
  display: flex;
12473
12487
  flex-direction: column;
12474
12488
  gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -12476,8 +12490,21 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12476
12490
  justify-self: stretch;
12477
12491
  }
12478
12492
 
12493
+ .pf-v6-c-compass__nav-content {
12494
+ display: flex;
12495
+ align-items: center;
12496
+ }
12497
+
12498
+ .pf-v6-c-compass__nav-main {
12499
+ padding-inline-start: var(--pf-v6-c-compass__nav-main--PaddingInlineStart);
12500
+ padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
12501
+ }
12502
+
12479
12503
  .pf-v6-c-compass__sidebar {
12480
- --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
12504
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
12505
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
12506
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
12507
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
12481
12508
  }
12482
12509
  .pf-v6-c-compass__sidebar.pf-m-start {
12483
12510
  grid-area: sidebar-start;
@@ -12513,6 +12540,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12513
12540
  max-height: 100%;
12514
12541
  }
12515
12542
 
12543
+ .pf-v6-c-compass__main-footer {
12544
+ display: flex;
12545
+ justify-content: center;
12546
+ margin-block-start: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
12547
+ }
12548
+
12516
12549
  .pf-v6-c-compass__sidebar.pf-m-end {
12517
12550
  grid-area: sidebar-end;
12518
12551
  padding: var(--pf-t--global--spacer--sm);
@@ -12520,7 +12553,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12520
12553
 
12521
12554
  .pf-v6-c-compass__footer {
12522
12555
  display: flex;
12523
- grid-area: footer;
12556
+ grid-column: 1/-1;
12524
12557
  justify-content: center;
12525
12558
  }
12526
12559
 
@@ -12531,7 +12564,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12531
12564
  }
12532
12565
 
12533
12566
  .pf-v6-c-compass__panel {
12534
- padding: var(--pf-v6-c-compass__panel--Padding);
12567
+ padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
12568
+ padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
12569
+ padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
12570
+ padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
12535
12571
  background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
12536
12572
  backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
12537
12573
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);