@patternfly/patternfly 6.0.0-alpha.30 → 6.0.0-alpha.32

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 (19) hide show
  1. package/components/HelperText/helper-text.css +28 -34
  2. package/components/HelperText/helper-text.scss +30 -40
  3. package/components/Pagination/pagination.css +61 -121
  4. package/components/Pagination/pagination.scss +48 -127
  5. package/docs/components/Pagination/examples/Pagination.md +663 -637
  6. package/docs/components/Toolbar/examples/Toolbar.md +102 -100
  7. package/docs/demos/CardView/examples/CardView.md +102 -98
  8. package/docs/demos/DataList/examples/DataList.md +408 -392
  9. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +319 -299
  10. package/docs/demos/Table/examples/Table.md +1239 -1193
  11. package/docs/demos/Toolbar/examples/Toolbar.md +408 -392
  12. package/package.json +1 -1
  13. package/patternfly-no-globals.css +89 -163
  14. package/patternfly-theme-dark-unversioned.css +89 -163
  15. package/patternfly.css +89 -163
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
  18. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  19. package/components/Pagination/themes/dark/pagination.scss +0 -7
package/components/Pagination/pagination.scss CHANGED
@@ -2,49 +2,24 @@
2
2
  $pf-v5-c-pagination--breakpoint-map: build-breakpoint-map();
3
3
  $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
4
4
 
