@patternfly/react-core 4.220.2 → 4.221.2

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 (90) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/esm/components/DataList/DataList.d.ts +9 -0
  3. package/dist/esm/components/DataList/DataList.d.ts.map +1 -1
  4. package/dist/esm/components/DataList/DataList.js +3 -2
  5. package/dist/esm/components/DataList/DataList.js.map +1 -1
  6. package/dist/esm/components/DataList/DataListItem.d.ts +2 -0
  7. package/dist/esm/components/DataList/DataListItem.d.ts.map +1 -1
  8. package/dist/esm/components/DataList/DataListItem.js +13 -6
  9. package/dist/esm/components/DataList/DataListItem.js.map +1 -1
  10. package/dist/esm/components/InputGroup/InputGroup.d.ts +2 -0
  11. package/dist/esm/components/InputGroup/InputGroup.d.ts.map +1 -1
  12. package/dist/esm/components/InputGroup/InputGroup.js +3 -2
  13. package/dist/esm/components/InputGroup/InputGroup.js.map +1 -1
  14. package/dist/esm/components/SearchInput/AdvancedSearchMenu.d.ts +2 -0
  15. package/dist/esm/components/SearchInput/AdvancedSearchMenu.d.ts.map +1 -1
  16. package/dist/esm/components/SearchInput/AdvancedSearchMenu.js +12 -10
  17. package/dist/esm/components/SearchInput/AdvancedSearchMenu.js.map +1 -1
  18. package/dist/esm/components/SearchInput/SearchInput.d.ts +8 -0
  19. package/dist/esm/components/SearchInput/SearchInput.d.ts.map +1 -1
  20. package/dist/esm/components/SearchInput/SearchInput.js +38 -28
  21. package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
  22. package/dist/esm/components/Select/Select.d.ts +2 -0
  23. package/dist/esm/components/Select/Select.d.ts.map +1 -1
  24. package/dist/esm/components/Select/Select.js +8 -7
  25. package/dist/esm/components/Select/Select.js.map +1 -1
  26. package/dist/esm/components/TextInputGroup/TextInputGroup.d.ts +2 -0
  27. package/dist/esm/components/TextInputGroup/TextInputGroup.d.ts.map +1 -1
  28. package/dist/esm/components/TextInputGroup/TextInputGroup.js +3 -2
  29. package/dist/esm/components/TextInputGroup/TextInputGroup.js.map +1 -1
  30. package/dist/esm/components/TextInputGroup/TextInputGroupMain.d.ts +2 -0
  31. package/dist/esm/components/TextInputGroup/TextInputGroupMain.d.ts.map +1 -1
  32. package/dist/esm/components/TextInputGroup/TextInputGroupMain.js +3 -2
  33. package/dist/esm/components/TextInputGroup/TextInputGroupMain.js.map +1 -1
  34. package/dist/js/components/DataList/DataList.d.ts +9 -0
  35. package/dist/js/components/DataList/DataList.d.ts.map +1 -1
  36. package/dist/js/components/DataList/DataList.js +3 -2
  37. package/dist/js/components/DataList/DataList.js.map +1 -1
  38. package/dist/js/components/DataList/DataListItem.d.ts +2 -0
  39. package/dist/js/components/DataList/DataListItem.d.ts.map +1 -1
  40. package/dist/js/components/DataList/DataListItem.js +13 -6
  41. package/dist/js/components/DataList/DataListItem.js.map +1 -1
  42. package/dist/js/components/InputGroup/InputGroup.d.ts +2 -0
  43. package/dist/js/components/InputGroup/InputGroup.d.ts.map +1 -1
  44. package/dist/js/components/InputGroup/InputGroup.js +3 -2
  45. package/dist/js/components/InputGroup/InputGroup.js.map +1 -1
  46. package/dist/js/components/SearchInput/AdvancedSearchMenu.d.ts +2 -0
  47. package/dist/js/components/SearchInput/AdvancedSearchMenu.d.ts.map +1 -1
  48. package/dist/js/components/SearchInput/AdvancedSearchMenu.js +12 -10
  49. package/dist/js/components/SearchInput/AdvancedSearchMenu.js.map +1 -1
  50. package/dist/js/components/SearchInput/SearchInput.d.ts +8 -0
  51. package/dist/js/components/SearchInput/SearchInput.d.ts.map +1 -1
  52. package/dist/js/components/SearchInput/SearchInput.js +38 -28
  53. package/dist/js/components/SearchInput/SearchInput.js.map +1 -1
  54. package/dist/js/components/Select/Select.d.ts +2 -0
  55. package/dist/js/components/Select/Select.d.ts.map +1 -1
  56. package/dist/js/components/Select/Select.js +8 -7
  57. package/dist/js/components/Select/Select.js.map +1 -1
  58. package/dist/js/components/TextInputGroup/TextInputGroup.d.ts +2 -0
  59. package/dist/js/components/TextInputGroup/TextInputGroup.d.ts.map +1 -1
  60. package/dist/js/components/TextInputGroup/TextInputGroup.js +3 -2
  61. package/dist/js/components/TextInputGroup/TextInputGroup.js.map +1 -1
  62. package/dist/js/components/TextInputGroup/TextInputGroupMain.d.ts +2 -0
  63. package/dist/js/components/TextInputGroup/TextInputGroupMain.d.ts.map +1 -1
  64. package/dist/js/components/TextInputGroup/TextInputGroupMain.js +3 -2
  65. package/dist/js/components/TextInputGroup/TextInputGroupMain.js.map +1 -1
  66. package/dist/styles/assets/images/icon-github.hbs +4 -0
  67. package/dist/styles/assets/images/icon-google.hbs +4 -0
  68. package/dist/styles/assets/images/icon-red-hat.hbs +1 -0
  69. package/dist/styles/base-no-reset.css +93 -4
  70. package/dist/styles/base.css +93 -4
  71. package/dist/umd/react-core.css +790 -8
  72. package/dist/umd/react-core.js +433 -342
  73. package/dist/umd/react-core.min.css +790 -8
  74. package/dist/umd/react-core.min.js +6 -6
  75. package/package.json +6 -6
  76. package/src/components/DataList/DataList.tsx +12 -0
  77. package/src/components/DataList/DataListItem.tsx +32 -3
  78. package/src/components/DataList/__tests__/DataList.test.tsx +130 -0
  79. package/src/components/DataList/examples/DataList.md +1 -0
  80. package/src/components/DataList/examples/DataListSelectableRows.tsx +5 -0
  81. package/src/components/InputGroup/InputGroup.tsx +7 -1
  82. package/src/components/SearchInput/AdvancedSearchMenu.tsx +24 -18
  83. package/src/components/SearchInput/SearchInput.tsx +130 -113
  84. package/src/components/SearchInput/__tests__/SearchInput.test.tsx +1 -1
  85. package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap +297 -301
  86. package/src/components/SearchInput/examples/SearchInput.md +5 -2
  87. package/src/components/Select/Select.tsx +8 -2
  88. package/src/components/TextInputGroup/TextInputGroup.tsx +18 -7
  89. package/src/components/TextInputGroup/TextInputGroupMain.tsx +5 -0
  90. package/src/demos/PrimaryDetail.md +1 -1
