@patternfly/patternfly 6.0.0-alpha.179 → 6.0.0-alpha.180

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 (9) hide show
  1. package/components/Wizard/wizard.css +13 -6
  2. package/components/Wizard/wizard.scss +17 -6
  3. package/components/_index.css +13 -6
  4. package/docs/components/Wizard/examples/Wizard.md +625 -42
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +13 -6
  7. package/patternfly.css +13 -6
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Wizard/wizard.css CHANGED
@@ -55,6 +55,7 @@
55
55
  --pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
56
56
  --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
57
57
  --pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
58
+ --pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
58
59
  --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
59
60
  --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
60
61
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
@@ -71,7 +72,8 @@
71
72
  --pf-v6-c-wizard__toggle-list-item--Gap: var(--pf-t--global--spacer--sm);
72
73
  --pf-v6-c-wizard__nav-link-status-icon--LineHeight: 1;
73
74
  --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
74
- --pf-v6-c-wizard__toggle--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
75
+ --pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
76
+ --pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
75
77
  --pf-v6-c-wizard__toggle-status-icon--InsetBlockStart: 2px;
76
78
  --pf-v6-c-wizard__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
77
79
  --pf-v6-c-wizard__toggle-list--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -229,8 +231,10 @@
229
231
  margin-inline-end: var(--pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd);
230
232
  }
231
233
  .pf-v6-c-wizard__toggle-list-item.pf-m-danger {
232
- --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
233
- --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
234
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color);
235
+ }
236
+ .pf-v6-c-wizard__toggle-list-item.pf-m-success {
237
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color);
234
238
  }
235
239
 
236
240
  .pf-v6-c-wizard__toggle-num {
@@ -386,12 +390,15 @@
386
390
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
387
391
  }
388
392
 
393
+ .pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-danger)::before {
394
+ display: none;
395
+ }
396
+ .pf-v6-c-wizard__nav-link.pf-m-success {
397
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color);
398
+ }
389
399
  .pf-v6-c-wizard__nav-link.pf-m-danger {
390
400
  --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
391
401
  }
392
- .pf-v6-c-wizard__nav-link.pf-m-danger::before {
393
- display: none;
394
- }
395
402
  .pf-v6-c-wizard__nav-link:where(:hover, :focus) {
396
403
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--hover--Color);
397
404
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--hover--BackgroundColor);
package/components/Wizard/wizard.scss CHANGED
@@ -83,6 +83,7 @@
83
83
  // Nav link status icon
84
84
  --#{$wizard}__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
85
85
  --#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
86
+ --#{$wizard}__nav-link--m-success__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
86
87
  --#{$wizard}__nav-link-status-icon--InsetBlockStart: 4px; // not spacer-based but needed to align
87
88
  --#{$wizard}__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
88
89
 
@@ -107,7 +108,8 @@
107
108
  // Toggle status icon
108
109
  --#{$wizard}__nav-link-status-icon--LineHeight: 1;
109
110
  --#{$wizard}__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
110
- --#{$wizard}__toggle--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
111
+ --#{$wizard}__toggle-list-item--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
112
+ --#{$wizard}__toggle-list-item--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
111
113
  --#{$wizard}__toggle-status-icon--InsetBlockStart: 2px; // not spacer-based but needed to align
112
114
  --#{$wizard}__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
113
115
 
@@ -296,8 +298,11 @@
296
298
  }
297
299
 
298
300
  &.pf-m-danger {
299
- --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color);
300
- --#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color);
301
+ --#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-danger__status-icon--Color);
302
+ }
303
+
304
+ &.pf-m-success {
305
+ --#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-success__status-icon--Color);
301
306
  }
302
307
  }
303
308
 
@@ -474,14 +479,20 @@
474
479
  }
475
480
  }
476
481
 
477
- &.pf-m-danger {
478
- --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color);
479
-
482
+ &:is(.pf-m-success, .pf-m-danger) {
480
483
  &::before {
481
484
  display: none;
482
485
  }
483
486
  }
484
487
 
488
+ &.pf-m-success {
489
+ --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-success__nav-link-status-icon--Color);
490
+ }
491
+
492
+ &.pf-m-danger {
493
+ --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color);
494
+ }
495
+
485
496
  &:where(:hover, :focus) {
486
497
  --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--hover--Color);
487
498
  --#{$wizard}__nav-link-main--BackgroundColor: var(--#{$wizard}__nav-link--hover--BackgroundColor);
package/components/_index.css CHANGED
@@ -22131,6 +22131,7 @@ label.pf-v6-c-tree-view__node-text {
22131
22131
  --pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
22132
22132
  --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
22133
22133
  --pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
22134
+ --pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
22134
22135
  --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
22135
22136
  --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
22136
22137
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
@@ -22147,7 +22148,8 @@ label.pf-v6-c-tree-view__node-text {
22147
22148
  --pf-v6-c-wizard__toggle-list-item--Gap: var(--pf-t--global--spacer--sm);
22148
22149
  --pf-v6-c-wizard__nav-link-status-icon--LineHeight: 1;
22149
22150
  --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
22150
- --pf-v6-c-wizard__toggle--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
22151
+ --pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
22152
+ --pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
22151
22153
  --pf-v6-c-wizard__toggle-status-icon--InsetBlockStart: 2px;
22152
22154
  --pf-v6-c-wizard__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
22153
22155
  --pf-v6-c-wizard__toggle-list--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -22305,8 +22307,10 @@ label.pf-v6-c-tree-view__node-text {
22305
22307
  margin-inline-end: var(--pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd);
22306
22308
  }
22307
22309
  .pf-v6-c-wizard__toggle-list-item.pf-m-danger {
22308
- --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
22309
- --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
22310
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color);
22311
+ }
22312
+ .pf-v6-c-wizard__toggle-list-item.pf-m-success {
22313
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color);
22310
22314
  }
22311
22315
 
22312
22316
  .pf-v6-c-wizard__toggle-num {
@@ -22462,12 +22466,15 @@ label.pf-v6-c-tree-view__node-text {
22462
22466
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
22463
22467
  }
22464
22468
 
22469
+ .pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-danger)::before {
22470
+ display: none;
22471
+ }
22472
+ .pf-v6-c-wizard__nav-link.pf-m-success {
22473
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color);
22474
+ }
22465
22475
  .pf-v6-c-wizard__nav-link.pf-m-danger {
22466
22476
  --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
22467
22477
  }
22468
- .pf-v6-c-wizard__nav-link.pf-m-danger::before {
22469
- display: none;
22470
- }
22471
22478
  .pf-v6-c-wizard__nav-link:where(:hover, :focus) {
22472
22479
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--hover--Color);
22473
22480
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--hover--BackgroundColor);