@patternfly/patternfly 5.0.0-alpha.31 → 5.0.0-alpha.33

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 (37) hide show
  1. package/components/DatePicker/date-picker.css +0 -8
  2. package/components/DatePicker/date-picker.scss +0 -9
  3. package/components/HelperText/helper-text.css +4 -0
  4. package/components/HelperText/helper-text.scss +5 -0
  5. package/components/InputGroup/input-group.css +61 -85
  6. package/components/InputGroup/input-group.scss +55 -61
  7. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  8. package/components/OptionsMenu/options-menu.css +0 -5
  9. package/components/OptionsMenu/options-menu.scss +0 -6
  10. package/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
  11. package/docs/components/DatePicker/examples/DatePicker.md +129 -94
  12. package/docs/components/FileUpload/examples/FileUpload.md +136 -96
  13. package/docs/components/Form/examples/Form.md +94 -73
  14. package/docs/components/HelperText/examples/HelperText.md +13 -24
  15. package/docs/components/InputGroup/examples/InputGroup.md +219 -169
  16. package/docs/components/Login/examples/Login.md +67 -30
  17. package/docs/components/NumberInput/examples/NumberInput.md +299 -227
  18. package/docs/components/Progress/examples/Progress.md +1 -1
  19. package/docs/components/SearchInput/examples/SearchInput.md +151 -113
  20. package/docs/components/Slider/examples/Slider.md +60 -38
  21. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
  22. package/docs/components/Toolbar/examples/Toolbar.md +374 -345
  23. package/docs/demos/Alert/examples/Alert.md +105 -58
  24. package/docs/demos/DataList/examples/DataList.md +158 -150
  25. package/docs/demos/Form/examples/BasicForms.md +191 -191
  26. package/docs/demos/HelperText/examples/HelperText.md +11 -8
  27. package/docs/demos/Masthead/examples/Masthead.md +279 -258
  28. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
  29. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +100 -84
  30. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -232
  31. package/docs/demos/Table/examples/Table.md +950 -902
  32. package/docs/demos/Toolbar/examples/Toolbar.md +330 -299
  33. package/package.json +2 -2
  34. package/patternfly-no-reset.css +64 -87
  35. package/patternfly.css +64 -87
  36. package/patternfly.min.css +1 -1
  37. package/patternfly.min.css.map +1 -1
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -1892,11 +1892,16 @@ section: components
1892
1892
  aria-invalid="true"
1893
1893
  aria-describedby="alert-horizontal-example-form-name-helper"
1894
1894
  />
1895
- <p
1896
- class="pf-c-form__helper-text pf-m-error"
1897
- id="alert-horizontal-example-form-name-helper"
1898
- aria-live="polite"
1899
- >Required field</p>
1895
+ <div class="pf-c-form__helper-text" aria-live="polite">
1896
+ <div class="pf-c-helper-text">
1897
+ <div
1898
+ class="pf-c-helper-text__item pf-m-error"
1899
+ id="alert-horizontal-example-form-name-helper"
1900
+ >
1901
+ <span class="pf-c-helper-text__item-text">Required field</span>
1902
+ </div>
1903
+ </div>
1904
+ </div>
1900
1905
  </div>
1901
1906
  </div>
1902
1907
  <div class="pf-c-form__group">
@@ -1934,38 +1939,51 @@ section: components
1934
1939
  aria-invalid="true"
1935
1940
  aria-describedby="alert-horizontal-example-form-phone-helper"
1936
1941
  />
1937
- <p
1938
- class="pf-c-form__helper-text pf-m-error"
1939
- id="alert-horizontal-example-form-phone-helper"
1940
- aria-live="polite"
1941
- >Required field</p>
1942
+ <div class="pf-c-form__helper-text" aria-live="polite">
1943
+ <div class="pf-c-helper-text">
1944
+ <div
1945
+ class="pf-c-helper-text__item pf-m-error"
1946
+ id="alert-horizontal-example-form-phone-helper"
1947
+ >
1948
+ <span class="pf-c-helper-text__item-text">Required field</span>
1949
+ </div>
1950
+ </div>
1951
+ </div>
1942
1952
  </div>
1943
1953
  </div>
1944
1954
  <div
1945
1955
  class="pf-c-form__group"
1946
1956
  role="group"
