@patternfly/patternfly 6.0.0-alpha.134 → 6.0.0-alpha.135

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 (21) hide show
  1. package/base/patternfly-variables.css +49 -1
  2. package/base/tokens/tokens-charts-dark.scss +6 -2
  3. package/base/tokens/tokens-charts.scss +6 -2
  4. package/base/tokens/tokens-dark.scss +1 -1
  5. package/base/tokens/tokens-default.scss +50 -2
  6. package/base/tokens/tokens-palette.scss +1 -1
  7. package/components/Page/page.css +2 -1
  8. package/components/Page/page.scss +2 -1
  9. package/components/Wizard/wizard.css +1 -21
  10. package/components/Wizard/wizard.scss +2 -27
  11. package/components/_index.css +3 -22
  12. package/docs/components/Wizard/examples/Wizard.md +115 -32
  13. package/docs/demos/Wizard/examples/Wizard.md +195 -54
  14. package/package.json +1 -1
  15. package/patternfly-base-no-globals.css +49 -1
  16. package/patternfly-base.css +49 -1
  17. package/patternfly-charts.css +10 -2
  18. package/patternfly-no-globals.css +52 -23
  19. package/patternfly.css +52 -23
  20. package/patternfly.min.css +1 -1
  21. package/patternfly.min.css.map +1 -1
package/base/patternfly-variables.css CHANGED
@@ -197,13 +197,30 @@
197
197
  --pf-t--color--gray--20: #e0e0e0;
198
198
  --pf-t--color--gray--10: #f2f2f2;
199
199
  --pf-t--color--white: #fff;
200
+ --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
201
+ --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
202
+ --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
203
+ --pf-t--global--delay--400: 7000ms;
204
+ --pf-t--global--delay--300: 100ms;
205
+ --pf-t--global--delay--200: 50ms;
206
+ --pf-t--global--delay--100: 0ms;
207
+ --pf-t--global--duration--600: 600ms;
208
+ --pf-t--global--duration--500: 500ms;
209
+ --pf-t--global--duration--400: 400ms;
210
+ --pf-t--global--duration--300: 300ms;
211
+ --pf-t--global--duration--200: 200ms;
212
+ --pf-t--global--duration--100: 100ms;
213
+ --pf-t--global--duration--50: 50ms;
200
214
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
201
215
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
202
216
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
203
217
  --pf-t--global--breakpoint--600: 1450px;
218
+ --pf-t--global--breakpoint--550: 1280px;
204
219
  --pf-t--global--breakpoint--500: 1200px;
205
220
  --pf-t--global--breakpoint--400: 992px;
221
+ --pf-t--global--breakpoint--350: 960px;
206
222
  --pf-t--global--breakpoint--300: 768px;
223
+ --pf-t--global--breakpoint--250: 640px;
207
224
  --pf-t--global--breakpoint--200: 576px;
208
225
  --pf-t--global--breakpoint--100: 0px;
209
226
  --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
@@ -263,6 +280,20 @@
263
280
  --pf-t--global--spacer--300: 16px;
264
281
  --pf-t--global--spacer--200: 8px;
265
282
  --pf-t--global--spacer--100: 4px;
283
+ --pf-t--global--motion--timing-function--decelerate: var(--pf-t--global--timing-function--300);
284
+ --pf-t--global--motion--timing-function--default: var(--pf-t--global--timing-function--200);
285
+ --pf-t--global--motion--timing-function--accelerate: var(--pf-t--global--timing-function--100);
286
+ --pf-t--global--motion--delay--long: var(--pf-t--global--delay--400);
287
+ --pf-t--global--motion--delay--default: var(--pf-t--global--delay--300);
288
+ --pf-t--global--motion--delay--short: var(--pf-t--global--delay--200);
289
+ --pf-t--global--motion--delay--none: var(--pf-t--global--delay--100);
290
+ --pf-t--global--motion--duration--3xl: var(--pf-t--global--duration--600);
291
+ --pf-t--global--motion--duration--2xl: var(--pf-t--global--duration--500);
292
+ --pf-t--global--motion--duration--xl: var(--pf-t--global--duration--400);
293
+ --pf-t--global--motion--duration--lg: var(--pf-t--global--duration--300);
294
+ --pf-t--global--motion--duration--md: var(--pf-t--global--duration--200);
295
+ --pf-t--global--motion--duration--sm: var(--pf-t--global--duration--100);
296
+ --pf-t--global--motion--duration--xs: var(--pf-t--global--duration--50);
266
297
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
267
298
  --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
