@patternfly/react-styles 6.6.1-prerelease.1 → 6.6.1-prerelease.2

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/CHANGELOG.md +6 -0
  2. package/css/components/Page/page.css +40 -0
  3. package/css/components/Page/page.d.ts +2 -1
  4. package/css/components/Page/page.js +2 -1
  5. package/css/components/Page/page.mjs +2 -1
  6. package/css/components/_index.css +40 -0
  7. package/css/components/_index.d.ts +1 -0
  8. package/css/components/_index.js +1 -0
  9. package/css/components/_index.mjs +1 -0
  10. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [6.6.1-prerelease.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.6.1-prerelease.1...@patternfly/react-styles@6.6.1-prerelease.2) (2026-09-11)
7
+
8
+ ### Features
9
+
10
+ - **Page:** add PageFooter and isPlain ([#12642](https://github.com/patternfly/patternfly-react/issues/12642)) ([6e3dd0e](https://github.com/patternfly/patternfly-react/commit/6e3dd0e11b69671d46742346c818d4463e9b964b))
11
+
6
12
  ## [6.6.1-prerelease.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.6.1-prerelease.0...@patternfly/react-styles@6.6.1-prerelease.1) (2026-08-31)
7
13
 
8
14
  ### Bug Fixes
package/css/components/Page/page.css CHANGED
@@ -222,6 +222,9 @@
222
222
  --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
223
223
  --pf-v6-c-page--m-dock__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
224
224
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
225
+ --pf-v6-c-page--m-plain__main-container--MarginBlockEnd: var(--pf-v6-c-page--inset);
226
+ --pf-v6-c-page--m-plain__main--RowGap: var(--pf-t--global--spacer--gutter--default);
227
+ --pf-v6-c-page__footer--ZIndex: var(--pf-v6-c-page__main-container--ZIndex);
225
228
  }
226
229
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
227
230
  --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -266,12 +269,19 @@
266
269
  max-height: 100%;
267
270
  background-color: var(--pf-v6-c-page--BackgroundColor);
268
271
  }
272
+ .pf-v6-c-page:has(> .pf-v6-c-page__footer) {
273
+ grid-template-areas: "header" "main" "footer";
274
+ grid-template-rows: max-content 1fr auto;
275
+ }
269
276
  @media (min-width: 75rem) {
270
277
  .pf-v6-c-page {
271
278
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--xl--Width);
272
279
  grid-template-areas: "header header" "sidebar main";
273
280
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
274
281
  }
282
+ .pf-v6-c-page:has(> .pf-v6-c-page__footer) {
283
+ grid-template-areas: "header header" "sidebar main" "footer footer";
284
+ }
275
285
  }
276
286
  .pf-v6-c-page.pf-m-docked {
277
287
  --pf-v6-c-page--masthead--main-container--GridArea: main;
@@ -376,6 +386,30 @@
376
386
  --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
377
387
  }
378
388
  }
389
+ .pf-v6-c-page.pf-m-plain {
390
+ --pf-v6-c-page__main-container--MarginBlockEnd: var(--pf-v6-c-page--m-plain__main-container--MarginBlockEnd);
391
+ height: revert;
392
+ min-height: 100dvh;
393
+ max-height: revert;
394
+ }
395
+ .pf-v6-c-page.pf-m-plain :is(.pf-v6-c-page__main, .pf-v6-c-page__main-container) {
396
+ overflow: revert;
397
+ }
398
+ .pf-v6-c-page.pf-m-plain .pf-v6-c-page__main-container {
399
+ max-height: revert;
400
+ background: transparent;
401
+ border: 0;
402
+ border-radius: 0;
403
+ box-shadow: none;
404
+ backdrop-filter: none;
405
+ }
406
+ .pf-v6-c-page.pf-m-plain .pf-v6-c-page__main {
407
+ gap: var(--pf-v6-c-page--m-plain__main--RowGap);
408
+ }
409
+ .pf-v6-c-page.pf-m-plain .pf-v6-c-page__main-breadcrumb,
410
+ .pf-v6-c-page.pf-m-plain .pf-v6-c-page__main-subnav {
411
+ padding: 0;
412
+ }
379
413
 