package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap CHANGED
@@ -9,48 +9,16 @@ exports[`SearchInput advanced search 1`] = `
9
9
  class="pf-c-input-group"
10
10
  >
11
11
  <div
12
- class="pf-c-search-input__bar"
12
+ class="pf-c-text-input-group"
13
13
  >
14
- <span
15
- class="pf-c-search-input__text"
16
- >
17
- <span
18
- class="pf-c-search-input__icon"
19
- >
20
- <svg
21
- aria-hidden="true"
22
- fill="currentColor"
23
- height="1em"
24
- role="img"
25
- style="vertical-align: -0.125em;"
26
- viewBox="0 0 512 512"
27
- width="1em"
28
- >
29
- <path
30
- d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
31
- />
32
- </svg>
33
- </span>
34
- <input
35
- aria-label="Search input"
36
- class="pf-c-search-input__text-input"
37
- value="username:player firstname:john"
38
- />
39
- </span>
40
- <span
41
- class="pf-c-search-input__utilities"
14
+ <div
15
+ class="pf-c-text-input-group__main pf-m-icon"
42
16
  >
43
17
  <span
44
- class="pf-c-search-input__clear"
18
+ class="pf-c-text-input-group__text"
45
19
  >
46
- <button
47
- aria-disabled="false"
48
- aria-label="Reset"
49
- class="pf-c-button pf-m-plain"
50
- data-ouia-component-id="OUIA-Generated-Button-plain-15"
51
- data-ouia-component-type="PF4/Button"
52
- data-ouia-safe="true"
53
- type="button"
20
+ <span
21
+ class="pf-c-text-input-group__icon"
54
22
  >
55
23
  <svg
56
24
  aria-hidden="true"
@@ -58,16 +26,49 @@ exports[`SearchInput advanced search 1`] = `
58
26
  height="1em"