268
299
  --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
@@ -332,6 +363,11 @@
332
363
  --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
333
364
  --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
334
365
  --pf-t--global--background--color--100: var(--pf-t--color--white);
366
+ --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
367
+ --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350);
368
+ --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
369
+ --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250);
370
+ --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100);
335
371
  --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
336
372
  --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500);
337
373
  --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400);
@@ -413,10 +449,10 @@
413
449
  --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
414
450
  --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
415
451
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
416
- --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
417
452
  --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
418
453
  --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
419
454
  --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
455
+ --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
420
456
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
421
457
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
422
458
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
@@ -446,6 +482,18 @@
446
482
  --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
447
483
  --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
448
484
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
485
+ --pf-t--global--motion--duration--icon--long: var(--pf-t--global--motion--duration--md);
486
+ --pf-t--global--motion--duration--icon--default: var(--pf-t--global--motion--duration--sm);
487
+ --pf-t--global--motion--duration--icon--short: var(--pf-t--global--motion--duration--xs);
488
+ --pf-t--global--motion--duration--slide-in--long: var(--pf-t--global--motion--duration--2xl);
489
+ --pf-t--global--motion--duration--slide-in--default: var(--pf-t--global--motion--duration--xl);
490
+ --pf-t--global--motion--duration--slide-in--short: var(--pf-t--global--motion--duration--lg);
491
+ --pf-t--global--motion--duration--slide-out--long: var(--pf-t--global--motion--duration--2xl);
492
+ --pf-t--global--motion--duration--slide-out--default: var(--pf-t--global--motion--duration--xl);
493
+ --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg);
494
+ --pf-t--global--motion--duration--fade--long: var(--pf-t--global--motion--duration--lg);
495
+ --pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md);
496
+ --pf-t--global--motion--duration--fade--short: var(--pf-t--global--motion--duration--sm);
449
497
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
450
498
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
451
499
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
package/base/tokens/tokens-charts-dark.scss CHANGED
@@ -1,14 +1,18 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 09 May 2024 17:55:04 GMT
3
+ // Generated on Thu, 16 May 2024 15:08:07 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
+ --pf-t--chart--global--stroke-line-join: round;
6
7
  --pf-t--chart--global--layout--width: 450;
7
8
  --pf-t--chart--global--layout--height: 300;
8
9
  --pf-t--chart--global--layout--padding: 50;
9
- --pf-t--chart--global--label--stroke--width: 0;
10
+ --pf-t--chart--global--label--text-anchor: middle;
11
+ --pf-t--chart--global--label--stroke: transparent;
10
12
  --pf-t--chart--global--label--margin: 8;
11
13
  --pf-t--chart--global--label--padding: 10;
14
+ --pf-t--chart--global--stroke-line-cap: round;
15
+ --pf-t--chart--global--letter-spacing: normal;
12
16
  --pf-t--chart--global--FontSize--2xl: 22;
13
17
  --pf-t--chart--global--FontSize--lg: 18;
14
18
  --pf-t--chart--global--FontSize--sm: 14;
package/base/tokens/tokens-charts.scss CHANGED
@@ -1,14 +1,18 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 09 May 2024 17:55:04 GMT
3
+ // Generated on Thu, 16 May 2024 15:08:07 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
+ --pf-t--chart--global--stroke-line-join: round;
6
7
  --pf-t--chart--global--layout--width: 450;
7
8
  --pf-t--chart--global--layout--height: 300;
