@patternfly/patternfly 6.0.0-alpha.161 → 6.0.0-alpha.163

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 (25) hide show
  1. package/components/ClipboardCopy/clipboard-copy.css +11 -19
  2. package/components/ClipboardCopy/clipboard-copy.scss +12 -20
  3. package/components/Page/page.css +38 -54
  4. package/components/Page/page.scss +19 -32
  5. package/components/Toolbar/toolbar.css +1 -0
  6. package/components/Toolbar/toolbar.scss +1 -0
  7. package/components/_index.css +50 -73
  8. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +7 -7
  9. package/docs/components/Page/examples/Page.css +5 -9
  10. package/docs/components/Page/examples/Page.md +71 -32
  11. package/docs/demos/Alert/examples/Alert.md +393 -374
  12. package/docs/demos/CardView/examples/CardView.md +717 -708
  13. package/docs/demos/DataList/examples/DataList.md +2574 -2500
  14. package/docs/demos/Drawer/examples/Drawer.md +190 -182
  15. package/docs/demos/JumpLinks/examples/JumpLinks.md +642 -612
  16. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +3608 -3490
  17. package/docs/demos/Skeleton/examples/Skeleton.md +128 -126
  18. package/docs/demos/Table/examples/Table.md +9458 -9105
  19. package/docs/demos/Tabs/examples/Tabs.md +889 -885
  20. package/docs/demos/Toolbar/examples/Toolbar.md +1254 -1147
  21. package/package.json +1 -1
  22. package/patternfly-no-globals.css +50 -73
  23. package/patternfly.css +50 -73
  24. package/patternfly.min.css +1 -1
  25. package/patternfly.min.css.map +1 -1
package/components/ClipboardCopy/clipboard-copy.css CHANGED
@@ -15,18 +15,15 @@
15
15
  --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
16
16
  --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
17
17
  --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--xs);
18
- --pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart: 0;
19
- --pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd: 0;
20
18
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
19
+ --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
21
20
  --pf-v6-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21
+ --pf-v6-c-clipboard-copy__actions--Gap: var(--pf-t--global--spacer--sm);
22
+ --pf-v6-c-clipboard-copy__actions--MarginInlineStart: var(--pf-t--global--spacer--xs);
23
+ --pf-v6-c-clipboard-copy__actions-item--button--Color: var(--pf-t--global--icon--color--subtle);
24
+ --pf-v6-c-clipboard-copy__actions-item--button--hover--Color: var(--pf-t--global--icon--color--regular);
22
25
  --pf-v6-c-clipboard-copy__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
23
26
  --pf-v6-c-clipboard-copy__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
24
- --pf-v6-c-clipboard-copy__actions-item--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--xs));
25
- --pf-v6-c-clipboard-copy__actions-item--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--xs));
26
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
27
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
28
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
29
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
30
27
  }
31
28
 
32
29
  .pf-v6-c-clipboard-copy.pf-m-expanded .pf-v6-c-clipboard-copy__toggle-icon {
@@ -34,9 +31,8 @@
34
31
  }
35
32
  .pf-v6-c-clipboard-copy.pf-m-inline {
36
33
  display: inline;
37
- padding-block-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart);
38
- padding-block-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd);
39
34
  padding-inline-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);
35
+ padding-inline-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd);
40
36
  white-space: nowrap;
41
37
  background-color: var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor);
42
38
  }
@@ -91,15 +87,11 @@
91
87
 
92
88
  .pf-v6-c-clipboard-copy__actions {
93
89
  display: inline-flex;
90
+ gap: var(--pf-v6-c-clipboard-copy__actions--Gap);
91
+ margin-inline-start: var(--pf-v6-c-clipboard-copy__actions--MarginInlineStart);
94
92
  }
95
93
 
96
- .pf-v6-c-clipboard-copy__actions-item {
97
- margin-block-start: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart));
98
- margin-block-end: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd));
99
- }
100
- .pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button {
101
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart);
102
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd);
103
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd);
104
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart);
94
+ .pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain {
95
+ --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--Color);
96
+ --pf-v6-c-button--m-plain--hover--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color);
105
97
  }
