@patternfly/patternfly 4.190.0 → 4.192.1
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/RELEASE-NOTES.md +26 -0
- package/components/Divider/divider.css +159 -13
- package/components/Divider/divider.scss +74 -28
- package/components/Page/page.css +4 -0
- package/components/Page/page.scss +5 -0
- package/components/TextInputGroup/text-input-group.css +5 -0
- package/components/TextInputGroup/text-input-group.scss +6 -0
- package/components/Wizard/wizard.css +1 -1
- package/components/Wizard/wizard.scss +1 -1
- package/docs/components/Divider/examples/Divider.css +11 -5
- package/docs/components/Divider/examples/Divider.md +14 -0
- package/docs/components/InputGroup/examples/InputGroup.md +5 -5
- package/docs/components/Page/examples/Page.md +1 -0
- package/docs/components/TextInputGroup/examples/TextInputGroup.css +23 -0
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +617 -1
- package/docs/components/Wizard/examples/Wizard.md +273 -0
- package/docs/demos/Dashboard/examples/Dashboard.md +2 -2
- package/docs/demos/Wizard/examples/Wizard.md +2626 -240
- package/package.json +1 -1
- package/patternfly-no-reset.css +169 -14
- package/patternfly.css +169 -14
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -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
|
|
@@ -1036,7 +1036,7 @@ cssPrefix: pf-d-dashboard
|
|
|
1036
1036
|
</div>
|
|
1037
1037
|
</div>
|
|
1038
1038
|
</div>
|
|
1039
|
-
<hr class="pf-c-divider pf-m-vertical pf-m-inset-3xl" />
|
|
1039
|
+
<hr class="pf-c-divider pf-m-vertical-on-md pf-m-inset-3xl" />
|
|
1040
1040
|
<div
|
|
1041
1041
|
class="pf-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
|
|
1042
1042
|
>
|
|
@@ -1114,7 +1114,7 @@ cssPrefix: pf-d-dashboard
|
|
|
1114
1114
|
</div>
|
|
1115
1115
|
</div>
|
|
1116
1116
|
</div>
|
|
1117
|
-
<hr class="pf-c-divider pf-m-vertical pf-m-inset-3xl" />
|
|
1117
|
+
<hr class="pf-c-divider pf-m-vertical-on-md pf-m-inset-3xl" />
|
|
1118
1118
|
<div
|
|
1119
1119
|
class="pf-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
|
|
1120
1120
|
>
|