@patternfly/patternfly 6.0.0-alpha.160 → 6.0.0-alpha.162

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 (24) hide show
  1. package/components/Nav/nav.css +1 -0
  2. package/components/Nav/nav.scss +1 -0
  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 +40 -54
  8. package/docs/components/Page/examples/Page.css +5 -9
  9. package/docs/components/Page/examples/Page.md +71 -32
  10. package/docs/demos/Alert/examples/Alert.md +393 -374
  11. package/docs/demos/CardView/examples/CardView.md +717 -708
  12. package/docs/demos/DataList/examples/DataList.md +2574 -2500
  13. package/docs/demos/Drawer/examples/Drawer.md +190 -182
  14. package/docs/demos/JumpLinks/examples/JumpLinks.md +642 -612
  15. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +3608 -3490
  16. package/docs/demos/Skeleton/examples/Skeleton.md +128 -126
  17. package/docs/demos/Table/examples/Table.md +9458 -9105
  18. package/docs/demos/Tabs/examples/Tabs.md +889 -885
  19. package/docs/demos/Toolbar/examples/Toolbar.md +1254 -1147
  20. package/package.json +1 -1
  21. package/patternfly-no-globals.css +40 -54
  22. package/patternfly.css +40 -54
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
package/components/Nav/nav.css CHANGED
@@ -172,6 +172,7 @@
172
172
  line-height: var(--pf-v6-c-nav__link--LineHeight, inherit);
173
173
  color: var(--pf-v6-c-nav__link--Color);
174
174
  text-align: start;
175
+ text-decoration: none;
175
176
  background-color: var(--pf-v6-c-nav__link--BackgroundColor);
176
177
  border: none;
177
178
  border-radius: var(--pf-v6-c-nav__link--BorderRadius);
package/components/Nav/nav.scss CHANGED
@@ -215,6 +215,7 @@
215
215
  line-height: var(--#{$nav}__link--LineHeight, inherit); // default to nav line height if no custom value is set
216
216
  color: var(--#{$nav}__link--Color);
217
217
  text-align: start;
218
+ text-decoration: none;
218
219
  background-color: var(--#{$nav}__link--BackgroundColor);
219
220
  border: none;
220
221
  border-radius: var(--#{$nav}__link--BorderRadius);
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);