59
27
  role="img"
60
28
  style="vertical-align: -0.125em;"
61
- viewBox="0 0 352 512"
29
+ viewBox="0 0 512 512"
62
30
  width="1em"
63
31
  >
64
32
  <path
65
- d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
33
+ d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
66
34
  />
67
35
  </svg>
68
- </button>
36
+ </span>
37
+ <input
38
+ aria-label="Search input"
39
+ class="pf-c-text-input-group__text-input"
40
+ type="text"
41
+ value="username:player firstname:john"
42
+ />
69
43
  </span>
70
- </span>
44
+ </div>
45
+ <div
46
+ class="pf-c-text-input-group__utilities"
47
+ >
48
+ <button
49
+ aria-disabled="false"
50
+ aria-label="Reset"
51
+ class="pf-c-button pf-m-plain"
52
+ data-ouia-component-id="OUIA-Generated-Button-plain-15"
53
+ data-ouia-component-type="PF4/Button"
54
+ data-ouia-safe="true"
55
+ type="button"
56
+ >
57
+ <svg
58
+ aria-hidden="true"
59
+ fill="currentColor"
60
+ height="1em"
61
+ role="img"
62
+ style="vertical-align: -0.125em;"
63
+ viewBox="0 0 352 512"
64
+ width="1em"
65
+ >
66
+ <path
67
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
68
+ />
69
+ </svg>
70
+ </button>
71
+ </div>
71
72
  </div>
72
73
  <button
73
74
  aria-disabled="false"
@@ -130,48 +131,16 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
130
131
  class="pf-c-input-group"
131
132
  >
132
133
  <div
133
- class="pf-c-search-input__bar"
134
+ class="pf-c-text-input-group"
134
135
  >
135
- <span
136
- class="pf-c-search-input__text"
137
- >
138
- <span
139
- class="pf-c-search-input__icon"
140
- >
141
- <svg
142
- aria-hidden="true"
143
- fill="currentColor"
144
- height="1em"
145
- role="img"
146
- style="vertical-align: -0.125em;"
147
- viewBox="0 0 512 512"
148
- width="1em"
149
- >
150
- <path
151
- d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
152
- />
153
- </svg>
154
- </span>
155
- <input
156
- aria-label="Search input"
157
- class="pf-c-search-input__text-input"
158
- value="username:player firstname:john"
159
- />
160
- </span>
161
- <span
162
- class="pf-c-search-input__utilities"
136
+ <div
137
+ class="pf-c-text-input-group__main pf-m-icon"
163
138
  >
164
139
  <span
165
- class="pf-c-search-input__clear"
140
+ class="pf-c-text-input-group__text"
166
141
  >
167
- <button
168
- aria-disabled="false"
169
- aria-label="Reset"
170
- class="pf-c-button pf-m-plain"
171
- data-ouia-component-id="OUIA-Generated-Button-plain-16"
172
- data-ouia-component-type="PF4/Button"
173
- data-ouia-safe="true"
174
- type="button"
142
+ <span
143
+ class="pf-c-text-input-group__icon"
175
144
  >
176
145
  <svg
177
146
  aria-hidden="true"
@@ -179,16 +148,49 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
179
148
  height="1em"
180
149
  role="img"
181
150
  style="vertical-align: -0.125em;"