5
- .#{$pagination} {
5
+ :root {
6
6
  --#{$pagination}--inset: 0;
7
- --#{$pagination}--PaddingRight: var(--#{$pagination}--inset);
8
- --#{$pagination}--PaddingLeft: var(--#{$pagination}--inset);
9
-
7
+ --#{$pagination}--ColumnGap: var(--pf-t--global--spacer--lg);
8
+
10
9
  // Page insets
11
- --#{$pagination}--m-page-insets--inset: var(--#{$pf-global}--spacer--md);
12
- --#{$pagination}--m-page-insets--xl--inset: var(--#{$pf-global}--spacer--lg);
13
-
14
- // children
15
- --#{$pagination}--child--MarginRight: var(--#{$pf-global}--spacer--lg);
16
- --#{$pagination}--m-bottom--child--MarginRight: 0;
17
- --#{$pagination}--m-bottom--child--md--MarginRight: var(--#{$pf-global}--spacer--lg);
18
- --#{$pagination}--m-compact--child--MarginRight: var(--#{$pf-global}--spacer--sm);
19
-
20
- // dropdown
21
- --#{$pagination}--c-menu-toggle--FontSize: var(--#{$pf-global}--FontSize--sm);
22
-
10
+ --#{$pagination}--m-page-insets--inset: var(--pf-t--global--spacer--md);
11
+ --#{$pagination}--m-page-insets--xl--inset: var(--pf-t--global--spacer--lg);
12
+
23
13
  // nav
24
14
  --#{$pagination}__nav--Display: none;
25
15
  --#{$pagination}--m-display-summary__nav--Display: none;
26
16
  --#{$pagination}--m-display-full__nav--Display: inline-flex;
27
-
28
- // nav control
29
- --#{$pagination}__nav-control--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
30
- --#{$pagination}__nav-control--c-button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
31
- --#{$pagination}__nav-control--c-button--FontSize: var(--#{$pf-global}--FontSize--md);
32
- --#{$pagination}--m-bottom__nav-control--c-button--OutlineOffset: calc(var(--#{$pf-global}--spacer--xs) * -1);
33
- --#{$pagination}--m-bottom__nav-control--c-button--PaddingTop: var(--#{$pf-global}--spacer--md);
34
- --#{$pagination}--m-bottom__nav-control--c-button--PaddingBottom: var(--#{$pf-global}--spacer--md);
35
- --#{$pagination}--m-bottom__nav-control--c-button--PaddingRight: var(--#{$pf-global}--spacer--md);
36
- --#{$pagination}--m-bottom__nav-control--c-button--md--PaddingTop: var(--#{$pf-global}--spacer--form-element);
37
- --#{$pagination}--m-bottom__nav-control--c-button--md--PaddingRight: var(--#{$pf-global}--spacer--sm);
38
- --#{$pagination}--m-bottom__nav-control--c-button--md--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
39
- --#{$pagination}--m-bottom__nav-control--c-button--md--PaddingLeft: var(--#{$pf-global}--spacer--sm);
40
- --#{$pagination}--m-compact__nav-control--nav-control--MarginLeft: var(--#{$pf-global}--spacer--md);
17
+ --#{$pagination}__nav--ColumnGap: var(--pf-t--global--spacer--sm);
41
18
 
42
19
  // nav page select
43
- --#{$pagination}__nav-page-select--FontSize: var(--#{$pf-global}--FontSize--sm);
44
- --#{$pagination}__nav-page-select--PaddingLeft: var(--#{$pf-global}--spacer--md);
45
- --#{$pagination}__nav-page-select--PaddingRight: var(--#{$pf-global}--spacer--md);
46
- --#{$pagination}__nav-page-select--child--MarginRight: var(--#{$pf-global}--spacer--xs);
47
- --#{$pagination}__nav-page-select--c-form-control--width-base: calc(var(--#{$pf-global}--spacer--sm) * 2 + var(--#{$pf-global}--BorderWidth--sm) * 2);
20
+ --#{$pagination}__nav-page-select--FontSize: var(--pf-t--global--font--size--body--md);
21
+ --#{$pagination}__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
22
+ --#{$pagination}__nav-page-select--c-form-control--width-base: calc(var(--pf-t--global--spacer--sm) * 2 + var(--pf-t--global--border--width--100) * 2); // TODO: replace border width token with semantic token
48
23
  --#{$pagination}__nav-page-select--c-form-control--width-chars: 2;
49
24
  --#{$pagination}__nav-page-select--c-form-control--Width: calc(var(--#{$pagination}__nav-page-select--c-form-control--width-base) + (var(--#{$pagination}__nav-page-select--c-form-control--width-chars) * 1ch));
50
25
 
@@ -54,89 +29,69 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
54
29
  --#{$pagination}--m-display-full__total-items--Display: none;
55
30
 
56
31
  // top
57
- --#{$pagination}--m-sticky--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
58
- --#{$pagination}--m-sticky--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-bottom);
59
- --#{$pagination}--m-sticky--md--PaddingTop: var(--#{$pf-global}--spacer--md);
60
- --#{$pagination}--m-sticky--md--PaddingRight: var(--#{$pf-global}--spacer--md);
61
- --#{$pagination}--m-sticky--md--PaddingBottom: var(--#{$pf-global}--spacer--md);
62
- --#{$pagination}--m-sticky--md--PaddingLeft: var(--#{$pf-global}--spacer--md);
63
- --#{$pagination}--m-sticky--ZIndex: var(--#{$pf-global}--ZIndex--xs);
32
+ --#{$pagination}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
33
+ --#{$pagination}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
34
+ --#{$pagination}--m-sticky--PaddingTop: var(--pf-t--global--spacer--md);
35
+ --#{$pagination}--m-sticky--PaddingRight: var(--pf-t--global--spacer--lg);
36
+ --#{$pagination}--m-sticky--PaddingBottom: var(--pf-t--global--spacer--md);
37
+ --#{$pagination}--m-sticky--PaddingLeft: var(--pf-t--global--spacer--lg);
38
+ --#{$pagination}--m-sticky--ZIndex: 100; // TODO: replace with z-index token
64
39
  --#{$pagination}--m-sticky--Top: 0;
65
40
 
66
41
  // bottom
67
- --#{$pagination}--m-bottom--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
68
- --#{$pagination}--m-bottom--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top);
42
+ --#{$pagination}--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
43
+ --#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
69
44
  --#{$pagination}--m-bottom--Bottom: 0;
70
- --#{$pagination}--m-bottom--md--PaddingTop: var(--#{$pf-global}--spacer--md);
71
- --#{$pagination}--m-bottom--md--PaddingRight: var(--#{$pf-global}--spacer--md);
72
- --#{$pagination}--m-bottom--md--PaddingBottom: var(--#{$pf-global}--spacer--md);
73
- --#{$pagination}--m-bottom--md--PaddingLeft: var(--#{$pf-global}--spacer--md);
74
- --#{$pagination}--m-bottom--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
75
- --#{$pagination}--m-bottom--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
76
- --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top);
45
+ --#{$pagination}--m-bottom--PaddingRight: var(--pf-t--global--spacer--lg);
46
+ --#{$pagination}--m-bottom--PaddingLeft: var(--pf-t--global--spacer--lg);
47
+ --#{$pagination}--m-bottom--md--PaddingTop: var(--pf-t--global--spacer--md);
48
+ --#{$pagination}--m-bottom--md--PaddingBottom: var(--pf-t--global--spacer--md);
49
+ --#{$pagination}--m-bottom--xl--PaddingRight: var(--pf-t--global--spacer--lg);
50
+ --#{$pagination}--m-bottom--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
51
+ --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
77
52
 
