@patternfly/patternfly 5.0.0-alpha.30 → 5.0.0-alpha.32

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.
Files changed (29) hide show
  1. package/components/InputGroup/input-group.css +61 -85
  2. package/components/InputGroup/input-group.scss +55 -61
  3. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  4. package/components/OptionsMenu/options-menu.css +0 -5
  5. package/components/OptionsMenu/options-menu.scss +0 -6
  6. package/components/Toolbar/toolbar.css +11 -4
  7. package/components/Toolbar/toolbar.scss +11 -5
  8. package/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
  9. package/docs/components/DatePicker/examples/DatePicker.md +115 -91
  10. package/docs/components/FileUpload/examples/FileUpload.md +127 -91
  11. package/docs/components/InputGroup/examples/InputGroup.md +219 -169
  12. package/docs/components/NumberInput/examples/NumberInput.md +299 -227
  13. package/docs/components/SearchInput/examples/SearchInput.md +151 -113
  14. package/docs/components/Slider/examples/Slider.md +60 -38
  15. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
  16. package/docs/components/Toolbar/examples/Toolbar.md +374 -345
  17. package/docs/demos/DataList/examples/DataList.md +158 -150
  18. package/docs/demos/Form/examples/BasicForms.md +77 -66
  19. package/docs/demos/Masthead/examples/Masthead.md +279 -258
  20. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
  21. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +103 -121
  22. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -238
  23. package/docs/demos/Table/examples/Table.md +949 -901
  24. package/docs/demos/Toolbar/examples/Toolbar.md +313 -294
  25. package/package.json +1 -1
  26. package/patternfly-no-reset.css +71 -83
  27. package/patternfly.css +71 -83
  28. package/patternfly.min.css +1 -1
  29. package/patternfly.min.css.map +1 -1
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -696,89 +696,93 @@ wrapperTag: div
696
696
  aria-label="search filter"
697
697
  role="group"
698
698
  >
699
- <div class="pf-c-select" style="width: 175px">
700
- <span
701
- id="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
702
- hidden
703
- >Choose one</span>
699
+ <div class="pf-c-input-group__item pf-m-fill">
700
+ <div class="pf-c-select" style="width: 124px">
701
+ <span
702
+ id="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
703
+ hidden
704
+ >Choose one</span>
704
705
 
705
- <button
706
- class="pf-c-select__toggle"
707
- type="button"
708
- id="masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
709
- aria-haspopup="true"
710
- aria-expanded="false"
711
- aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
712
- >
713
- <div class="pf-c-select__toggle-wrapper">
714
- <span class="pf-c-select__toggle-icon">
715
- <i class="fas fa-filter" aria-hidden="true"></i>
706
+ <button
707
+ class="pf-c-select__toggle"
708
+ type="button"
709
+ id="masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
710
+ aria-haspopup="true"
711
+ aria-expanded="false"
712
+ aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
713
+ >
714
+ <div class="pf-c-select__toggle-wrapper">
715
+ <span class="pf-c-select__toggle-icon">
716
+ <i class="fas fa-filter" aria-hidden="true"></i>
717
+ </span>
718
+ <span class="pf-c-select__toggle-text">Name</span>
719
+ </div>
720
+ <span class="pf-c-select__toggle-arrow">
721
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
716
722
  </span>
717
- <span class="pf-c-select__toggle-text">Name</span>
718
- </div>
719
- <span class="pf-c-select__toggle-arrow">
720
- <i class="fas fa-caret-down" aria-hidden="true"></i>
721
- </span>
722
- </button>
723
+ </button>
723
724
 
