@patternfly/patternfly 6.5.0-prerelease.77 → 6.5.0-prerelease.79

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 (32) hide show
  1. package/README.md +1 -1
  2. package/components/Button/button.css +10 -4
  3. package/components/Button/button.scss +7 -1
  4. package/components/Compass/compass.css +147 -3
  5. package/components/Compass/compass.scss +142 -3
  6. package/components/Masthead/masthead.css +3 -3
  7. package/components/Masthead/masthead.scss +1 -1
  8. package/components/MenuToggle/menu-toggle.css +3 -3
  9. package/components/MenuToggle/menu-toggle.scss +1 -1
  10. package/components/Nav/nav.css +2 -2
  11. package/components/Nav/nav.scss +1 -1
  12. package/components/Page/page.css +12 -8
  13. package/components/Page/page.scss +6 -1
  14. package/components/Pagination/pagination.css +56 -4
  15. package/components/Pagination/pagination.scss +66 -5
  16. package/components/_index.css +233 -27
  17. package/docs/components/Compass/examples/Compass.css +2 -11
  18. package/docs/components/Compass/examples/Compass.md +8 -1
  19. package/docs/components/Nav/examples/Navigation.md +105 -9
  20. package/docs/components/Pagination/examples/Pagination.md +495 -3
  21. package/docs/demos/CardView/examples/CardView.md +1 -1
  22. package/docs/demos/Compass/examples/Compass.md +2108 -267
  23. package/docs/demos/DataList/examples/DataList.md +1 -1
  24. package/docs/demos/Nav/examples/Nav.md +272 -90
  25. package/docs/demos/Table/examples/Table.md +1 -1
  26. package/docs/demos/Toolbar/examples/Toolbar.md +7 -7
  27. package/package.json +1 -1
  28. package/patternfly-no-globals.css +233 -27
  29. package/patternfly.css +233 -27
  30. package/patternfly.min.css +1 -1
  31. package/patternfly.min.css.map +1 -1
  32. package/sass-utilities/mixins.scss +2 -2
package/components/Pagination/pagination.css CHANGED
@@ -17,7 +17,7 @@
17
17
  --pf-v6-c-pagination__total-items--Display: block;
18
18
  --pf-v6-c-pagination--m-display-summary__total-items--Display: block;
19
19
  --pf-v6-c-pagination--m-display-full__total-items--Display: none;
20
- --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
20
+ --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
21
21
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
22
22
  --pf-v6-c-pagination--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
23
23
  --pf-v6-c-pagination--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -26,6 +26,12 @@
26
26
  --pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
27
27
  --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
28
28
  --pf-v6-c-pagination--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
29
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: 0;
30
+ --pf-v6-c-pagination--m-sticky-base--BorderRadius: 0;
31
+ --pf-v6-c-pagination--m-sticky-base--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
32
+ --pf-v6-c-pagination--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
33
+ --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
34
+ --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
29
35
  --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
30
36
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
31
37
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -40,6 +46,15 @@
40
46
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
41
47
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
42
48
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
49
+ --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
50
+ }
51
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
52
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: var(--pf-t--global--spacer--sm);
53
+ --pf-v6-c-pagination--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
54
+ --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
55
+ --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: var(--pf-t--global--spacer--sm);
56
+ }
57
+ .pf-v6-c-pagination {
43
58
  --pf-v6-c-pagination__page-menu--Display--base: block;
44
59
  --pf-v6-c-pagination__page-menu--Display: none;
45
60
  --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
@@ -74,6 +89,9 @@
74
89
  border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
75
90
  border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
76
91
  }
92
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-pagination.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination:not(.pf-m-no-plain-on-glass) {
93
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
94
+ }
77
95
  .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
78
96
  display: var(--pf-v6-c-pagination__page-menu--Display);
79
97
  }
@@ -91,6 +109,9 @@
91
109
  background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
92
110
  box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
93
111
  }
112
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination.pf-m-bottom.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
113
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
114
+ }
94
115
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
95
116
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
96
117
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
@@ -145,15 +166,46 @@
145
166
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
146
167
  --pf-v6-c-pagination--BorderBlockEndWidth: var(--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth);
147
168
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
148
- position: sticky;
149
169
  inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