1947
- aria-labelledby="alert-horizontal-example-form-check-group-legend"
1957
+ aria-labelledby="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
1948
1958
  >
1949
1959
  <div
1950
1960
  class="pf-c-form__group-label pf-m-no-padding-top"
1951
- id="alert-horizontal-example-form-check-group-legend"
1961
+ id="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
1952
1962
  ><span
1953
1963
  class="pf-c-form__label"
1954
- for="alert-horizontal-example-form-experience"
1964
+ for="alert-horizontal-example-form-check-group"
1955
1965
  >
1956
1966
  <span class="pf-c-form__label-text">Your experience</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></span>
1957
1967
  </div>
1958
1968
  <div class="pf-c-form__group-control">
1959
- <p
1960
- class="pf-c-form__helper-text pf-m-error"
1961
- id="alert-horizontal-example-form-simple-info-helper"
1962
- aria-live="polite"
1963
- >
1964
- <span class="pf-c-form__helper-text-icon">
1965
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1966
- </span>
1967
- This is a requied field
1968
- </p>
1969
+ <div class="pf-c-form__helper-text" aria-live="polite">
1970
+ <div class="pf-c-helper-text">
1971
+ <div
1972
+ class="pf-c-helper-text__item pf-m-error"
1973
+ id="alert-horizontal-example-form-check-group-helper"
1974
+ >
1975
+ <span class="pf-c-helper-text__item-icon">
1976
+ <i
1977
+ class="fas fa-fw fa-exclamation-circle"
1978
+ aria-hidden="true"
1979
+ ></i>
1980
+ </span>
1981
+ <span
1982
+ class="pf-c-helper-text__item-text"
1983
+ >This is a required field</span>
1984
+ </div>
1985
+ </div>
1986
+ </div>
1969
1987
  <div class="pf-c-check">
1970
1988
  <input
1971
1989
  class="pf-c-check__input"
@@ -2900,7 +2918,7 @@ section: components
2900
2918
  <div class="pf-c-form__group">
2901
2919
  <div class="pf-c-form__group-label"><label
2902
2920
  class="pf-c-form__label"
2903
- for="alert-stacked-example-form-form-name"
2921
+ for="alert-stacked-example-form-name"
2904
2922
  >
2905
2923
  <span class="pf-c-form__label-text">Full name</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
2906
2924
  </div>
@@ -2909,22 +2927,27 @@ section: components
2909
2927
  class="pf-c-form-control"
2910
2928
  required
2911
2929
  type="text"
2912
- id="alert-stacked-example-form-form-name"
2913
- name="alert-stacked-example-form-form-name"
2930
+ id="alert-stacked-example-form-name"
2931
+ name="alert-stacked-example-form-name"
2914
2932
  aria-invalid="true"
2915
- aria-describedby="alert-stacked-example-form-form-name-helper"
2933
+ aria-describedby="alert-stacked-example-form-helper"
2916
2934
  />
2917
- <p
2918
- class="pf-c-form__helper-text pf-m-error"
2919
- id="alert-stacked-example-form-form-name-helper-name"
2920
- aria-live="polite"
2921
- >Required field</p>
2935
+ <div class="pf-c-form__helper-text" aria-live="polite">
2936
+ <div class="pf-c-helper-text">
2937
+ <div
2938
+ class="pf-c-helper-text__item pf-m-error"
2939
+ id="alert-stacked-example-form-name-helper"
2940
+ >
2941
+ <span class="pf-c-helper-text__item-text">Required field</span>
2942
+ </div>
2943
+ </div>
2944
+ </div>
2922
2945
  </div>
2923
2946
  </div>
2924
2947
  <div class="pf-c-form__group">
2925
2948
  <div class="pf-c-form__group-label"><label
2926
2949
  class="pf-c-form__label"
2927
- for="alert-stacked-example-form-form-email"
2950
+ for="alert-stacked-example-form-email"
2928
2951
  >
2929
2952
  <span class="pf-c-form__label-text">Email</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
2930
2953
  </div>
@@ -2933,21 +2956,28 @@ section: components
2933
2956
  class="pf-c-form-control"
2934
2957
  type="text"
2935
2958
  value="patternfly.com"