182
- viewBox="0 0 352 512"
151
+ viewBox="0 0 512 512"
183
152
  width="1em"
184
153
  >
185
154
  <path
186
- d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
155
+ d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
187
156
  />
188
157
  </svg>
189
- </button>
158
+ </span>
159
+ <input
160
+ aria-label="Search input"
161
+ class="pf-c-text-input-group__text-input"
162
+ type="text"
163
+ value="username:player firstname:john"
164
+ />
190
165
  </span>
191
- </span>
166
+ </div>
167
+ <div
168
+ class="pf-c-text-input-group__utilities"
169
+ >
170
+ <button
171
+ aria-disabled="false"
172
+ aria-label="Reset"
173
+ class="pf-c-button pf-m-plain"
174
+ data-ouia-component-id="OUIA-Generated-Button-plain-16"
175
+ data-ouia-component-type="PF4/Button"
176
+ data-ouia-safe="true"
177
+ type="button"
178
+ >
179
+ <svg
180
+ aria-hidden="true"
181
+ fill="currentColor"
182
+ height="1em"
183
+ role="img"
184
+ style="vertical-align: -0.125em;"
185
+ viewBox="0 0 352 512"
186
+ width="1em"
187
+ >
188
+ <path
189
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
190
+ />
191
+ </svg>
192
+ </button>
193
+ </div>
192
194
  </div>
193
195
  <button
194
196
  aria-disabled="false"
@@ -245,19 +247,26 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
245
247
  exports[`SearchInput search input with hint 1`] = `
246
248
  <DocumentFragment>
247
249
  <div
248
- class="pf-c-search-input"
250
+ class="pf-c-input-group"
249
251
  >
250
252
  <div
251
- class="pf-c-input-group"
253
+ class="pf-c-text-input-group"
252
254
  >
253
255
  <div
254
- class="pf-c-search-input__bar"
256
+ class="pf-c-text-input-group__main pf-m-icon"
255
257
  >
256
258
  <span
257
- class="pf-c-search-input__text"
259
+ class="pf-c-text-input-group__text"
258
260
  >
261
+ <input
262
+ aria-hidden="true"
263
+ class="pf-c-text-input-group__text-input pf-m-hint"
264
+ disabled=""
265
+ type="text"
266
+ value="test hint"
267
+ />
259
268
  <span
260
- class="pf-c-search-input__icon"
269
+ class="pf-c-text-input-group__icon"
261
270
  >
262
271
  <svg
263
272
  aria-hidden="true"
@@ -273,125 +282,115 @@ exports[`SearchInput search input with hint 1`] = `
273
282
  />
274
283
  </svg>
275
284
  </span>
276
- <input
277
- aria-hidden="true"
278
- class="pf-c-search-input__text-input pf-m-hint"
279
- disabled=""
280
- type="text"
281
- value="test hint"
282
- />
283
285
  <input
284
286
  aria-label="simple text input"
285
- class="pf-c-search-input__text-input"
287
+ class="pf-c-text-input-group__text-input"
288
+ type="text"
286
289
  value="test input"
287
290
  />
288
291
  </span>
289
- <span
290
- class="pf-c-search-input__utilities"
292
+ </div>
293
+ <div
294
+ class="pf-c-text-input-group__utilities"
295
+ >
296
+ <div
297
+ class="pf-c-text-input-group__group"
291
298
  >
292
- <span
293
- class="pf-c-search-input__nav"
299
+ <button
300
+ aria-disabled="false"
301
+ aria-label="Previous"
302
+ class="pf-c-button pf-m-plain"
303
+ data-ouia-component-id="OUIA-Generated-Button-plain-4"
304
+ data-ouia-component-type="PF4/Button"
305
+ data-ouia-safe="true"
306
+ type="button"
294
307
  >
