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

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
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.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.6.1-prerelease.2...@patternfly/react-styles@6.6.1-prerelease.3) (2026-09-15)
7
+
8
+ ### Features
9
+
10
+ - **Drawer:** Add full-size drawer ([#12641](https://github.com/patternfly/patternfly-react/issues/12641)) ([9930770](https://github.com/patternfly/patternfly-react/commit/9930770624d75e6d0b7b0e8480cc198b71906f7e))
11
+
12
+ ## [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)
13
+
14
+ ### Features
15
+
16
+ - **Page:** add PageFooter and isPlain ([#12642](https://github.com/patternfly/patternfly-react/issues/12642)) ([6e3dd0e](https://github.com/patternfly/patternfly-react/commit/6e3dd0e11b69671d46742346c818d4463e9b964b))
17
+
6
18
  ## [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
19
 
8
20
  ### Bug Fixes
@@ -243,6 +243,15 @@
243
243
  .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
244
244
  flex-direction: column;
245
245
  }
246
+ .pf-v6-c-drawer.pf-m-viewport {
247
+ position: fixed;
248
+ inset: 0;
249
+ z-index: var(--pf-t--global--z-index--lg);
250
+ pointer-events: none;
251
+ }
252
+ .pf-v6-c-drawer.pf-m-viewport > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
253
+ pointer-events: auto;
254
+ }
246
255
  .pf-v6-c-drawer.pf-m-expanded {
247
256
  --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
248
257
  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
@@ -21,6 +21,7 @@ declare const _default: {
21
21
  "noBorder": "pf-m-no-border",
22
22
  "resizable": "pf-m-resizable",
23
23
  "panelLeft": "pf-m-panel-left",
24
+ "viewport": "pf-m-viewport",
24
25
  "expanded": "pf-m-expanded",
25
26
  "resizing": "pf-m-resizing",
26
27
  "pill": "pf-m-pill",
@@ -23,6 +23,7 @@ exports.default = {
23
23
  "noBorder": "pf-m-no-border",
24
24
  "resizable": "pf-m-resizable",
25
25
  "panelLeft": "pf-m-panel-left",
26
+ "viewport": "pf-m-viewport",
26
27
  "expanded": "pf-m-expanded",
27
28
  "resizing": "pf-m-resizing",
28
29
  "pill": "pf-m-pill",
@@ -21,6 +21,7 @@ export default {
21
21
  "noBorder": "pf-m-no-border",
22
22
  "resizable": "pf-m-resizable",
23
23
  "panelLeft": "pf-m-panel-left",
24
+ "viewport": "pf-m-viewport",
24
25
  "expanded": "pf-m-expanded",
25
26
  "resizing": "pf-m-resizing",
26
27
  "pill": "pf-m-pill",
@@ -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);
@@ -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",
@@ -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",
@@ -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",
@@ -6822,6 +6822,15 @@ ul) {
6822
6822
  .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
6823
6823
  flex-direction: column;
6824
6824
  }
6825
+ .pf-v6-c-drawer.pf-m-viewport {
6826
+ position: fixed;
6827
+ inset: 0;
6828
+ z-index: var(--pf-t--global--z-index--lg);
6829
+ pointer-events: none;
6830
+ }
6831
+ .pf-v6-c-drawer.pf-m-viewport > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6832
+ pointer-events: auto;
6833
+ }
6825
6834
  .pf-v6-c-drawer.pf-m-expanded {
6826
6835
  --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
6827
6836
  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
@@ -14142,6 +14151,9 @@ ul.pf-v6-c-list {
14142
14151
  --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
14152
  --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
14153
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
14154
+ --pf-v6-c-page--m-plain__main-container--MarginBlockEnd: var(--pf-v6-c-page--inset);
14155
+ --pf-v6-c-page--m-plain__main--RowGap: var(--pf-t--global--spacer--gutter--default);
14156
+ --pf-v6-c-page__footer--ZIndex: var(--pf-v6-c-page__main-container--ZIndex);
14145
14157
  }
14146
14158
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
14147
14159
  --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -14186,12 +14198,19 @@ ul.pf-v6-c-list {
14186
14198
  max-height: 100%;
14187
14199
  background-color: var(--pf-v6-c-page--BackgroundColor);
14188
14200
  }
14201
+ .pf-v6-c-page:has(> .pf-v6-c-page__footer) {
14202
+ grid-template-areas: "header" "main" "footer";
14203
+ grid-template-rows: max-content 1fr auto;
14204
+ }
14189
14205
  @media (min-width: 75rem) {
14190
14206
  .pf-v6-c-page {
14191
14207
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--xl--Width);
14192
14208
  grid-template-areas: "header header" "sidebar main";
14193
14209
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
14194
14210
  }
14211
+ .pf-v6-c-page:has(> .pf-v6-c-page__footer) {
14212
+ grid-template-areas: "header header" "sidebar main" "footer footer";
14213
+ }
14195
14214
  }
14196
14215
  .pf-v6-c-page.pf-m-docked {
14197
14216
  --pf-v6-c-page--masthead--main-container--GridArea: main;
@@ -14296,6 +14315,30 @@ ul.pf-v6-c-list {
14296
14315
  --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
14297
14316
  }
14298
14317
  }
14318
+ .pf-v6-c-page.pf-m-plain {
14319
+ --pf-v6-c-page__main-container--MarginBlockEnd: var(--pf-v6-c-page--m-plain__main-container--MarginBlockEnd);
14320
+ height: revert;
14321
+ min-height: 100dvh;
14322
+ max-height: revert;
14323
+ }
14324
+ .pf-v6-c-page.pf-m-plain :is(.pf-v6-c-page__main, .pf-v6-c-page__main-container) {
14325
+ overflow: revert;
14326
+ }
14327
+ .pf-v6-c-page.pf-m-plain .pf-v6-c-page__main-container {
14328
+ max-height: revert;
14329
+ background: transparent;
14330
+ border: 0;
14331
+ border-radius: 0;
14332
+ box-shadow: none;
14333
+ backdrop-filter: none;
14334
+ }
14335
+ .pf-v6-c-page.pf-m-plain .pf-v6-c-page__main {
14336
+ gap: var(--pf-v6-c-page--m-plain__main--RowGap);
14337
+ }
14338
+ .pf-v6-c-page.pf-m-plain .pf-v6-c-page__main-breadcrumb,
14339
+ .pf-v6-c-page.pf-m-plain .pf-v6-c-page__main-subnav {
14340
+ padding: 0;
14341
+ }
14299
14342
 
14300
14343
  .pf-v6-c-page__header {
14301
14344
  z-index: var(--pf-v6-c-page__header--ZIndex);
@@ -14319,6 +14362,11 @@ ul.pf-v6-c-list {
14319
14362
  --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns);
14320
14363
  }
14321
14364
 
14365
+ .pf-v6-c-page__footer {
14366
+ z-index: var(--pf-v6-c-page__footer--ZIndex);
14367
+ grid-area: footer;
14368
+ }
14369
+
14322
14370
  .pf-v6-c-page__dock {
14323
14371
  position: fixed;
14324
14372
  inset-block-start: 0;
@@ -14815,6 +14863,7 @@ ul.pf-v6-c-list {
14815
14863
  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
14816
14864
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
14817
14865
  margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
14866
+ margin-block-end: var(--pf-v6-c-page__main-container--MarginBlockEnd, 0);
14818
14867
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
14819
14868
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
14820
14869
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -587,6 +587,7 @@ declare const _default: {
587
587
  "noBorder": "pf-m-no-border",
588
588
  "resizable": "pf-m-resizable",
589
589
  "panelLeft": "pf-m-panel-left",
590
+ "viewport": "pf-m-viewport",
590
591
  "resizing": "pf-m-resizing",
591
592
  "noBackground": "pf-m-no-background",
592
593
  "padding": "pf-m-padding",
@@ -1245,6 +1246,7 @@ declare const _default: {
1245
1246
  "pageDock": "pf-v6-c-page__dock",
1246
1247
  "pageDockMain": "pf-v6-c-page__dock-main",
1247
1248
  "pageDrawer": "pf-v6-c-page__drawer",
1249
+ "pageFooter": "pf-v6-c-page__footer",
1248
1250
  "pageHeader": "pf-v6-c-page__header",
1249
1251
  "pageMain": "pf-v6-c-page__main",
1250
1252
  "pageMainBody": "pf-v6-c-page__main-body",
@@ -589,6 +589,7 @@ exports.default = {
589
589
  "noBorder": "pf-m-no-border",
590
590
  "resizable": "pf-m-resizable",
591
591
  "panelLeft": "pf-m-panel-left",
592
+ "viewport": "pf-m-viewport",
592
593
  "resizing": "pf-m-resizing",
593
594
  "noBackground": "pf-m-no-background",
594
595
  "padding": "pf-m-padding",
@@ -1247,6 +1248,7 @@ exports.default = {
1247
1248
  "pageDock": "pf-v6-c-page__dock",
1248
1249
  "pageDockMain": "pf-v6-c-page__dock-main",
1249
1250
  "pageDrawer": "pf-v6-c-page__drawer",
1251
+ "pageFooter": "pf-v6-c-page__footer",
1250
1252
  "pageHeader": "pf-v6-c-page__header",
1251
1253
  "pageMain": "pf-v6-c-page__main",
1252
1254
  "pageMainBody": "pf-v6-c-page__main-body",
@@ -587,6 +587,7 @@ export default {
587
587
  "noBorder": "pf-m-no-border",
588
588
  "resizable": "pf-m-resizable",
589
589
  "panelLeft": "pf-m-panel-left",
590
+ "viewport": "pf-m-viewport",
590
591
  "resizing": "pf-m-resizing",
591
592
  "noBackground": "pf-m-no-background",
592
593
  "padding": "pf-m-padding",
@@ -1245,6 +1246,7 @@ export default {
1245
1246
  "pageDock": "pf-v6-c-page__dock",
1246
1247
  "pageDockMain": "pf-v6-c-page__dock-main",
1247
1248
  "pageDrawer": "pf-v6-c-page__drawer",
1249
+ "pageFooter": "pf-v6-c-page__footer",
1248
1250
  "pageHeader": "pf-v6-c-page__header",
1249
1251
  "pageMain": "pf-v6-c-page__main",
1250
1252
  "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.3",
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.41",
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": "103c595fefeee9e6cf6209cc94154b0551702f18"
28
28
  }