@patternfly/patternfly 6.5.0-prerelease.24 → 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 +10 -3
  2. package/components/Compass/compass.scss +10 -4
  3. package/components/_index.css +10 -3
  4. package/docs/components/Compass/examples/Compass.md +8 -4
  5. package/docs/demos/Compass/examples/Compass.md +28 -20
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +10 -3
  8. package/patternfly.css +10 -3
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/Compass/compass.css CHANGED
@@ -34,9 +34,10 @@
34
34
 
35
35
  .pf-v6-c-compass {
36
36
  display: grid;
37
- grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
38
- grid-template-rows: auto 1fr auto;
37
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
38
+ grid-template-rows: auto 1fr;
39
39
  grid-template-columns: auto 1fr auto;
40
+ grid-auto-rows: auto;
40
41
  gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
41
42
  align-items: center;
42
43
  justify-content: center;
@@ -128,6 +129,12 @@
128
129
  max-height: 100%;
129
130
  }
130
131
 
132
+ .pf-v6-c-compass__main-footer {
133
+ display: flex;
134
+ justify-content: center;
135
+ margin-block-start: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
136
+ }
137
+
131
138
  .pf-v6-c-compass__sidebar.pf-m-end {
132
139
  grid-area: sidebar-end;
133
140
  padding: var(--pf-t--global--spacer--sm);
@@ -135,7 +142,7 @@
135
142
 
136
143
  .pf-v6-c-compass__footer {
137
144
  display: flex;
138
- grid-area: footer;
145
+ grid-column: 1/-1;
139
146
  justify-content: center;
140
147
  }
141
148
 
package/components/Compass/compass.scss CHANGED
@@ -38,10 +38,10 @@
38
38
  display: grid;
39
39
  grid-template-areas:
40
40
  "header header header"
41
- "sidebar-start main sidebar-end"
42
- "footer footer footer";
43
- grid-template-rows: auto 1fr auto;
41
+ "sidebar-start main sidebar-end";
42
+ grid-template-rows: auto 1fr;
44
43
  grid-template-columns: auto 1fr auto;
44
+ grid-auto-rows: auto;
45
45
  gap: var(--#{$compass}--RowGap) var(--#{$compass}--ColumnGap);
46
46
  align-items: center;
47
47
  justify-content: center;
@@ -151,6 +151,12 @@
151
151
  }
152
152
  }
153
153
 
154
+ .#{$compass}__main-footer {
155
+ display: flex;
156
+ justify-content: center;
157
+ margin-block-start: calc(var(--#{$compass}__main--RowGap) * -1 + var(--#{$compass}--RowGap)); // Creates same gap as parent compass grid, mimicking the compass footer
158
+ }
159
+
154
160
  .#{$compass}__sidebar.pf-m-end {
155
161
  grid-area: sidebar-end;
156
162
  padding: var(--pf-t--global--spacer--sm);
@@ -158,7 +164,7 @@
158
164
 
159
165
  .#{$compass}__footer {
160
166
  display: flex;
161
- grid-area: footer;
167
+ grid-column: 1 / -1;
162
168
  justify-content: center;
163
169
  }
164
170
 
package/components/_index.css CHANGED
@@ -3543,9 +3543,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3543
3543
 
3544
3544
  .pf-v6-c-compass {
3545
3545
  display: grid;
3546
- grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
3547
- grid-template-rows: auto 1fr auto;
3546
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
3547
+ grid-template-rows: auto 1fr;
3548
3548
  grid-template-columns: auto 1fr auto;
3549
+ grid-auto-rows: auto;
3549
3550
  gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
3550
3551
  align-items: center;
3551
3552
  justify-content: center;
@@ -3637,6 +3638,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3637
3638
  max-height: 100%;
3638
3639
  }
3639
3640
 