8
9
  --pf-t--chart--global--layout--padding: 50;
9
- --pf-t--chart--global--label--stroke--width: 0;
10
+ --pf-t--chart--global--label--text-anchor: middle;
11
+ --pf-t--chart--global--label--stroke: transparent;
10
12
  --pf-t--chart--global--label--margin: 8;
11
13
  --pf-t--chart--global--label--padding: 10;
14
+ --pf-t--chart--global--stroke-line-cap: round;
15
+ --pf-t--chart--global--letter-spacing: normal;
12
16
  --pf-t--chart--global--FontSize--2xl: 22;
13
17
  --pf-t--chart--global--FontSize--lg: 18;
14
18
  --pf-t--chart--global--FontSize--sm: 14;
package/base/tokens/tokens-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 09 May 2024 17:55:04 GMT
3
+ // Generated on Thu, 16 May 2024 15:08:07 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
package/base/tokens/tokens-default.scss CHANGED
@@ -1,15 +1,32 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 09 May 2024 17:55:04 GMT
3
+ // Generated on Thu, 16 May 2024 15:08:07 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
+ --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
7
+ --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
8
+ --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
9
+ --pf-t--global--delay--400: 7000ms;
10
+ --pf-t--global--delay--300: 100ms;
11
+ --pf-t--global--delay--200: 50ms;
12
+ --pf-t--global--delay--100: 0ms;
13
+ --pf-t--global--duration--600: 600ms;
14
+ --pf-t--global--duration--500: 500ms;
15
+ --pf-t--global--duration--400: 400ms;
16
+ --pf-t--global--duration--300: 300ms;
17
+ --pf-t--global--duration--200: 200ms;
18
+ --pf-t--global--duration--100: 100ms;
19
+ --pf-t--global--duration--50: 50ms;
6
20
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
7
21
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
8
22
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
9
23
  --pf-t--global--breakpoint--600: 1450px;
24
+ --pf-t--global--breakpoint--550: 1280px;
10
25
  --pf-t--global--breakpoint--500: 1200px;
11
26
  --pf-t--global--breakpoint--400: 992px;
27
+ --pf-t--global--breakpoint--350: 960px;
12
28
  --pf-t--global--breakpoint--300: 768px;
29
+ --pf-t--global--breakpoint--250: 640px;
13
30
  --pf-t--global--breakpoint--200: 576px;
14
31
  --pf-t--global--breakpoint--100: 0px;
15
32
  --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
@@ -69,6 +86,20 @@
69
86
  --pf-t--global--spacer--300: 16px;
70
87
  --pf-t--global--spacer--200: 8px;
71
88
  --pf-t--global--spacer--100: 4px;
89
+ --pf-t--global--motion--timing-function--decelerate: var(--pf-t--global--timing-function--300);
90
+ --pf-t--global--motion--timing-function--default: var(--pf-t--global--timing-function--200);
91
+ --pf-t--global--motion--timing-function--accelerate: var(--pf-t--global--timing-function--100);
92
+ --pf-t--global--motion--delay--long: var(--pf-t--global--delay--400);
93
+ --pf-t--global--motion--delay--default: var(--pf-t--global--delay--300);
94
+ --pf-t--global--motion--delay--short: var(--pf-t--global--delay--200);
95
+ --pf-t--global--motion--delay--none: var(--pf-t--global--delay--100);
96
+ --pf-t--global--motion--duration--3xl: var(--pf-t--global--duration--600);
97
+ --pf-t--global--motion--duration--2xl: var(--pf-t--global--duration--500);
98
+ --pf-t--global--motion--duration--xl: var(--pf-t--global--duration--400);
99
+ --pf-t--global--motion--duration--lg: var(--pf-t--global--duration--300);
100
+ --pf-t--global--motion--duration--md: var(--pf-t--global--duration--200);
101
+ --pf-t--global--motion--duration--sm: var(--pf-t--global--duration--100);
102
+ --pf-t--global--motion--duration--xs: var(--pf-t--global--duration--50);
72
103
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
73
104
  --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
