@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/DataList/examples/DataList.md CHANGED
@@ -3989,86 +3989,90 @@ wrapperTag: div
3989
3989
  aria-label="search filter"
3990
3990
  role="group"
3991
3991
  >
3992
- <div class="pf-c-select" style="width: 175px">
3993
- <span id="-select-name-label" hidden>Choose one</span>
3992
+ <div class="pf-c-input-group__item pf-m-fill">
3993
+ <div class="pf-c-select" style="width: 124px">
3994
+ <span id="-select-name-label" hidden>Choose one</span>
3994
3995
 
3995
- <button
3996
- class="pf-c-select__toggle"
3997
- type="button"
3998
- id="-select-name-toggle"
3999
- aria-haspopup="true"
4000
- aria-expanded="false"
4001
- aria-labelledby="-select-name-label -select-name-toggle"
4002
- >
4003
- <div class="pf-c-select__toggle-wrapper">
4004
- <span class="pf-c-select__toggle-icon">
4005
- <i class="fas fa-filter" aria-hidden="true"></i>
3996
+ <button
3997
+ class="pf-c-select__toggle"
3998
+ type="button"
3999
+ id="-select-name-toggle"
4000
+ aria-haspopup="true"
4001
+ aria-expanded="false"
4002
+ aria-labelledby="-select-name-label -select-name-toggle"
4003
+ >
4004
+ <div class="pf-c-select__toggle-wrapper">
4005
+ <span class="pf-c-select__toggle-icon">
4006
+ <i class="fas fa-filter" aria-hidden="true"></i>
4007
+ </span>
4008
+ <span class="pf-c-select__toggle-text">Name</span>
4009
+ </div>
4010
+ <span class="pf-c-select__toggle-arrow">
4011
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4006
4012
  </span>
4007
- <span class="pf-c-select__toggle-text">Name</span>
4008
- </div>
4009
- <span class="pf-c-select__toggle-arrow">
4010
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4011
- </span>
4012
- </button>
4013
+ </button>
4013
4014
 
4014
- <ul
4015
- class="pf-c-select__menu"
4016
- role="listbox"
4017
- aria-labelledby="-select-name-label"
4018
- hidden
4019
- >
4020
- <li role="presentation">
4021
- <button
4022
- class="pf-c-select__menu-item"
4023
- role="option"
4024
- >Running</button>
4025
- </li>
4026
- <li role="presentation">
4027
- <button
4028
- class="pf-c-select__menu-item pf-m-selected"
4029
- role="option"
4030
- aria-selected="true"
4031
- >
4032
- Stopped
4033
- <span class="pf-c-select__menu-item-icon">
4034
- <i class="fas fa-check" aria-hidden="true"></i>
4035
- </span>
4036
- </button>
4037
- </li>
4038
- <li role="presentation">
4039
- <button
4040
- class="pf-c-select__menu-item"
4041
- role="option"
4042
- >Down</button>
4043
- </li>
4044
- <li role="presentation">
4045
- <button
4046
- class="pf-c-select__menu-item"
4047
- role="option"
4048
- >Degraded</button>
4049
- </li>
4050
- <li role="presentation">
4051
- <button
4052
- class="pf-c-select__menu-item"
4053
- role="option"
4054
- >Needs maintenance</button>
4055
- </li>
4056
- </ul>
4015
+ <ul
4016
+ class="pf-c-select__menu"
4017
+ role="listbox"
4018
+ aria-labelledby="-select-name-label"
4019
+ hidden
4020
+ >
4021
+ <li role="presentation">
4022
+ <button
4023
+ class="pf-c-select__menu-item"
4024
+ role="option"
4025
+ >Running</button>
4026
+ </li>
4027
+ <li role="presentation">
4028
+ <button
4029
+ class="pf-c-select__menu-item pf-m-selected"
4030
+ role="option"
4031
+ aria-selected="true"
4032
+ >
4033
+ Stopped
4034
+ <span class="pf-c-select__menu-item-icon">
4035
+ <i class="fas fa-check" aria-hidden="true"></i>
4036
+ </span>
4037
+ </button>
4038
+ </li>
4039
+ <li role="presentation">
4040
+ <button
4041
+ class="pf-c-select__menu-item"
4042
+ role="option"
4043
+ >Down</button>
4044
+ </li>
4045
+ <li role="presentation">
4046
+ <button
4047
+ class="pf-c-select__menu-item"
4048
+ role="option"
4049
+ >Degraded</button>
4050
+ </li>
4051
+ <li role="presentation">
4052
+ <button
4053
+ class="pf-c-select__menu-item"
4054
+ role="option"
4055
+ >Needs maintenance</button>
4056
+ </li>
4057
+ </ul>
4058
+ </div>
4057
4059
  </div>