2936
- id="alert-stacked-example-form-form-email"
2937
- name="alert-stacked-example-form-form-email"
2959
+ id="alert-stacked-example-form-email"
2960
+ name="alert-stacked-example-form-email"
2938
2961
  required
2939
2962
  />
2940
2963
  </div>
2941
- <p
2942
- class="pf-c-form__helper-text pf-m-error"
2943
- id="alert-stacked-example-form-form-email-helper-email"
2944
- aria-live="polite"
2945
- >Enter a valid email address: example@gmail.com</p>
2964
+ <div class="pf-c-form__helper-text" aria-live="polite">
2965
+ <div class="pf-c-helper-text">
2966
+ <div
2967
+ class="pf-c-helper-text__item pf-m-error"
2968
+ id="alert-stacked-example-form-email-helper"
2969
+ >
2970
+ <span
2971
+ class="pf-c-helper-text__item-text"
2972
+ >Enter a valid email address: example@gmail.com</span>
2973
+ </div>
2974
+ </div>
2975
+ </div>
2946
2976
  </div>
2947
2977
  <div class="pf-c-form__group">
2948
2978
  <div class="pf-c-form__group-label"><label
2949
2979
  class="pf-c-form__label"
2950
- for="alert-stacked-example-form-form-state"
2980
+ for="alert-stacked-example-form-state"
2951
2981
  >
2952
2982
  <span class="pf-c-form__label-text">State of residence</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
2953
2983
  </div>
@@ -2965,35 +2995,52 @@ section: components
2965
2995
  <option value="Option 3">MA</option>
2966
2996
  <option value="Option 4">NY</option>
2967
2997
  </select>
2968
- <p
2969
- class="pf-c-form__helper-text pf-m-error"
2970
- id="alert-stacked-example-form-form-email-helper-state"
2998
+ <div
2999
+ class="pf-c-form__helper-text"
2971
3000
  aria-live="polite"
2972
- >Required field</p>
3001
+ id="alert-stacked-example-form-state-form-email-helper-state"
3002
+ >
3003
+ <div class="pf-c-helper-text">
3004
+ <div
3005
+ class="pf-c-helper-text__item pf-m-error"
3006
+ id="alert-stacked-example-form-state-helper"
3007
+ >
3008
+ <span class="pf-c-helper-text__item-text">Required field</span>
3009
+ </div>
3010
+ </div>
3011
+ </div>
2973
3012
  </div>
2974
3013
  <div
2975
3014
  class="pf-c-form__group"
2976
3015
  role="group"
2977
- aria-labelledby="alert-stacked-example-form-check-group-legend"
3016
+ aria-labelledby="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
2978
3017
  >
2979
3018
  <div
2980
3019
  class="pf-c-form__group-label pf-m-no-padding-top"
2981
- id="alert-stacked-example-form-check-group-legend"
3020
+ id="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
2982
3021
  ><span
2983
3022
  class="pf-c-form__label"
2984
- for="alert-stacked-example-form-form-experience"
3023
+ for="alert-stacked-example-form-check-group"
2985
3024
  >
2986
3025
  <span class="pf-c-form__label-text">How can we contact you?</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></span>
2987
- <p
2988
- class="pf-c-form__helper-text pf-m-error"
2989
- id="alert-stacked-example-form-simple-form-info-helper-contact"
2990
- aria-live="polite"
2991
- >
2992
- <span class="pf-c-form__helper-text-icon">
2993
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
2994
- </span>
2995
- This is a requied field
2996
- </p>
3026
+ <div class="pf-c-form__helper-text" aria-live="polite">
3027
+ <div class="pf-c-helper-text">
3028
+ <div
3029
+ class="pf-c-helper-text__item pf-m-error"
3030
+ id="alert-stacked-example-form-check-group-helper"
3031
+ >
3032
+ <span class="pf-c-helper-text__item-icon">
3033
+ <i
3034
+ class="fas fa-fw fa-exclamation-circle"
3035
+ aria-hidden="true"
3036
+ ></i>
3037
+ </span>
3038
+ <span
3039
+ class="pf-c-helper-text__item-text"
3040
+ >This is a required field</span>
3041
+ </div>
3042
+ </div>
3043
+ </div>
2997
3044
  </div>
2998
3045
  <div class="pf-c-form__group-control pf-m-inline">
2999
3046
  <div class="pf-c-check">
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">
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">
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>