74
105
  --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
@@ -138,6 +169,11 @@
138
169
  --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
139
170
  --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
140
171
  --pf-t--global--background--color--100: var(--pf-t--color--white);
172
+ --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
173
+ --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350);
174
+ --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
175
+ --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250);
176
+ --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100);
141
177
  --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
142
178
  --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500);
143
179
  --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400);
@@ -219,10 +255,10 @@
219
255
  --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
220
256
  --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
221
257
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
222
- --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
223
258
  --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
224
259
  --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
225
260
  --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
261
+ --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
226
262
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
227
263
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
228
264
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
@@ -252,6 +288,18 @@
252
288
  --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
253
289
  --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
254
290
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
291
+ --pf-t--global--motion--duration--icon--long: var(--pf-t--global--motion--duration--md);
292
+ --pf-t--global--motion--duration--icon--default: var(--pf-t--global--motion--duration--sm);
293
+ --pf-t--global--motion--duration--icon--short: var(--pf-t--global--motion--duration--xs);
294
+ --pf-t--global--motion--duration--slide-in--long: var(--pf-t--global--motion--duration--2xl);
295
+ --pf-t--global--motion--duration--slide-in--default: var(--pf-t--global--motion--duration--xl);
296
+ --pf-t--global--motion--duration--slide-in--short: var(--pf-t--global--motion--duration--lg);
297
+ --pf-t--global--motion--duration--slide-out--long: var(--pf-t--global--motion--duration--2xl);
298
+ --pf-t--global--motion--duration--slide-out--default: var(--pf-t--global--motion--duration--xl);
299
+ --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg);
300
+ --pf-t--global--motion--duration--fade--long: var(--pf-t--global--motion--duration--lg);
301
+ --pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md);
302
+ --pf-t--global--motion--duration--fade--short: var(--pf-t--global--motion--duration--sm);
255
303
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
256
304
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
257
305
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
package/base/tokens/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 09 May 2024 17:55:04 GMT
3
+ // Generated on Thu, 16 May 2024 15:08:07 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--color--red--70: #5f0000;
package/components/Page/page.css CHANGED
@@ -414,7 +414,8 @@
414
414
  }
415
415
 