295
- <button
296
- aria-disabled="false"
297
- aria-label="Previous"
298
- class="pf-c-button pf-m-plain"
299
- data-ouia-component-id="OUIA-Generated-Button-plain-4"
300
- data-ouia-component-type="PF4/Button"
301
- data-ouia-safe="true"
302
- type="button"
303
- >
304
- <svg
305
- aria-hidden="true"
306
- fill="currentColor"
307
- height="1em"
308
- role="img"
309
- style="vertical-align: -0.125em;"
310
- viewBox="0 0 320 512"
311
- width="1em"
312
- >
313
- <path
314
- d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
315
- />
316
- </svg>
317
- </button>
318
- <button
319
- aria-disabled="false"
320
- aria-label="Next"
321
- class="pf-c-button pf-m-plain"
322
- data-ouia-component-id="OUIA-Generated-Button-plain-5"
323
- data-ouia-component-type="PF4/Button"
324
- data-ouia-safe="true"
325
- type="button"
308
+ <svg
309
+ aria-hidden="true"
310
+ fill="currentColor"
311
+ height="1em"
312
+ role="img"
313
+ style="vertical-align: -0.125em;"
314
+ viewBox="0 0 320 512"
315
+ width="1em"
326
316
  >
327
- <svg
328
- aria-hidden="true"
329
- fill="currentColor"
330
- height="1em"
331
- role="img"
332
- style="vertical-align: -0.125em;"
333
- viewBox="0 0 320 512"
334
- width="1em"
335
- >
336
- <path
337
- d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
338
- />
339
- </svg>
340
- </button>
341
- </span>
342
- <span
343
- class="pf-c-search-input__clear"
317
+ <path
318
+ d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
319
+ />
320
+ </svg>
321
+ </button>
322
+ <button
323
+ aria-disabled="false"
324
+ aria-label="Next"
325
+ class="pf-c-button pf-m-plain"
326
+ data-ouia-component-id="OUIA-Generated-Button-plain-5"
327
+ data-ouia-component-type="PF4/Button"
328
+ data-ouia-safe="true"
329
+ type="button"
344
330
  >
345
- <button
346
- aria-disabled="false"
347
- aria-label="Reset"
348
- class="pf-c-button pf-m-plain"
349
- data-ouia-component-id="OUIA-Generated-Button-plain-6"
350
- data-ouia-component-type="PF4/Button"
351
- data-ouia-safe="true"
352
- type="button"
331
+ <svg
332
+ aria-hidden="true"
333
+ fill="currentColor"
334
+ height="1em"
335
+ role="img"
336
+ style="vertical-align: -0.125em;"
337
+ viewBox="0 0 320 512"
338
+ width="1em"
353
339
  >
354
- <svg
355
- aria-hidden="true"
356
- fill="currentColor"
357
- height="1em"
358
- role="img"
359
- style="vertical-align: -0.125em;"
360
- viewBox="0 0 352 512"
361
- width="1em"
362
- >
363
- <path
364
- d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
365
- />
366
- </svg>
367
- </button>
368
- </span>
369
- </span>
370
- </div>
371
- <button
372
- aria-disabled="false"
373
- aria-label="Search"
374
- class="pf-c-button pf-m-control"
375
- data-ouia-component-id="OUIA-Generated-Button-control-2"
376
- data-ouia-component-type="PF4/Button"
377
- data-ouia-safe="true"
378
- type="submit"
379
- >
380
- <svg
381
- aria-hidden="true"
382
- fill="currentColor"
383
- height="1em"
384
- role="img"
385
- style="vertical-align: -0.125em;"
386
- viewBox="0 0 448 512"
387
- width="1em"
340
+ <path
341
+ d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
342
+ />
343
+ </svg>
344
+ </button>
345
+ </div>
346
+ <button
347
+ aria-disabled="false"
348
+ aria-label="Reset"
349
+ class="pf-c-button pf-m-plain"
350
+ data-ouia-component-id="OUIA-Generated-Button-plain-6"
351
+ data-ouia-component-type="PF4/Button"
352
+ data-ouia-safe="true"
353
+ type="button"
388
354
  >
389
- <path
390
- d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
391
- />
392
- </svg>
393
- </button>
355
+ <svg
356
+ aria-hidden="true"
357
+ fill="currentColor"
358
+ height="1em"
359
+ role="img"
360
+ style="vertical-align: -0.125em;"
361
+ viewBox="0 0 352 512"
362
+ width="1em"
363
+ >
364
+ <path
365
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
366
+ />
367
+ </svg>
368
+ </button>
369
+ </div>
394
370
  </div>