3641
+ .pf-v6-c-compass__main-footer {
3642
+ display: flex;
3643
+ justify-content: center;
3644
+ margin-block-start: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
3645
+ }
3646
+
3640
3647
  .pf-v6-c-compass__sidebar.pf-m-end {
3641
3648
  grid-area: sidebar-end;
3642
3649
  padding: var(--pf-t--global--spacer--sm);
@@ -3644,7 +3651,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3644
3651
 
3645
3652
  .pf-v6-c-compass__footer {
3646
3653
  display: flex;
3647
- grid-area: footer;
3654
+ grid-column: 1/-1;
3648
3655
  justify-content: center;
3649
3656
  }
3650
3657
 
package/docs/components/Compass/examples/Compass.md CHANGED
@@ -40,12 +40,14 @@ cssPrefix: pf-v6-c-compass
40
40
  </div>
41
41
  </div>
42
42
  <div class="pf-v6-c-compass__content">content</div>
43
+
44
+ <div class="pf-v6-c-compass__main-footer">
45
+ <div class="pf-v6-c-compass__message-bar">message bar</div>
46
+ </div>
43
47
  </div>
44
48
  <div class="pf-v6-c-compass__sidebar pf-m-end">sidebar (end)</div>
45
49
 
46
- <div class="pf-v6-c-compass__footer">
47
- <div class="pf-v6-c-compass__message-bar">message bar</div>
48
- </div>
50
+ <div class="pf-v6-c-compass__footer">footer</div>
49
51
  </div>
50
52
 
51
53
  ```
@@ -68,13 +70,15 @@ cssPrefix: pf-v6-c-compass
68
70
  | `.pf-v6-c-compass__main-header-title` | `<div>` | Initiates a title within the compass main header content. |
69
71
  | `.pf-v6-c-compass__main-header-toolbar` | `<div>` | Initiates a toolbar of actions within the compass main header content. |
70
72
  | `.pf-v6-c-compass__content` | `<div>` | Initiates the compass content. **Required** |
73
+ | `.pf-v6-c-compass__main-footer` | `<div>` | Initiates the compass main footer. **Required** |
71
74
  | `.pf-v6-c-compass__panel` | `<div>` | Initiates a compass panel. |
72
75
  | `.pf-v6-c-compass__nav` | `<div>` | Initiates a compass container for site navigation. |
73
76
  | `.pf-v6-c-compass__nav-content` | `<div>` | Initiates a compass container for navigation content. |
74
77
  | `.pf-v6-c-compass__nav-home` | `<div>` | Initiates a container for compass home button. |
75
78
  | `.pf-v6-c-compass__nav-main` | `<div>` | Initiates a container for compass navigation main content. |
76
79
  | `.pf-v6-c-compass__nav-search` | `<div>` | Initiates a container for compass search button. |
77
- | `.pf-v6-c-compass__footer` | `<div>` | Initiates the compass footer. **Required** |
80
+ | `.pf-v6-c-compass__hero` | `<div>` | Initiates a compass hero. |
81
+ | `.pf-v6-c-compass__footer` | `<div>` | Initiates the compass footer. |
78
82
  | `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the compass message bar. |
79
83
  | `.pf-m-no-glass` | `.pf-v6-c-compass`, `.pf-v6-c-compass__panel` | Modifies all elements or individual panels to remove the glass styles. |
80
84
  | `.pf-m-start` | `.pf-v6-c-compass__sidebar` | Modifies a compass sidebar for start styles. **Required** |
package/docs/demos/Compass/examples/Compass.md CHANGED
@@ -1212,6 +1212,13 @@ wrapperTag: div
1212
1212
  </div>
1213
1213
  </div>
1214
1214
  </div>
1215
+ <div class="pf-v6-c-compass__main-footer">
1216
+ <div class="pf-v6-c-compass__message-bar">
1217
+ <div
1218
+ class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
1219
+ >chatbot message bar</div>
1220
+ </div>
1221
+ </div>
1215
1222
  </div>
1216
1223
  <div class="pf-v6-c-compass__sidebar pf-m-end">
1217
1224
  <div class="pf-v6-c-compass__panel pf-m-pill">
@@ -1288,11 +1295,6 @@ wrapperTag: div
1288
1295
  </div>
1289
1296
  </div>
1290
1297
  </div>
1291
- <div class="pf-v6-c-compass__footer">
1292
- <div
1293
- class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
1294
- >chatbot message bar</div>
1295
- </div>
1296
1298
  </div>
1297
1299
 
1298
1300
  ```
@@ -2730,6 +2732,13 @@ wrapperTag: div
2730
2732
  </div>
2731
2733
  </div>
2732
2734
  </div>
2735
+ <div class="pf-v6-c-compass__main-footer">
2736
+ <div class="pf-v6-c-compass__message-bar">
2737
+ <div
2738
+ class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
2739
+ >chatbot message bar</div>
2740
+ </div>
2741
+ </div>
2733
2742
  </div>
2734
2743
  <div class="pf-v6-c-compass__sidebar pf-m-end">
2735
2744
  <div class="pf-v6-c-compass__panel pf-m-pill">
@@ -2806,11 +2815,6 @@ wrapperTag: div
2806
2815
  </div>
2807
2816
  </div>
2808
2817
  </div>
2809
- <div class="pf-v6-c-compass__footer">
2810
- <div
2811
- class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
2812
- >chatbot message bar</div>
2813
- </div>
2814
2818
  </div>
2815
2819
 
2816
2820
  ```
@@ -4695,6 +4699,13 @@ wrapperTag: div
4695
4699
  </div>
4696
4700
  </div>
4697
4701
  </div>
4702
+ <div class="pf-v6-c-compass__main-footer">
4703
+ <div class="pf-v6-c-compass__message-bar">
4704
+ <div
4705
+ class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
4706
+ >chatbot message bar</div>
4707
+ </div>
4708
+ </div>
4698
4709
  </div>
4699
4710
  <div class="pf-v6-c-compass__sidebar pf-m-end">
4700
4711
  <div class="pf-v6-c-compass__panel pf-m-pill">
@@ -4771,11 +4782,6 @@ wrapperTag: div
4771
4782
  </div>
4772
4783
  </div>
4773
4784
  </div>
4774
- <div class="pf-v6-c-compass__footer">
4775
- <div
4776
- class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
4777
- >chatbot message bar</div>
4778
- </div>
4779
4785
  </div>
4780
4786
 
4781
4787
  ```
@@ -6047,6 +6053,13 @@ wrapperTag: div
6047
6053
  </div>
6048
6054
  </div>
6049
6055
  </div>
6056
+ <div class="pf-v6-c-compass__main-footer">
6057
+ <div class="pf-v6-c-compass__message-bar">
6058
+ <div
6059
+ class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
6060
+ >chatbot message bar</div>
6061
+ </div>
6062
+ </div>
6050
6063
  </div>
6051
6064
  <div class="pf-v6-c-compass__sidebar pf-m-end">
6052
6065
  <div class="pf-v6-c-compass__panel pf-m-pill">
@@ -6123,11 +6136,6 @@ wrapperTag: div
6123
6136
  </div>
6124
6137
  </div>
6125
6138
  </div>
6126
- <div class="pf-v6-c-compass__footer">
6127
- <div
6128
- class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
6129
- >chatbot message bar</div>
6130
- </div>
6131
6139
  </div>
6132
6140
  </div>
6133
6141
  </div>
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.24",
4
+ "version": "6.5.0-prerelease.25",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -12298,9 +12298,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12298
12298
 
12299
12299
  .pf-v6-c-compass {
12300
12300
  display: grid;
12301
- grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
12302
- grid-template-rows: auto 1fr auto;
12301
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
12302
+ grid-template-rows: auto 1fr;
12303
12303
  grid-template-columns: auto 1fr auto;
12304
+ grid-auto-rows: auto;
12304
12305
  gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
12305
12306
  align-items: center;
12306
12307
  justify-content: center;
@@ -12392,6 +12393,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12392
12393
  max-height: 100%;
12393
12394
  }
12394
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
+
12395
12402
  .pf-v6-c-compass__sidebar.pf-m-end {
12396
12403
  grid-area: sidebar-end;
12397
12404
  padding: var(--pf-t--global--spacer--sm);
@@ -12399,7 +12406,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12399
12406
 
12400
12407
  .pf-v6-c-compass__footer {
12401
12408
  display: flex;
12402
- grid-area: footer;
12409
+ grid-column: 1/-1;
12403
12410
  justify-content: center;
12404
12411
  }
12405
12412
 
package/patternfly.css CHANGED
@@ -12445,9 +12445,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12445
12445
 
12446
12446
  .pf-v6-c-compass {
12447
12447
  display: grid;
12448
- grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
12449
- grid-template-rows: auto 1fr auto;
12448
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
12449
+ grid-template-rows: auto 1fr;
12450
12450
  grid-template-columns: auto 1fr auto;
12451
+ grid-auto-rows: auto;
12451
12452
  gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
12452
12453
  align-items: center;
12453
12454
  justify-content: center;
@@ -12539,6 +12540,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12539
12540
  max-height: 100%;
12540
12541
  }
12541
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
+
12542
12549
  .pf-v6-c-compass__sidebar.pf-m-end {
12543
12550
  grid-area: sidebar-end;
12544
12551
  padding: var(--pf-t--global--spacer--sm);
@@ -12546,7 +12553,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12546
12553
 
12547
12554
  .pf-v6-c-compass__footer {
12548
12555
  display: flex;
12549
- grid-area: footer;
12556
+ grid-column: 1/-1;
12550
12557
  justify-content: center;
12551
12558
  }
12552
12559