724
- <ul
725
- class="pf-c-select__menu"
726
- role="listbox"
727
- aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
728
- hidden
729
- >
730
- <li role="presentation">
731
- <button
732
- class="pf-c-select__menu-item"
733
- role="option"
734
- >Running</button>
735
- </li>
736
- <li role="presentation">
737
- <button
738
- class="pf-c-select__menu-item pf-m-selected"
739
- role="option"
740
- aria-selected="true"
741
- >
742
- Stopped
743
- <span class="pf-c-select__menu-item-icon">
744
- <i class="fas fa-check" aria-hidden="true"></i>
745
- </span>
746
- </button>
747
- </li>
748
- <li role="presentation">
749
- <button
750
- class="pf-c-select__menu-item"
751
- role="option"
752
- >Down</button>
753
- </li>
754
- <li role="presentation">
755
- <button
756
- class="pf-c-select__menu-item"
757
- role="option"
758
- >Degraded</button>
759
- </li>
760
- <li role="presentation">
761
- <button
762
- class="pf-c-select__menu-item"
763
- role="option"
764
- >Needs maintenance</button>
765
- </li>
766
- </ul>
725
+ <ul
726
+ class="pf-c-select__menu"
727
+ role="listbox"
728
+ aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
729
+ hidden
730
+ >
731
+ <li role="presentation">
732
+ <button
733
+ class="pf-c-select__menu-item"
734
+ role="option"
735
+ >Running</button>
736
+ </li>
737
+ <li role="presentation">
738
+ <button
739
+ class="pf-c-select__menu-item pf-m-selected"
740
+ role="option"
741
+ aria-selected="true"
742
+ >
743
+ Stopped
744
+ <span class="pf-c-select__menu-item-icon">
745
+ <i class="fas fa-check" aria-hidden="true"></i>
746
+ </span>
747
+ </button>
748
+ </li>
749
+ <li role="presentation">
750
+ <button
751
+ class="pf-c-select__menu-item"
752
+ role="option"
753
+ >Down</button>
754
+ </li>
755
+ <li role="presentation">
756
+ <button
757
+ class="pf-c-select__menu-item"
758
+ role="option"
759
+ >Degraded</button>
760
+ </li>
761
+ <li role="presentation">
762
+ <button
763
+ class="pf-c-select__menu-item"
764
+ role="option"
765
+ >Needs maintenance</button>
766
+ </li>
767
+ </ul>
768
+ </div>
767
769
  </div>
768
- <div class="pf-c-text-input-group" style="width: auto">
769
- <div class="pf-c-text-input-group__main pf-m-icon">
770
- <span class="pf-c-text-input-group__text">
771
- <span class="pf-c-text-input-group__icon">
772
- <i class="fas fa-fw fa-search"></i>
770
+ <div class="pf-c-input-group__item">
771
+ <div class="pf-c-text-input-group" style="width: auto">
772
+ <div class="pf-c-text-input-group__main pf-m-icon">
773
+ <span class="pf-c-text-input-group__text">
774
+ <span class="pf-c-text-input-group__icon">
775
+ <i class="fas fa-fw fa-search"></i>
776
+ </span>
777
+ <input
778
+ class="pf-c-text-input-group__text-input"
779
+ type="search"
780
+ placeholder="Filter by name"
781
+ value
782
+ aria-label="Type to filter"
783
+ />
773
784
  </span>
774
- <input
775
- class="pf-c-text-input-group__text-input"
776
- type="search"
777
- placeholder="Filter by name"
778
- value
779
- aria-label="Type to filter"
780
- />
781
- </span>
785
+ </div>
782
786
  </div>
783
787
  </div>
784
788
  </div>
@@ -1030,89 +1034,93 @@ wrapperTag: div
1030
1034
  aria-label="search filter"
1031
1035
  role="group"
1032
1036
  >
1033
- <div class="pf-c-select" style="width: 175px">
1034
- <span
1035
- id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1036
- hidden
1037
- >Choose one</span>
1037
+ <div class="pf-c-input-group__item pf-m-fill">
1038
+ <div class="pf-c-select" style="width: 124px">
1039
+ <span
1040
+ id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1041
+ hidden
1042
+ >Choose one</span>
1038
1043
 
1039
- <button
1040
- class="pf-c-select__toggle"
1041
- type="button"
1042
- id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
1043
- aria-haspopup="true"
1044
- aria-expanded="false"
1045
- aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
1046
- >
1047
- <div class="pf-c-select__toggle-wrapper">
1048
- <span class="pf-c-select__toggle-icon">
1049
- <i class="fas fa-filter" aria-hidden="true"></i>
1044
+ <button
1045
+ class="pf-c-select__toggle"
1046
+ type="button"
1047
+ id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
1048
+ aria-haspopup="true"
1049
+ aria-expanded="false"
1050
+ aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
1051
+ >
1052
+ <div class="pf-c-select__toggle-wrapper">
1053
+ <span class="pf-c-select__toggle-icon">
1054
+ <i class="fas fa-filter" aria-hidden="true"></i>
1055
+ </span>
1056
+ <span class="pf-c-select__toggle-text">Name</span>
1057
+ </div>
1058
+ <span class="pf-c-select__toggle-arrow">
1059
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1050
1060
  </span>