371
+ <button
372
+ aria-disabled="false"
373
+ aria-label="Search"
374
+ class="pf-c-button pf-m-control"
375
+ data-ouia-component-id="OUIA-Generated-Button-control-2"
376
+ data-ouia-component-type="PF4/Button"
377
+ data-ouia-safe="true"
378
+ type="submit"
379
+ >
380
+ <svg
381
+ aria-hidden="true"
382
+ fill="currentColor"
383
+ height="1em"
384
+ role="img"
385
+ style="vertical-align: -0.125em;"
386
+ viewBox="0 0 448 512"
387
+ width="1em"
388
+ >
389
+ <path
390
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
391
+ />
392
+ </svg>
393
+ </button>
395
394
  </div>
396
395
  </DocumentFragment>
397
396
  `;
@@ -399,19 +398,19 @@ exports[`SearchInput search input with hint 1`] = `
399
398
  exports[`SearchInput simple search input 1`] = `
400
399
  <DocumentFragment>
401
400
  <div
402
- class="pf-c-search-input"
401
+ class="pf-c-input-group"
403
402
  >
404
403
  <div
405
- class="pf-c-input-group"
404
+ class="pf-c-text-input-group"
406
405
  >
407
406
  <div
408
- class="pf-c-search-input__bar"
407
+ class="pf-c-text-input-group__main pf-m-icon"
409
408
  >
410
409
  <span
411
- class="pf-c-search-input__text"
410
+ class="pf-c-text-input-group__text"
412
411
  >
413
412
  <span
414
- class="pf-c-search-input__icon"
413
+ class="pf-c-text-input-group__icon"
415
414
  >
416
415
  <svg
417
416
  aria-hidden="true"
@@ -429,116 +428,113 @@ exports[`SearchInput simple search input 1`] = `
429
428
  </span>
430
429
  <input
431
430
  aria-label="simple text input"
432
- class="pf-c-search-input__text-input"
431
+ class="pf-c-text-input-group__text-input"
432
+ type="text"
433
433
  value="test input"
434
434
  />
435
435
  </span>
436
- <span
437
- class="pf-c-search-input__utilities"
436
+ </div>
437
+ <div
438
+ class="pf-c-text-input-group__utilities"
439
+ >
440
+ <div
441
+ class="pf-c-text-input-group__group"
438
442
  >
439
- <span
440
- class="pf-c-search-input__nav"
443
+ <button
444
+ aria-disabled="false"
445
+ aria-label="Previous"
446
+ class="pf-c-button pf-m-plain"
447
+ data-ouia-component-id="OUIA-Generated-Button-plain-1"
448
+ data-ouia-component-type="PF4/Button"
449
+ data-ouia-safe="true"
450
+ type="button"
441
451
  >
442
- <button
443
- aria-disabled="false"
444
- aria-label="Previous"
445
- class="pf-c-button pf-m-plain"
446
- data-ouia-component-id="OUIA-Generated-Button-plain-1"
447
- data-ouia-component-type="PF4/Button"
448
- data-ouia-safe="true"
449
- type="button"
450
- >
451
- <svg
452
- aria-hidden="true"
453
- fill="currentColor"
454
- height="1em"
455
- role="img"
456
- style="vertical-align: -0.125em;"
457
- viewBox="0 0 320 512"
458
- width="1em"
459
- >
460
- <path
461
- d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
462
- />
463
- </svg>
464
- </button>
465
- <button
466
- aria-disabled="false"
467
- aria-label="Next"
468
- class="pf-c-button pf-m-plain"
469
- data-ouia-component-id="OUIA-Generated-Button-plain-2"
470
- data-ouia-component-type="PF4/Button"
471
- data-ouia-safe="true"
472
- type="button"
452
+ <svg
453
+ aria-hidden="true"
454
+ fill="currentColor"
455
+ height="1em"
456
+ role="img"
457
+ style="vertical-align: -0.125em;"
458
+ viewBox="0 0 320 512"
459
+ width="1em"
473
460
  >