78
53
  // options menu
79
- --#{$pagination}--c-menu-toggle--Display: none;
80
- --#{$pagination}--m-display-summary--c-menu-toggle--Display: none;
81
- --#{$pagination}--m-display-full--c-menu-toggle--Display: inline-flex;
54
+ --#{$pagination}__page-menu--Display: none;
55
+ --#{$pagination}--m-display-summary__page-menu--Display: none;
56
+ --#{$pagination}--m-display-full__page-menu--Display: inline-flex;
82
57
 
83
58
  @media screen and (min-width: $pf-v5-global--breakpoint--md) {
84
- --#{$pagination}--m-bottom__nav-control--c-button--PaddingTop: var(--#{$pagination}--m-bottom__nav-control--c-button--md--PaddingTop);
85
- --#{$pagination}--m-bottom__nav-control--c-button--PaddingRight: var(--#{$pagination}--m-bottom__nav-control--c-button--md--PaddingRight);
86
- --#{$pagination}--m-bottom__nav-control--c-button--PaddingBottom: var(--#{$pagination}--m-bottom__nav-control--c-button--md--PaddingBottom);
87
- --#{$pagination}--m-bottom__nav-control--c-button--PaddingLeft: var(--#{$pagination}--m-bottom__nav-control--c-button--md--PaddingLeft);
88
- --#{$pagination}--m-bottom--child--MarginRight: var(--#{$pagination}--m-bottom--child--md--MarginRight);
89
- --#{$pagination}--m-bottom__nav-control--c-button--OutlineOffset: 0;
90
59
  --#{$pagination}--m-bottom--BoxShadow: none;
91
- --#{$pagination}--c-menu-toggle--Display: inline-flex;
60
+ --#{$pagination}__page-menu--Display: inline-flex;
92
61
  --#{$pagination}__nav--Display: inline-flex;
93
62
  --#{$pagination}__total-items--Display: none;
94
63
  }
95
64
 
96
65
  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
97
- --#{$pagination}--m-bottom--md--PaddingRight: var(--#{$pagination}--m-bottom--xl--PaddingRight);
98
- --#{$pagination}--m-bottom--md--PaddingLeft: var(--#{$pagination}--m-bottom--xl--PaddingLeft);
66
+ --#{$pagination}--m-bottom--PaddingRight: var(--#{$pagination}--m-bottom--xl--PaddingRight);
67
+ --#{$pagination}--m-bottom--PaddingLeft: var(--#{$pagination}--m-bottom--xl--PaddingLeft);
99
68
  --#{$pagination}__scroll-button--Width: var(--#{$pagination}__scroll-button--xl--Width);
100
69
  --#{$pagination}--m-page-insets--inset: var(--#{$pagination}--m-page-insets--xl--inset);
101
70
  }
71
+ }
102
72
 
73
+ .#{$pagination} {
103
74
  display: flex;
104
75
  flex-wrap: wrap;