170
+ background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
171
+ box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
172
+ }
173
+ .pf-v6-c-pagination.pf-m-sticky, .pf-v6-c-pagination.pf-m-sticky-base {
174
+ position: sticky;
150
175
  z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
151
176
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart);
152
177
  padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd);
153
178
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
154
179
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
155
- background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
156
- box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
180
+ }
181
+ .pf-v6-c-pagination.pf-m-sticky-base {
182
+ inset-block-start: var(--pf-v6-c-pagination--m-sticky-base--InsetBlockStart);
183
+ border-radius: var(--pf-v6-c-pagination--m-sticky-base--BorderRadius, 0);
184
+ }
185
+ .pf-v6-c-pagination.pf-m-sticky-base.pf-m-bottom {
186
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: 0;
187
+ --pf-v6-c-pagination--m-bottom--InsetBlockEnd: var(--pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd);
188
+ }
189
+ .pf-v6-c-pagination.pf-m-sticky-base::before {
190
+ position: absolute;
191
+ inset: 0;
192
+ z-index: -1;
193
+ content: "";
194
+ background-color: var(--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor);
195
+ border-radius: var(--pf-v6-c-pagination--m-sticky-stuck--BorderRadius);
196
+ box-shadow: var(--pf-v6-c-pagination--m-sticky-stuck--BoxShadow);
197
+ opacity: 0;
198
+ transition-timing-function: var(--pf-v6-c-pagination--m-sticky-base--TransitionTimingFunction);
199
+ transition-duration: var(--pf-v6-c-pagination--m-sticky-base--TransitionDuration);
200
+ transition-property: opacity;
201
+ }
202
+ .pf-v6-c-pagination.pf-m-sticky-stuck {
203
+ --pf-v6-c-pagination--m-sticky-base--BoxShadow: var(--pf-v6-c-pagination--m-sticky-stuck--BoxShadow);
204
+ --pf-v6-c-pagination--m-sticky-base--BorderRadius: var(--pf-v6-c-pagination--m-sticky-stuck--BorderRadius);
205
+ --pf-v6-c-pagination--m-sticky-base--BackgroundColor: var(--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor);
206
+ }
207
+ .pf-v6-c-pagination.pf-m-sticky-stuck::before {
208
+ opacity: 1;
157
209
  }