4058
- <div class="pf-c-text-input-group" style="width: auto">
4059
- <div class="pf-c-text-input-group__main pf-m-icon">
4060
- <span class="pf-c-text-input-group__text">
4061
- <span class="pf-c-text-input-group__icon">
4062
- <i class="fas fa-fw fa-search"></i>
4060
+ <div class="pf-c-input-group__item">
4061
+ <div class="pf-c-text-input-group" style="width: auto">
4062
+ <div class="pf-c-text-input-group__main pf-m-icon">
4063
+ <span class="pf-c-text-input-group__text">
4064
+ <span class="pf-c-text-input-group__icon">
4065
+ <i class="fas fa-fw fa-search"></i>
4066
+ </span>
4067
+ <input
4068
+ class="pf-c-text-input-group__text-input"
4069
+ type="search"
4070
+ placeholder="Filter by name"
4071
+ value
4072
+ aria-label="Type to filter"
4073
+ />
4063
4074
  </span>
4064
- <input
4065
- class="pf-c-text-input-group__text-input"
4066
- type="search"
4067
- placeholder="Filter by name"
4068
- value
4069
- aria-label="Type to filter"
4070
- />
4071
- </span>
4075
+ </div>
4072
4076
  </div>
4073
4077
  </div>
4074
4078
  </div>
@@ -6062,86 +6066,90 @@ wrapperTag: div
6062
6066
  aria-label="search filter"
6063
6067
  role="group"
6064
6068
  >
6065
- <div class="pf-c-select" style="width: 175px">
6066
- <span id="-select-name-label" hidden>Choose one</span>
6069
+ <div class="pf-c-input-group__item pf-m-fill">
6070
+ <div class="pf-c-select" style="width: 124px">
6071
+ <span id="-select-name-label" hidden>Choose one</span>
6067
6072
 
6068
- <button
6069
- class="pf-c-select__toggle"
6070
- type="button"
6071
- id="-select-name-toggle"
6072
- aria-haspopup="true"
6073
- aria-expanded="false"
6074
- aria-labelledby="-select-name-label -select-name-toggle"
6075
- >
6076
- <div class="pf-c-select__toggle-wrapper">
6077
- <span class="pf-c-select__toggle-icon">
6078
- <i class="fas fa-filter" aria-hidden="true"></i>
6073
+ <button
6074
+ class="pf-c-select__toggle"
6075
+ type="button"
6076
+ id="-select-name-toggle"
6077
+ aria-haspopup="true"
6078
+ aria-expanded="false"
6079
+ aria-labelledby="-select-name-label -select-name-toggle"
6080
+ >
6081
+ <div class="pf-c-select__toggle-wrapper">
6082
+ <span class="pf-c-select__toggle-icon">
6083
+ <i class="fas fa-filter" aria-hidden="true"></i>
6084
+ </span>
6085
+ <span class="pf-c-select__toggle-text">Name</span>
6086
+ </div>
6087
+ <span class="pf-c-select__toggle-arrow">
6088
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
6079
6089
  </span>
