@patternfly/patternfly 6.5.0-prerelease.22 → 6.5.0-prerelease.24

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 +32 -3
  2. package/components/Compass/compass.scss +33 -3
  3. package/components/_index.css +32 -3
  4. package/docs/components/Compass/examples/Compass.md +17 -3
  5. package/docs/demos/Compass/examples/Compass.md +1022 -689
  6. package/package.json +2 -2
  7. package/patternfly-no-globals.css +32 -3
  8. package/patternfly.css +32 -3
  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.22",
4
+ "version": "6.5.0-prerelease.24",
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);
@@ -12322,6 +12331,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12322
12331
  }
12323
12332
 
12324
12333
  .pf-v6-c-compass__nav {
12334
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
12335
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
12336
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
12337
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
12325
12338
  display: flex;
12326
12339
  flex-direction: column;
12327
12340
  gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -12329,8 +12342,21 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12329
12342
  justify-self: stretch;
12330
12343
  }
12331
12344
 
12345
+ .pf-v6-c-compass__nav-content {
12346
+ display: flex;
12347
+ align-items: center;
12348
+ }
12349
+
12350
+ .pf-v6-c-compass__nav-main {
12351
+ padding-inline-start: var(--pf-v6-c-compass__nav-main--PaddingInlineStart);
12352
+ padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
12353
+ }
12354
+
12332
12355
  .pf-v6-c-compass__sidebar {
12333
- --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
12356
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
12357
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
12358
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
12359
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
12334
12360
  }
12335
12361
  .pf-v6-c-compass__sidebar.pf-m-start {
12336
12362
  grid-area: sidebar-start;
@@ -12384,7 +12410,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12384
12410
  }
12385
12411
 
12386
12412
  .pf-v6-c-compass__panel {
12387
- padding: var(--pf-v6-c-compass__panel--Padding);
12413
+ padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
12414
+ padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
12415
+ padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
12416
+ padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
12388
12417
  background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
12389
12418
  backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
12390
12419
  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);
@@ -12469,6 +12478,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12469
12478
  }
12470
12479
 
12471
12480
  .pf-v6-c-compass__nav {
12481
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
12482
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
12483
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
12484
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
12472
12485
  display: flex;
12473
12486
  flex-direction: column;
12474
12487
  gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -12476,8 +12489,21 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12476
12489
  justify-self: stretch;
12477
12490
  }
12478
12491
 
12492
+ .pf-v6-c-compass__nav-content {
12493
+ display: flex;
12494
+ align-items: center;
12495
+ }
12496
+
12497
+ .pf-v6-c-compass__nav-main {
12498
+ padding-inline-start: var(--pf-v6-c-compass__nav-main--PaddingInlineStart);
12499
+ padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
12500
+ }
12501
+
12479
12502
  .pf-v6-c-compass__sidebar {
12480
- --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
12503
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
12504
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
12505
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
12506
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
12481
12507
  }
12482
12508
  .pf-v6-c-compass__sidebar.pf-m-start {
12483
12509
  grid-area: sidebar-start;
@@ -12531,7 +12557,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12531
12557
  }
12532
12558
 
12533
12559
  .pf-v6-c-compass__panel {
12534
- padding: var(--pf-v6-c-compass__panel--Padding);
12560
+ padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
12561
+ padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
12562
+ padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
12563
+ padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
12535
12564
  background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
12536
12565
  backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
12537
12566
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);