1051
- <span class="pf-c-select__toggle-text">Name</span>
1052
- </div>
1053
- <span class="pf-c-select__toggle-arrow">
1054
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1055
- </span>
1056
- </button>
1061
+ </button>
1057
1062
 
1058
- <ul
1059
- class="pf-c-select__menu"
1060
- role="listbox"
1061
- aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1062
- hidden
1063
- >
1064
- <li role="presentation">
1065
- <button
1066
- class="pf-c-select__menu-item"
1067
- role="option"
1068
- >Running</button>
1069
- </li>
1070
- <li role="presentation">
1071
- <button
1072
- class="pf-c-select__menu-item pf-m-selected"
1073
- role="option"
1074
- aria-selected="true"
1075
- >
1076
- Stopped
1077
- <span class="pf-c-select__menu-item-icon">
1078
- <i class="fas fa-check" aria-hidden="true"></i>
1079
- </span>
1080
- </button>
1081
- </li>
1082
- <li role="presentation">
1083
- <button
1084
- class="pf-c-select__menu-item"
1085
- role="option"
1086
- >Down</button>
1087
- </li>
1088
- <li role="presentation">
1089
- <button
1090
- class="pf-c-select__menu-item"
1091
- role="option"
1092
- >Degraded</button>
1093
- </li>
1094
- <li role="presentation">
1095
- <button
1096
- class="pf-c-select__menu-item"
1097
- role="option"
1098
- >Needs maintenance</button>
1099
- </li>
1100
- </ul>
1063
+ <ul
1064
+ class="pf-c-select__menu"
1065
+ role="listbox"
1066
+ aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1067
+ hidden
1068
+ >
1069
+ <li role="presentation">
1070
+ <button
1071
+ class="pf-c-select__menu-item"
1072
+ role="option"
1073
+ >Running</button>
1074
+ </li>
1075
+ <li role="presentation">
1076
+ <button
1077
+ class="pf-c-select__menu-item pf-m-selected"
1078
+ role="option"
1079
+ aria-selected="true"
1080
+ >
1081
+ Stopped
1082
+ <span class="pf-c-select__menu-item-icon">
1083
+ <i class="fas fa-check" aria-hidden="true"></i>
1084
+ </span>
1085
+ </button>
1086
+ </li>
1087
+ <li role="presentation">
1088
+ <button
1089
+ class="pf-c-select__menu-item"
1090
+ role="option"
1091
+ >Down</button>
1092
+ </li>
1093
+ <li role="presentation">
1094
+ <button
1095
+ class="pf-c-select__menu-item"
1096
+ role="option"
1097
+ >Degraded</button>
1098
+ </li>
1099
+ <li role="presentation">
1100
+ <button
1101
+ class="pf-c-select__menu-item"
1102
+ role="option"
1103
+ >Needs maintenance</button>
1104
+ </li>
1105
+ </ul>
1106
+ </div>
1101
1107
  </div>
1102
- <div class="pf-c-text-input-group" style="width: auto">
1103
- <div class="pf-c-text-input-group__main pf-m-icon">
1104
- <span class="pf-c-text-input-group__text">
1105
- <span class="pf-c-text-input-group__icon">
1106
- <i class="fas fa-fw fa-search"></i>
1108
+ <div class="pf-c-input-group__item">
1109
+ <div class="pf-c-text-input-group" style="width: auto">
1110
+ <div class="pf-c-text-input-group__main pf-m-icon">
1111
+ <span class="pf-c-text-input-group__text">
1112
+ <span class="pf-c-text-input-group__icon">
1113
+ <i class="fas fa-fw fa-search"></i>
1114
+ </span>
1115
+ <input
1116
+ class="pf-c-text-input-group__text-input"
1117
+ type="search"
1118
+ placeholder="Filter by name"
1119
+ value
1120
+ aria-label="Type to filter"
1121
+ />
1107
1122
  </span>
1108
- <input
1109
- class="pf-c-text-input-group__text-input"
1110
- type="search"
1111
- placeholder="Filter by name"
1112
- value
1113
- aria-label="Type to filter"
1114
- />
1115
- </span>
1123
+ </div>
1116
1124
  </div>
1117
1125
  </div>
1118
1126
  </div>
@@ -1347,13 +1355,15 @@ wrapperTag: div
1347
1355
  <div class="pf-c-toolbar__group pf-m-align-right">