6080
- <span class="pf-c-select__toggle-text">Name</span>
6081
- </div>
6082
- <span class="pf-c-select__toggle-arrow">
6083
- <i class="fas fa-caret-down" aria-hidden="true"></i>
6084
- </span>
6085
- </button>
6090
+ </button>
6086
6091
 
6087
- <ul
6088
- class="pf-c-select__menu"
6089
- role="listbox"
6090
- aria-labelledby="-select-name-label"
6091
- hidden
6092
- >
6093
- <li role="presentation">
6094
- <button
6095
- class="pf-c-select__menu-item"
6096
- role="option"
6097
- >Running</button>
6098
- </li>
6099
- <li role="presentation">
6100
- <button
6101
- class="pf-c-select__menu-item pf-m-selected"
6102
- role="option"
6103
- aria-selected="true"
6104
- >
6105
- Stopped
6106
- <span class="pf-c-select__menu-item-icon">
6107
- <i class="fas fa-check" aria-hidden="true"></i>
6108
- </span>
6109
- </button>
6110
- </li>
6111
- <li role="presentation">
6112
- <button
6113
- class="pf-c-select__menu-item"
6114
- role="option"
6115
- >Down</button>
6116
- </li>
6117
- <li role="presentation">
6118
- <button
6119
- class="pf-c-select__menu-item"
6120
- role="option"
6121
- >Degraded</button>
6122
- </li>
6123
- <li role="presentation">
6124
- <button
6125
- class="pf-c-select__menu-item"
6126
- role="option"
6127
- >Needs maintenance</button>
6128
- </li>
6129
- </ul>
6092
+ <ul
6093
+ class="pf-c-select__menu"
6094
+ role="listbox"
6095
+ aria-labelledby="-select-name-label"
6096
+ hidden
6097
+ >
6098
+ <li role="presentation">
6099
+ <button
6100
+ class="pf-c-select__menu-item"
6101
+ role="option"
6102
+ >Running</button>
6103
+ </li>
6104
+ <li role="presentation">
6105
+ <button
6106
+ class="pf-c-select__menu-item pf-m-selected"
6107
+ role="option"
6108
+ aria-selected="true"
6109
+ >
6110
+ Stopped
6111
+ <span class="pf-c-select__menu-item-icon">
6112
+ <i class="fas fa-check" aria-hidden="true"></i>
6113
+ </span>
6114
+ </button>
6115
+ </li>
6116
+ <li role="presentation">
6117
+ <button
6118
+ class="pf-c-select__menu-item"
6119
+ role="option"
6120
+ >Down</button>
6121
+ </li>
6122
+ <li role="presentation">
6123
+ <button
6124
+ class="pf-c-select__menu-item"
6125
+ role="option"
6126
+ >Degraded</button>
6127
+ </li>
6128
+ <li role="presentation">
6129
+ <button
6130
+ class="pf-c-select__menu-item"
6131
+ role="option"
6132
+ >Needs maintenance</button>
6133
+ </li>
6134
+ </ul>
6135
+ </div>
6130
6136
  </div>
6131
- <div class="pf-c-text-input-group" style="width: auto">
6132
- <div class="pf-c-text-input-group__main pf-m-icon">
6133
- <span class="pf-c-text-input-group__text">
6134
- <span class="pf-c-text-input-group__icon">
6135
- <i class="fas fa-fw fa-search"></i>
6137
+ <div class="pf-c-input-group__item">
6138
+ <div class="pf-c-text-input-group" style="width: auto">
6139
+ <div class="pf-c-text-input-group__main pf-m-icon">
6140
+ <span class="pf-c-text-input-group__text">
6141
+ <span class="pf-c-text-input-group__icon">
6142
+ <i class="fas fa-fw fa-search"></i>
6143
+ </span>
6144
+ <input
6145
+ class="pf-c-text-input-group__text-input"
6146
+ type="search"
6147
+ placeholder="Filter by name"
6148
+ value
6149
+ aria-label="Type to filter"
6150
+ />
6136
6151
  </span>
