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

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 (11) hide show
  1. package/README.md +1 -1
  2. package/components/Compass/compass.css +11 -0
  3. package/components/Compass/compass.scss +11 -0
  4. package/components/_index.css +11 -0
  5. package/docs/components/Compass/examples/Compass.md +10 -3
  6. package/docs/demos/Compass/examples/Compass.md +11 -10
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +11 -0
  9. package/patternfly.css +11 -0
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # PatternFly
2
-
2
+
3
3
  ## Contributing
4
4
 
5
5
  We welcome contributions to PatternFly! Please read our [Contributing Guide](https://pf-core-staging.patternfly.org/contribution) to learn how to get started, submit issues, and contribute code to the project.
package/components/Compass/compass.css CHANGED
@@ -8,6 +8,8 @@
8
8
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
9
9
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
10
10
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
11
+ --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
12
+ --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
11
13
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12
14
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
13
15
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -79,6 +81,15 @@
79
81
  min-height: 0;
80
82
  }
81
83
 
84
+ .pf-v6-c-compass__main-header-content {
85
+ display: flex;
86
+ gap: var(--pf-v6-c-compass__main-header-content--RowGap) var(--pf-v6-c-compass__main-header-content--ColumnGap);
87
+ }
88
+
89
+ .pf-v6-c-compass__main-header-title {
90
+ flex-grow: 1;
91
+ }
92
+
82
93
  .pf-v6-c-compass__content {
83
94
  display: flex;
84
95
  flex: 1 0 0;
package/components/Compass/compass.scss CHANGED
@@ -10,6 +10,8 @@
10
10
  --#{$compass}__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
11
11
  --#{$compass}__sidebar--Padding: var(--pf-t--global--spacer--sm);
12
12
  --#{$compass}__main--RowGap: var(--pf-t--global--spacer--md);
13
+ --#{$compass}__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
14
+ --#{$compass}__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
13
15
  --#{$compass}__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
14
16
  --#{$compass}__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
15
17
  --#{$compass}__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -92,6 +94,15 @@
92
94
  min-height: 0;
93
95
  }
94
96
 
97
+ .#{$compass}__main-header-content {
98
+ display: flex;
99
+ gap: var(--#{$compass}__main-header-content--RowGap) var(--#{$compass}__main-header-content--ColumnGap);
100
+ }
101
+
102
+ .#{$compass}__main-header-title {
103
+ flex-grow: 1;
104
+ }
105
+
95
106
  .#{$compass}__content {
96
107
  display: flex;
97
108
  flex: 1 0 0;
package/components/_index.css CHANGED
@@ -3517,6 +3517,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3517
3517
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
3518
3518
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
3519
3519
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
3520
+ --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
3521
+ --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
3520
3522
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
3521
3523
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
3522
3524
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -3588,6 +3590,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3588
3590
  min-height: 0;
3589
3591
  }
3590
3592
 