474
- <svg
475
- aria-hidden="true"
476
- fill="currentColor"
477
- height="1em"
478
- role="img"
479
- style="vertical-align: -0.125em;"
480
- viewBox="0 0 320 512"
481
- width="1em"
482
- >
483
- <path
484
- d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
485
- />
486
- </svg>
487
- </button>
488
- </span>
489
- <span
490
- class="pf-c-search-input__clear"
461
+ <path
462
+ d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
463
+ />
464
+ </svg>
465
+ </button>
466
+ <button
467
+ aria-disabled="false"
468
+ aria-label="Next"
469
+ class="pf-c-button pf-m-plain"
470
+ data-ouia-component-id="OUIA-Generated-Button-plain-2"
471
+ data-ouia-component-type="PF4/Button"
472
+ data-ouia-safe="true"
473
+ type="button"
491
474
  >
492
- <button
493
- aria-disabled="false"
494
- aria-label="Reset"
495
- class="pf-c-button pf-m-plain"
496
- data-ouia-component-id="OUIA-Generated-Button-plain-3"
497
- data-ouia-component-type="PF4/Button"
498
- data-ouia-safe="true"
499
- type="button"
475
+ <svg
476
+ aria-hidden="true"
477
+ fill="currentColor"
478
+ height="1em"
479
+ role="img"
480
+ style="vertical-align: -0.125em;"
481
+ viewBox="0 0 320 512"
482
+ width="1em"
500
483
  >
501
- <svg
502
- aria-hidden="true"
503
- fill="currentColor"
504
- height="1em"
505
- role="img"
506
- style="vertical-align: -0.125em;"
507
- viewBox="0 0 352 512"
508
- width="1em"
509
- >
510
- <path
511
- d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
512
- />
513
- </svg>
514
- </button>
515
- </span>
516
- </span>
517
- </div>
518
- <button
519
- aria-disabled="false"
520
- aria-label="Search"
521
- class="pf-c-button pf-m-control"
522
- data-ouia-component-id="OUIA-Generated-Button-control-1"
523
- data-ouia-component-type="PF4/Button"
524
- data-ouia-safe="true"
525
- type="submit"
526
- >
527
- <svg
528
- aria-hidden="true"
529
- fill="currentColor"
530
- height="1em"
531
- role="img"
532
- style="vertical-align: -0.125em;"
533
- viewBox="0 0 448 512"
534
- width="1em"
484
+ <path
485
+ d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
486
+ />
487
+ </svg>
488
+ </button>
489
+ </div>
490
+ <button
491
+ aria-disabled="false"
492
+ aria-label="Reset"
493
+ class="pf-c-button pf-m-plain"
494
+ data-ouia-component-id="OUIA-Generated-Button-plain-3"
495
+ data-ouia-component-type="PF4/Button"
496
+ data-ouia-safe="true"
497
+ type="button"
535
498
  >
536
- <path
537
- d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
538
- />
539
- </svg>
540
- </button>
499
+ <svg
500
+ aria-hidden="true"
501
+ fill="currentColor"
502
+ height="1em"
503
+ role="img"
504
+ style="vertical-align: -0.125em;"
505
+ viewBox="0 0 352 512"
506
+ width="1em"
507
+ >
508
+ <path
509
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
510
+ />
511
+ </svg>
512
+ </button>
513
+ </div>
541
514
  </div>
515
+ <button
516
+ aria-disabled="false"
517
+ aria-label="Search"
518
+ class="pf-c-button pf-m-control"
519
+ data-ouia-component-id="OUIA-Generated-Button-control-1"
520
+ data-ouia-component-type="PF4/Button"
521
+ data-ouia-safe="true"
522
+ type="submit"
523
+ >
524
+ <svg
525
+ aria-hidden="true"
526
+ fill="currentColor"
527
+ height="1em"
528
+ role="img"
529
+ style="vertical-align: -0.125em;"
530
+ viewBox="0 0 448 512"
531
+ width="1em"
532
+ >
533
+ <path
534
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
535
+ />
536
+ </svg>
537
+ </button>
542
538
  </div>
543
539
  </DocumentFragment>
544
540
  `;