@patternfly/patternfly 4.192.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/TextInputGroup/text-input-group.css +5 -0
- package/components/TextInputGroup/text-input-group.scss +6 -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 +1 -1
- package/patternfly-no-reset.css +5 -0
- package/patternfly.css +5 -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
package/patternfly-no-reset.css
CHANGED
|
@@ -27519,6 +27519,7 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27519
27519
|
--pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
27520
27520
|
position: relative;
|
|
27521
27521
|
display: flex;
|
|
27522
|
+
width: 100%;
|
|
27522
27523
|
color: var(--pf-c-text-input-group--Color, inherit);
|
|
27523
27524
|
background-color: var(--pf-c-text-input-group--BackgroundColor);
|
|
27524
27525
|
}
|
|
@@ -27636,6 +27637,10 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27636
27637
|
--pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
|
|
27637
27638
|
}
|
|
27638
27639
|
|
|
27640
|
+
.pf-c-text-input-group__group {
|
|
27641
|
+
display: flex;
|
|
27642
|
+
}
|
|
27643
|
+
|
|
27639
27644
|
.pf-c-tile {
|
|
27640
27645
|
--pf-c-tile--PaddingTop: var(--pf-global--spacer--lg);
|
|
27641
27646
|
--pf-c-tile--PaddingRight: var(--pf-global--spacer--lg);
|
package/patternfly.css
CHANGED
|
@@ -27646,6 +27646,7 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27646
27646
|
--pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
27647
27647
|
position: relative;
|
|
27648
27648
|
display: flex;
|
|
27649
|
+
width: 100%;
|
|
27649
27650
|
color: var(--pf-c-text-input-group--Color, inherit);
|
|
27650
27651
|
background-color: var(--pf-c-text-input-group--BackgroundColor);
|
|
27651
27652
|
}
|
|
@@ -27763,6 +27764,10 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27763
27764
|
--pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
|
|
27764
27765
|
}
|
|
27765
27766
|
|
|
27767
|
+
.pf-c-text-input-group__group {
|
|
27768
|
+
display: flex;
|
|
27769
|
+
}
|
|
27770
|
+
|
|
27766
27771
|
.pf-c-tile {
|
|
27767
27772
|
--pf-c-tile--PaddingTop: var(--pf-global--spacer--lg);
|
|
27768
27773
|
--pf-c-tile--PaddingRight: var(--pf-global--spacer--lg);
|