380
414
  .pf-v6-c-page__header {
381
415
  z-index: var(--pf-v6-c-page__header--ZIndex);
@@ -399,6 +433,11 @@
399
433
  --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns);
400
434
  }
401
435
 
436
+ .pf-v6-c-page__footer {
437
+ z-index: var(--pf-v6-c-page__footer--ZIndex);
438
+ grid-area: footer;
439
+ }
440
+
402
441
  .pf-v6-c-page__dock {
403
442
  position: fixed;
404
443
  inset-block-start: 0;
@@ -895,6 +934,7 @@
895
934
  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
896
935
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
897
936
  margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
937
+ margin-block-end: var(--pf-v6-c-page__main-container--MarginBlockEnd, 0);
898
938
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
899
939
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
900
940
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
package/css/components/Page/page.d.ts CHANGED
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  "collapsed": "pf-m-collapsed",
15
15
  "expandableExpanded": "pf-m-expandable-expanded",
16
16
  "textExpanded": "pf-m-text-expanded",
17
+ "plain": "pf-m-plain",
17
18
  "vertical": "pf-m-vertical",
18
19
  "pageInsets": "pf-m-page-insets",
19
20
  "contextSelector": "pf-m-context-selector",
@@ -42,7 +43,6 @@ declare const _default: {
42
43
  "stickyBottomBase": "pf-m-sticky-bottom-base",
43
44
  "stickyBottomStuck": "pf-m-sticky-bottom-stuck",
44
45
  "noSidebar": "pf-m-no-sidebar",
45
- "plain": "pf-m-plain",
46
46
  "noPlainOnGlass": "pf-m-no-plain-on-glass",
47
47
  "secondary": "pf-m-secondary",
48
48
  "padding": "pf-m-padding",
@@ -62,6 +62,7 @@ declare const _default: {
62
62
  "pageDock": "pf-v6-c-page__dock",
63
63
  "pageDockMain": "pf-v6-c-page__dock-main",
64
64
  "pageDrawer": "pf-v6-c-page__drawer",
65
+ "pageFooter": "pf-v6-c-page__footer",
65
66
  "pageHeader": "pf-v6-c-page__header",
66
67
  "pageMain": "pf-v6-c-page__main",
67
68
  "pageMainBody": "pf-v6-c-page__main-body",
package/css/components/Page/page.js CHANGED
@@ -16,6 +16,7 @@ exports.default = {
16
16
  "collapsed": "pf-m-collapsed",
17
17
  "expandableExpanded": "pf-m-expandable-expanded",
18
18
  "textExpanded": "pf-m-text-expanded",
19
+ "plain": "pf-m-plain",
19
20
  "vertical": "pf-m-vertical",
20
21
  "pageInsets": "pf-m-page-insets",
21
22
  "contextSelector": "pf-m-context-selector",
@@ -44,7 +45,6 @@ exports.default = {
44
45
  "stickyBottomBase": "pf-m-sticky-bottom-base",
45
46
  "stickyBottomStuck": "pf-m-sticky-bottom-stuck",
46
47
  "noSidebar": "pf-m-no-sidebar",
47
- "plain": "pf-m-plain",
48
48
  "noPlainOnGlass": "pf-m-no-plain-on-glass",
49
49
  "secondary": "pf-m-secondary",
50
50
  "padding": "pf-m-padding",
@@ -64,6 +64,7 @@ exports.default = {
64
64
  "pageDock": "pf-v6-c-page__dock",
65
65
  "pageDockMain": "pf-v6-c-page__dock-main",
66
66
  "pageDrawer": "pf-v6-c-page__drawer",
67
+ "pageFooter": "pf-v6-c-page__footer",
67
68
  "pageHeader": "pf-v6-c-page__header",
68
69
  "pageMain": "pf-v6-c-page__main",
69
70
  "pageMainBody": "pf-v6-c-page__main-body",
package/css/components/Page/page.mjs CHANGED
@@ -14,6 +14,7 @@ export default {
14
14
  "collapsed": "pf-m-collapsed",
15
15
  "expandableExpanded": "pf-m-expandable-expanded",
16
16
  "textExpanded": "pf-m-text-expanded",
17
+ "plain": "pf-m-plain",
17
18
  "vertical": "pf-m-vertical",
18
19
  "pageInsets": "pf-m-page-insets",
19
20
  "contextSelector": "pf-m-context-selector",
@@ -42,7 +43,6 @@ export default {
42
43
  "stickyBottomBase": "pf-m-sticky-bottom-base",
43
44
  "stickyBottomStuck": "pf-m-sticky-bottom-stuck",
44
45
  "noSidebar": "pf-m-no-sidebar",
45
- "plain": "pf-m-plain",
46
46
  "noPlainOnGlass": "pf-m-no-plain-on-glass",
47
47
  "secondary": "pf-m-secondary",
48
48
  "padding": "pf-m-padding",
@@ -62,6 +62,7 @@ export default {
62
62
  "pageDock": "pf-v6-c-page__dock",
63
63
  "pageDockMain": "pf-v6-c-page__dock-main",
64
64
  "pageDrawer": "pf-v6-c-page__drawer",
65
+ "pageFooter": "pf-v6-c-page__footer",
65
66
  "pageHeader": "pf-v6-c-page__header",
66
67
  "pageMain": "pf-v6-c-page__main",
67
68
  "pageMainBody": "pf-v6-c-page__main-body",
package/css/components/_index.css CHANGED
@@ -14142,6 +14142,9 @@ ul.pf-v6-c-list {
14142
14142
  --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
14143
14143
  --pf-v6-c-page--m-dock__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
14144
14144
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
14145
+ --pf-v6-c-page--m-plain__main-container--MarginBlockEnd: var(--pf-v6-c-page--inset);
14146
+ --pf-v6-c-page--m-plain__main--RowGap: var(--pf-t--global--spacer--gutter--default);
14147
+ --pf-v6-c-page__footer--ZIndex: var(--pf-v6-c-page__main-container--ZIndex);
14145
14148
  }
14146
14149
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
14147
14150
  --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -14186,12 +14189,19 @@ ul.pf-v6-c-list {
14186
14189
  max-height: 100%;
14187
14190
  background-color: var(--pf-v6-c-page--BackgroundColor);
14188
14191
  }
14192
+ .pf-v6-c-page:has(> .pf-v6-c-page__footer) {
14193
+ grid-template-areas: "header" "main" "footer";
14194
+ grid-template-rows: max-content 1fr auto;
14195
+ }
14189
14196
  @media (min-width: 75rem) {
14190
14197
  .pf-v6-c-page {
14191
14198
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--xl--Width);
14192
14199
  grid-template-areas: "header header" "sidebar main";
14193
14200
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
14194
14201
  }
14202
+ .pf-v6-c-page:has(> .pf-v6-c-page__footer) {
14203
+ grid-template-areas: "header header" "sidebar main" "footer footer";
14204
+ }
14195
14205
  }
14196
14206
  .pf-v6-c-page.pf-m-docked {
14197
14207
  --pf-v6-c-page--masthead--main-container--GridArea: main;
@@ -14296,6 +14306,30 @@ ul.pf-v6-c-list {
14296
14306
  --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
14297
14307
  }
14298
14308
  }
14309
+ .pf-v6-c-page.pf-m-plain {
14310
+ --pf-v6-c-page__main-container--MarginBlockEnd: var(--pf-v6-c-page--m-plain__main-container--MarginBlockEnd);
14311
+ height: revert;
14312
+ min-height: 100dvh;
14313
+ max-height: revert;
14314
+ }
14315
+ .pf-v6-c-page.pf-m-plain :is(.pf-v6-c-page__main, .pf-v6-c-page__main-container) {
14316
+ overflow: revert;
14317
+ }
14318
+ .pf-v6-c-page.pf-m-plain .pf-v6-c-page__main-container {
14319
+ max-height: revert;
14320
+ background: transparent;
14321
+ border: 0;
14322
+ border-radius: 0;
14323
+ box-shadow: none;
14324
+ backdrop-filter: none;
14325
+ }
14326
+ .pf-v6-c-page.pf-m-plain .pf-v6-c-page__main {
14327
+ gap: var(--pf-v6-c-page--m-plain__main--RowGap);
14328
+ }
14329
+ .pf-v6-c-page.pf-m-plain .pf-v6-c-page__main-breadcrumb,
14330
+ .pf-v6-c-page.pf-m-plain .pf-v6-c-page__main-subnav {
14331
+ padding: 0;
14332
+ }
14299
14333
 
14300
14334
  .pf-v6-c-page__header {
14301
14335
  z-index: var(--pf-v6-c-page__header--ZIndex);
@@ -14319,6 +14353,11 @@ ul.pf-v6-c-list {
14319
14353
  --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns);
14320
14354
  }
14321
14355
 
14356
+ .pf-v6-c-page__footer {
14357
+ z-index: var(--pf-v6-c-page__footer--ZIndex);
14358
+ grid-area: footer;
14359
+ }
14360
+
14322
14361
  .pf-v6-c-page__dock {
14323
14362
  position: fixed;
14324
14363
  inset-block-start: 0;
@@ -14815,6 +14854,7 @@ ul.pf-v6-c-list {
14815
14854
  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
14816
14855
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
14817
14856
  margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
14857
+ margin-block-end: var(--pf-v6-c-page__main-container--MarginBlockEnd, 0);
14818
14858
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
14819
14859
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
14820
14860
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
package/css/components/_index.d.ts CHANGED
@@ -1245,6 +1245,7 @@ declare const _default: {
1245
1245
  "pageDock": "pf-v6-c-page__dock",
1246
1246
  "pageDockMain": "pf-v6-c-page__dock-main",
1247
1247
  "pageDrawer": "pf-v6-c-page__drawer",
1248
+ "pageFooter": "pf-v6-c-page__footer",
1248
1249
  "pageHeader": "pf-v6-c-page__header",
1249
1250
  "pageMain": "pf-v6-c-page__main",
1250
1251
  "pageMainBody": "pf-v6-c-page__main-body",
package/css/components/_index.js CHANGED
@@ -1247,6 +1247,7 @@ exports.default = {
1247
1247
  "pageDock": "pf-v6-c-page__dock",
1248
1248
  "pageDockMain": "pf-v6-c-page__dock-main",
1249
1249
  "pageDrawer": "pf-v6-c-page__drawer",
1250
+ "pageFooter": "pf-v6-c-page__footer",
1250
1251
  "pageHeader": "pf-v6-c-page__header",
1251
1252
  "pageMain": "pf-v6-c-page__main",
1252
1253
  "pageMainBody": "pf-v6-c-page__main-body",
package/css/components/_index.mjs CHANGED
@@ -1245,6 +1245,7 @@ export default {
1245
1245
  "pageDock": "pf-v6-c-page__dock",
1246
1246
  "pageDockMain": "pf-v6-c-page__dock-main",
1247
1247
  "pageDrawer": "pf-v6-c-page__drawer",
1248
+ "pageFooter": "pf-v6-c-page__footer",
1248
1249
  "pageHeader": "pf-v6-c-page__header",
1249
1250
  "pageMain": "pf-v6-c-page__main",
1250
1251
  "pageMainBody": "pf-v6-c-page__main-body",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.6.1-prerelease.1",
3
+ "version": "6.6.1-prerelease.2",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,10 +19,10 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "6.6.0-prerelease.39",
22
+ "@patternfly/patternfly": "6.6.0-prerelease.40",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.3.3"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "a01cd6377b953ae8f01eb2dc632311a2373dfeac"
27
+ "gitHead": "008744f97e0d226d41c0bec0b78ec938943392e3"
28
28
  }