6137
- <input
6138
- class="pf-c-text-input-group__text-input"
6139
- type="search"
6140
- placeholder="Filter by name"
6141
- value
6142
- aria-label="Type to filter"
6143
- />
6144
- </span>
6152
+ </div>
6145
6153
  </div>
6146
6154
  </div>
6147
6155
  </div>
package/docs/demos/Form/examples/BasicForms.md CHANGED
@@ -192,6 +192,7 @@ section: components
192
192
  name="form-demo-horizontal"
193
193
  aria-describedby="form-demo-horizontal-helper"
194
194
  />
195
+
195
196
  <p
196
197
  class="pf-c-form__helper-text"
197
198
  id="form-demo-horizontal-helper"
@@ -606,58 +607,67 @@ section: components
606
607
  </div>
607
608
  <div class="pf-c-form__group-control pf-m-stack">
608
609
  <div class="pf-c-input-group">
609
- <input
610
- class="pf-c-form-control"
611
- required
612
- type="text"
613
- id="form-demo-sections-repeatable-fields-uris-input-1"
614
- name="form-demo-sections-repeatable-fields-uris-input-1"
615
- aria-labelledby="form-demo-sections-repeatable-fields-uris form-demo-sections-repeatable-fields-uris-input-1"
616
- />
617
-
618
- <button
619
- class="pf-c-button pf-m-plain"
620
- type="button"
621
- aria-label="Remove"
622
- >
623
- <i class="fas fa-minus-circle" aria-hidden="true"></i>
624
- </button>
610
+ <div class="pf-c-input-group__item pf-m-fill">
611
+ <input
612
+ class="pf-c-form-control"
613
+ required
614
+ type="text"
615
+ id="form-demo-sections-repeatable-fields-uris-input-1"
616
+ name="form-demo-sections-repeatable-fields-uris-input-1"
617
+ aria-labelledby="form-demo-sections-repeatable-fields-uris form-demo-sections-repeatable-fields-uris-input-1"
618
+ />
619
+ </div>
620
+ <div class="pf-c-input-group__item pf-m-plain">
621
+ <button
622
+ class="pf-c-button pf-m-plain"
623
+ type="button"
624
+ aria-label="Remove"
625
+ >
626
+ <i class="fas fa-minus-circle" aria-hidden="true"></i>
627
+ </button>
628
+ </div>
625
629
  </div>
626
630
  <div class="pf-c-input-group">
627
- <input
628
- class="pf-c-form-control"
629
- required
630
- type="text"
631
- id="form-demo-sections-repeatable-fields-uris-input-2"
632
- name="form-demo-sections-repeatable-fields-uris-input-2"
633
- aria-labelledby="form-demo-sections-repeatable-fields-uris form-demo-sections-repeatable-fields-uris-input-2"
634
- />
635
-
636
- <button
637
- class="pf-c-button pf-m-plain"
638
- type="button"
639
- aria-label="Remove"
640
- >
641
- <i class="fas fa-minus-circle" aria-hidden="true"></i>
642
- </button>
631
+ <div class="pf-c-input-group__item pf-m-fill">
632
+ <input
633
+ class="pf-c-form-control"
634
+ required
635
+ type="text"
636
+ id="form-demo-sections-repeatable-fields-uris-input-2"
637
+ name="form-demo-sections-repeatable-fields-uris-input-2"
638
+ aria-labelledby="form-demo-sections-repeatable-fields-uris form-demo-sections-repeatable-fields-uris-input-2"
639
+ />
640
+ </div>
641
+ <div class="pf-c-input-group__item pf-m-plain">
642
+ <button
643
+ class="pf-c-button pf-m-plain"
644
+ type="button"
645
+ aria-label="Remove"
646
+ >
647
+ <i class="fas fa-minus-circle" aria-hidden="true"></i>
648
+ </button>
649
+ </div>
643
650
  </div>
644
651
  <div class="pf-c-input-group">
