@patternfly/patternfly 6.5.0-prerelease.23 → 6.5.0-prerelease.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/components/Compass/compass.css +32 -3
  2. package/components/Compass/compass.scss +33 -3
  3. package/components/_index.css +32 -3
  4. package/docs/components/Compass/examples/Compass.md +15 -2
  5. package/docs/demos/Compass/examples/Compass.md +1020 -688
  6. package/package.json +2 -2
  7. package/patternfly-no-globals.css +32 -3
  8. package/patternfly.css +32 -3
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/Compass/compass.css CHANGED
@@ -6,6 +6,12 @@
6
6
  --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--xl);
7
7
  --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
8
8
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
9
+ --pf-v6-c-compass__nav--PaddingBlockStart: 0;
10
+ --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
11
+ --pf-v6-c-compass__nav--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12
+ --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
13
+ --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
14
+ --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9
15
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
10
16
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
11
17
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
@@ -14,7 +20,10 @@
14
20
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
15
21
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
16
22
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
17
- --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
23
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
24
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
25
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
26
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
18
27
  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
19
28
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
20
29
  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -58,6 +67,10 @@
58
67
  }
59
68
 
60
69
  .pf-v6-c-compass__nav {
70
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
71
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
72
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
73
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
61
74
  display: flex;
62
75
  flex-direction: column;
63
76
  gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -65,8 +78,21 @@
65
78
  justify-self: stretch;
66
79
  }
67
80
 
81
+ .pf-v6-c-compass__nav-content {
82
+ display: flex;
83
+ align-items: center;
84
+ }
85
+
86
+ .pf-v6-c-compass__nav-main {
87
+ padding-inline-start: var(--pf-v6-c-compass__nav-main--PaddingInlineStart);
88
+ padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
89
+ }
90
+
68
91
  .pf-v6-c-compass__sidebar {
69
- --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
92
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
93
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
94
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
95
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
70
96
  }
71
97
  .pf-v6-c-compass__sidebar.pf-m-start {
72
98
  grid-area: sidebar-start;
@@ -120,7 +146,10 @@
120
146
  }
121
147
 
122
148
  .pf-v6-c-compass__panel {
123
- padding: var(--pf-v6-c-compass__panel--Padding);
149
+ padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
150
+ padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
151
+ padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
152
+ padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
124
153
  background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
125
154
  backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
126
155
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
package/components/Compass/compass.scss CHANGED
@@ -8,6 +8,12 @@
8
8
  --#{$compass}--RowGap: var(--pf-t--global--spacer--xl);
9
9
  --#{$compass}--ColumnGap: var(--pf-t--global--spacer--xl);
10
10
  --#{$compass}__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
11
+ --#{$compass}__nav--PaddingBlockStart: 0;
12
+ --#{$compass}__nav--PaddingBlockEnd: 0;
13
+ --#{$compass}__nav--PaddingInlineStart: var(--pf-t--global--spacer--sm);
14
+ --#{$compass}__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
15
+ --#{$compass}__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
16
+ --#{$compass}__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11
17
  --#{$compass}__sidebar--Padding: var(--pf-t--global--spacer--sm);
12
18
  --#{$compass}__main--RowGap: var(--pf-t--global--spacer--md);
13
19
  --#{$compass}__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
@@ -16,7 +22,10 @@
16
22
  --#{$compass}__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
17
23
  --#{$compass}__panel--BorderRadius: var(--pf-t--global--border--radius--large);
18
24
  --#{$compass}__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
19
- --#{$compass}__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
25
+ --#{$compass}__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
26
+ --#{$compass}__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
27
+ --#{$compass}__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
28
+ --#{$compass}__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
20
29
  --#{$compass}__panel--BorderWidth: var(--pf-t--global--border--width--regular);
21
30
  --#{$compass}__panel--BorderColor: var(--pf-t--global--border--color--alt);
22
31
  --#{$compass}__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -70,6 +79,11 @@
70
79
  }
71
80
 
72
81
  .#{$compass}__nav {
82
+ --#{$compass}__panel--PaddingBlockStart: var(--#{$compass}__nav--PaddingBlockStart);
83
+ --#{$compass}__panel--PaddingBlockEnd: var(--#{$compass}__nav--PaddingBlockEnd);
84
+ --#{$compass}__panel--PaddingInlineStart: var(--#{$compass}__nav--PaddingInlineStart);
85
+ --#{$compass}__panel--PaddingInlineEnd: var(--#{$compass}__nav--PaddingInlineEnd);
86
+
73
87
  display: flex;
74
88
  flex-direction: column;
75
89
  gap: var(--#{$compass}__nav--RowGap);
@@ -77,8 +91,21 @@
77
91
  justify-self: stretch;
78
92
  }
79
93
 
