@patternfly/patternfly 6.3.0-prerelease.43 → 6.3.0-prerelease.45
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.
- package/README.md +5 -5
- package/components/Wizard/wizard.css +11 -5
- package/components/Wizard/wizard.scss +13 -5
- package/components/_index.css +11 -5
- package/docs/components/Wizard/examples/Wizard.md +583 -0
- package/package.json +2 -2
- package/patternfly-no-globals.css +11 -5
- package/patternfly.css +11 -5
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/README.md
CHANGED
|
@@ -63,19 +63,19 @@ When making visual changes to a full page example, new example preview screensho
|
|
|
63
63
|
|
|
64
64
|
## Guidelines for CSS development
|
|
65
65
|
|
|
66
|
-
- For issues created in Core that will affect a component in PF-React, a follow up issue must be created in PF-React once the Pull Request is merged. The issue should include the Core PR #, the Core Release, a link to the component in https://core-staging.patternfly.org, and information detailing the change.
|
|
66
|
+
- For issues created in Core that will affect a component in PF-React, a follow up issue must be created in PF-React once the Pull Request is merged. The issue should include the Core PR #, the Core Release, a link to the component in https://pf-core-staging.patternfly.org, and information detailing the change.
|
|
67
67
|
- If global variables are modified in Core, a React issue should be opened to address this.
|
|
68
68
|
- CSS developers should ensure that animation is well documented and communicated to the respective React developer.
|
|
69
69
|
- Once the component/enhancement is complete it should receive sign off from a visual designer who can then update the master sketch file with any changes.
|
|
70
70
|
|
|
71
71
|
### Handlebars guidelines
|
|
72
|
-
[For information on how to contribute, refer to our guidelines.](https://core-staging.patternfly.org/contribution)
|
|
72
|
+
[For information on how to contribute, refer to our guidelines.](https://pf-core-staging.patternfly.org/contribution)
|
|
73
73
|
|
|
74
74
|
### CSS/Sass guidelines
|
|
75
|
-
[For more information on using CSS and Sass, refer to our guidelines.](https://core-staging.patternfly.org/guidelines)
|
|
75
|
+
[For more information on using CSS and Sass, refer to our guidelines.](https://pf-core-staging.patternfly.org/guidelines)
|
|
76
76
|
|
|
77
77
|
### Custom icon guidelines
|
|
78
|
-
[For more information on custom icons, refer to our guidelines.](https://core-staging.patternfly.org/adding-custom-icons)
|
|
78
|
+
[For more information on custom icons, refer to our guidelines.](https://pf-core-staging.patternfly.org/adding-custom-icons)
|
|
79
79
|
|
|
80
80
|
## Beta components
|
|
81
81
|
|
|
@@ -112,7 +112,7 @@ If you have any suggestions about ways that we can improve how we use this tool,
|
|
|
112
112
|
## FAQ
|
|
113
113
|
|
|
114
114
|
#### CSS Variables
|
|
115
|
-
[How do I use CSS variables to customize the library?](https://core-staging.patternfly.org/guidelines#variables)
|
|
115
|
+
[How do I use CSS variables to customize the library?](https://pf-core-staging.patternfly.org/guidelines#variables)
|
|
116
116
|
|
|
117
117
|
#### Browser support
|
|
118
118
|
PatternFly is supported on the latest two major versions of the following browsers:
|
|
@@ -56,6 +56,7 @@
|
|
|
56
56
|
--pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
|
|
57
57
|
--pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
58
58
|
--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
59
|
+
--pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
59
60
|
--pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
60
61
|
--pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
|
|
61
62
|
--pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
|
|
@@ -74,6 +75,7 @@
|
|
|
74
75
|
--pf-v6-c-wizard__nav-link-status-icon--LineHeight: 1;
|
|
75
76
|
--pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
76
77
|
--pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
78
|
+
--pf-v6-c-wizard__toggle-list-item--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
77
79
|
--pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
78
80
|
--pf-v6-c-wizard__toggle-status-icon--InsetBlockStart: 2px;
|
|
79
81
|
--pf-v6-c-wizard__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
|
|
@@ -234,6 +236,9 @@
|
|
|
234
236
|
.pf-v6-c-wizard__toggle-list-item.pf-m-danger {
|
|
235
237
|
--pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color);
|
|
236
238
|
}
|
|
239
|
+
.pf-v6-c-wizard__toggle-list-item.pf-m-warning {
|
|
240
|
+
--pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-warning__status-icon--Color);
|
|
241
|
+
}
|
|
237
242
|
.pf-v6-c-wizard__toggle-list-item.pf-m-success {
|
|
238
243
|
--pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color);
|
|
239
244
|
}
|
|
@@ -367,6 +372,7 @@
|
|
|
367
372
|
.pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link::before {
|
|
368
373
|
position: relative;
|
|
369
374
|
display: inline-flex;
|
|
375
|
+
flex-shrink: 0;
|
|
370
376
|
align-items: center;
|
|
371
377
|
justify-content: center;
|
|
372
378
|
width: var(--pf-v6-c-wizard__nav-link--before--Width);
|
|
@@ -391,12 +397,15 @@
|
|
|
391
397
|
--pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
|
|
392
398
|
}
|
|
393
399
|
|
|
394
|
-
.pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-danger)::before {
|
|
400
|
+
.pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-warning, .pf-m-danger)::before {
|
|
395
401
|
display: none;
|
|
396
402
|
}
|
|
397
403
|
.pf-v6-c-wizard__nav-link.pf-m-success {
|
|
398
404
|
--pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color);
|
|
399
405
|
}
|
|
406
|
+
.pf-v6-c-wizard__nav-link.pf-m-warning {
|
|
407
|
+
--pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color);
|
|
408
|
+
}
|
|
400
409
|
.pf-v6-c-wizard__nav-link.pf-m-danger {
|
|
401
410
|
--pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
|
|
402
411
|
}
|
|
@@ -414,12 +423,9 @@
|
|
|
414
423
|
--pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--before--Color);
|
|
415
424
|
}
|
|
416
425
|
|
|
417
|
-
.pf-v6-c-wizard__nav-link-text {
|
|
418
|
-
flex-grow: 1;
|
|
419
|
-
}
|
|
420
|
-
|
|
421
426
|
.pf-v6-c-wizard__nav-link-main {
|
|
422
427
|
display: flex;
|
|
428
|
+
flex-grow: 1;
|
|
423
429
|
justify-content: space-between;
|
|
424
430
|
padding-block-start: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockStart);
|
|
425
431
|
padding-block-end: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockEnd);
|
|
@@ -84,6 +84,7 @@
|
|
|
84
84
|
// Nav link status icon
|
|
85
85
|
--#{$wizard}__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
86
86
|
--#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
87
|
+
--#{$wizard}__nav-link--m-warning__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
87
88
|
--#{$wizard}__nav-link--m-success__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
88
89
|
--#{$wizard}__nav-link-status-icon--InsetBlockStart: 4px; // not spacer-based but needed to align
|
|
89
90
|
--#{$wizard}__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
|
|
@@ -110,6 +111,7 @@
|
|
|
110
111
|
--#{$wizard}__nav-link-status-icon--LineHeight: 1;
|
|
111
112
|
--#{$wizard}__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
112
113
|
--#{$wizard}__toggle-list-item--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
114
|
+
--#{$wizard}__toggle-list-item--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
113
115
|
--#{$wizard}__toggle-list-item--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
114
116
|
--#{$wizard}__toggle-status-icon--InsetBlockStart: 2px; // not spacer-based but needed to align
|
|
115
117
|
--#{$wizard}__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
|
|
@@ -302,6 +304,10 @@
|
|
|
302
304
|
--#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-danger__status-icon--Color);
|
|
303
305
|
}
|
|
304
306
|
|
|
307
|
+
&.pf-m-warning {
|
|
308
|
+
--#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-warning__status-icon--Color);
|
|
309
|
+
}
|
|
310
|
+
|
|
305
311
|
&.pf-m-success {
|
|
306
312
|
--#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-success__status-icon--Color);
|
|
307
313
|
}
|
|
@@ -452,6 +458,7 @@
|
|
|
452
458
|
&::before {
|
|
453
459
|
position: relative;
|
|
454
460
|
display: inline-flex;
|
|
461
|
+
flex-shrink: 0;
|
|
455
462
|
align-items: center;
|
|
456
463
|
justify-content: center;
|
|
457
464
|
width: var(--#{$wizard}__nav-link--before--Width);
|
|
@@ -480,7 +487,7 @@
|
|
|
480
487
|
}
|
|
481
488
|
}
|
|
482
489
|
|
|
483
|
-
&:is(.pf-m-success, .pf-m-danger) {
|
|
490
|
+
&:is(.pf-m-success, .pf-m-warning, .pf-m-danger) {
|
|
484
491
|
&::before {
|
|
485
492
|
display: none;
|
|
486
493
|
}
|
|
@@ -490,6 +497,10 @@
|
|
|
490
497
|
--#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-success__nav-link-status-icon--Color);
|
|
491
498
|
}
|
|
492
499
|
|
|
500
|
+
&.pf-m-warning {
|
|
501
|
+
--#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-warning__nav-link-status-icon--Color);
|
|
502
|
+
}
|
|
503
|
+
|
|
493
504
|
&.pf-m-danger {
|
|
494
505
|
--#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color);
|
|
495
506
|
}
|
|
@@ -514,12 +525,9 @@
|
|
|
514
525
|
}
|
|
515
526
|
}
|
|
516
527
|
|
|
517
|
-
.#{$wizard}__nav-link-text {
|
|
518
|
-
flex-grow: 1;
|
|
519
|
-
}
|
|
520
|
-
|
|
521
528
|
.#{$wizard}__nav-link-main {
|
|
522
529
|
display: flex;
|
|
530
|
+
flex-grow: 1;
|
|
523
531
|
justify-content: space-between;
|
|
524
532
|
padding-block-start: var(--#{$wizard}__nav-link-main--PaddingBlockStart);
|
|
525
533
|
padding-block-end: var(--#{$wizard}__nav-link-main--PaddingBlockEnd);
|
package/components/_index.css
CHANGED
|
@@ -23257,6 +23257,7 @@ label.pf-v6-c-tree-view__node-text {
|
|
|
23257
23257
|
--pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
|
|
23258
23258
|
--pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
23259
23259
|
--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
23260
|
+
--pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
23260
23261
|
--pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
23261
23262
|
--pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
|
|
23262
23263
|
--pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
|
|
@@ -23275,6 +23276,7 @@ label.pf-v6-c-tree-view__node-text {
|
|
|
23275
23276
|
--pf-v6-c-wizard__nav-link-status-icon--LineHeight: 1;
|
|
23276
23277
|
--pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
23277
23278
|
--pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
23279
|
+
--pf-v6-c-wizard__toggle-list-item--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
23278
23280
|
--pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
23279
23281
|
--pf-v6-c-wizard__toggle-status-icon--InsetBlockStart: 2px;
|
|
23280
23282
|
--pf-v6-c-wizard__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
|
|
@@ -23435,6 +23437,9 @@ label.pf-v6-c-tree-view__node-text {
|
|
|
23435
23437
|
.pf-v6-c-wizard__toggle-list-item.pf-m-danger {
|
|
23436
23438
|
--pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color);
|
|
23437
23439
|
}
|
|
23440
|
+
.pf-v6-c-wizard__toggle-list-item.pf-m-warning {
|
|
23441
|
+
--pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-warning__status-icon--Color);
|
|
23442
|
+
}
|
|
23438
23443
|
.pf-v6-c-wizard__toggle-list-item.pf-m-success {
|
|
23439
23444
|
--pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color);
|
|
23440
23445
|
}
|
|
@@ -23568,6 +23573,7 @@ label.pf-v6-c-tree-view__node-text {
|
|
|
23568
23573
|
.pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link::before {
|
|
23569
23574
|
position: relative;
|
|
23570
23575
|
display: inline-flex;
|
|
23576
|
+
flex-shrink: 0;
|
|
23571
23577
|
align-items: center;
|
|
23572
23578
|
justify-content: center;
|
|
23573
23579
|
width: var(--pf-v6-c-wizard__nav-link--before--Width);
|
|
@@ -23592,12 +23598,15 @@ label.pf-v6-c-tree-view__node-text {
|
|
|
23592
23598
|
--pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
|
|
23593
23599
|
}
|
|
23594
23600
|
|
|
23595
|
-
.pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-danger)::before {
|
|
23601
|
+
.pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-warning, .pf-m-danger)::before {
|
|
23596
23602
|
display: none;
|
|
23597
23603
|
}
|
|
23598
23604
|
.pf-v6-c-wizard__nav-link.pf-m-success {
|
|
23599
23605
|
--pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color);
|
|
23600
23606
|
}
|
|
23607
|
+
.pf-v6-c-wizard__nav-link.pf-m-warning {
|
|
23608
|
+
--pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color);
|
|
23609
|
+
}
|
|
23601
23610
|
.pf-v6-c-wizard__nav-link.pf-m-danger {
|
|
23602
23611
|
--pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
|
|
23603
23612
|
}
|
|
@@ -23615,12 +23624,9 @@ label.pf-v6-c-tree-view__node-text {
|
|
|
23615
23624
|
--pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--before--Color);
|
|
23616
23625
|
}
|
|
23617
23626
|
|
|
23618
|
-
.pf-v6-c-wizard__nav-link-text {
|
|
23619
|
-
flex-grow: 1;
|
|
23620
|
-
}
|
|
23621
|
-
|
|
23622
23627
|
.pf-v6-c-wizard__nav-link-main {
|
|
23623
23628
|
display: flex;
|
|
23629
|
+
flex-grow: 1;
|
|
23624
23630
|
justify-content: space-between;
|
|
23625
23631
|
padding-block-start: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockStart);
|
|
23626
23632
|
padding-block-end: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockEnd);
|