158
210
  .pf-v6-c-pagination.pf-m-page-insets {
159
211
  --pf-v6-c-pagination--inset: var(--pf-v6-c-pagination--m-page-insets--inset);
package/components/Pagination/pagination.scss CHANGED
@@ -32,7 +32,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
32
32
  --#{$pagination}--m-display-full__total-items--Display: none;
33
33
 
34
34
  // top
35
- --#{$pagination}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
35
+ --#{$pagination}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
36
36
  --#{$pagination}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
37
37
  --#{$pagination}--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
38
38
  --#{$pagination}--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -41,6 +41,12 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
41
41
  --#{$pagination}--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
42
42
  --#{$pagination}--m-sticky--InsetBlockStart: 0;
43
43
  --#{$pagination}--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
44
+ --#{$pagination}--m-sticky-base--InsetBlockStart: 0;
45
+ --#{$pagination}--m-sticky-base--BorderRadius: 0;
46
+ --#{$pagination}--m-sticky-base--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
47
+ --#{$pagination}--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
48
+ --#{$pagination}--m-sticky-stuck--BoxShadow: var(--#{$pagination}--m-sticky--BoxShadow);
49
+ --#{$pagination}--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
44
50
 
45
51
  // bottom
46
52
  --#{$pagination}--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
@@ -57,6 +63,14 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
57
63
  --#{$pagination}--m-bottom--m-static--PaddingBlockEnd: 0;
58
64
  --#{$pagination}--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
59
65
  --#{$pagination}--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
66
+ --#{$pagination}--m-bottom--m-sticky-base--InsetBlockEnd: 0;
67
+
68
+ :where(:root.pf-v6-theme-glass) & {
69
+ --#{$pagination}--m-sticky-base--InsetBlockStart: var(--pf-t--global--spacer--sm);
70
+ --#{$pagination}--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
71
+ --#{$pagination}--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
72
+ --#{$pagination}--m-bottom--m-sticky-base--InsetBlockEnd: var(--pf-t--global--spacer--sm);
73
+ }
60
74
 
61
75
  // page menu
62
76
  --#{$pagination}__page-menu--Display--base: block;
@@ -91,6 +105,11 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
91
105
  border-block-start-width: var(--#{$pagination}--BorderBlockStartWidth);
92
106
  border-block-end-width: var(--#{$pagination}--BorderBlockEndWidth);
93
107
 
108
+ :where(:root:not(.pf-v6-theme-glass)) &.pf-m-plain,
109
+ :where(:root.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass) {
110
+ --#{$pagination}--m-bottom--BackgroundColor: transparent;
111
+ }
112
+
94
113
  .#{$pagination}__page-menu {
95
114
  display: var(--#{$pagination}__page-menu--Display);
96
115
  }
@@ -110,6 +129,10 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
110
129
  background-color: var(--#{$pagination}--m-bottom--BackgroundColor);
111
130
  box-shadow: var(--#{$pagination}--m-bottom--BoxShadow);
112
131
 
132
+ :where(:root.pf-v6-theme-glass) &.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
133
+ --#{$pagination}--m-bottom--BackgroundColor: transparent;
134
+ }
135
+
113
136
  .#{$pagination}__nav-control.pf-m-first,
114
137
  .#{$pagination}__nav-control.pf-m-last,
115
138
  .#{$pagination}__nav-page-select {
@@ -168,21 +191,59 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
168
191
  border: 0;
169
192
  box-shadow: none;
170
193
  }
171
-
194
+
172
195
  &.pf-m-sticky {
173
196
  --#{$pagination}--m-bottom--InsetBlockEnd: 0;
174
197
  --#{$pagination}--BorderBlockEndWidth: var(--#{$pagination}--m-sticky--BorderBlockEndWidth);
175
198
  --#{$pagination}--m-bottom--BorderBlockStartWidth: var(--#{$pagination}--m-bottom--m-sticky--BorderBlockStartWidth);
176
199
 
177
- position: sticky;
178
200
  inset-block-start: var(--#{$pagination}--m-sticky--InsetBlockStart);
201
+ background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
202
+ box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
203
+ }
204
+
205
+ &.pf-m-sticky,
206
+ &.pf-m-sticky-base {
207
+ position: sticky;
179
208
  z-index: var(--#{$pagination}--m-sticky--ZIndex);
180
209
  padding-block-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockStart);
181
210
  padding-block-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockEnd);
182
211
  padding-inline-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineStart);
183
212
  padding-inline-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd);
184
- background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
185
- box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
213
+ }
214
+
215
+ &.pf-m-sticky-base {
216
+ inset-block-start: var(--#{$pagination}--m-sticky-base--InsetBlockStart);
217
+ border-radius: var(--#{$pagination}--m-sticky-base--BorderRadius, 0);
218
+
219
+ &.pf-m-bottom {
220
+ --#{$pagination}--m-sticky-base--InsetBlockStart: 0;
221
+ --#{$pagination}--m-bottom--InsetBlockEnd: var(--#{$pagination}--m-bottom--m-sticky-base--InsetBlockEnd);
222
+ }
223
+
224
+ &::before {
225
+ position: absolute;
226
+ inset: 0;
227
+ z-index: -1;
228
+ content: "";
229
+ background-color: var(--#{$pagination}--m-sticky-stuck--BackgroundColor);
230
+ border-radius: var(--#{$pagination}--m-sticky-stuck--BorderRadius);
231
+ box-shadow: var(--#{$pagination}--m-sticky-stuck--BoxShadow);
232
+ opacity: 0;
233
+ transition-timing-function: var(--#{$pagination}--m-sticky-base--TransitionTimingFunction);
234
+ transition-duration: var(--#{$pagination}--m-sticky-base--TransitionDuration);
235
+ transition-property: opacity;
236
+ }
237
+ }
238
+
239
+ &.pf-m-sticky-stuck {
240
+ --#{$pagination}--m-sticky-base--BoxShadow: var(--#{$pagination}--m-sticky-stuck--BoxShadow);
241
+ --#{$pagination}--m-sticky-base--BorderRadius: var(--#{$pagination}--m-sticky-stuck--BorderRadius);
242
+ --#{$pagination}--m-sticky-base--BackgroundColor: var(--#{$pagination}--m-sticky-stuck--BackgroundColor);
243
+
244
+ &::before {
245
+ opacity: 1;
246
+ }
186
247
  }
187
248
 
188
249
  &.pf-m-page-insets {