76
+ column-gap: var(--#{$pagination}--ColumnGap);
105
77
  align-items: center;
106
78
  justify-content: flex-end;
107
- padding-inline-start: var(--#{$pagination}--PaddingLeft);
108
- padding-inline-end: var(--#{$pagination}--PaddingRight);
109
-
110
- // stylelint-disable selector-not-notation
111
- // update to single :not() in breaking change
112
- > *:not(:last-child):not(.#{$pagination}__total-items) {
113
- margin-inline-end: var(--#{$pagination}--child--MarginRight);
114
- }
79
+ padding-inline-start: var(--#{$pagination}--inset);
80
+ padding-inline-end: var(--#{$pagination}--inset);
115
81
 
116
- .#{$menu-toggle} {
117
- display: var(--#{$pagination}--c-menu-toggle--Display);
118
- font-size: var(--#{$pagination}--c-menu-toggle--FontSize);
82
+ .#{$pagination}__page-menu {
83
+ display: var(--#{$pagination}__page-menu--Display);
119
84
  }
120
85
 
121
86
  &.pf-m-bottom {
122
- --#{$pagination}--child--MarginRight: var(--#{$pagination}--m-bottom--child--MarginRight);
123
- --#{$pagination}__nav-control--c-button--PaddingRight: var(--#{$pagination}--m-bottom__nav-control--c-button--PaddingRight);
124
- --#{$pagination}__nav-control--c-button--PaddingLeft: var(--#{$pagination}--m-bottom__nav-control--c-button--PaddingRight);
125
87
  --#{$pagination}--m-sticky--BoxShadow: var(--#{$pagination}--m-bottom--m-sticky--BoxShadow);
126
88
  --#{$pagination}--m-sticky--Top: auto;
127
89
 
128
- .#{$pagination}__nav-control {
129
- .#{$button} {
130
- --#{$button}--PaddingTop: var(--#{$pagination}--m-bottom__nav-control--c-button--PaddingTop);
131
- --#{$button}--PaddingBottom: var(--#{$pagination}--m-bottom__nav-control--c-button--PaddingBottom);
132
-
133
- outline-offset: var(--#{$pagination}--m-bottom__nav-control--c-button--OutlineOffset);
134
- }
135
- }
136
-
137
90
  position: sticky;
138
- inset-block-end: var(--#{$pagination}--m-bottom--Bottom);
91
+ inset-block-end: var(--#{$pagination}--m-bottom--Bottom);
139
92
  justify-content: center;
93
+ padding-inline-start: var(--#{$pagination}--m-bottom--PaddingLeft);
94
+ padding-inline-end: var(--#{$pagination}--m-bottom--PaddingRight);
140
95
  background-color: var(--#{$pagination}--m-bottom--BackgroundColor);
141
96
  box-shadow: var(--#{$pagination}--m-bottom--BoxShadow);
142
97
 
@@ -154,7 +109,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
154
109
  display: none;
155
110
  }
156
111
 
157
- .#{$menu-toggle} {
112
+ .#{$pagination}__page-menu {
158
113
  position: absolute;
159
114
  display: block;
160
115
  }
@@ -174,8 +129,6 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
174
129
  justify-content: flex-end;
175
130
  padding-block-start: var(--#{$pagination}--m-bottom--md--PaddingTop);
176
131
  padding-block-end: var(--#{$pagination}--m-bottom--md--PaddingBottom);
177
- padding-inline-start: var(--#{$pagination}--m-bottom--md--PaddingLeft);
178
- padding-inline-end: var(--#{$pagination}--m-bottom--md--PaddingRight);
179
132
 
180
133
  .#{$pagination}__nav-control.pf-m-first,
181
134
  .#{$pagination}__nav-control.pf-m-last,
@@ -187,7 +140,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
187
140
  display: inline-flex;
188
141
  }
189
142
 
190
- .#{$menu-toggle} {
143
+ .#{$pagination}__page-menu {
191
144
  position: relative;
192
145
  }
193
146
 
@@ -210,17 +163,6 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
210
163
  padding-inline-end: var(--#{$pagination}--m-sticky--PaddingRight);
211
164
  background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
212
165
  box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
213
-
214
- @media screen and (min-width: $pf-v5-global--breakpoint--md) {
215
- padding-block-start: var(--#{$pagination}--m-sticky--md--PaddingTop);
216
- padding-block-end: var(--#{$pagination}--m-sticky--md--PaddingBottom);
217
- padding-inline-start: var(--#{$pagination}--m-sticky--md--PaddingLeft);
218
- padding-inline-end: var(--#{$pagination}--m-sticky--md--PaddingRight);
219
- }
220
- }
221
-
222
- &.pf-m-compact {
223
- --#{$pagination}--child--MarginRight: var(--#{$pagination}--m-compact--child--MarginRight);
224
166
  }
225
167
 
226
168
  &.pf-m-page-insets {
@@ -232,38 +174,24 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
232
174
  // nav
233
175
  .#{$pagination}__nav {
234
176
  display: var(--#{$pagination}__nav--Display);
177
+ column-gap: var(--#{$pagination}__nav--ColumnGap);
235
178
  justify-content: flex-end;
236
179
  }
237
180
 
238
181
  // nav control
239
182
  .#{$pagination}__nav-control {
240
183
  @include pf-v5-mirror-inline-on-rtl;
241
-
242
- .#{$button} {
243
- padding-inline-start: var(--#{$pagination}__nav-control--c-button--PaddingLeft);
244
- padding-inline-end: var(--#{$pagination}__nav-control--c-button--PaddingRight);
245
- font-size: var(--#{$pagination}__nav-control--c-button--FontSize);
246
- }
247
-
248
- .#{$pagination}.pf-m-compact & + & {
249
- margin-inline-start: var(--#{$pagination}--m-compact__nav-control--nav-control--MarginLeft);
250
- }
251
184
  }
252
185
 
253
186
  // nav page element
254
187
  .#{$pagination}__nav-page-select {
255
188
  display: flex;
189
+ column-gap: var(--#{$pagination}__nav-page-select--ColumnGap);
256
190
  align-items: center;
257
- padding-inline-start: var(--#{$pagination}__nav-page-select--PaddingLeft);
258
- padding-inline-end: var(--#{$pagination}__nav-page-select--PaddingRight);
259
191
 
260
192
  > * {
261
193
  font-size: var(--#{$pagination}__nav-page-select--FontSize);
262
194
  white-space: nowrap;
263
-
264
- &:not(:last-child) {
265
- margin-inline-end: var(--#{$pagination}__nav-page-select--child--MarginRight);
266
- }
267
195
  }
268
196
 
269
197
  .#{$form-control} {
@@ -288,13 +216,13 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
288
216
  @include pf-v5-apply-breakpoint($breakpoint) {
289
217
  &.pf-m-display-summary#{$breakpoint-name} {
290
218
  --#{$pagination}__nav--Display: var(--#{$pagination}--m-display-summary__nav--Display);
291
- --#{$pagination}--c-menu-toggle--Display: var(--#{$pagination}--m-display-summary--c-menu-toggle--Display);
219
+ --#{$pagination}__page-menu--Display: var(--#{$pagination}--m-display-summary__page-menu--Display);
292
220
  --#{$pagination}__total-items--Display: var(--#{$pagination}--m-display-summary__total-items--Display);
293
221
  }
294
222
 
295
223
  &.pf-m-display-full#{$breakpoint-name} {
296
224
  --#{$pagination}__nav--Display: var(--#{$pagination}--m-display-full__nav--Display);
297
- --#{$pagination}--c-menu-toggle--Display: var(--#{$pagination}--m-display-full--c-menu-toggle--Display);
225
+ --#{$pagination}__page-menu--Display: var(--#{$pagination}--m-display-full__page-menu--Display);
298
226
  --#{$pagination}__total-items--Display: var(--#{$pagination}--m-display-full__total-items--Display);
299
227
  }
300
228
 
@@ -307,10 +235,3 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
307
235
  }
308
236
  }
309
237
  // stylelint-enable
310
-
311
- // stylelint-disable no-invalid-position-at-import-rule
312
- @import "themes/dark/pagination";
313
-
314
- @include pf-v5-theme-dark {
315
- @include pf-v5-theme-dark-pagination;
316
- }