1348
1356
  <div class="pf-c-toolbar__item">
1349
1357
  <div class="pf-c-input-group pf-m-plain">
1350
- <button
1351
- class="pf-c-button pf-m-plain"
1352
- type="button"
1353
- aria-label="Open search"
1354
- >
1355
- <i class="fas fa-fw fa-search" aria-hidden="true"></i>
1356
- </button>
1358
+ <div class="pf-c-input-group__item pf-m-plain">
1359
+ <button
1360
+ class="pf-c-button pf-m-plain"
1361
+ type="button"
1362
+ aria-label="Open search"
1363
+ >
1364
+ <i class="fas fa-fw fa-search" aria-hidden="true"></i>
1365
+ </button>
1366
+ </div>
1357
1367
  </div>
1358
1368
  </div>
1359
1369
  </div>
@@ -1534,29 +1544,33 @@ wrapperTag: div
1534
1544
  <div class="pf-c-toolbar__group pf-m-align-right">
1535
1545
  <div class="pf-c-toolbar__item">
1536
1546
  <div class="pf-c-input-group pf-m-plain">
1537
- <div class="pf-c-text-input-group">
1538
- <div class="pf-c-text-input-group__main pf-m-icon">
1539
- <span class="pf-c-text-input-group__text">
1540
- <span class="pf-c-text-input-group__icon">
1541
- <i class="fas fa-fw fa-search"></i>
1547
+ <div class="pf-c-input-group__item pf-m-fill">
1548
+ <div class="pf-c-text-input-group">
1549
+ <div class="pf-c-text-input-group__main pf-m-icon">
1550
+ <span class="pf-c-text-input-group__text">
1551
+ <span class="pf-c-text-input-group__icon">
1552
+ <i class="fas fa-fw fa-search"></i>
1553
+ </span>
1554
+ <input
1555
+ class="pf-c-text-input-group__text-input"
1556
+ type="text"
1557
+ placeholder="Search"
1558
+ value
1559
+ aria-label="Type to filter"
1560
+ />
1542
1561
  </span>
1543
- <input
1544
- class="pf-c-text-input-group__text-input"
1545
- type="text"
1546
- value
1547
- aria-label="Type to filter"
1548
- placeholder="Search"
1549
- />
1550
- </span>
1562
+ </div>
1551
1563
  </div>
1552
1564
  </div>
1553
- <button
1554
- class="pf-c-button pf-m-plain"
1555
- type="button"
1556
- aria-label="Close"
1557
- >
1558
- <i class="fas fa-times" aria-hidden="true"></i>
1559
- </button>
1565
+ <div class="pf-c-input-group__item pf-m-plain">
1566
+ <button
1567
+ class="pf-c-button pf-m-plain"
1568
+ type="button"
1569
+ aria-label="Close"
1570
+ >
1571
+ <i class="fas fa-times" aria-hidden="true"></i>
1572
+ </button>
1573
+ </div>
1560
1574
  </div>
1561
1575
  </div>
1562
1576
  </div>
@@ -3646,86 +3660,93 @@ wrapperTag: div
3646
3660
  aria-label="search filter"
3647
3661
  role="group"
3648
3662
  >
3649
- <div class="pf-c-select" style="width: 175px">
3650
- <span
3651
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3652
- hidden
3653
- >Choose one</span>
3663
+ <div class="pf-c-input-group__item pf-m-fill">
3664
+ <div class="pf-c-select" style="width: 124px">
3665
+ <span
3666
+ id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3667
+ hidden
3668
+ >Choose one</span>
3654
3669
 
3655
- <button
3656
- class="pf-c-select__toggle"
3657
- type="button"
3658
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
3659
- aria-haspopup="true"
3660
- aria-expanded="false"
3661
- aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
3662
- >
3663
- <div class="pf-c-select__toggle-wrapper">
3664
- <span class="pf-c-select__toggle-icon">
3665
- <i class="fas fa-filter" aria-hidden="true"></i>
3670
+ <button
3671
+ class="pf-c-select__toggle"
3672
+ type="button"
3673
+ id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
3674
+ aria-haspopup="true"
3675
+ aria-expanded="false"
3676
+ aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
3677
+ >
3678
+ <div class="pf-c-select__toggle-wrapper">
3679
+ <span class="pf-c-select__toggle-icon">
3680
+ <i class="fas fa-filter" aria-hidden="true"></i>
3681
+ </span>
3682
+ <span class="pf-c-select__toggle-text">Name</span>
3683
+ </div>
3684
+ <span class="pf-c-select__toggle-arrow">
3685
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3666
3686
  </span>