package/components/ClipboardCopy/clipboard-copy.scss CHANGED
@@ -24,22 +24,17 @@
24
24
  --#{$clipboard-copy}__group--Gap: var(--pf-t--global--spacer--xs);
25
25
 
26
26
  // Inline
27
- --#{$clipboard-copy}--m-inline--PaddingBlockStart: 0; // remove at breaking change
28
- --#{$clipboard-copy}--m-inline--PaddingBlockEnd: 0; // remove at breaking change
29
27
  --#{$clipboard-copy}--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
28
+ --#{$clipboard-copy}--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
30
29
  --#{$clipboard-copy}--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
30
+ --#{$clipboard-copy}__actions--Gap: var(--pf-t--global--spacer--sm);
31
+ --#{$clipboard-copy}__actions--MarginInlineStart: var(--pf-t--global--spacer--xs);
32
+ --#{$clipboard-copy}__actions-item--button--Color: var(--pf-t--global--icon--color--subtle);
33
+ --#{$clipboard-copy}__actions-item--button--hover--Color: var(--pf-t--global--icon--color--regular);
31
34
 
32
35
  // Text
33
36
  --#{$clipboard-copy}__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
34
37
  --#{$clipboard-copy}__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
35
-
36
- // Actions
37
- --#{$clipboard-copy}__actions-item--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--xs));
38
- --#{$clipboard-copy}__actions-item--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--xs));
39
- --#{$clipboard-copy}__actions-item--button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
40
- --#{$clipboard-copy}__actions-item--button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
41
- --#{$clipboard-copy}__actions-item--button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
42
- --#{$clipboard-copy}__actions-item--button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
43
38
  }
44
39
 
45
40
  .#{$clipboard-copy} {
@@ -52,9 +47,8 @@
52
47
 