94
+ .#{$compass}__nav-content {
95
+ display: flex;
96
+ align-items: center;
97
+ }
98
+
99
+ .#{$compass}__nav-main {
100
+ padding-inline-start: var(--#{$compass}__nav-main--PaddingInlineStart);
101
+ padding-inline-end: var(--#{$compass}__nav-main--PaddingInlineEnd);
102
+ }
103
+
80
104
  .#{$compass}__sidebar {
81
- --#{$compass}__panel--Padding: var(--#{$compass}__sidebar--Padding);
105
+ --#{$compass}__panel--PaddingBlockStart: var(--#{$compass}__sidebar--PaddingBlockStart);
106
+ --#{$compass}__panel--PaddingBlockEnd: var(--#{$compass}__sidebar--PaddingBlockEnd);
107
+ --#{$compass}__panel--PaddingInlineStart: var(--#{$compass}__sidebar--PaddingInlineStart);
108
+ --#{$compass}__panel--PaddingInlineEnd: var(--#{$compass}__sidebar--PaddingInlineEnd);
82
109
 
83
110
  &.pf-m-start {
84
111
  grid-area: sidebar-start;
@@ -142,7 +169,10 @@
142
169
  }
143
170
 
144
171
  .#{$compass}__panel {
145
- padding: var(--#{$compass}__panel--Padding);
172
+ padding-block-start: var(--#{$compass}__panel--PaddingBlockStart);
173
+ padding-block-end: var(--#{$compass}__panel--PaddingBlockEnd);
174
+ padding-inline-start: var(--#{$compass}__panel--PaddingInlineStart);
175
+ padding-inline-end: var(--#{$compass}__panel--PaddingInlineEnd);
146
176
  background-color: var(--#{$compass}__panel--BackgroundColor);
147
177
  backdrop-filter: var(--#{$compass}__panel--BackdropFilter);
148
178
  border: var(--#{$compass}__panel--BorderWidth) solid var(--#{$compass}__panel--BorderColor);
package/components/_index.css CHANGED
@@ -3515,6 +3515,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3515
3515
  --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--xl);
3516
3516
  --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
3517
3517
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
3518
+ --pf-v6-c-compass__nav--PaddingBlockStart: 0;
3519
+ --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
3520
+ --pf-v6-c-compass__nav--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3521
+ --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3522
+ --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
3523
+ --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
3518
3524
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
3519
3525
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
3520
3526
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
@@ -3523,7 +3529,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3523
3529
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
3524
3530
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3525
3531
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
3526
- --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
3532
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
3533
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
3534
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
3535
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
3527
3536
  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
3528
3537
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
3529
3538
  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3567,6 +3576,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3567
3576
  }
3568
3577
 
3569
3578
  .pf-v6-c-compass__nav {
3579
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
3580
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
3581
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
3582
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
3570
3583
  display: flex;
3571
3584
  flex-direction: column;
3572
3585
  gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -3574,8 +3587,21 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3574
3587
  justify-self: stretch;
3575
3588
  }
3576
3589
 
3590
+ .pf-v6-c-compass__nav-content {
3591
+ display: flex;
3592
+ align-items: center;
3593
+ }
3594
+
3595
+ .pf-v6-c-compass__nav-main {
3596
+ padding-inline-start: var(--pf-v6-c-compass__nav-main--PaddingInlineStart);
3597
+ padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
3598
+ }
3599
+
3577
3600
  .pf-v6-c-compass__sidebar {
3578
- --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
3601
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
3602
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
3603
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
3604
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
3579
3605
  }
3580
3606
  .pf-v6-c-compass__sidebar.pf-m-start {
3581
3607
  grid-area: sidebar-start;
@@ -3629,7 +3655,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3629
3655
  }
3630
3656
 
3631
3657
  .pf-v6-c-compass__panel {
3632
- padding: var(--pf-v6-c-compass__panel--Padding);
3658
+ padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
3659
+ padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
3660
+ padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
3661
+ padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
3633
3662
  background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
3634
3663
  backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
3635
3664
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
package/docs/components/Compass/examples/Compass.md CHANGED
@@ -15,8 +15,17 @@ cssPrefix: pf-v6-c-compass
15
15
  <div class="pf-v6-c-compass__header">
16
16
  <div class="pf-v6-c-compass__logo">logo</div>
17
17
 
18
- <div class="pf-v6-c-compass__nav">nav</div>
18
+ <div class="pf-v6-c-compass__nav">
19
+ <div class="pf-v6-c-compass__panel">
20
+ <div class="pf-v6-c-compass__nav-content">
21
+ <div class="pf-v6-c-compass__nav-home">home</div>
22
+
23
+ <div class="pf-v6-c-compass__nav-main">main</div>
19
24
 
25
+ <div class="pf-v6-c-compass__nav-search">search</div>
26
+ </div>
27
+ </div>
28
+ </div>
20
29
  <div class="pf-v6-c-compass__profile">profile</div>
21
30
  </div>
22
31
  <div class="pf-v6-c-compass__sidebar pf-m-start">sidebar (start)</div>
@@ -60,7 +69,11 @@ cssPrefix: pf-v6-c-compass
60
69
  | `.pf-v6-c-compass__main-header-toolbar` | `<div>` | Initiates a toolbar of actions within the compass main header content. |
61
70
  | `.pf-v6-c-compass__content` | `<div>` | Initiates the compass content. **Required** |
62
71
  | `.pf-v6-c-compass__panel` | `<div>` | Initiates a compass panel. |
63
- | `.pf-v6-c-compass__hero` | `<div>` | Initiates a compass hero. |
72
+ | `.pf-v6-c-compass__nav` | `<div>` | Initiates a compass container for site navigation. |
73
+ | `.pf-v6-c-compass__nav-content` | `<div>` | Initiates a compass container for navigation content. |
74
+ | `.pf-v6-c-compass__nav-home` | `<div>` | Initiates a container for compass home button. |
75
+ | `.pf-v6-c-compass__nav-main` | `<div>` | Initiates a container for compass navigation main content. |
76
+ | `.pf-v6-c-compass__nav-search` | `<div>` | Initiates a container for compass search button. |
64
77
  | `.pf-v6-c-compass__footer` | `<div>` | Initiates the compass footer. **Required** |
65
78
  | `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the compass message bar. |
66
79
  | `.pf-m-no-glass` | `.pf-v6-c-compass`, `.pf-v6-c-compass__panel` | Modifies all elements or individual panels to remove the glass styles. |