3667
- <span class="pf-c-select__toggle-text">Name</span>
3668
- </div>
3669
- <span class="pf-c-select__toggle-arrow">
3670
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3671
- </span>
3672
- </button>
3687
+ </button>
3673
3688
 
3674
- <ul
3675
- class="pf-c-select__menu"
3676
- role="listbox"
3677
- aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3678
- hidden
3679
- >
3680
- <li role="presentation">
3681
- <button
3682
- class="pf-c-select__menu-item"
3683
- role="option"
3684
- >Running</button>
3685
- </li>
3686
- <li role="presentation">
3687
- <button
3688
- class="pf-c-select__menu-item pf-m-selected"
3689
- role="option"
3690
- aria-selected="true"
3691
- >
3692
- Stopped
3693
- <span class="pf-c-select__menu-item-icon">
3694
- <i class="fas fa-check" aria-hidden="true"></i>
3695
- </span>
3696
- </button>
3697
- </li>
3698
- <li role="presentation">
3699
- <button class="pf-c-select__menu-item" role="option">Down</button>
3700
- </li>
3701
- <li role="presentation">
3702
- <button
3703
- class="pf-c-select__menu-item"
3704
- role="option"
3705
- >Degraded</button>
3706
- </li>
3707
- <li role="presentation">
3708
- <button
3709
- class="pf-c-select__menu-item"
3710
- role="option"
3711
- >Needs maintenance</button>
3712
- </li>
3713
- </ul>
3689
+ <ul
3690
+ class="pf-c-select__menu"
3691
+ role="listbox"
3692
+ aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3693
+ hidden
3694
+ >
3695
+ <li role="presentation">
3696
+ <button
3697
+ class="pf-c-select__menu-item"
3698
+ role="option"
3699
+ >Running</button>
3700
+ </li>
3701
+ <li role="presentation">
3702
+ <button
3703
+ class="pf-c-select__menu-item pf-m-selected"
3704
+ role="option"
3705
+ aria-selected="true"
3706
+ >
3707
+ Stopped
3708
+ <span class="pf-c-select__menu-item-icon">
3709
+ <i class="fas fa-check" aria-hidden="true"></i>
3710
+ </span>
3711
+ </button>
3712
+ </li>
3713
+ <li role="presentation">
3714
+ <button
3715
+ class="pf-c-select__menu-item"
3716
+ role="option"
3717
+ >Down</button>
3718
+ </li>
3719
+ <li role="presentation">
3720
+ <button
3721
+ class="pf-c-select__menu-item"
3722
+ role="option"
3723
+ >Degraded</button>
3724
+ </li>
3725
+ <li role="presentation">
3726
+ <button
3727
+ class="pf-c-select__menu-item"
3728
+ role="option"
3729
+ >Needs maintenance</button>
3730
+ </li>
3731
+ </ul>
3732
+ </div>
3714
3733
  </div>
3715
- <div class="pf-c-text-input-group" style="width: auto">
3716
- <div class="pf-c-text-input-group__main pf-m-icon">
3717
- <span class="pf-c-text-input-group__text">
3718
- <span class="pf-c-text-input-group__icon">
3719
- <i class="fas fa-fw fa-search"></i>
3734
+ <div class="pf-c-input-group__item">
3735
+ <div class="pf-c-text-input-group" style="width: auto">
3736
+ <div class="pf-c-text-input-group__main pf-m-icon">
3737
+ <span class="pf-c-text-input-group__text">
3738
+ <span class="pf-c-text-input-group__icon">
3739
+ <i class="fas fa-fw fa-search"></i>
3740
+ </span>
3741
+ <input
3742
+ class="pf-c-text-input-group__text-input"
3743
+ type="search"
3744
+ placeholder="Filter by name"
3745
+ value
3746
+ aria-label="Type to filter"
3747
+ />
3720
3748
  </span>
3721
- <input
3722
- class="pf-c-text-input-group__text-input"
3723
- type="search"
3724
- placeholder="Filter by name"
3725
- value
3726
- aria-label="Type to filter"
3727
- />
3728
- </span>
3749
+ </div>
3729
3750
  </div>
3730
3751
  </div>
3731
3752
  </div>