416
416
  .pf-v6-c-page__main-container {
417
- align-self: start;
417
+ display: flex;
418
+ flex-direction: column;
418
419
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
419
420
  margin-block-start: 0;
420
421
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
package/components/Page/page.scss CHANGED
@@ -314,7 +314,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
314
314
 
315
315
  // Main & Drawer
316
316
  .#{$page}__main-container {
317
- align-self: start;
317
+ display: flex;
318
+ flex-direction: column;
318
319
  max-height: var(--#{$page}__main-container--MaxHeight);
319
320
  margin-block-start: 0;
320
321
  margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
package/components/Wizard/wizard.css CHANGED
@@ -103,13 +103,10 @@
103
103
  --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
104
104
  --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
105
105
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
106
- --pf-v6-c-wizard__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
106
+ --pf-v6-c-wizard__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
107
107
  --pf-v6-c-wizard__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
108
108
  --pf-v6-c-wizard__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
109
109
  --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
110
- --pf-v6-c-wizard__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
111
- --pf-v6-c-wizard__footer--child--MarginBlockEnd: var(--pf-t--global--spacer--sm);
112
- --pf-v6-c-wizard__footer-cancel--MarginInlineStart: calc(var(--pf-t--global--spacer--2xl) - var(--pf-v6-c-wizard__footer--child--MarginInlineEnd));
113
110
  }
114
111
  @media screen and (min-width: 992px) {
115
112
  :where(:root, .pf-v6-c-wizard) {
@@ -343,10 +340,6 @@
343
340
  .pf-v6-c-wizard__nav-item.pf-m-expanded > .pf-v6-c-wizard__nav-link {
344
341
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: var(--pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate);
345
342
  }
346
- .pf-v6-c-wizard__nav-item :where(:hover) {
347
- --pf-v6-c-wizard__nav-link--Color: var({$wizard}__nav-link--hover--Color);
348
- --pf-v6-c-wizard__nav-link-main--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
349
- }
350
343
 
351
344
  .pf-v6-c-wizard__nav-link {
352
345
  position: relative;
@@ -469,23 +462,10 @@
469
462
  .pf-v6-c-wizard__footer {
470
463
  position: relative;
471
464
  z-index: var(--pf-v6-c-wizard__footer--ZIndex);
472
- display: flex;
473
- flex-shrink: 0;
474
- flex-wrap: wrap;
475
465
  padding-block-start: var(--pf-v6-c-wizard__footer--PaddingBlockStart);
476
466
  padding-block-end: var(--pf-v6-c-wizard__footer--PaddingBlockEnd);
477
467
  padding-inline-start: var(--pf-v6-c-wizard__footer--PaddingInlineStart);
478
468
  padding-inline-end: var(--pf-v6-c-wizard__footer--PaddingInlineEnd);
479
469
  background-color: var(--pf-v6-c-wizard__footer--BackgroundColor);
480
470
  border-block-start: var(--pf-v6-c-wizard__footer--BorderBlockStartWidth) solid var(--pf-v6-c-wizard__footer--BorderBlockStartColor);
481
- }
482
- .pf-v6-c-wizard__footer > * {
483
- margin-block-end: var(--pf-v6-c-wizard__footer--child--MarginBlockEnd);
484
- }
485
- .pf-v6-c-wizard__footer > *:not(:last-child) {
486
- margin-inline-end: var(--pf-v6-c-wizard__footer--child--MarginInlineEnd);
487
- }
488
-
489
- .pf-v6-c-wizard__footer-cancel {
490
- margin-inline-start: var(--pf-v6-c-wizard__footer-cancel--MarginInlineStart);
491
471
  }
package/components/Wizard/wizard.scss CHANGED
@@ -164,13 +164,10 @@
164
164
  --#{$wizard}__footer--ZIndex: var(--pf-t--global--z-index--xs);
165
165
  --#{$wizard}__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
166
166
  --#{$wizard}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
167
- --#{$wizard}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
167
+ --#{$wizard}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
168
168
  --#{$wizard}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
169
169
  --#{$wizard}__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
170
170
  --#{$wizard}__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
171
- --#{$wizard}__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
172
- --#{$wizard}__footer--child--MarginBlockEnd: var(--pf-t--global--spacer--sm);
173
- --#{$wizard}__footer-cancel--MarginInlineStart: calc(var(--pf-t--global--spacer--2xl) - var(--#{$wizard}__footer--child--MarginInlineEnd));
174
171
  }
175
172
 
176
173
  .#{$wizard} {
@@ -424,11 +421,6 @@
424
421
  --#{$wizard}__nav-link-toggle-icon--Rotate: var(--#{$wizard}__nav-item--m-expanded__link-toggle-icon--Rotate);
425
422
  }
426
423
  }
427
-
428
- :where(:hover) {
429
- --#{$wizard}__nav-link--Color: var({$wizard}__nav-link--hover--Color);
430
- --#{$wizard}__nav-link-main--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
431
- }
432
424
  }
433
425
 
434
426
  .#{$wizard}__nav-link {
@@ -490,7 +482,7 @@
490
482
  &:where(:hover, :focus) {
491
483
  --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--hover--Color);
492
484
  --#{$wizard}__nav-link-main--BackgroundColor: var(--#{$wizard}__nav-link--hover--BackgroundColor);
493
- }
485
+ }
494
486
 
495
487
  // override the button background/color for disabled nav links
496
488
  &:disabled,
@@ -566,27 +558,10 @@
566
558
  .#{$wizard}__footer {
567
559
  position: relative;