3593
+ .pf-v6-c-compass__main-header-content {
3594
+ display: flex;
3595
+ gap: var(--pf-v6-c-compass__main-header-content--RowGap) var(--pf-v6-c-compass__main-header-content--ColumnGap);
3596
+ }
3597
+
3598
+ .pf-v6-c-compass__main-header-title {
3599
+ flex-grow: 1;
3600
+ }
3601
+
3591
3602
  .pf-v6-c-compass__content {
3592
3603
  display: flex;
3593
3604
  flex: 1 0 0;
package/docs/components/Compass/examples/Compass.md CHANGED
@@ -1,7 +1,8 @@
1
1
  ---
2
2
  id: 'Compass'
3
3
  beta: true
4
- section: components
4
+ section: PatternFly-AI
5
+ subsection: Generative UIs
5
6
  cssPrefix: pf-v6-c-compass
6
7
  ---import './Compass.css';
7
8
 
@@ -24,8 +25,11 @@ cssPrefix: pf-v6-c-compass
24
25
  <div class="pf-v6-c-compass__hero">
25
26
  <div class="pf-v6-c-hero">hero</div>
26
27
  </div>
27
- <div class="pf-v6-c-compass__main-header">main header</div>
28
-
28
+ <div class="pf-v6-c-compass__main-header">
29
+ <div class="pf-v6-c-compass__panel">
30
+ <div class="pf-v6-c-compass__main-header-content">main header</div>
31
+ </div>
32
+ </div>
29
33
  <div class="pf-v6-c-compass__content">content</div>
30
34
  </div>
31
35
  <div class="pf-v6-c-compass__sidebar pf-m-end">sidebar (end)</div>
@@ -51,6 +55,9 @@ cssPrefix: pf-v6-c-compass
51
55
  | `.pf-v6-c-compass__sidebar` | `<div>` | Initiates a compass sidebar. **Required** |
52
56
  | `.pf-v6-c-compass__main` | `<div>` | Initiates the compass main wrapper. **Required** |
53
57
  | `.pf-v6-c-compass__main-header` | `<div>` | Initiates the compass main header. |
58
+ | `.pf-v6-c-compass__main-header-content` | `<div>` | Initiates the compass main header content. This should be passed into a `.pf-v6-c-compass__panel` component. |
59
+ | `.pf-v6-c-compass__main-header-title` | `<div>` | Initiates a title within the compass main header content. |
60
+ | `.pf-v6-c-compass__main-header-toolbar` | `<div>` | Initiates a toolbar of actions within the compass main header content. |
54
61
  | `.pf-v6-c-compass__content` | `<div>` | Initiates the compass content. **Required** |
55
62
  | `.pf-v6-c-compass__panel` | `<div>` | Initiates a compass panel. |
56
63
  | `.pf-v6-c-compass__hero` | `<div>` | Initiates a compass hero. |
package/docs/demos/Compass/examples/Compass.md CHANGED
@@ -1,6 +1,7 @@
1
1
  ---
2
2
  id: Compass
3
- section: components
3
+ section: PatternFly-AI
4
+ subsection: Generative UIs
4
5
  wrapperTag: div
5
6
  ---## Examples
6
7
 
@@ -457,11 +458,11 @@ wrapperTag: div
457
458
  <div class="pf-v6-c-compass__main">
458
459
  <div class="pf-v6-c-compass__main-header">
459
460
  <div class="pf-v6-c-compass__panel">
460
- <div class="pf-v6-l-flex pf-m-align-items-center">
461
- <div class="pf-v6-l-flex__item pf-m-grow">
461
+ <div class="pf-v6-c-compass__main-header-content">
462
+ <div class="pf-v6-c-compass__main-header-title">
462
463
  <h2 class="pf-v6-c-title pf-m-h1">Page title</h2>
463
464
  </div>
464
- <div class="pf-v6-l-flex__item">
465
+ <div class="pf-v6-c-compass__main-header-toolbar">
465
466
  <div class="pf-v6-c-action-list">
466
467
  <div class="pf-v6-c-action-list__group">
467
468
  <div class="pf-v6-c-action-list__item">
@@ -3107,11 +3108,11 @@ wrapperTag: div
3107
3108
  <div class="pf-v6-c-compass__main">
3108
3109
  <div class="pf-v6-c-compass__main-header">
3109
3110
  <div class="pf-v6-c-compass__panel">
3110
- <div class="pf-v6-l-flex pf-m-align-items-center">
3111
- <div class="pf-v6-l-flex__item pf-m-grow">
3111
+ <div class="pf-v6-c-compass__main-header-content">
3112
+ <div class="pf-v6-c-compass__main-header-title">
3112
3113
  <h2 class="pf-v6-c-title pf-m-h1">Page title</h2>
3113
3114
  </div>
3114
- <div class="pf-v6-l-flex__item">
3115
+ <div class="pf-v6-c-compass__main-header-toolbar">
3115
3116
  <div class="pf-v6-c-action-list">
3116
3117
  <div class="pf-v6-c-action-list__group">
3117
3118
  <div class="pf-v6-c-action-list__item">
@@ -5002,11 +5003,11 @@ wrapperTag: div
5002
5003
  <div class="pf-v6-c-compass__main">
5003
5004
  <div class="pf-v6-c-compass__main-header">
5004
5005
  <div class="pf-v6-c-compass__panel">
5005
- <div class="pf-v6-l-flex pf-m-align-items-center">
5006
- <div class="pf-v6-l-flex__item pf-m-grow">
5006
+ <div class="pf-v6-c-compass__main-header-content">
5007
+ <div class="pf-v6-c-compass__main-header-title">
5007
5008
  <h2 class="pf-v6-c-title pf-m-h1">Page title</h2>
5008
5009
  </div>
5009
- <div class="pf-v6-l-flex__item">
5010
+ <div class="pf-v6-c-compass__main-header-toolbar">
5010
5011
  <div class="pf-v6-c-action-list">
5011
5012
  <div class="pf-v6-c-action-list__group">
5012
5013
  <div class="pf-v6-c-action-list__item">
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.21",
4
+ "version": "6.5.0-prerelease.23",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -12272,6 +12272,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12272
12272
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
12273
12273
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
12274
12274
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
12275
+ --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
12276
+ --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
12275
12277
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12276
12278
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12277
12279
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -12343,6 +12345,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12343
12345
  min-height: 0;
12344
12346
  }
12345
12347
 
12348
+ .pf-v6-c-compass__main-header-content {
12349
+ display: flex;
12350
+ gap: var(--pf-v6-c-compass__main-header-content--RowGap) var(--pf-v6-c-compass__main-header-content--ColumnGap);
12351
+ }
12352
+
12353
+ .pf-v6-c-compass__main-header-title {
12354
+ flex-grow: 1;
12355
+ }
12356
+
12346
12357
  .pf-v6-c-compass__content {
12347
12358
  display: flex;
12348
12359
  flex: 1 0 0;
package/patternfly.css CHANGED
@@ -12419,6 +12419,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12419
12419
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
12420
12420
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
12421
12421
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
12422
+ --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
12423
+ --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
12422
12424
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12423
12425
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12424
12426
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -12490,6 +12492,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12490
12492
  min-height: 0;
12491
12493
  }
12492
12494
 
12495
+ .pf-v6-c-compass__main-header-content {
12496
+ display: flex;
12497
+ gap: var(--pf-v6-c-compass__main-header-content--RowGap) var(--pf-v6-c-compass__main-header-content--ColumnGap);
12498
+ }
12499
+
12500
+ .pf-v6-c-compass__main-header-title {
12501
+ flex-grow: 1;
12502
+ }
12503
+
12493
12504
  .pf-v6-c-compass__content {
12494
12505
  display: flex;
12495
12506
  flex: 1 0 0;