53
48
  &.pf-m-inline {
54
49
  display: inline;
55
- padding-block-start: var(--#{$clipboard-copy}--m-inline--PaddingBlockStart);
56
- padding-block-end: var(--#{$clipboard-copy}--m-inline--PaddingBlockEnd);
57
50
  padding-inline-start: var(--#{$clipboard-copy}--m-inline--PaddingInlineStart);
51
+ padding-inline-end: var(--#{$clipboard-copy}--m-inline--PaddingInlineEnd);
58
52
  white-space: nowrap;
59
53
  background-color: var(--#{$clipboard-copy}--m-inline--BackgroundColor);
60
54
 
@@ -114,17 +108,15 @@
114
108
 
115
109
  .#{$clipboard-copy}__actions {
116
110
  display: inline-flex;
111
+ gap: var(--#{$clipboard-copy}__actions--Gap);
112
+ margin-inline-start: var(--#{$clipboard-copy}__actions--MarginInlineStart);
117
113
  }
118
114
 
119
115
  .#{$clipboard-copy}__actions-item {
120
- margin-block-start: calc(-1 * var(--#{$clipboard-copy}__actions-item--button--PaddingBlockStart));
121
- margin-block-end: calc(-1 * var(--#{$clipboard-copy}__actions-item--button--PaddingBlockEnd));
122
-
123
- .#{$button} {
124
- --#{$button}--PaddingBlockStart: var(--#{$clipboard-copy}__actions-item--button--PaddingBlockStart);
125
- --#{$button}--PaddingInlineEnd: var(--#{$clipboard-copy}__actions-item--button--PaddingInlineEnd);
126
- --#{$button}--PaddingBlockEnd: var(--#{$clipboard-copy}__actions-item--button--PaddingBlockEnd);
127
- --#{$button}--PaddingInlineStart: var(--#{$clipboard-copy}__actions-item--button--PaddingInlineStart);
116
+
117
+ .#{$button}.pf-m-plain {
118
+ --#{$button}--m-plain--Color: var(--#{$clipboard-copy}__actions-item--button--Color);
119
+ --#{$button}--m-plain--hover--Color: var(--#{$clipboard-copy}__actions-item--button--hover--Color);
128
120
  }
129
121
  }
130
122
 
package/components/Page/page.css CHANGED
@@ -36,11 +36,11 @@
36
36
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
37
37
  --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
38
38
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
39
- --pf-v6-c-page__main-section--MarginBlockStart: var(--pf-t--global--spacer--md);
40
- --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--lg);
41
- --pf-v6-c-page__main-section--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
42
- --pf-v6-c-page__main-section--PaddingBlockEnd: 0;
43
- --pf-v6-c-page__main-section--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
39
+ --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
40
+ --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
41
+ --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
42
+ --pf-v6-c-page__main-section--PaddingInlineStart: var(--pf-t--global--spacer--lg);
43
+ --pf-v6-c-page__main-section--RowGap: var(--pf-t--global--spacer--lg);
44
44
  --pf-v6-c-page__main-breadcrumb--main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
45
45
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
46
46
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -75,6 +75,7 @@
75
75
  --pf-v6-c-page__main-tabs--PaddingBlockStart: 0;
76
76
  --pf-v6-c-page__main-tabs--PaddingInlineEnd: 0;
77
77
  --pf-v6-c-page__main-tabs--PaddingBlockEnd: 0;
78
+ --pf-v6-c-page__main-tabs--PaddingInlineStart: 0;
78
79
  --pf-v6-c-page__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);
79
80
  --pf-v6-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
80
81
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
@@ -186,21 +187,11 @@
186
187
  flex-grow: 0;
187
188
  }
188
189
 
189
- .pf-v6-c-page__main-nav.pf-m-limit-width,
190
- .pf-v6-c-page__main-breadcrumb.pf-m-limit-width,
191
- .pf-v6-c-page__main-tabs.pf-m-limit-width,
192
- .pf-v6-c-page__main-section.pf-m-limit-width,
193
- .pf-v6-c-page__main-wizard.pf-m-limit-width {
194
- display: flex;
195
- flex-direction: column;
196
- padding: 0;
197
- }
198
190
  .pf-v6-c-page__main-nav.pf-m-limit-width > .pf-v6-c-page__main-body,
199
191
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
200
192
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
201
193
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
202
194
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
203
- flex: 1;
204
195
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
205
196
  }
206
197
  .pf-v6-c-page__main-nav.pf-m-limit-width.pf-m-align-center,
@@ -225,6 +216,8 @@
225
216
  .pf-v6-c-page__main-wizard,
226
217
  .pf-v6-c-page__main-group,
227
218
  .pf-v6-c-page__main-subnav {
219
+ display: flex;
220
+ flex-direction: column;
228
221
  flex-shrink: 0;
229
222
  }
230
223
  .pf-v6-c-page__main-nav.pf-m-overflow-scroll,
@@ -445,6 +438,7 @@
445
438
  .pf-v6-c-page__main-list {
446
439
  display: flex;
447
440
  flex-direction: column;
441
+ flex-grow: 1;
448
442
  }
449
443
 
450
444
  .pf-v6-c-page__main-nav {
@@ -559,10 +553,11 @@
559
553
  }
560
554
 
561
555
  .pf-v6-c-page__main-section {
556
+ gap: var(--pf-v6-c-page__main-section--RowGap);
562
557
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
563
558
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
564
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
565
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
559
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
560
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
566
561
  background-color: var(--pf-v6-c-page__main-section--BackgroundColor);
567
562
  }
568
563
  .pf-v6-c-page__main-section.pf-m-secondary {
@@ -571,8 +566,8 @@
571
566
  .pf-v6-c-page__main-section.pf-m-padding {
572
567
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
573
568
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
574
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
575
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
569
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
570
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
576
571
  }
577
572
  .pf-v6-c-page__main-section.pf-m-padding.pf-m-limit-width {
578
573
  padding: 0;
@@ -580,8 +575,8 @@
580
575
  .pf-v6-c-page__main-section.pf-m-padding.pf-m-limit-width .pf-v6-c-page__main-body {
581
576
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
582
577
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
583
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
584
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
578
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
579
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
585
580
  }
586
581
  .pf-v6-c-page__main-section.pf-m-no-padding, .pf-v6-c-page__main-section.pf-m-no-padding.pf-m-limit-width .pf-v6-c-page__main-body {
587
582
  padding: 0;
@@ -590,8 +585,8 @@
590
585
  .pf-v6-c-page__main-section.pf-m-padding-on-sm {
591
586
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
592
587
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
593
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
594
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
588
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
589
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
595
590
  }
596
591
  .pf-v6-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
597
592
  padding: 0;
@@ -599,8 +594,8 @@
599
594
  .pf-v6-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width .pf-v6-c-page__main-body {
600
595
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
601
596
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
602
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
603
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
597
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
598
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
604
599
  }
605
600
  .pf-v6-c-page__main-section.pf-m-no-padding-on-sm, .pf-v6-c-page__main-section.pf-m-no-padding-on-sm.pf-m-limit-width .pf-v6-c-page__main-body {
606
601
  padding: 0;
@@ -610,8 +605,8 @@
610
605
  .pf-v6-c-page__main-section.pf-m-padding-on-md {
611
606
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
612
607
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
613
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
614
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
608
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
609
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
615
610
  }
616
611
  .pf-v6-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
617
612
  padding: 0;
@@ -619,8 +614,8 @@
619
614
  .pf-v6-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width .pf-v6-c-page__main-body {
620
615
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
621
616
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
622
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
623
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
617
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
618
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
624
619
  }
625
620
  .pf-v6-c-page__main-section.pf-m-no-padding-on-md, .pf-v6-c-page__main-section.pf-m-no-padding-on-md.pf-m-limit-width .pf-v6-c-page__main-body {
626
621
  padding: 0;
@@ -630,8 +625,8 @@
630
625
  .pf-v6-c-page__main-section.pf-m-padding-on-lg {
631
626
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
632
627
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
633
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
634
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
628
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
629
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
635
630
  }
636
631
  .pf-v6-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
637
632
  padding: 0;
@@ -639,8 +634,8 @@
639
634
  .pf-v6-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width .pf-v6-c-page__main-body {
640
635
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
641
636
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
642
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
643
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
637
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
638
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
644
639
  }
645
640
  .pf-v6-c-page__main-section.pf-m-no-padding-on-lg, .pf-v6-c-page__main-section.pf-m-no-padding-on-lg.pf-m-limit-width .pf-v6-c-page__main-body {
646
641
  padding: 0;
@@ -650,8 +645,8 @@
650
645
  .pf-v6-c-page__main-section.pf-m-padding-on-xl {
651
646
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
652
647
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
653
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
654
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
648
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
649
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
655
650
  }
656
651
  .pf-v6-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
657
652
  padding: 0;
@@ -659,8 +654,8 @@
659
654
  .pf-v6-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width .pf-v6-c-page__main-body {
660
655
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
661
656
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
662
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
663
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
657
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
658
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
664
659
  }
665
660
  .pf-v6-c-page__main-section.pf-m-no-padding-on-xl, .pf-v6-c-page__main-section.pf-m-no-padding-on-xl.pf-m-limit-width .pf-v6-c-page__main-body {
666
661
  padding: 0;
@@ -670,8 +665,8 @@
670
665
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl {
671
666
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
672
667
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
673
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
674
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
668
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
669
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
675
670
  }
676
671
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
677
672
  padding: 0;
@@ -679,8 +674,8 @@
679
674
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width .pf-v6-c-page__main-body {
680
675
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
681
676
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
682
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
683
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
677
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
678
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
684
679
  }
685
680
  .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl, .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl.pf-m-limit-width .pf-v6-c-page__main-body {
686
681
  padding: 0;
@@ -706,25 +701,14 @@
706
701
  }
707
702
 
708
703
  .pf-v6-c-page__main-nav .pf-v6-c-page__main-body {
709
- padding-block-start: var(--pf-v6-c-page__main-nav--PaddingBlockStart);
710
704
  padding-inline-start: var(--pf-v6-c-page__main-nav--PaddingInlineStart);
711
705
  padding-inline-end: var(--pf-v6-c-page__main-nav--PaddingInlineEnd);
712
706
  }
713
707
  .pf-v6-c-page__main-breadcrumb .pf-v6-c-page__main-body {
714
- padding-block-start: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockStart);
715
- padding-block-end: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockEnd);
716
- padding-inline-start: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineStart);
717
- padding-inline-end: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineEnd);
718
- }
719
- .pf-v6-c-page__main-section .pf-v6-c-page__main-body {
720
- padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
721
- padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
722
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
723
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
708
+ padding-inline-start: 0;
709
+ padding-inline-end: 0;
724
710
  }
725
711
  .pf-v6-c-page__main-tabs .pf-v6-c-page__main-body {
726
- padding-block-start: var(--pf-v6-c-page__main-tabs--PaddingBlockStart);
727
- padding-block-end: var(--pf-v6-c-page__main-tabs--PaddingBlockEnd);
728
712
  padding-inline-start: var(--pf-v6-c-page__main-tabs--PaddingInlineStart);
729
713
  padding-inline-end: var(--pf-v6-c-page__main-tabs--PaddingInlineEnd);
730
714
  }
package/components/Page/page.scss CHANGED
@@ -64,11 +64,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
64
64
  --#{$page}__main-container--BorderColor: var(--#{$page}__main-container--BackgroundColor); // TODO Border should match the background to blend in - change to be a page outline token
65
65
 
66
66
  // Main section
67
- --#{$page}__main-section--MarginBlockStart: var(--pf-t--global--spacer--md);
68
- --#{$page}__main-section--PaddingBlockStart: var(--pf-t--global--spacer--lg);
69
- --#{$page}__main-section--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section - TODO, see if we can remove the need for this calc(), or possibly move it down to the property definition so a user can theme this without a calc()
70
- --#{$page}__main-section--PaddingBlockEnd: 0;
71
- --#{$page}__main-section--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
67
+ --#{$page}__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
68
+ --#{$page}__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg); // This is the intended spacing - the border of the main section will be subtracted
69
+ --#{$page}__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
70
+ --#{$page}__main-section--PaddingInlineStart: var(--pf-t--global--spacer--lg); // This is the intended spacing - the border of the main section will be subtracted
71
+ --#{$page}__main-section--RowGap: var(--pf-t--global--spacer--lg);
72
72
  --#{$page}__main-breadcrumb--main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
73
73
  --#{$page}__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
74
74
  --#{$page}__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -77,7 +77,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
77
77
 
78
78
  // Limit width
79
79
  --#{$page}--section--m-limit-width--MaxWidth: calc(#{pf-size-prem(2000px)} - var(--#{$page}__sidebar--Width));
80
-
80
+
81
81
  // Sticky
82
82
  --#{$page}--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
83
83
  --#{$page}--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
@@ -117,6 +117,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
117
117
  --#{$page}__main-tabs--PaddingBlockStart: 0;
118
118
  --#{$page}__main-tabs--PaddingInlineEnd: 0;
119
119
  --#{$page}__main-tabs--PaddingBlockEnd: 0;
120
+ --#{$page}__main-tabs--PaddingInlineStart: 0;
120
121
  --#{$page}__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);
121
122
 
122
123
  // Wizard main section
@@ -244,12 +245,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
244
245
  .#{$page}__main-section,
245
246
  .#{$page}__main-wizard {
246
247
  &.pf-m-limit-width {
247
- display: flex;
248
- flex-direction: column;
249
- padding: 0;
250
-
251
248
  > .#{$page}__main-body {
252
- flex: 1;
253
249
  max-width: var(--#{$page}--section--m-limit-width--MaxWidth);
254
250
  }
255
251
 
@@ -270,6 +266,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
270
266
  .#{$page}__main-wizard,
271
267
  .#{$page}__main-group,
272
268
  .#{$page}__main-subnav {
269
+ display: flex;
270
+ flex-direction: column;
273
271
  flex-shrink: 0;
274
272
 
275
273
  &.pf-m-overflow-scroll {
@@ -344,6 +342,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
344
342
  .#{$page}__main-list {
345
343
  display: flex;
346
344
  flex-direction: column;
345
+ flex-grow: 1;
347
346
  }
348
347
 
349
348
  .#{$page}__main-nav {
@@ -428,10 +427,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
428
427
  }
429
428
 
430
429
  .#{$page}__main-section {
430
+ gap: var(--#{$page}__main-section--RowGap);
431
431
  padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
432
432
  padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
433
- padding-inline-start: var(--#{$page}__main-section--PaddingInlineStart);
434
- padding-inline-end: var(--#{$page}__main-section--PaddingInlineEnd);
433
+ padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
434
+ padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
435
435
  background-color: var(--#{$page}__main-section--BackgroundColor);
436
436
 
437
437
  &.pf-m-secondary {
@@ -446,8 +446,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
446
446
  &.pf-m-padding#{$breakpoint-name} {
447
447
  padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
448
448
  padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
449
- padding-inline-start: var(--#{$page}__main-section--PaddingInlineStart);
450
- padding-inline-end: var(--#{$page}__main-section--PaddingInlineEnd);
449
+ padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
450
+ padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
451
451
 
452
452
  &.pf-m-limit-width {
453
453
  padding: 0;
@@ -455,8 +455,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
455
455
  .#{$page}__main-body {
456
456
  padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
457
457
  padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
458
- padding-inline-start: var(--#{$page}__main-section--PaddingInlineStart);
459
- padding-inline-end: var(--#{$page}__main-section--PaddingInlineEnd);
458
+ padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
459
+ padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
460
460
  }
461
461
  }
462
462
  }
@@ -493,28 +493,16 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
493
493
 
494
494
  .#{$page}__main-body {
495
495
  .#{$page}__main-nav & {
496
- padding-block-start: var(--#{$page}__main-nav--PaddingBlockStart);
497
496
  padding-inline-start: var(--#{$page}__main-nav--PaddingInlineStart);
498
497
  padding-inline-end: var(--#{$page}__main-nav--PaddingInlineEnd);
499
498
  }
500
499
 
501
500
  .#{$page}__main-breadcrumb & {
502
- padding-block-start: var(--#{$page}__main-breadcrumb--PaddingBlockStart);
503
- padding-block-end: var(--#{$page}__main-breadcrumb--PaddingBlockEnd);
504
- padding-inline-start: var(--#{$page}__main-breadcrumb--PaddingInlineStart);
505
- padding-inline-end: var(--#{$page}__main-breadcrumb--PaddingInlineEnd);
506
- }
507
-
508
- .#{$page}__main-section & {
509
- padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
510
- padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
511
- padding-inline-start: var(--#{$page}__main-section--PaddingInlineStart);
512
- padding-inline-end: var(--#{$page}__main-section--PaddingInlineEnd);
501
+ padding-inline-start: 0;
502
+ padding-inline-end: 0;
513
503
  }
514
504
 
515
505
  .#{$page}__main-tabs & {
516
- padding-block-start: var(--#{$page}__main-tabs--PaddingBlockStart);
517
- padding-block-end: var(--#{$page}__main-tabs--PaddingBlockEnd);
518
506
  padding-inline-start: var(--#{$page}__main-tabs--PaddingInlineStart);
519
507
  padding-inline-end: var(--#{$page}__main-tabs--PaddingInlineEnd);
520
508
  }
@@ -527,4 +515,3 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
527
515
  flex: 1 0 auto;
528
516
  }
529
517
  }
530
-
package/components/Toolbar/toolbar.css CHANGED
@@ -17,6 +17,7 @@
17
17
  --pf-v6-c-toolbar__content--RowGap: var(--pf-t--global--spacer--sm);
18
18
  --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-t--global--spacer--md);
19
19
  --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-toolbar--PaddingInline);
20
+ --pf-v6-c-toolbar__content--PaddingBlockStart: 0;
20
21
  --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);
21
22
  --pf-v6-c-toolbar__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
22
23
  --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
package/components/Toolbar/toolbar.scss CHANGED
@@ -37,6 +37,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
37
37
  --#{$toolbar}__content--RowGap: var(--pf-t--global--spacer--sm);
38
38
  --#{$toolbar}__content--PaddingBlock: var(--pf-t--global--spacer--md);
39
39
  --#{$toolbar}__content--PaddingInline: var(--#{$toolbar}--PaddingInline);
40
+ --#{$toolbar}__content--PaddingBlockStart: 0;
40
41
 
41
42
  // * Toolbar expandable content
42
43
  --#{$toolbar}__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);