645
- <input
646
- class="pf-c-form-control"
647
- required
648
- type="text"
649
- id="form-demo-sections-repeatable-fields-uris-input-3"
650
- name="form-demo-sections-repeatable-fields-uris-input-3"
651
- aria-labelledby="form-demo-sections-repeatable-fields-uris form-demo-sections-repeatable-fields-uris-input-3"
652
- />
653
-
654
- <button
655
- class="pf-c-button pf-m-plain"
656
- type="button"
657
- aria-label="Remove"
658
- >
659
- <i class="fas fa-minus-circle" aria-hidden="true"></i>
660
- </button>
652
+ <div class="pf-c-input-group__item pf-m-fill">
653
+ <input
654
+ class="pf-c-form-control"
655
+ required
656
+ type="text"
657
+ id="form-demo-sections-repeatable-fields-uris-input-3"
658
+ name="form-demo-sections-repeatable-fields-uris-input-3"
659
+ aria-labelledby="form-demo-sections-repeatable-fields-uris form-demo-sections-repeatable-fields-uris-input-3"
660
+ />
661
+ </div>
662
+ <div class="pf-c-input-group__item pf-m-plain">
663
+ <button
664
+ class="pf-c-button pf-m-plain"
665
+ type="button"
666
+ aria-label="Remove"
667
+ >
668
+ <i class="fas fa-minus-circle" aria-hidden="true"></i>
669
+ </button>
670
+ </div>
661
671
  </div>
662
672
  <button class="pf-c-button pf-m-link pf-m-inline" type="button">
663
673
  <span class="pf-c-button__icon pf-m-start">
@@ -1047,22 +1057,25 @@ section: components
1047
1057
  </div>
1048
1058
  <div class="pf-c-form__group-control pf-m-stack">
1049
1059
  <div class="pf-c-input-group">
1050
- <input
1051
- class="pf-c-form-control"
1052
- required
1053
- type="text"
1054
- id="form-demo-sections-complex-form-node-selector-terms-input-1"
1055
- name="form-demo-sections-complex-form-node-selector-terms-input-1"
1056
- aria-labelledby="form-demo-sections-complex-form-node-selector-terms form-demo-sections-complex-form-node-selector-terms-title"
1057
- />
1058
-
1059
- <button
1060
- class="pf-c-button pf-m-plain"
1061
- type="button"
1062
- aria-label="Remove"
1063
- >
1064
- <i class="fas fa-minus-circle" aria-hidden="true"></i>
1065
- </button>
1060
+ <div class="pf-c-input-group__item pf-m-fill">
1061
+ <input
1062
+ class="pf-c-form-control"
1063
+ required
1064
+ type="text"
1065
+ id="form-demo-sections-complex-form-node-selector-terms-input-1"
1066
+ name="form-demo-sections-complex-form-node-selector-terms-input-1"
1067
+ aria-labelledby="form-demo-sections-complex-form-node-selector-terms form-demo-sections-complex-form-node-selector-terms-title"
1068
+ />
1069
+ </div>
1070
+ <div class="pf-c-input-group__item pf-m-plain">
1071
+ <button
1072
+ class="pf-c-button pf-m-plain"
1073
+ type="button"
1074
+ aria-label="Remove"
1075
+ >
1076
+ <i class="fas fa-minus-circle" aria-hidden="true"></i>
1077
+ </button>
1078
+ </div>
1066
1079
  </div>
1067
1080
  <button
1068
1081
  class="pf-c-button pf-m-link pf-m-inline"
@@ -1226,10 +1239,8 @@ section: components
1226
1239
  <input
1227
1240
  class="pf-c-form-control"
1228
1241
  type="text"
1229
- placeholder="/"
1230
1242
  id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-path"
1231
1243
  name="form-demo-sections-complex-formform-demo-sections-complex-form-routing-path"
1232
- required
1233
1244
  />
1234
1245
 
1235
1246
  <div