@patternfly/patternfly 4.200.1 → 4.201.2
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/components/AboutModalBox/about-modal-box.css +3 -0
- package/components/Banner/banner.css +3 -0
- package/components/Card/card.css +2 -1
- package/components/Card/themes/dark/card.scss +2 -1
- package/components/LogViewer/log-viewer.css +3 -0
- package/components/Login/login.css +4 -0
- package/components/Masthead/masthead.css +4 -4
- package/components/Masthead/masthead.scss +1 -5
- package/components/Page/page.css +5 -0
- package/components/ProgressStepper/progress-stepper.css +416 -69
- package/components/ProgressStepper/progress-stepper.scss +211 -80
- package/components/Wizard/wizard.css +3 -0
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +328 -2
- package/package.json +1 -1
- package/patternfly-no-reset.css +725 -74
- package/patternfly.css +725 -74
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/themes/dark/placeholders.scss +4 -0
|
@@ -8,7 +8,6 @@ cssPrefix: pf-c-progress-stepper
|
|
|
8
8
|
### Basic
|
|
9
9
|
|
|
10
10
|
```html
|
|
11
|
-
<!-- progress-stepper--IsVertical="true" progress-stepper--IsCenter="true" progress-stepper--IsCompact="true" -->
|
|
12
11
|
<ol class="pf-c-progress-stepper">
|
|
13
12
|
<li
|
|
14
13
|
class="pf-c-progress-stepper__step pf-m-success"
|
|
@@ -105,6 +104,60 @@ cssPrefix: pf-c-progress-stepper
|
|
|
105
104
|
|
|
106
105
|
```
|
|
107
106
|
|
|
107
|
+
### Vertical, horizontal responsive
|
|
108
|
+
|
|
109
|
+
```html
|
|
110
|
+
<ol class="pf-c-progress-stepper pf-m-vertical-on-lg pf-m-horizontal-on-2xl">
|
|
111
|
+
<li
|
|
112
|
+
class="pf-c-progress-stepper__step pf-m-success"
|
|
113
|
+
aria-label="completed step,"
|
|
114
|
+
>
|
|
115
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
116
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
117
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
118
|
+
</span>
|
|
119
|
+
</div>
|
|
120
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
121
|
+
<div class="pf-c-progress-stepper__step-title">First step</div>
|
|
122
|
+
<div
|
|
123
|
+
class="pf-c-progress-stepper__step-description"
|
|
124
|
+
>This is the first thing to happen</div>
|
|
125
|
+
</div>
|
|
126
|
+
</li>
|
|
127
|
+
<li
|
|
128
|
+
class="pf-c-progress-stepper__step pf-m-current pf-m-info"
|
|
129
|
+
aria-label="current step,in process step,"
|
|
130
|
+
>
|
|
131
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
132
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
133
|
+
<i class="pficon pf-icon-resources-full" aria-hidden="true"></i>
|
|
134
|
+
</span>
|
|
135
|
+
</div>
|
|
136
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
137
|
+
<div class="pf-c-progress-stepper__step-title">Second step</div>
|
|
138
|
+
<div
|
|
139
|
+
class="pf-c-progress-stepper__step-description"
|
|
140
|
+
>This is the second thing to happen</div>
|
|
141
|
+
</div>
|
|
142
|
+
</li>
|
|
143
|
+
<li
|
|
144
|
+
class="pf-c-progress-stepper__step pf-m-pending"
|
|
145
|
+
aria-label="pending step,"
|
|
146
|
+
>
|
|
147
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
148
|
+
<span class="pf-c-progress-stepper__step-icon"></span>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
151
|
+
<div class="pf-c-progress-stepper__step-title">Third step</div>
|
|
152
|
+
<div
|
|
153
|
+
class="pf-c-progress-stepper__step-description"
|
|
154
|
+
>This is the last thing to happen</div>
|
|
155
|
+
</div>
|
|
156
|
+
</li>
|
|
157
|
+
</ol>
|
|
158
|
+
|
|
159
|
+
```
|
|
160
|
+
|
|
108
161
|
### Center aligned with descriptions
|
|
109
162
|
|
|
110
163
|
```html
|
|
@@ -159,6 +212,60 @@ cssPrefix: pf-c-progress-stepper
|
|
|
159
212
|
|
|
160
213
|
```
|
|
161
214
|
|
|
215
|
+
### Center aligned, vertical
|
|
216
|
+
|
|
217
|
+
```html
|
|
218
|
+
<ol class="pf-c-progress-stepper pf-m-center pf-m-vertical">
|
|
219
|
+
<li
|
|
220
|
+
class="pf-c-progress-stepper__step pf-m-success"
|
|
221
|
+
aria-label="completed step,"
|
|
222
|
+
>
|
|
223
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
224
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
225
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
226
|
+
</span>
|
|
227
|
+
</div>
|
|
228
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
229
|
+
<div class="pf-c-progress-stepper__step-title">First step</div>
|
|
230
|
+
<div
|
|
231
|
+
class="pf-c-progress-stepper__step-description"
|
|
232
|
+
>This is the first thing to happen</div>
|
|
233
|
+
</div>
|
|
234
|
+
</li>
|
|
235
|
+
<li
|
|
236
|
+
class="pf-c-progress-stepper__step pf-m-current pf-m-info"
|
|
237
|
+
aria-label="current step,in process step,"
|
|
238
|
+
>
|
|
239
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
240
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
241
|
+
<i class="pficon pf-icon-resources-full" aria-hidden="true"></i>
|
|
242
|
+
</span>
|
|
243
|
+
</div>
|
|
244
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
245
|
+
<div class="pf-c-progress-stepper__step-title">Second step</div>
|
|
246
|
+
<div
|
|
247
|
+
class="pf-c-progress-stepper__step-description"
|
|
248
|
+
>This is the second thing to happen</div>
|
|
249
|
+
</div>
|
|
250
|
+
</li>
|
|
251
|
+
<li
|
|
252
|
+
class="pf-c-progress-stepper__step pf-m-pending"
|
|
253
|
+
aria-label="pending step,"
|
|
254
|
+
>
|
|
255
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
256
|
+
<span class="pf-c-progress-stepper__step-icon"></span>
|
|
257
|
+
</div>
|
|
258
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
259
|
+
<div class="pf-c-progress-stepper__step-title">Third step</div>
|
|
260
|
+
<div
|
|
261
|
+
class="pf-c-progress-stepper__step-description"
|
|
262
|
+
>This is the last thing to happen</div>
|
|
263
|
+
</div>
|
|
264
|
+
</li>
|
|
265
|
+
</ol>
|
|
266
|
+
|
|
267
|
+
```
|
|
268
|
+
|
|
162
269
|
### Vertical with descriptions
|
|
163
270
|
|
|
164
271
|
```html
|
|
@@ -267,6 +374,224 @@ cssPrefix: pf-c-progress-stepper
|
|
|
267
374
|
|
|
268
375
|
```
|
|
269
376
|
|
|
377
|
+
### Compact, vertical
|
|
378
|
+
|
|
379
|
+
```html
|
|
380
|
+
<ol class="pf-c-progress-stepper pf-m-vertical pf-m-compact">
|
|
381
|
+
<li
|
|
382
|
+
class="pf-c-progress-stepper__step pf-m-success"
|
|
383
|
+
aria-label="completed step,"
|
|
384
|
+
>
|
|
385
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
386
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
387
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
388
|
+
</span>
|
|
389
|
+
</div>
|
|
390
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
391
|
+
<div class="pf-c-progress-stepper__step-title">First step</div>
|
|
392
|
+
<div
|
|
393
|
+
class="pf-c-progress-stepper__step-description"
|
|
394
|
+
>This is the first thing to happen</div>
|
|
395
|
+
</div>
|
|
396
|
+
</li>
|
|
397
|
+
<li
|
|
398
|
+
class="pf-c-progress-stepper__step pf-m-current pf-m-info"
|
|
399
|
+
aria-label="current step,in process step,"
|
|
400
|
+
>
|
|
401
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
402
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
403
|
+
<i class="pficon pf-icon-resources-full" aria-hidden="true"></i>
|
|
404
|
+
</span>
|
|
405
|
+
</div>
|
|
406
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
407
|
+
<div class="pf-c-progress-stepper__step-title">Second step</div>
|
|
408
|
+
<div
|
|
409
|
+
class="pf-c-progress-stepper__step-description"
|
|
410
|
+
>This is the second thing to happen</div>
|
|
411
|
+
</div>
|
|
412
|
+
</li>
|
|
413
|
+
<li
|
|
414
|
+
class="pf-c-progress-stepper__step pf-m-pending"
|
|
415
|
+
aria-label="pending step,"
|
|
416
|
+
>
|
|
417
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
418
|
+
<span class="pf-c-progress-stepper__step-icon"></span>
|
|
419
|
+
</div>
|
|
420
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
421
|
+
<div class="pf-c-progress-stepper__step-title">Third step</div>
|
|
422
|
+
<div
|
|
423
|
+
class="pf-c-progress-stepper__step-description"
|
|
424
|
+
>This is the last thing to happen</div>
|
|
425
|
+
</div>
|
|
426
|
+
</li>
|
|
427
|
+
</ol>
|
|
428
|
+
|
|
429
|
+
```
|
|
430
|
+
|
|
431
|
+
### Compact, vertical responsive
|
|
432
|
+
|
|
433
|
+
```html
|
|
434
|
+
<ol
|
|
435
|
+
class="pf-c-progress-stepper pf-m-vertical-on-lg pf-m-horizontal-on-xl pf-m-compact"
|
|
436
|
+
>
|
|
437
|
+
<li
|
|
438
|
+
class="pf-c-progress-stepper__step pf-m-success"
|
|
439
|
+
aria-label="completed step,"
|
|
440
|
+
>
|
|
441
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
442
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
443
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
444
|
+
</span>
|
|
445
|
+
</div>
|
|
446
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
447
|
+
<div class="pf-c-progress-stepper__step-title">First step</div>
|
|
448
|
+
<div
|
|
449
|
+
class="pf-c-progress-stepper__step-description"
|
|
450
|
+
>This is the first thing to happen</div>
|
|
451
|
+
</div>
|
|
452
|
+
</li>
|
|
453
|
+
<li
|
|
454
|
+
class="pf-c-progress-stepper__step pf-m-current pf-m-info"
|
|
455
|
+
aria-label="current step,in process step,"
|
|
456
|
+
>
|
|
457
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
458
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
459
|
+
<i class="pficon pf-icon-resources-full" aria-hidden="true"></i>
|
|
460
|
+
</span>
|
|
461
|
+
</div>
|
|
462
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
463
|
+
<div class="pf-c-progress-stepper__step-title">Second step</div>
|
|
464
|
+
<div
|
|
465
|
+
class="pf-c-progress-stepper__step-description"
|
|
466
|
+
>This is the second thing to happen</div>
|
|
467
|
+
</div>
|
|
468
|
+
</li>
|
|
469
|
+
<li
|
|
470
|
+
class="pf-c-progress-stepper__step pf-m-pending"
|
|
471
|
+
aria-label="pending step,"
|
|
472
|
+
>
|
|
473
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
474
|
+
<span class="pf-c-progress-stepper__step-icon"></span>
|
|
475
|
+
</div>
|
|
476
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
477
|
+
<div class="pf-c-progress-stepper__step-title">Third step</div>
|
|
478
|
+
<div
|
|
479
|
+
class="pf-c-progress-stepper__step-description"
|
|
480
|
+
>This is the last thing to happen</div>
|
|
481
|
+
</div>
|
|
482
|
+
</li>
|
|
483
|
+
</ol>
|
|
484
|
+
|
|
485
|
+
```
|
|
486
|
+
|
|
487
|
+
### Compact, vertical, centered
|
|
488
|
+
|
|
489
|
+
```html
|
|
490
|
+
<ol class="pf-c-progress-stepper pf-m-center pf-m-vertical pf-m-compact">
|
|
491
|
+
<li
|
|
492
|
+
class="pf-c-progress-stepper__step pf-m-success"
|
|
493
|
+
aria-label="completed step,"
|
|
494
|
+
>
|
|
495
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
496
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
497
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
498
|
+
</span>
|
|
499
|
+
</div>
|
|
500
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
501
|
+
<div class="pf-c-progress-stepper__step-title">First step</div>
|
|
502
|
+
<div
|
|
503
|
+
class="pf-c-progress-stepper__step-description"
|
|
504
|
+
>This is the first thing to happen</div>
|
|
505
|
+
</div>
|
|
506
|
+
</li>
|
|
507
|
+
<li
|
|
508
|
+
class="pf-c-progress-stepper__step pf-m-current pf-m-info"
|
|
509
|
+
aria-label="current step,in process step,"
|
|
510
|
+
>
|
|
511
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
512
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
513
|
+
<i class="pficon pf-icon-resources-full" aria-hidden="true"></i>
|
|
514
|
+
</span>
|
|
515
|
+
</div>
|
|
516
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
517
|
+
<div class="pf-c-progress-stepper__step-title">Second step</div>
|
|
518
|
+
<div
|
|
519
|
+
class="pf-c-progress-stepper__step-description"
|
|
520
|
+
>This is the second thing to happen</div>
|
|
521
|
+
</div>
|
|
522
|
+
</li>
|
|
523
|
+
<li
|
|
524
|
+
class="pf-c-progress-stepper__step pf-m-pending"
|
|
525
|
+
aria-label="pending step,"
|
|
526
|
+
>
|
|
527
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
528
|
+
<span class="pf-c-progress-stepper__step-icon"></span>
|
|
529
|
+
</div>
|
|
530
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
531
|
+
<div class="pf-c-progress-stepper__step-title">Third step</div>
|
|
532
|
+
<div
|
|
533
|
+
class="pf-c-progress-stepper__step-description"
|
|
534
|
+
>This is the last thing to happen</div>
|
|
535
|
+
</div>
|
|
536
|
+
</li>
|
|
537
|
+
</ol>
|
|
538
|
+
|
|
539
|
+
```
|
|
540
|
+
|
|
541
|
+
### Compact, centered
|
|
542
|
+
|
|
543
|
+
```html
|
|
544
|
+
<ol class="pf-c-progress-stepper pf-m-center pf-m-compact">
|
|
545
|
+
<li
|
|
546
|
+
class="pf-c-progress-stepper__step pf-m-success"
|
|
547
|
+
aria-label="completed step,"
|
|
548
|
+
>
|
|
549
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
550
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
551
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
552
|
+
</span>
|
|
553
|
+
</div>
|
|
554
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
555
|
+
<div class="pf-c-progress-stepper__step-title">First step</div>
|
|
556
|
+
<div
|
|
557
|
+
class="pf-c-progress-stepper__step-description"
|
|
558
|
+
>This is the first thing to happen</div>
|
|
559
|
+
</div>
|
|
560
|
+
</li>
|
|
561
|
+
<li
|
|
562
|
+
class="pf-c-progress-stepper__step pf-m-current pf-m-info"
|
|
563
|
+
aria-label="current step,in process step,"
|
|
564
|
+
>
|
|
565
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
566
|
+
<span class="pf-c-progress-stepper__step-icon">
|
|
567
|
+
<i class="pficon pf-icon-resources-full" aria-hidden="true"></i>
|
|
568
|
+
</span>
|
|
569
|
+
</div>
|
|
570
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
571
|
+
<div class="pf-c-progress-stepper__step-title">Second step</div>
|
|
572
|
+
<div
|
|
573
|
+
class="pf-c-progress-stepper__step-description"
|
|
574
|
+
>This is the second thing to happen</div>
|
|
575
|
+
</div>
|
|
576
|
+
</li>
|
|
577
|
+
<li
|
|
578
|
+
class="pf-c-progress-stepper__step pf-m-pending"
|
|
579
|
+
aria-label="pending step,"
|
|
580
|
+
>
|
|
581
|
+
<div class="pf-c-progress-stepper__step-connector">
|
|
582
|
+
<span class="pf-c-progress-stepper__step-icon"></span>
|
|
583
|
+
</div>
|
|
584
|
+
<div class="pf-c-progress-stepper__step-main">
|
|
585
|
+
<div class="pf-c-progress-stepper__step-title">Third step</div>
|
|
586
|
+
<div
|
|
587
|
+
class="pf-c-progress-stepper__step-description"
|
|
588
|
+
>This is the last thing to happen</div>
|
|
589
|
+
</div>
|
|
590
|
+
</li>
|
|
591
|
+
</ol>
|
|
592
|
+
|
|
593
|
+
```
|
|
594
|
+
|
|
270
595
|
### Basic with an issue
|
|
271
596
|
|
|
272
597
|
```html
|
|
@@ -552,7 +877,8 @@ Steps can be modified with `.pf-m-success`, `.pf-m-warning`, `.pf-m-danger`, and
|
|
|
552
877
|
| `.progress-stepper__step-title` | `<div>`, `<button>` | Contains the title of the step. **Note:** the step title is a `<button>` when it has `.pf-m-help-text` and is used to trigger a popover with help text. |
|
|
553
878
|
| `.progress-stepper__step-description` | `<div>` | Contains the description of the step. |
|
|
554
879
|
| `.pf-m-center` | `.pf-c-progress-stepper` | Modifies to center each step. |
|
|
555
|
-
| `.pf-m-vertical`
|
|
880
|
+
| `.pf-m-vertical{-on-[breakpoint]}` | `.pf-c-progress-stepper` | Modifies progress stepper vertical layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
881
|
+
| `.pf-m-horizontal{-on-[breakpoint]}` | `.pf-c-progress-stepper` | Modifies progress stepper horizontal layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
556
882
|
| `.pf-m-compact` | `.pf-c-progress-stepper` | Modifies for compact styling. |
|
|
557
883
|
| `.pf-m-success` | `.pf-c-progress-stepper__step` | Modifies for success styling. |
|
|
558
884
|
| `.pf-m-warning` | `.pf-c-progress-stepper__step` | Modifies for warning styling. |
|