@patternfly/patternfly 4.190.0 → 4.191.0
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/Page/page.css +4 -0
- package/components/Page/page.scss +5 -0
- package/components/Wizard/wizard.css +1 -1
- package/components/Wizard/wizard.scss +1 -1
- package/docs/components/Page/examples/Page.md +1 -0
- package/docs/components/Wizard/examples/Wizard.md +273 -0
- package/docs/demos/Wizard/examples/Wizard.md +2626 -240
- package/package.json +1 -1
- package/patternfly-no-reset.css +5 -1
- package/patternfly.css +5 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/components/Page/page.css
CHANGED
|
@@ -211,6 +211,7 @@
|
|
|
211
211
|
--pf-c-page__main-wizard--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
|
|
212
212
|
--pf-c-page__main-wizard--BorderTopColor: var(--pf-global--BorderColor--100);
|
|
213
213
|
--pf-c-page__main-wizard--BorderTopWidth: var(--pf-global--BorderWidth--sm);
|
|
214
|
+
--pf-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
|
|
214
215
|
display: grid;
|
|
215
216
|
height: 100%;
|
|
216
217
|
grid-template-columns: 1fr;
|
|
@@ -740,6 +741,9 @@
|
|
|
740
741
|
.pf-c-page__main-wizard:first-child {
|
|
741
742
|
--pf-c-page__main-wizard--BorderTopWidth: 0;
|
|
742
743
|
}
|
|
744
|
+
.pf-c-page__main-wizard.pf-m-light-200 {
|
|
745
|
+
--pf-c-page__main-wizard--BackgroundColor: var(--pf-c-page__main-wizard--m-light-200--BackgroundColor);
|
|
746
|
+
}
|
|
743
747
|
|
|
744
748
|
.pf-c-page__main-wizard .pf-c-page__main-body {
|
|
745
749
|
min-height: 0;
|
|
@@ -185,6 +185,7 @@ $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl",
|
|
|
185
185
|
--pf-c-page__main-wizard--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
|
|
186
186
|
--pf-c-page__main-wizard--BorderTopColor: var(--pf-global--BorderColor--100);
|
|
187
187
|
--pf-c-page__main-wizard--BorderTopWidth: var(--pf-global--BorderWidth--sm);
|
|
188
|
+
--pf-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
|
|
188
189
|
|
|
189
190
|
// Base
|
|
190
191
|
display: grid;
|
|
@@ -655,6 +656,10 @@ $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl",
|
|
|
655
656
|
&:first-child {
|
|
656
657
|
--pf-c-page__main-wizard--BorderTopWidth: 0;
|
|
657
658
|
}
|
|
659
|
+
|
|
660
|
+
&.pf-m-light-200 {
|
|
661
|
+
--pf-c-page__main-wizard--BackgroundColor: var(--pf-c-page__main-wizard--m-light-200--BackgroundColor);
|
|
662
|
+
}
|
|
658
663
|
}
|
|
659
664
|
|
|
660
665
|
.pf-c-page__main-wizard .pf-c-page__main-body {
|
|
@@ -206,7 +206,7 @@
|
|
|
206
206
|
flex: 1 1 var(--pf-c-modal-box--c-wizard--FlexBasis);
|
|
207
207
|
min-height: 0;
|
|
208
208
|
}
|
|
209
|
-
.pf-c-wizard >
|
|
209
|
+
.pf-c-wizard > :not(.pf-c-wizard__outer-wrap):not(.pf-c-drawer) {
|
|
210
210
|
flex-shrink: 0;
|
|
211
211
|
}
|
|
212
212
|
.pf-c-wizard.pf-m-finished {
|
|
@@ -215,6 +215,7 @@ This component provides the basic chrome for a page, including sidebar, header,
|
|
|
215
215
|
| `.pf-m-light` | `.pf-c-page__main-section` | Modifies a main page section to have a light theme. |
|
|
216
216
|
| `.pf-m-dark-200` | `.pf-c-page__main-section` | Modifies a main page section to have a dark theme and a dark transparent background. |
|
|
217
217
|
| `.pf-m-dark-100` | `.pf-c-page__main-section` | Modifies a main page section to have a dark theme and a darker transparent background. |
|
|
218
|
+
| `.pf-m-light-200` | `.pf-c-page__main-wizard` | Modifies a wizard page section to have a light 200 theme. |
|
|
218
219
|
| `.pf-m-no-padding`, `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
219
220
|
| `.pf-m-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Should be used with pf-m-no-padding. |
|
|
220
221
|
| `.pf-m-fill` | `.pf-c-page__main-section` | Modifies a main page section to grow to fill the available vertical space. |
|
|
@@ -461,6 +461,279 @@ wrapperTag: div
|
|
|
461
461
|
|
|
462
462
|
```
|
|
463
463
|
|
|
464
|
+
### With drawer
|
|
465
|
+
|
|
466
|
+
```html isFullscreen
|
|
467
|
+
<div class="pf-c-wizard">
|
|
468
|
+
<div class="pf-c-wizard__header">
|
|
469
|
+
<button
|
|
470
|
+
class="pf-c-button pf-m-plain pf-c-wizard__close"
|
|
471
|
+
type="button"
|
|
472
|
+
aria-label="Close"
|
|
473
|
+
>
|
|
474
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
475
|
+
</button>
|
|
476
|
+
<h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
|
|
477
|
+
|
|
478
|
+
<div class="pf-c-wizard__description">Here is where the description goes</div>
|
|
479
|
+
</div>
|
|
480
|
+
<button
|
|
481
|
+
aria-label="Wizard Header Toggle"
|
|
482
|
+
class="pf-c-wizard__toggle"
|
|
483
|
+
aria-expanded="false"
|
|
484
|
+
>
|
|
485
|
+
<span class="pf-c-wizard__toggle-list">
|
|
486
|
+
<span class="pf-c-wizard__toggle-list-item">
|
|
487
|
+
<span class="pf-c-wizard__toggle-num">2</span>
|
|
488
|
+
Configuration
|
|
489
|
+
<i
|
|
490
|
+
class="fas fa-angle-right pf-c-wizard__toggle-separator"
|
|
491
|
+
aria-hidden="true"
|
|
492
|
+
></i>
|
|
493
|
+
</span>
|
|
494
|
+
<span class="pf-c-wizard__toggle-list-item">Substep B</span>
|
|
495
|
+
</span>
|
|
496
|
+
<span class="pf-c-wizard__toggle-icon">
|
|
497
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
498
|
+
</span>
|
|
499
|
+
</button>
|
|
500
|
+
<div class="pf-c-drawer pf-m-expanded pf-m-inline">
|
|
501
|
+
<div class="pf-c-drawer__main">
|
|
502
|
+
<div class="pf-c-drawer__content">
|
|
503
|
+
<div class="pf-c-wizard__outer-wrap">
|
|
504
|
+
<div class="pf-c-wizard__inner-wrap">
|
|
505
|
+
<main class="pf-c-wizard__main" tabindex="0">
|
|
506
|
+
<div class="pf-c-wizard__main-body">
|
|
507
|
+
<nav class="pf-c-wizard__nav" aria-label="Steps">
|
|
508
|
+
<ol class="pf-c-wizard__nav-list">
|
|
509
|
+
<li class="pf-c-wizard__nav-item">
|
|
510
|
+
<button class="pf-c-wizard__nav-link">Information</button>
|
|
511
|
+
</li>
|
|
512
|
+
<li class="pf-c-wizard__nav-item">
|
|
513
|
+
<button
|
|
514
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
515
|
+
>Configuration</button>
|
|
516
|
+
<ol class="pf-c-wizard__nav-list">
|
|
517
|
+
<li class="pf-c-wizard__nav-item">
|
|
518
|
+
<button class="pf-c-wizard__nav-link">Substep A</button>
|
|
519
|
+
</li>
|
|
520
|
+
<li class="pf-c-wizard__nav-item">
|
|
521
|
+
<button
|
|
522
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
523
|
+
aria-current="page"
|
|
524
|
+
>Substep B</button>
|
|
525
|
+
</li>
|
|
526
|
+
<li class="pf-c-wizard__nav-item">
|
|
527
|
+
<button class="pf-c-wizard__nav-link">Substep C</button>
|
|
528
|
+
</li>
|
|
529
|
+
</ol>
|
|
530
|
+
</li>
|
|
531
|
+
<li class="pf-c-wizard__nav-item">
|
|
532
|
+
<button class="pf-c-wizard__nav-link">Additional</button>
|
|
533
|
+
</li>
|
|
534
|
+
<li class="pf-c-wizard__nav-item">
|
|
535
|
+
<button class="pf-c-wizard__nav-link" disabled>Review</button>
|
|
536
|
+
</li>
|
|
537
|
+
</ol>
|
|
538
|
+
</nav>
|
|
539
|
+
<form novalidate class="pf-c-form">
|
|
540
|
+
<div class="pf-c-form__group">
|
|
541
|
+
<div class="pf-c-form__group-label">
|
|
542
|
+
<label
|
|
543
|
+
class="pf-c-form__label"
|
|
544
|
+
for="wizard-with-drawer-example-form-field1"
|
|
545
|
+
>
|
|
546
|
+
<span class="pf-c-form__label-text">Field 1</span>
|
|
547
|
+
<span
|
|
548
|
+
class="pf-c-form__label-required"
|
|
549
|
+
aria-hidden="true"
|
|
550
|
+
>*</span>
|
|
551
|
+
</label>
|
|
552
|
+
</div>
|
|
553
|
+
<div class="pf-c-form__group-control">
|
|
554
|
+
<input
|
|
555
|
+
class="pf-c-form-control"
|
|
556
|
+
required
|
|
557
|
+
type="text"
|
|
558
|
+
id="wizard-with-drawer-example-form-field1"
|
|
559
|
+
name="wizard-with-drawer-example-form-field1"
|
|
560
|
+
/>
|
|
561
|
+
</div>
|
|
562
|
+
</div>
|
|
563
|
+
<div class="pf-c-form__group">
|
|
564
|
+
<div class="pf-c-form__group-label">
|
|
565
|
+
<label
|
|
566
|
+
class="pf-c-form__label"
|
|
567
|
+
for="wizard-with-drawer-example-form-field2"
|
|
568
|
+
>
|
|
569
|
+
<span class="pf-c-form__label-text">Field 2</span>
|
|
570
|
+
<span
|
|
571
|
+
class="pf-c-form__label-required"
|
|
572
|
+
aria-hidden="true"
|
|
573
|
+
>*</span>
|
|
574
|
+
</label>
|
|
575
|
+
</div>
|
|
576
|
+
<div class="pf-c-form__group-control">
|
|
577
|
+
<input
|
|
578
|
+
class="pf-c-form-control"
|
|
579
|
+
required
|
|
580
|
+
type="text"
|
|
581
|
+
id="wizard-with-drawer-example-form-field2"
|
|
582
|
+
name="wizard-with-drawer-example-form-field2"
|
|
583
|
+
/>
|
|
584
|
+
</div>
|
|
585
|
+
</div>
|
|
586
|
+
<div class="pf-c-form__group">
|
|
587
|
+
<div class="pf-c-form__group-label">
|
|
588
|
+
<label
|
|
589
|
+
class="pf-c-form__label"
|
|
590
|
+
for="wizard-with-drawer-example-form-field3"
|
|
591
|
+
>
|
|
592
|
+
<span class="pf-c-form__label-text">Field 3</span>
|
|
593
|
+
<span
|
|
594
|
+
class="pf-c-form__label-required"
|
|
595
|
+
aria-hidden="true"
|
|
596
|
+
>*</span>
|
|
597
|
+
</label>
|
|
598
|
+
</div>
|
|
599
|
+
<div class="pf-c-form__group-control">
|
|
600
|
+
<input
|
|
601
|
+
class="pf-c-form-control"
|
|
602
|
+
required
|
|
603
|
+
type="text"
|
|
604
|
+
id="wizard-with-drawer-example-form-field3"
|
|
605
|
+
name="wizard-with-drawer-example-form-field3"
|
|
606
|
+
/>
|
|
607
|
+
</div>
|
|
608
|
+
</div>
|
|
609
|
+
<div class="pf-c-form__group">
|
|
610
|
+
<div class="pf-c-form__group-label">
|
|
611
|
+
<label
|
|
612
|
+
class="pf-c-form__label"
|
|
613
|
+
for="wizard-with-drawer-example-form-field4"
|
|
614
|
+
>
|
|
615
|
+
<span class="pf-c-form__label-text">Field 4</span>
|
|
616
|
+
<span
|
|
617
|
+
class="pf-c-form__label-required"
|
|
618
|
+
aria-hidden="true"
|
|
619
|
+
>*</span>
|
|
620
|
+
</label>
|
|
621
|
+
</div>
|
|
622
|
+
<div class="pf-c-form__group-control">
|
|
623
|
+
<input
|
|
624
|
+
class="pf-c-form-control"
|
|
625
|
+
required
|
|
626
|
+
type="text"
|
|
627
|
+
id="wizard-with-drawer-example-form-field4"
|
|
628
|
+
name="wizard-with-drawer-example-form-field4"
|
|
629
|
+
/>
|
|
630
|
+
</div>
|
|
631
|
+
</div>
|
|
632
|
+
<div class="pf-c-form__group">
|
|
633
|
+
<div class="pf-c-form__group-label">
|
|
634
|
+
<label
|
|
635
|
+
class="pf-c-form__label"
|
|
636
|
+
for="wizard-with-drawer-example-form-field5"
|
|
637
|
+
>
|
|
638
|
+
<span class="pf-c-form__label-text">Field 5</span>
|
|
639
|
+
<span
|
|
640
|
+
class="pf-c-form__label-required"
|
|
641
|
+
aria-hidden="true"
|
|
642
|
+
>*</span>
|
|
643
|
+
</label>
|
|
644
|
+
</div>
|
|
645
|
+
<div class="pf-c-form__group-control">
|
|
646
|
+
<input
|
|
647
|
+
class="pf-c-form-control"
|
|
648
|
+
required
|
|
649
|
+
type="text"
|
|
650
|
+
id="wizard-with-drawer-example-form-field5"
|
|
651
|
+
name="wizard-with-drawer-example-form-field5"
|
|
652
|
+
/>
|
|
653
|
+
</div>
|
|
654
|
+
</div>
|
|
655
|
+
<div class="pf-c-form__group">
|
|
656
|
+
<div class="pf-c-form__group-label">
|
|
657
|
+
<label
|
|
658
|
+
class="pf-c-form__label"
|
|
659
|
+
for="wizard-with-drawer-example-form-field6"
|
|
660
|
+
>
|
|
661
|
+
<span class="pf-c-form__label-text">Field 6</span>
|
|
662
|
+
<span
|
|
663
|
+
class="pf-c-form__label-required"
|
|
664
|
+
aria-hidden="true"
|
|
665
|
+
>*</span>
|
|
666
|
+
</label>
|
|
667
|
+
</div>
|
|
668
|
+
<div class="pf-c-form__group-control">
|
|
669
|
+
<input
|
|
670
|
+
class="pf-c-form-control"
|
|
671
|
+
required
|
|
672
|
+
type="text"
|
|
673
|
+
id="wizard-with-drawer-example-form-field6"
|
|
674
|
+
name="wizard-with-drawer-example-form-field6"
|
|
675
|
+
/>
|
|
676
|
+
</div>
|
|
677
|
+
</div>
|
|
678
|
+
<div class="pf-c-form__group">
|
|
679
|
+
<div class="pf-c-form__group-label">
|
|
680
|
+
<label
|
|
681
|
+
class="pf-c-form__label"
|
|
682
|
+
for="wizard-with-drawer-example-form-field7"
|
|
683
|
+
>
|
|
684
|
+
<span class="pf-c-form__label-text">Field 7</span>
|
|
685
|
+
<span
|
|
686
|
+
class="pf-c-form__label-required"
|
|
687
|
+
aria-hidden="true"
|
|
688
|
+
>*</span>
|
|
689
|
+
</label>
|
|
690
|
+
</div>
|
|
691
|
+
<div class="pf-c-form__group-control">
|
|
692
|
+
<input
|
|
693
|
+
class="pf-c-form-control"
|
|
694
|
+
required
|
|
695
|
+
type="text"
|
|
696
|
+
id="wizard-with-drawer-example-form-field7"
|
|
697
|
+
name="wizard-with-drawer-example-form-field7"
|
|
698
|
+
/>
|
|
699
|
+
</div>
|
|
700
|
+
</div>
|
|
701
|
+
</form>
|
|
702
|
+
</div>
|
|
703
|
+
</main>
|
|
704
|
+
</div>
|
|
705
|
+
<footer class="pf-c-wizard__footer">
|
|
706
|
+
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
707
|
+
<button class="pf-c-button pf-m-secondary" type="button">Back</button>
|
|
708
|
+
<div class="pf-c-wizard__footer-cancel">
|
|
709
|
+
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
710
|
+
</div>
|
|
711
|
+
</footer>
|
|
712
|
+
</div>
|
|
713
|
+
</div>
|
|
714
|
+
<div class="pf-c-drawer__panel pf-m-light-200">
|
|
715
|
+
<div class="pf-c-drawer__body">
|
|
716
|
+
<div class="pf-c-drawer__head">
|
|
717
|
+
<div class="pf-c-drawer__actions">
|
|
718
|
+
<div class="pf-c-drawer__close">
|
|
719
|
+
<button
|
|
720
|
+
class="pf-c-button pf-m-plain"
|
|
721
|
+
type="button"
|
|
722
|
+
aria-label="Close drawer panel"
|
|
723
|
+
>
|
|
724
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
725
|
+
</button>
|
|
726
|
+
</div>
|
|
727
|
+
</div>drawer-panel
|
|
728
|
+
</div>
|
|
729
|
+
</div>
|
|
730
|
+
</div>
|
|
731
|
+
</div>
|
|
732
|
+
</div>
|
|
733
|
+
</div>
|
|
734
|
+
|
|
735
|
+
```
|
|
736
|
+
|
|
464
737
|
### Expandable collapsed
|
|
465
738
|
|
|
466
739
|
```html isFullscreen
|