568
560
  z-index: var(--#{$wizard}__footer--ZIndex);
569
- display: flex;
570
- flex-shrink: 0;
571
- flex-wrap: wrap;
572
561
  padding-block-start: var(--#{$wizard}__footer--PaddingBlockStart);
573
562
  padding-block-end: var(--#{$wizard}__footer--PaddingBlockEnd);
574
563
  padding-inline-start: var(--#{$wizard}__footer--PaddingInlineStart);
575
564
  padding-inline-end: var(--#{$wizard}__footer--PaddingInlineEnd);
576
565
  background-color: var(--#{$wizard}__footer--BackgroundColor);
577
566
  border-block-start: var(--#{$wizard}__footer--BorderBlockStartWidth) solid var(--#{$wizard}__footer--BorderBlockStartColor);
578
-
579
- > * {
580
- margin-block-end: var(--#{$wizard}__footer--child--MarginBlockEnd);
581
-
582
- &:not(:last-child) {
583
- margin-inline-end: var(--#{$wizard}__footer--child--MarginInlineEnd);
584
- }
585
- }
586
567
  }
587
-
588
- .#{$wizard}__footer-cancel {
589
- margin-inline-start: var(--#{$wizard}__footer-cancel--MarginInlineStart);
590
- }
591
-
592
-
package/components/_index.css CHANGED
@@ -11831,7 +11831,8 @@ ul.pf-v6-c-list {
11831
11831
  }
11832
11832
 
11833
11833
  .pf-v6-c-page__main-container {
11834
- align-self: start;
11834
+ display: flex;
11835
+ flex-direction: column;
11835
11836
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
11836
11837
  margin-block-start: 0;
11837
11838
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
@@ -23027,13 +23028,10 @@ label.pf-v6-c-tree-view__node-text {
23027
23028
  --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
23028
23029
  --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
23029
23030
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
23030
- --pf-v6-c-wizard__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
23031
+ --pf-v6-c-wizard__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
23031
23032
  --pf-v6-c-wizard__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
23032
23033
  --pf-v6-c-wizard__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
23033
23034
  --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
23034
- --pf-v6-c-wizard__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
23035
- --pf-v6-c-wizard__footer--child--MarginBlockEnd: var(--pf-t--global--spacer--sm);
23036
- --pf-v6-c-wizard__footer-cancel--MarginInlineStart: calc(var(--pf-t--global--spacer--2xl) - var(--pf-v6-c-wizard__footer--child--MarginInlineEnd));
23037
23035
  }
23038
23036
  @media screen and (min-width: 992px) {
23039
23037
  :where(:root, .pf-v6-c-wizard) {
@@ -23267,10 +23265,6 @@ label.pf-v6-c-tree-view__node-text {
23267
23265
  .pf-v6-c-wizard__nav-item.pf-m-expanded > .pf-v6-c-wizard__nav-link {
23268
23266
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: var(--pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate);
23269
23267
  }
23270
- .pf-v6-c-wizard__nav-item :where(:hover) {
23271
- --pf-v6-c-wizard__nav-link--Color: var({$wizard}__nav-link--hover--Color);
23272
- --pf-v6-c-wizard__nav-link-main--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
23273
- }
23274
23268
 
23275
23269
  .pf-v6-c-wizard__nav-link {
23276
23270
  position: relative;
@@ -23393,23 +23387,10 @@ label.pf-v6-c-tree-view__node-text {
23393
23387
  .pf-v6-c-wizard__footer {
23394
23388
  position: relative;
23395
23389
  z-index: var(--pf-v6-c-wizard__footer--ZIndex);
23396
- display: flex;
23397
- flex-shrink: 0;
23398
- flex-wrap: wrap;
23399
23390
  padding-block-start: var(--pf-v6-c-wizard__footer--PaddingBlockStart);
23400
23391
  padding-block-end: var(--pf-v6-c-wizard__footer--PaddingBlockEnd);
23401
23392
  padding-inline-start: var(--pf-v6-c-wizard__footer--PaddingInlineStart);
23402
23393
  padding-inline-end: var(--pf-v6-c-wizard__footer--PaddingInlineEnd);
23403
23394
  background-color: var(--pf-v6-c-wizard__footer--BackgroundColor);
23404
23395
  border-block-start: var(--pf-v6-c-wizard__footer--BorderBlockStartWidth) solid var(--pf-v6-c-wizard__footer--BorderBlockStartColor);
23405
- }
23406
- .pf-v6-c-wizard__footer > * {
23407
- margin-block-end: var(--pf-v6-c-wizard__footer--child--MarginBlockEnd);
23408
- }
23409
- .pf-v6-c-wizard__footer > *:not(:last-child) {
23410
- margin-inline-end: var(--pf-v6-c-wizard__footer--child--MarginInlineEnd);
23411
- }
23412
-
23413
- .pf-v6-c-wizard__footer-cancel {
23414
- margin-inline-start: var(--pf-v6-c-wizard__footer-cancel--MarginInlineStart);
23415
23396
  }
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -264,10 +264,20 @@ wrapperTag: div
264
264
  </main>
265
265
  </div>
266
266
  <footer class="pf-v6-c-wizard__footer">
267
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
268
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
269
- <div class="pf-v6-c-wizard__footer-cancel">
270
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
267
+ <div class="pf-v6-c-action-list">
268
+ <div class="pf-v6-c-action-list__group">
269
+ <div class="pf-v6-c-action-list__item">
270
+ <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
271
+ </div>
272
+ <div class="pf-v6-c-action-list__item">
273
+ <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
274
+ </div>
275
+ </div>
276
+ <div class="pf-v6-c-action-list__group">
277
+ <div class="pf-v6-c-action-list__item">
278
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
279
+ </div>
280
+ </div>
271
281
  </div>
272
282
  </footer>
273
283
  </div>
@@ -532,10 +542,20 @@ wrapperTag: div
532
542
  </main>
533
543
  </div>
534
544
  <footer class="pf-v6-c-wizard__footer">
535
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
536
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
537
- <div class="pf-v6-c-wizard__footer-cancel">
538
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
545
+ <div class="pf-v6-c-action-list">
546
+ <div class="pf-v6-c-action-list__group">
547
+ <div class="pf-v6-c-action-list__item">
548
+ <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
549
+ </div>
550
+ <div class="pf-v6-c-action-list__item">
551
+ <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
552
+ </div>
553
+ </div>
554
+ <div class="pf-v6-c-action-list__group">
555
+ <div class="pf-v6-c-action-list__item">
556
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
557
+ </div>
558
+ </div>
539
559
  </div>
540
560
  </footer>
541
561
  </div>
@@ -824,10 +844,23 @@ wrapperTag: div
824
844
  </div>
825
845
  </div>
826
846
  <footer class="pf-v6-c-wizard__footer">
827
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
828
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
829
- <div class="pf-v6-c-wizard__footer-cancel">
830
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
847
+ <div class="pf-v6-c-action-list">
848
+ <div class="pf-v6-c-action-list__group">
849
+ <div class="pf-v6-c-action-list__item">
850
+ <button
851
+ class="pf-v6-c-button pf-m-secondary"
852
+ type="button"
853
+ >Back</button>
854
+ </div>
855
+ <div class="pf-v6-c-action-list__item">
856
+ <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
857
+ </div>
858
+ </div>
859
+ <div class="pf-v6-c-action-list__group">
860
+ <div class="pf-v6-c-action-list__item">
861
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
862
+ </div>
863
+ </div>
831
864
  </div>
832
865
  </footer>
833
866
  </div>
@@ -1095,10 +1128,20 @@ wrapperTag: div
1095
1128
  </main>
1096
1129
  </div>
1097
1130
  <footer class="pf-v6-c-wizard__footer">
1098
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
1099
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
1100
- <div class="pf-v6-c-wizard__footer-cancel">
1101
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1131
+ <div class="pf-v6-c-action-list">
1132
+ <div class="pf-v6-c-action-list__group">
1133
+ <div class="pf-v6-c-action-list__item">
1134
+ <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
1135
+ </div>
1136
+ <div class="pf-v6-c-action-list__item">
1137
+ <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
1138
+ </div>
1139
+ </div>
1140
+ <div class="pf-v6-c-action-list__group">
1141
+ <div class="pf-v6-c-action-list__item">
1142
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1143
+ </div>
1144
+ </div>
1102
1145
  </div>
1103
1146
  </footer>
1104
1147
  </div>
@@ -1363,10 +1406,20 @@ wrapperTag: div
1363
1406
  </main>
1364
1407
  </div>
1365
1408
  <footer class="pf-v6-c-wizard__footer">
1366
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
1367
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
1368
- <div class="pf-v6-c-wizard__footer-cancel">
1369
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1409
+ <div class="pf-v6-c-action-list">
1410
+ <div class="pf-v6-c-action-list__group">
1411
+ <div class="pf-v6-c-action-list__item">
1412
+ <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
1413
+ </div>
1414
+ <div class="pf-v6-c-action-list__item">
1415
+ <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
1416
+ </div>
1417
+ </div>
1418
+ <div class="pf-v6-c-action-list__group">
1419
+ <div class="pf-v6-c-action-list__item">
1420
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1421
+ </div>
1422
+ </div>
1370
1423
  </div>
1371
1424
  </footer>
1372
1425
  </div>
@@ -1522,10 +1575,20 @@ wrapperTag: div
1522
1575
  </main>
1523
1576
  </div>
1524
1577
  <footer class="pf-v6-c-wizard__footer">
1525
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
1526
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
1527
- <div class="pf-v6-c-wizard__footer-cancel">
1528
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1578
+ <div class="pf-v6-c-action-list">
1579
+ <div class="pf-v6-c-action-list__group">
1580
+ <div class="pf-v6-c-action-list__item">
1581
+ <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
1582
+ </div>
1583
+ <div class="pf-v6-c-action-list__item">
1584
+ <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
1585
+ </div>
1586
+ </div>
1587
+ <div class="pf-v6-c-action-list__group">
1588
+ <div class="pf-v6-c-action-list__item">
1589
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1590
+ </div>
1591
+ </div>
1529
1592
  </div>
1530
1593
  </footer>
1531
1594
  </div>
@@ -1795,10 +1858,20 @@ wrapperTag: div
1795
1858
  </main>
1796
1859
  </div>
1797
1860
  <footer class="pf-v6-c-wizard__footer">
1798
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
1799
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
1800
- <div class="pf-v6-c-wizard__footer-cancel">
1801
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1861
+ <div class="pf-v6-c-action-list">
1862
+ <div class="pf-v6-c-action-list__group">
1863
+ <div class="pf-v6-c-action-list__item">
1864
+ <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
1865
+ </div>
1866
+ <div class="pf-v6-c-action-list__item">
1867
+ <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
1868
+ </div>
1869
+ </div>
1870
+ <div class="pf-v6-c-action-list__group">
1871
+ <div class="pf-v6-c-action-list__item">
1872
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1873
+ </div>
1874
+ </div>
1802
1875
  </div>
1803
1876
  </footer>
1804
1877
  </div>
@@ -2068,10 +2141,20 @@ wrapperTag: div
2068
2141
  </main>
2069
2142
  </div>
2070
2143
  <footer class="pf-v6-c-wizard__footer">
2071
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
2072
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
2073
- <div class="pf-v6-c-wizard__footer-cancel">
2074
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
2144
+ <div class="pf-v6-c-action-list">
2145
+ <div class="pf-v6-c-action-list__group">
2146
+ <div class="pf-v6-c-action-list__item">
2147
+ <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
2148
+ </div>
2149
+ <div class="pf-v6-c-action-list__item">
2150
+ <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
2151
+ </div>
2152
+ </div>
2153
+ <div class="pf-v6-c-action-list__group">
2154
+ <div class="pf-v6-c-action-list__item">
2155
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
2156
+ </div>
2157
+ </div>
2075
2158
  </div>
2076
2159
  </footer>
2077
2160
  </div>