@patternfly/patternfly 4.192.0 → 4.192.3
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/DescriptionList/description-list.css +3 -0
- package/components/DescriptionList/description-list.scss +2 -0
- package/components/TextInputGroup/text-input-group.css +5 -0
- package/components/TextInputGroup/text-input-group.scss +6 -0
- package/components/TreeView/tree-view.css +2 -0
- package/components/TreeView/tree-view.scss +2 -0
- package/docs/components/InputGroup/examples/InputGroup.md +5 -5
- package/docs/components/TextInputGroup/examples/TextInputGroup.css +23 -0
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +617 -1
- package/package.json +2 -2
- package/patternfly-no-reset.css +10 -0
- package/patternfly.css +10 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -3,7 +3,9 @@ id: 'Text input group'
|
|
|
3
3
|
beta: true
|
|
4
4
|
section: components
|
|
5
5
|
cssPrefix: pf-c-text-input-group
|
|
6
|
-
|
|
6
|
+
---import './TextInputGroup.css'
|
|
7
|
+
|
|
8
|
+
## Examples
|
|
7
9
|
|
|
8
10
|
### Basic
|
|
9
11
|
|
|
@@ -516,3 +518,617 @@ cssPrefix: pf-c-text-input-group
|
|
|
516
518
|
</div>
|
|
517
519
|
|
|
518
520
|
```
|
|
521
|
+
|
|
522
|
+
### Search input group
|
|
523
|
+
|
|
524
|
+
```html
|
|
525
|
+
<div class="pf-c-text-input-group">
|
|
526
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
527
|
+
<span class="pf-c-text-input-group__text">
|
|
528
|
+
<span class="pf-c-text-input-group__icon">
|
|
529
|
+
<i class="fas fa-fw fa-search"></i>
|
|
530
|
+
</span>
|
|
531
|
+
<input
|
|
532
|
+
class="pf-c-text-input-group__text-input"
|
|
533
|
+
type="text"
|
|
534
|
+
value
|
|
535
|
+
aria-label="Type to filter"
|
|
536
|
+
placeholder="Find by name"
|
|
537
|
+
/>
|
|
538
|
+
</span>
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
|
|
542
|
+
```
|
|
543
|
+
|
|
544
|
+
### Search input group, no match
|
|
545
|
+
|
|
546
|
+
```html
|
|
547
|
+
<div class="pf-c-text-input-group">
|
|
548
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
549
|
+
<span class="pf-c-text-input-group__text">
|
|
550
|
+
<span class="pf-c-text-input-group__icon">
|
|
551
|
+
<i class="fas fa-fw fa-search"></i>
|
|
552
|
+
</span>
|
|
553
|
+
<input
|
|
554
|
+
class="pf-c-text-input-group__text-input"
|
|
555
|
+
type="text"
|
|
556
|
+
value="Joh"
|
|
557
|
+
aria-label="Type to filter"
|
|
558
|
+
/>
|
|
559
|
+
</span>
|
|
560
|
+
</div>
|
|
561
|
+
<div class="pf-c-text-input-group__utilities">
|
|
562
|
+
<button
|
|
563
|
+
class="pf-c-button pf-m-plain"
|
|
564
|
+
type="button"
|
|
565
|
+
aria-label="Clear input"
|
|
566
|
+
>
|
|
567
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
568
|
+
</button>
|
|
569
|
+
</div>
|
|
570
|
+
</div>
|
|
571
|
+
|
|
572
|
+
```
|
|
573
|
+
|
|
574
|
+
### Search input group, match with result count
|
|
575
|
+
|
|
576
|
+
```html
|
|
577
|
+
<div class="pf-c-text-input-group">
|
|
578
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
579
|
+
<span class="pf-c-text-input-group__text">
|
|
580
|
+
<span class="pf-c-text-input-group__icon">
|
|
581
|
+
<i class="fas fa-fw fa-search"></i>
|
|
582
|
+
</span>
|
|
583
|
+
<input
|
|
584
|
+
class="pf-c-text-input-group__text-input"
|
|
585
|
+
type="text"
|
|
586
|
+
value="John Doe"
|
|
587
|
+
aria-label="Type to filter"
|
|
588
|
+
/>
|
|
589
|
+
</span>
|
|
590
|
+
</div>
|
|
591
|
+
<div class="pf-c-text-input-group__utilities">
|
|
592
|
+
<span class="pf-c-badge pf-m-read">3</span>
|
|
593
|
+
<button
|
|
594
|
+
class="pf-c-button pf-m-plain"
|
|
595
|
+
type="button"
|
|
596
|
+
aria-label="Clear input"
|
|
597
|
+
>
|
|
598
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
599
|
+
</button>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
|
|
603
|
+
```
|
|
604
|
+
|
|
605
|
+
### Search input group, match with navigable options
|
|
606
|
+
|
|
607
|
+
```html
|
|
608
|
+
<div class="pf-c-text-input-group">
|
|
609
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
610
|
+
<span class="pf-c-text-input-group__text">
|
|
611
|
+
<span class="pf-c-text-input-group__icon">
|
|
612
|
+
<i class="fas fa-fw fa-search"></i>
|
|
613
|
+
</span>
|
|
614
|
+
<input
|
|
615
|
+
class="pf-c-text-input-group__text-input"
|
|
616
|
+
type="text"
|
|
617
|
+
value="John Doe"
|
|
618
|
+
aria-label="Type to filter"
|
|
619
|
+
/>
|
|
620
|
+
</span>
|
|
621
|
+
</div>
|
|
622
|
+
<div class="pf-c-text-input-group__utilities">
|
|
623
|
+
<span class="pf-c-badge pf-m-read">1 / 3</span>
|
|
624
|
+
<div class="pf-c-text-input-group__group">
|
|
625
|
+
<button
|
|
626
|
+
class="pf-c-button pf-m-plain"
|
|
627
|
+
type="button"
|
|
628
|
+
disabled
|
|
629
|
+
aria-label="Next"
|
|
630
|
+
>
|
|
631
|
+
<i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
|
|
632
|
+
</button>
|
|
633
|
+
<button class="pf-c-button pf-m-plain" type="button" aria-label="Next">
|
|
634
|
+
<i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
|
|
635
|
+
</button>
|
|
636
|
+
</div>
|
|
637
|
+
<button
|
|
638
|
+
class="pf-c-button pf-m-plain"
|
|
639
|
+
type="button"
|
|
640
|
+
aria-label="Clear input"
|
|
641
|
+
>
|
|
642
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
643
|
+
</button>
|
|
644
|
+
</div>
|
|
645
|
+
</div>
|
|
646
|
+
|
|
647
|
+
```
|
|
648
|
+
|
|
649
|
+
### Search input group, with submit button
|
|
650
|
+
|
|
651
|
+
```html
|
|
652
|
+
<div class="pf-c-input-group">
|
|
653
|
+
<div class="pf-c-text-input-group">
|
|
654
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
655
|
+
<span class="pf-c-text-input-group__text">
|
|
656
|
+
<span class="pf-c-text-input-group__icon">
|
|
657
|
+
<i class="fas fa-fw fa-search"></i>
|
|
658
|
+
</span>
|
|
659
|
+
<input
|
|
660
|
+
class="pf-c-text-input-group__text-input"
|
|
661
|
+
type="text"
|
|
662
|
+
value
|
|
663
|
+
placeholder="Find by name"
|
|
664
|
+
aria-label="Type to filter"
|
|
665
|
+
/>
|
|
666
|
+
</span>
|
|
667
|
+
</div>
|
|
668
|
+
</div>
|
|
669
|
+
<button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
|
|
670
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
671
|
+
</button>
|
|
672
|
+
</div>
|
|
673
|
+
|
|
674
|
+
```
|
|
675
|
+
|
|
676
|
+
### Search input group, advanced search
|
|
677
|
+
|
|
678
|
+
```html
|
|
679
|
+
<div class="pf-c-input-group">
|
|
680
|
+
<div class="pf-c-text-input-group">
|
|
681
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
682
|
+
<span class="pf-c-text-input-group__text">
|
|
683
|
+
<span class="pf-c-text-input-group__icon">
|
|
684
|
+
<i class="fas fa-fw fa-search"></i>
|
|
685
|
+
</span>
|
|
686
|
+
<input
|
|
687
|
+
class="pf-c-text-input-group__text-input"
|
|
688
|
+
type="text"
|
|
689
|
+
value="username:root firstname:ned"
|
|
690
|
+
aria-label="Type to filter"
|
|
691
|
+
/>
|
|
692
|
+
</span>
|
|
693
|
+
</div>
|
|
694
|
+
<div class="pf-c-text-input-group__utilities">
|
|
695
|
+
<button
|
|
696
|
+
class="pf-c-button pf-m-plain"
|
|
697
|
+
type="button"
|
|
698
|
+
aria-label="Clear input"
|
|
699
|
+
>
|
|
700
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
701
|
+
</button>
|
|
702
|
+
</div>
|
|
703
|
+
</div>
|
|
704
|
+
<button
|
|
705
|
+
class="pf-c-button pf-m-control"
|
|
706
|
+
type="button"
|
|
707
|
+
aria-expanded="false"
|
|
708
|
+
aria-label="Advanced search"
|
|
709
|
+
>
|
|
710
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
711
|
+
</button>
|
|
712
|
+
<button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
|
|
713
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
714
|
+
</button>
|
|
715
|
+
</div>
|
|
716
|
+
|
|
717
|
+
```
|
|
718
|
+
|
|
719
|
+
### Search input group, advanced search expanded
|
|
720
|
+
|
|
721
|
+
```html
|
|
722
|
+
<div class="pf-c-input-group">
|
|
723
|
+
<div class="pf-c-text-input-group">
|
|
724
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
725
|
+
<span class="pf-c-text-input-group__text">
|
|
726
|
+
<span class="pf-c-text-input-group__icon">
|
|
727
|
+
<i class="fas fa-fw fa-search"></i>
|
|
728
|
+
</span>
|
|
729
|
+
<input
|
|
730
|
+
class="pf-c-text-input-group__text-input"
|
|
731
|
+
type="text"
|
|
732
|
+
value="username:root firstname:ned"
|
|
733
|
+
aria-label="Type to filter"
|
|
734
|
+
/>
|
|
735
|
+
</span>
|
|
736
|
+
</div>
|
|
737
|
+
<div class="pf-c-text-input-group__utilities">
|
|
738
|
+
<button
|
|
739
|
+
class="pf-c-button pf-m-plain"
|
|
740
|
+
type="button"
|
|
741
|
+
aria-label="Clear input"
|
|
742
|
+
>
|
|
743
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
744
|
+
</button>
|
|
745
|
+
</div>
|
|
746
|
+
</div>
|
|
747
|
+
<button
|
|
748
|
+
class="pf-c-button pf-m-control pf-m-expanded"
|
|
749
|
+
type="button"
|
|
750
|
+
aria-expanded="true"
|
|
751
|
+
aria-label="Advanced search"
|
|
752
|
+
>
|
|
753
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
754
|
+
</button>
|
|
755
|
+
<button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
|
|
756
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
757
|
+
</button>
|
|
758
|
+
</div>
|
|
759
|
+
|
|
760
|
+
<div class="pf-c-panel pf-m-raised">
|
|
761
|
+
<div class="pf-c-panel__main">
|
|
762
|
+
<div class="pf-c-panel__main-body">
|
|
763
|
+
<form novalidate class="pf-c-form">
|
|
764
|
+
<div class="pf-c-form__group">
|
|
765
|
+
<div class="pf-c-form__group-label">
|
|
766
|
+
<label
|
|
767
|
+
class="pf-c-form__label"
|
|
768
|
+
for="text-input-group-advanced-search-input-expanded-legacy-form-example-username"
|
|
769
|
+
>
|
|
770
|
+
<span class="pf-c-form__label-text">Username</span>
|
|
771
|
+
</label>
|
|
772
|
+
</div>
|
|
773
|
+
<div class="pf-c-form__group-control">
|
|
774
|
+
<input
|
|
775
|
+
class="pf-c-form-control"
|
|
776
|
+
type="text"
|
|
777
|
+
value="root"
|
|
778
|
+
id="text-input-group-advanced-search-input-expanded-legacy-form-example-username"
|
|
779
|
+
name="text-input-group-advanced-search-input-expanded-legacy-form-example-username"
|
|
780
|
+
/>
|
|
781
|
+
</div>
|
|
782
|
+
</div>
|
|
783
|
+
<div class="pf-c-form__group">
|
|
784
|
+
<div class="pf-c-form__group-label">
|
|
785
|
+
<label
|
|
786
|
+
class="pf-c-form__label"
|
|
787
|
+
for="text-input-group-advanced-search-input-expanded-legacy-form-example-firstname"
|
|
788
|
+
>
|
|
789
|
+
<span class="pf-c-form__label-text">First name</span>
|
|
790
|
+
</label>
|
|
791
|
+
</div>
|
|
792
|
+
<div class="pf-c-form__group-control">
|
|
793
|
+
<input
|
|
794
|
+
class="pf-c-form-control"
|
|
795
|
+
type="text"
|
|
796
|
+
value="ned"
|
|
797
|
+
id="text-input-group-advanced-search-input-expanded-legacy-form-example-firstname"
|
|
798
|
+
name="text-input-group-advanced-search-input-expanded-legacy-form-example-firstname"
|
|
799
|
+
/>
|
|
800
|
+
</div>
|
|
801
|
+
</div>
|
|
802
|
+
<div class="pf-c-form__group">
|
|
803
|
+
<div class="pf-c-form__group-label">
|
|
804
|
+
<label
|
|
805
|
+
class="pf-c-form__label"
|
|
806
|
+
for="text-input-group-advanced-search-input-expanded-legacy-form-example-group"
|
|
807
|
+
>
|
|
808
|
+
<span class="pf-c-form__label-text">Group</span>
|
|
809
|
+
</label>
|
|
810
|
+
</div>
|
|
811
|
+
<div class="pf-c-form__group-control">
|
|
812
|
+
<input
|
|
813
|
+
class="pf-c-form-control"
|
|
814
|
+
type="text"
|
|
815
|
+
id="text-input-group-advanced-search-input-expanded-legacy-form-example-group"
|
|
816
|
+
name="text-input-group-advanced-search-input-expanded-legacy-form-example-group"
|
|
817
|
+
/>
|
|
818
|
+
</div>
|
|
819
|
+
</div>
|
|
820
|
+
<div class="pf-c-form__group">
|
|
821
|
+
<div class="pf-c-form__group-label">
|
|
822
|
+
<label
|
|
823
|
+
class="pf-c-form__label"
|
|
824
|
+
for="text-input-group-advanced-search-input-expanded-legacy-form-example-email"
|
|
825
|
+
>
|
|
826
|
+
<span class="pf-c-form__label-text">Email</span>
|
|
827
|
+
</label>
|
|
828
|
+
</div>
|
|
829
|
+
<div class="pf-c-form__group-control">
|
|
830
|
+
<input
|
|
831
|
+
class="pf-c-form-control"
|
|
832
|
+
type="text"
|
|
833
|
+
id="text-input-group-advanced-search-input-expanded-legacy-form-example-email"
|
|
834
|
+
name="text-input-group-advanced-search-input-expanded-legacy-form-example-email"
|
|
835
|
+
/>
|
|
836
|
+
</div>
|
|
837
|
+
</div>
|
|
838
|
+
<div class="pf-c-form__group pf-m-action">
|
|
839
|
+
<div class="pf-c-form__actions">
|
|
840
|
+
<button class="pf-c-button pf-m-primary" type="submit">Submit</button>
|
|
841
|
+
<button class="pf-c-button pf-m-link" type="reset">Reset</button>
|
|
842
|
+
</div>
|
|
843
|
+
</div>
|
|
844
|
+
</form>
|
|
845
|
+
</div>
|
|
846
|
+
</div>
|
|
847
|
+
</div>
|
|
848
|
+
|
|
849
|
+
```
|
|
850
|
+
|
|
851
|
+
### Search input group, autocomplete
|
|
852
|
+
|
|
853
|
+
```html
|
|
854
|
+
<div class="pf-c-text-input-group">
|
|
855
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
856
|
+
<span class="pf-c-text-input-group__text">
|
|
857
|
+
<span class="pf-c-text-input-group__icon">
|
|
858
|
+
<i class="fas fa-fw fa-search"></i>
|
|
859
|
+
</span>
|
|
860
|
+
<input
|
|
861
|
+
class="pf-c-text-input-group__text-input"
|
|
862
|
+
type="text"
|
|
863
|
+
value="app"
|
|
864
|
+
aria-label="Type to filter"
|
|
865
|
+
/>
|
|
866
|
+
</span>
|
|
867
|
+
</div>
|
|
868
|
+
<div class="pf-c-text-input-group__utilities">
|
|
869
|
+
<button
|
|
870
|
+
class="pf-c-button pf-m-plain"
|
|
871
|
+
type="button"
|
|
872
|
+
aria-label="Clear input"
|
|
873
|
+
>
|
|
874
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
875
|
+
</button>
|
|
876
|
+
</div>
|
|
877
|
+
</div>
|
|
878
|
+
|
|
879
|
+
<div class="pf-c-menu">
|
|
880
|
+
<div class="pf-c-menu__content">
|
|
881
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
882
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
883
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
884
|
+
<span class="pf-c-menu__item-main">
|
|
885
|
+
<span class="pf-c-menu__item-text">apple</span>
|
|
886
|
+
</span>
|
|
887
|
+
</button>
|
|
888
|
+
</li>
|
|
889
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
890
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
891
|
+
<span class="pf-c-menu__item-main">
|
|
892
|
+
<span class="pf-c-menu__item-text">appleby</span>
|
|
893
|
+
</span>
|
|
894
|
+
</button>
|
|
895
|
+
</li>
|
|
896
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
897
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
898
|
+
<span class="pf-c-menu__item-main">
|
|
899
|
+
<span class="pf-c-menu__item-text">appleseed</span>
|
|
900
|
+
</span>
|
|
901
|
+
</button>
|
|
902
|
+
</li>
|
|
903
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
904
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
905
|
+
<span class="pf-c-menu__item-main">
|
|
906
|
+
<span class="pf-c-menu__item-text">appleton</span>
|
|
907
|
+
</span>
|
|
908
|
+
</button>
|
|
909
|
+
</li>
|
|
910
|
+
</ul>
|
|
911
|
+
</div>
|
|
912
|
+
</div>
|
|
913
|
+
|
|
914
|
+
```
|
|
915
|
+
|
|
916
|
+
### Search input group, autocomplete last option hint
|
|
917
|
+
|
|
918
|
+
```html
|
|
919
|
+
<div class="pf-c-text-input-group">
|
|
920
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
921
|
+
<span class="pf-c-text-input-group__text">
|
|
922
|
+
<span class="pf-c-text-input-group__icon">
|
|
923
|
+
<i class="fas fa-fw fa-search"></i>
|
|
924
|
+
</span>
|
|
925
|
+
<input
|
|
926
|
+
class="pf-c-text-input-group__text-input pf-m-hint"
|
|
927
|
+
type="text"
|
|
928
|
+
value="appleseed"
|
|
929
|
+
disabled
|
|
930
|
+
aria-hidden="true"
|
|
931
|
+
/>
|
|
932
|
+
<input
|
|
933
|
+
class="pf-c-text-input-group__text-input"
|
|
934
|
+
type="text"
|
|
935
|
+
value="apples"
|
|
936
|
+
aria-label="Type to filter"
|
|
937
|
+
/>
|
|
938
|
+
</span>
|
|
939
|
+
</div>
|
|
940
|
+
<div class="pf-c-text-input-group__utilities">
|
|
941
|
+
<button
|
|
942
|
+
class="pf-c-button pf-m-plain"
|
|
943
|
+
type="button"
|
|
944
|
+
aria-label="Clear input"
|
|
945
|
+
>
|
|
946
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
947
|
+
</button>
|
|
948
|
+
</div>
|
|
949
|
+
</div>
|
|
950
|
+
|
|
951
|
+
<div class="pf-c-menu">
|
|
952
|
+
<div class="pf-c-menu__content">
|
|
953
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
954
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
955
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
956
|
+
<span class="pf-c-menu__item-main">
|
|
957
|
+
<span class="pf-c-menu__item-text">appleseed</span>
|
|
958
|
+
</span>
|
|
959
|
+
</button>
|
|
960
|
+
</li>
|
|
961
|
+
</ul>
|
|
962
|
+
</div>
|
|
963
|
+
</div>
|
|
964
|
+
|
|
965
|
+
```
|
|
966
|
+
|
|
967
|
+
### Search input group, advanced search expanded with autocomplete
|
|
968
|
+
|
|
969
|
+
```html
|
|
970
|
+
<div class="ws-example-wrapper">
|
|
971
|
+
<div class="pf-c-input-group">
|
|
972
|
+
<div class="pf-c-text-input-group">
|
|
973
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
974
|
+
<span class="pf-c-text-input-group__text">
|
|
975
|
+
<span class="pf-c-text-input-group__icon">
|
|
976
|
+
<i class="fas fa-fw fa-search"></i>
|
|
977
|
+
</span>
|
|
978
|
+
<input
|
|
979
|
+
class="pf-c-text-input-group__text-input"
|
|
980
|
+
type="text"
|
|
981
|
+
value="username:root firstname:n"
|
|
982
|
+
aria-label="Type to filter"
|
|
983
|
+
/>
|
|
984
|
+
</span>
|
|
985
|
+
</div>
|
|
986
|
+
<div class="pf-c-text-input-group__utilities">
|
|
987
|
+
<button
|
|
988
|
+
class="pf-c-button pf-m-plain"
|
|
989
|
+
type="button"
|
|
990
|
+
aria-label="Clear input"
|
|
991
|
+
>
|
|
992
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
993
|
+
</button>
|
|
994
|
+
</div>
|
|
995
|
+
</div>
|
|
996
|
+
<button
|
|
997
|
+
class="pf-c-button pf-m-control pf-m-expanded"
|
|
998
|
+
type="button"
|
|
999
|
+
aria-expanded="true"
|
|
1000
|
+
aria-label="Advanced search"
|
|
1001
|
+
>
|
|
1002
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1003
|
+
</button>
|
|
1004
|
+
<button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
|
|
1005
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
1006
|
+
</button>
|
|
1007
|
+
</div>
|
|
1008
|
+
|
|
1009
|
+
<div class="pf-c-panel pf-m-raised">
|
|
1010
|
+
<div class="pf-c-panel__main">
|
|
1011
|
+
<div class="pf-c-panel__main-body">
|
|
1012
|
+
<form novalidate class="pf-c-form">
|
|
1013
|
+
<div class="pf-c-form__group">
|
|
1014
|
+
<div class="pf-c-form__group-label">
|
|
1015
|
+
<label
|
|
1016
|
+
class="pf-c-form__label"
|
|
1017
|
+
for="text-input-group-advanced-search-input-form-with-autocomplete-example-username"
|
|
1018
|
+
>
|
|
1019
|
+
<span class="pf-c-form__label-text">Username</span>
|
|
1020
|
+
</label>
|
|
1021
|
+
</div>
|
|
1022
|
+
<div class="pf-c-form__group-control">
|
|
1023
|
+
<input
|
|
1024
|
+
class="pf-c-form-control"
|
|
1025
|
+
type="text"
|
|
1026
|
+
value="root"
|
|
1027
|
+
id="text-input-group-advanced-search-input-form-with-autocomplete-example-username"
|
|
1028
|
+
name="text-input-group-advanced-search-input-form-with-autocomplete-example-username"
|
|
1029
|
+
/>
|
|
1030
|
+
</div>
|
|
1031
|
+
</div>
|
|
1032
|
+
<div class="pf-c-form__group">
|
|
1033
|
+
<div class="pf-c-form__group-label">
|
|
1034
|
+
<label
|
|
1035
|
+
class="pf-c-form__label"
|
|
1036
|
+
for="text-input-group-advanced-search-input-form-with-autocomplete-example-firstname"
|
|
1037
|
+
>
|
|
1038
|
+
<span class="pf-c-form__label-text">First name</span>
|
|
1039
|
+
</label>
|
|
1040
|
+
</div>
|
|
1041
|
+
<div class="pf-c-form__group-control">
|
|
1042
|
+
<input
|
|
1043
|
+
class="pf-c-form-control"
|
|
1044
|
+
type="text"
|
|
1045
|
+
value="ned"
|
|
1046
|
+
id="text-input-group-advanced-search-input-form-with-autocomplete-example-firstname"
|
|
1047
|
+
name="text-input-group-advanced-search-input-form-with-autocomplete-example-firstname"
|
|
1048
|
+
/>
|
|
1049
|
+
</div>
|
|
1050
|
+
</div>
|
|
1051
|
+
<div class="pf-c-form__group">
|
|
1052
|
+
<div class="pf-c-form__group-label">
|
|
1053
|
+
<label
|
|
1054
|
+
class="pf-c-form__label"
|
|
1055
|
+
for="text-input-group-advanced-search-input-form-with-autocomplete-example-group"
|
|
1056
|
+
>
|
|
1057
|
+
<span class="pf-c-form__label-text">Group</span>
|
|
1058
|
+
</label>
|
|
1059
|
+
</div>
|
|
1060
|
+
<div class="pf-c-form__group-control">
|
|
1061
|
+
<input
|
|
1062
|
+
class="pf-c-form-control"
|
|
1063
|
+
type="text"
|
|
1064
|
+
id="text-input-group-advanced-search-input-form-with-autocomplete-example-group"
|
|
1065
|
+
name="text-input-group-advanced-search-input-form-with-autocomplete-example-group"
|
|
1066
|
+
/>
|
|
1067
|
+
</div>
|
|
1068
|
+
</div>
|
|
1069
|
+
<div class="pf-c-form__group">
|
|
1070
|
+
<div class="pf-c-form__group-label">
|
|
1071
|
+
<label
|
|
1072
|
+
class="pf-c-form__label"
|
|
1073
|
+
for="text-input-group-advanced-search-input-form-with-autocomplete-example-email"
|
|
1074
|
+
>
|
|
1075
|
+
<span class="pf-c-form__label-text">Email</span>
|
|
1076
|
+
</label>
|
|
1077
|
+
</div>
|
|
1078
|
+
<div class="pf-c-form__group-control">
|
|
1079
|
+
<input
|
|
1080
|
+
class="pf-c-form-control"
|
|
1081
|
+
type="text"
|
|
1082
|
+
id="text-input-group-advanced-search-input-form-with-autocomplete-example-email"
|
|
1083
|
+
name="text-input-group-advanced-search-input-form-with-autocomplete-example-email"
|
|
1084
|
+
/>
|
|
1085
|
+
</div>
|
|
1086
|
+
</div>
|
|
1087
|
+
<div class="pf-c-form__group pf-m-action">
|
|
1088
|
+
<div class="pf-c-form__actions">
|
|
1089
|
+
<button class="pf-c-button pf-m-primary" type="submit">Submit</button>
|
|
1090
|
+
<button class="pf-c-button pf-m-link" type="reset">Reset</button>
|
|
1091
|
+
</div>
|
|
1092
|
+
</div>
|
|
1093
|
+
</form>
|
|
1094
|
+
</div>
|
|
1095
|
+
</div>
|
|
1096
|
+
</div>
|
|
1097
|
+
|
|
1098
|
+
<div class="pf-c-menu">
|
|
1099
|
+
<div class="pf-c-menu__content">
|
|
1100
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1101
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1102
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
1103
|
+
<span class="pf-c-menu__item-main">
|
|
1104
|
+
<span class="pf-c-menu__item-text">nancy</span>
|
|
1105
|
+
</span>
|
|
1106
|
+
</button>
|
|
1107
|
+
</li>
|
|
1108
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1109
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
1110
|
+
<span class="pf-c-menu__item-main">
|
|
1111
|
+
<span class="pf-c-menu__item-text">ned</span>
|
|
1112
|
+
</span>
|
|
1113
|
+
</button>
|
|
1114
|
+
</li>
|
|
1115
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1116
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
1117
|
+
<span class="pf-c-menu__item-main">
|
|
1118
|
+
<span class="pf-c-menu__item-text">neil</span>
|
|
1119
|
+
</span>
|
|
1120
|
+
</button>
|
|
1121
|
+
</li>
|
|
1122
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1123
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
1124
|
+
<span class="pf-c-menu__item-main">
|
|
1125
|
+
<span class="pf-c-menu__item-text">nicole</span>
|
|
1126
|
+
</span>
|
|
1127
|
+
</button>
|
|
1128
|
+
</li>
|
|
1129
|
+
</ul>
|
|
1130
|
+
</div>
|
|
1131
|
+
</div>
|
|
1132
|
+
</div>
|
|
1133
|
+
|
|
1134
|
+
```
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/patternfly",
|
|
3
3
|
"description": "Assets, source, tooling, and content for PatternFly 4",
|
|
4
|
-
"version": "4.192.
|
|
4
|
+
"version": "4.192.3",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"scripts": {
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"stylelint-scss": "^4.0.0",
|
|
80
80
|
"stylelint-value-no-unknown-custom-properties": "^3.0.0",
|
|
81
81
|
"surge": "^0.21.3",
|
|
82
|
-
"theme-patternfly-org": "0.
|
|
82
|
+
"theme-patternfly-org": "0.11.32",
|
|
83
83
|
"unified": "^9.2.0",
|
|
84
84
|
"webpack": "^4.43.0"
|
|
85
85
|
},
|
package/patternfly-no-reset.css
CHANGED
|
@@ -9919,6 +9919,9 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
9919
9919
|
color: var(--pf-c-description-list__term-icon--Color);
|
|
9920
9920
|
}
|
|
9921
9921
|
|
|
9922
|
+
.pf-c-description-list__text {
|
|
9923
|
+
min-width: 0;
|
|
9924
|
+
}
|
|
9922
9925
|
.pf-c-description-list__text.pf-m-help-text {
|
|
9923
9926
|
text-decoration: underline;
|
|
9924
9927
|
cursor: pointer;
|
|
@@ -27519,6 +27522,7 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27519
27522
|
--pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
27520
27523
|
position: relative;
|
|
27521
27524
|
display: flex;
|
|
27525
|
+
width: 100%;
|
|
27522
27526
|
color: var(--pf-c-text-input-group--Color, inherit);
|
|
27523
27527
|
background-color: var(--pf-c-text-input-group--BackgroundColor);
|
|
27524
27528
|
}
|
|
@@ -27636,6 +27640,10 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27636
27640
|
--pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
|
|
27637
27641
|
}
|
|
27638
27642
|
|
|
27643
|
+
.pf-c-text-input-group__group {
|
|
27644
|
+
display: flex;
|
|
27645
|
+
}
|
|
27646
|
+
|
|
27639
27647
|
.pf-c-tile {
|
|
27640
27648
|
--pf-c-tile--PaddingTop: var(--pf-global--spacer--lg);
|
|
27641
27649
|
--pf-c-tile--PaddingRight: var(--pf-global--spacer--lg);
|
|
@@ -28141,6 +28149,7 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
28141
28149
|
--pf-c-tree-view--m-guides__list-item--before--BackgroundColor: var(--pf-c-tree-view--m-guides--guide-color--base);
|
|
28142
28150
|
--pf-c-tree-view--m-guides__list-item--last-child--before--Top: var(--pf-c-tree-view--m-guides__node--before--Top);
|
|
28143
28151
|
--pf-c-tree-view--m-guides__list-item--last-child--before--Height: var(--pf-c-tree-view--m-guides__list-item--last-child--before--Top);
|
|
28152
|
+
--pf-c-tree-view--m-guides__list-item--ZIndex: var(--pf-global--ZIndex--xs);
|
|
28144
28153
|
--pf-c-tree-view--m-guides__node--before--Width: 1rem;
|
|
28145
28154
|
--pf-c-tree-view--m-guides__node--before--Height: var(--pf-c-tree-view--m-guides--guide-width--base);
|
|
28146
28155
|
--pf-c-tree-view--m-guides__node--before--Top: 1.125rem;
|
|
@@ -28201,6 +28210,7 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
28201
28210
|
}
|
|
28202
28211
|
.pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before {
|
|
28203
28212
|
top: var(--pf-c-tree-view--m-guides__list-item--before--Top);
|
|
28213
|
+
z-index: var(--pf-c-tree-view--m-guides__list-item--ZIndex);
|
|
28204
28214
|
width: var(--pf-c-tree-view--m-guides__list-item--before--Width);
|
|
28205
28215
|
height: var(--pf-c-tree-view--m-guides__list-item--before--Height);
|
|
28206
28216
|
background-color: var(--pf-c-tree-view--m-guides__list-item--before--BackgroundColor);
|