@patternfly/react-core 5.0.0-alpha.23 → 5.0.0-alpha.24

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 (28) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/components/Chip/Chip.d.ts.map +1 -1
  3. package/components/Chip/Chip.js +7 -4
  4. package/components/Chip/Chip.js.map +1 -1
  5. package/components/Label/Label.d.ts.map +1 -1
  6. package/components/Label/Label.js +2 -1
  7. package/components/Label/Label.js.map +1 -1
  8. package/dist/esm/components/Chip/Chip.d.ts.map +1 -1
  9. package/dist/esm/components/Chip/Chip.js +7 -4
  10. package/dist/esm/components/Chip/Chip.js.map +1 -1
  11. package/dist/esm/components/Label/Label.d.ts.map +1 -1
  12. package/dist/esm/components/Label/Label.js +2 -1
  13. package/dist/esm/components/Label/Label.js.map +1 -1
  14. package/dist/js/components/Chip/Chip.d.ts.map +1 -1
  15. package/dist/js/components/Chip/Chip.js +7 -4
  16. package/dist/js/components/Chip/Chip.js.map +1 -1
  17. package/dist/js/components/Label/Label.d.ts.map +1 -1
  18. package/dist/js/components/Label/Label.js +2 -1
  19. package/dist/js/components/Label/Label.js.map +1 -1
  20. package/dist/umd/react-core.min.js +1 -1
  21. package/package.json +2 -2
  22. package/src/components/Chip/Chip.tsx +19 -13
  23. package/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap +149 -109
  24. package/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap +136 -104
  25. package/src/components/Label/Label.tsx +14 -10
  26. package/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap +75 -63
  27. package/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap +68 -52
  28. package/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap +68 -52
package/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap CHANGED
@@ -27,36 +27,44 @@ exports[`ChipGroup chip group default 1`] = `
27
27
  data-ouia-safe="true"
28
28
  >
29
29
  <span
30
- class="pf-c-chip__text"
31
- id="pf-random-id-1"
30
+ class="pf-c-chip__content"
32
31
  >
33
- 1.1
32
+ <span
33
+ class="pf-c-chip__text"
34
+ id="pf-random-id-1"
35
+ >
36
+ 1.1
37
+ </span>
34
38
  </span>
35
- <button
36
- aria-disabled="false"
37
- aria-label="close"
38
- aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
39
- class="pf-c-button pf-m-plain"
40
- data-ouia-component-id="close"
41
- data-ouia-component-type="PF4/Button"
42
- data-ouia-safe="true"
43
- id="remove_pf-random-id-1"
44
- type="button"
39
+ <span
40
+ class="pf-c-chip__actions"
45
41
  >
46
- <svg
47
- aria-hidden="true"
48
- fill="currentColor"
49
- height="1em"
50
- role="img"
51
- style="vertical-align: -0.125em;"
52
- viewBox="0 0 352 512"
53
- width="1em"
42
+ <button
43
+ aria-disabled="false"
44
+ aria-label="close"
45
+ aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
46
+ class="pf-c-button pf-m-plain"
47
+ data-ouia-component-id="close"
48
+ data-ouia-component-type="PF4/Button"
49
+ data-ouia-safe="true"
50
+ id="remove_pf-random-id-1"
51
+ type="button"
54
52
  >
55
- <path
56
- 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"
57
- />
58
- </svg>
59
- </button>
53
+ <svg
54
+ aria-hidden="true"
55
+ fill="currentColor"
56
+ height="1em"
57
+ role="img"
58
+ style="vertical-align: -0.125em;"
59
+ viewBox="0 0 352 512"
60
+ width="1em"
61
+ >
62
+ <path
63
+ 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"
64
+ />
65
+ </svg>
66
+ </button>
67
+ </span>
60
68
  </div>
61
69
  </li>
62
70
  </ul>
@@ -98,36 +106,44 @@ exports[`ChipGroup chip group with category 1`] = `
98
106
  data-ouia-safe="true"
99
107
  >
100
108
  <span
101
- class="pf-c-chip__text"
102
- id="pf-random-id-3"
109
+ class="pf-c-chip__content"
103
110
  >
104
- 1.1
111
+ <span
112
+ class="pf-c-chip__text"
113
+ id="pf-random-id-3"
114
+ >
115
+ 1.1
116
+ </span>
105
117
  </span>
106
- <button
107
- aria-disabled="false"
108
- aria-label="close"
109
- aria-labelledby="remove_pf-random-id-3 pf-random-id-3"
110
- class="pf-c-button pf-m-plain"
111
- data-ouia-component-id="close"
112
- data-ouia-component-type="PF4/Button"
113
- data-ouia-safe="true"
114
- id="remove_pf-random-id-3"
115
- type="button"
118
+ <span
119
+ class="pf-c-chip__actions"
116
120
  >
117
- <svg
118
- aria-hidden="true"
119
- fill="currentColor"
120
- height="1em"
121
- role="img"
122
- style="vertical-align: -0.125em;"
123
- viewBox="0 0 352 512"
124
- width="1em"
121
+ <button
122
+ aria-disabled="false"
123
+ aria-label="close"
124
+ aria-labelledby="remove_pf-random-id-3 pf-random-id-3"
125
+ class="pf-c-button pf-m-plain"
126
+ data-ouia-component-id="close"
127
+ data-ouia-component-type="PF4/Button"
128
+ data-ouia-safe="true"
129
+ id="remove_pf-random-id-3"
130
+ type="button"
125
131
  >
126
- <path
127
- 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"
128
- />
129
- </svg>
130
- </button>
132
+ <svg
133
+ aria-hidden="true"
134
+ fill="currentColor"
135
+ height="1em"
136
+ role="img"
137
+ style="vertical-align: -0.125em;"
138
+ viewBox="0 0 352 512"
139
+ width="1em"
140
+ >
141
+ <path
142
+ 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"
143
+ />
144
+ </svg>
145
+ </button>
146
+ </span>
131
147
  </div>
132
148
  </li>
133
149
  </ul>
@@ -169,36 +185,44 @@ exports[`ChipGroup chip group with category and tooltip 1`] = `
169
185
  data-ouia-safe="true"
170
186
  >
171
187
  <span
172
- class="pf-c-chip__text"
173
- id="pf-random-id-13"
188
+ class="pf-c-chip__content"
174
189
  >
175
- 1.1
190
+ <span
191
+ class="pf-c-chip__text"
192
+ id="pf-random-id-13"
193
+ >
194
+ 1.1
195
+ </span>
176
196
  </span>
177
- <button
178
- aria-disabled="false"
179
- aria-label="close"
180
- aria-labelledby="remove_pf-random-id-13 pf-random-id-13"
181
- class="pf-c-button pf-m-plain"
182
- data-ouia-component-id="close"
183
- data-ouia-component-type="PF4/Button"
184
- data-ouia-safe="true"
185
- id="remove_pf-random-id-13"
186
- type="button"
197
+ <span
198
+ class="pf-c-chip__actions"
187
199
  >
188
- <svg
189
- aria-hidden="true"
190
- fill="currentColor"
191
- height="1em"
192
- role="img"
193
- style="vertical-align: -0.125em;"
194
- viewBox="0 0 352 512"
195
- width="1em"
200
+ <button
201
+ aria-disabled="false"
202
+ aria-label="close"
203
+ aria-labelledby="remove_pf-random-id-13 pf-random-id-13"
204
+ class="pf-c-button pf-m-plain"
205
+ data-ouia-component-id="close"
206
+ data-ouia-component-type="PF4/Button"
207
+ data-ouia-safe="true"
208
+ id="remove_pf-random-id-13"
209
+ type="button"
196
210
  >
197
- <path
198
- 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"
199
- />
200
- </svg>
201
- </button>
211
+ <svg
212
+ aria-hidden="true"
213
+ fill="currentColor"
214
+ height="1em"
215
+ role="img"
216
+ style="vertical-align: -0.125em;"
217
+ viewBox="0 0 352 512"
218
+ width="1em"
219
+ >
220
+ <path
221
+ 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"
222
+ />
223
+ </svg>
224
+ </button>
225
+ </span>
202
226
  </div>
203
227
  </li>
204
228
  </ul>
@@ -240,36 +264,44 @@ exports[`ChipGroup chip group with closable category 1`] = `
240
264
  data-ouia-safe="true"
241
265
  >
242
266
  <span
243
- class="pf-c-chip__text"
244
- id="pf-random-id-5"
267
+ class="pf-c-chip__content"
245
268
  >
246
- 1.1
269
+ <span
270
+ class="pf-c-chip__text"
271
+ id="pf-random-id-5"
272
+ >
273
+ 1.1
274
+ </span>
247
275
  </span>
248
- <button
249
- aria-disabled="false"
250
- aria-label="close"
251
- aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
252
- class="pf-c-button pf-m-plain"
253
- data-ouia-component-id="close"
254
- data-ouia-component-type="PF4/Button"
255
- data-ouia-safe="true"
256
- id="remove_pf-random-id-5"
257
- type="button"
276
+ <span
277
+ class="pf-c-chip__actions"
258
278
  >
259
- <svg
260
- aria-hidden="true"
261
- fill="currentColor"
262
- height="1em"
263
- role="img"
264
- style="vertical-align: -0.125em;"
265
- viewBox="0 0 352 512"
266
- width="1em"
279
+ <button
280
+ aria-disabled="false"
281
+ aria-label="close"
282
+ aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
283
+ class="pf-c-button pf-m-plain"
284
+ data-ouia-component-id="close"
285
+ data-ouia-component-type="PF4/Button"
286
+ data-ouia-safe="true"
287
+ id="remove_pf-random-id-5"
288
+ type="button"
267
289
  >
268
- <path
269
- 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"
270
- />
271
- </svg>
272
- </button>
290
+ <svg
291
+ aria-hidden="true"
292
+ fill="currentColor"
293
+ height="1em"
294
+ role="img"
295
+ style="vertical-align: -0.125em;"
296
+ viewBox="0 0 352 512"
297
+ width="1em"
298
+ >
299
+ <path
300
+ 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"
301
+ />
302
+ </svg>
303
+ </button>
304
+ </span>
273
305
  </div>
274
306
  </li>
275
307
  </ul>
package/src/components/Label/Label.tsx CHANGED
@@ -182,19 +182,23 @@ export const Label: React.FunctionComponent<LabelProps> = ({
182
182
 
183
183
  const LabelComponent = (isOverflowLabel ? 'button' : 'span') as any;
184
184
 
185
- const button = closeBtn ? (
186
- closeBtn
187
- ) : (
185
+ const defaultButton = (
188
186
  <Button
189
- type="button"
190
- variant="plain"
191
- onClick={onClose}
192
- aria-label={closeBtnAriaLabel || `Close ${children}`}
193
- {...closeBtnProps}
194
- >
195
- <TimesIcon />
187
+ type="button"
188
+ variant="plain"
189
+ onClick={onClose}
190
+ aria-label={closeBtnAriaLabel || `Close ${children}`}
191
+ {...closeBtnProps}
192
+ >
193
+ <TimesIcon />
196
194
  </Button>
197
195
  );
196
+
197
+ const button = (
198
+ <span className={css(styles.labelActions)}>
199
+ {closeBtn || defaultButton}
200
+ </span>
201
+ );
198
202
  const textRef = React.createRef<any>();
199
203
  // ref to apply tooltip when rendered is used
200
204
  const componentRef = React.useRef();
package/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap CHANGED
@@ -10,29 +10,33 @@ exports[`Label editable label 1`] = `
10
10
  >
11
11
  Something
12
12
  </button>
13
- <button
14
- aria-disabled="false"
15
- aria-label="Close Something"
16
- class="pf-c-button pf-m-plain"
17
- data-ouia-component-id="OUIA-Generated-Button-plain-3"
18
- data-ouia-component-type="PF4/Button"
19
- data-ouia-safe="true"
20
- type="button"
13
+ <span
14
+ class="pf-c-label__actions"
21
15
  >
22
- <svg
23
- aria-hidden="true"
24
- fill="currentColor"
25
- height="1em"
26
- role="img"
27
- style="vertical-align: -0.125em;"
28
- viewBox="0 0 352 512"
29
- width="1em"
16
+ <button
17
+ aria-disabled="false"
18
+ aria-label="Close Something"
19
+ class="pf-c-button pf-m-plain"
20
+ data-ouia-component-id="OUIA-Generated-Button-plain-3"
21
+ data-ouia-component-type="PF4/Button"
22
+ data-ouia-safe="true"
23
+ type="button"
30
24
  >
31
- <path
32
- 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
- />
34
- </svg>
35
- </button>
25
+ <svg
26
+ aria-hidden="true"
27
+ fill="currentColor"
28
+ height="1em"
29
+ role="img"
30
+ style="vertical-align: -0.125em;"
31
+ viewBox="0 0 352 512"
32
+ width="1em"
33
+ >
34
+ <path
35
+ 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"
36
+ />
37
+ </svg>
38
+ </button>
39
+ </span>
36
40
  </span>
37
41
  </DocumentFragment>
38
42
  `;
@@ -120,29 +124,33 @@ exports[`Label label with close button 1`] = `
120
124
  >
121
125
  Something
122
126
  </span>
123
- <button
124
- aria-disabled="false"
125
- aria-label="Close Something"
126
- class="pf-c-button pf-m-plain"
127
- data-ouia-component-id="OUIA-Generated-Button-plain-1"
128
- data-ouia-component-type="PF4/Button"
129
- data-ouia-safe="true"
130
- type="button"
127
+ <span
128
+ class="pf-c-label__actions"
131
129
  >
132
- <svg
133
- aria-hidden="true"
134
- fill="currentColor"
135
- height="1em"
136
- role="img"
137
- style="vertical-align: -0.125em;"
138
- viewBox="0 0 352 512"
139
- width="1em"
130
+ <button
131
+ aria-disabled="false"
132
+ aria-label="Close Something"
133
+ class="pf-c-button pf-m-plain"
134
+ data-ouia-component-id="OUIA-Generated-Button-plain-1"
135
+ data-ouia-component-type="PF4/Button"
136
+ data-ouia-safe="true"
137
+ type="button"
140
138
  >
141
- <path
142
- 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"
143
- />
144
- </svg>
145
- </button>
139
+ <svg
140
+ aria-hidden="true"
141
+ fill="currentColor"
142
+ height="1em"
143
+ role="img"
144
+ style="vertical-align: -0.125em;"
145
+ viewBox="0 0 352 512"
146
+ width="1em"
147
+ >
148
+ <path
149
+ 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"
150
+ />
151
+ </svg>
152
+ </button>
153
+ </span>
146
154
  </span>
147
155
  </DocumentFragment>
148
156
  `;
@@ -157,29 +165,33 @@ exports[`Label label with close button and outline variant 1`] = `
157
165
  >
158
166
  Something
159
167
  </span>
160
- <button
161
- aria-disabled="false"
162
- aria-label="Close Something"
163
- class="pf-c-button pf-m-plain"
164
- data-ouia-component-id="OUIA-Generated-Button-plain-2"
165
- data-ouia-component-type="PF4/Button"
166
- data-ouia-safe="true"
167
- type="button"
168
+ <span
169
+ class="pf-c-label__actions"
168
170
  >
169
- <svg
170
- aria-hidden="true"
171
- fill="currentColor"
172
- height="1em"
173
- role="img"
174
- style="vertical-align: -0.125em;"
175
- viewBox="0 0 352 512"
176
- width="1em"
171
+ <button
172
+ aria-disabled="false"
173
+ aria-label="Close Something"
174
+ class="pf-c-button pf-m-plain"
175
+ data-ouia-component-id="OUIA-Generated-Button-plain-2"
176
+ data-ouia-component-type="PF4/Button"
177
+ data-ouia-safe="true"
178
+ type="button"
177
179
  >
178
- <path
179
- 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"
180
- />
181
- </svg>
182
- </button>
180
+ <svg
181
+ aria-hidden="true"
182
+ fill="currentColor"
183
+ height="1em"
184
+ role="img"
185
+ style="vertical-align: -0.125em;"
186
+ viewBox="0 0 352 512"
187
+ width="1em"
188
+ >
189
+ <path
190
+ 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"
191
+ />
192
+ </svg>
193
+ </button>
194
+ </span>
183
195
  </span>
184
196
  </DocumentFragment>
185
197
  `;
package/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap CHANGED
@@ -1861,36 +1861,44 @@ exports[`typeahead multi select renders selected successfully 1`] = `
1861
1861
  data-ouia-safe="true"
1862
1862
  >
1863
1863
  <span
1864
- class="pf-c-chip__text"
1865
- id="pf-random-id-25"
1864
+ class="pf-c-chip__content"
1866
1865
  >
1867
- Mr
1866
+ <span
1867
+ class="pf-c-chip__text"
1868
+ id="pf-random-id-25"
1869
+ >
1870
+ Mr
1871
+ </span>
1868
1872
  </span>
1869
- <button
1870
- aria-disabled="false"
1871
- aria-label="Remove"
1872
- aria-labelledby="remove_pf-random-id-25 pf-random-id-25"
1873
- class="pf-c-button pf-m-plain"
1874
- data-ouia-component-id="Remove"
1875
- data-ouia-component-type="PF4/Button"
1876
- data-ouia-safe="true"
1877
- id="remove_pf-random-id-25"
1878
- type="button"
1873
+ <span
1874
+ class="pf-c-chip__actions"
1879
1875
  >
1880
- <svg
1881
- aria-hidden="true"
1882
- fill="currentColor"
1883
- height="1em"
1884
- role="img"
1885
- style="vertical-align: -0.125em;"
1886
- viewBox="0 0 352 512"
1887
- width="1em"
1876
+ <button
1877
+ aria-disabled="false"
1878
+ aria-label="Remove"
1879
+ aria-labelledby="remove_pf-random-id-25 pf-random-id-25"
1880
+ class="pf-c-button pf-m-plain"
1881
+ data-ouia-component-id="Remove"
1882
+ data-ouia-component-type="PF4/Button"
1883
+ data-ouia-safe="true"
1884
+ id="remove_pf-random-id-25"
1885
+ type="button"
1888
1886
  >
1889
- <path
1890
- 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"
1891
- />
1892
- </svg>
1893
- </button>
1887
+ <svg
1888
+ aria-hidden="true"
1889
+ fill="currentColor"
1890
+ height="1em"
1891
+ role="img"
1892
+ style="vertical-align: -0.125em;"
1893
+ viewBox="0 0 352 512"
1894
+ width="1em"
1895
+ >
1896
+ <path
1897
+ 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"
1898
+ />
1899
+ </svg>
1900
+ </button>
1901
+ </span>
1894
1902
  </div>
1895
1903
  </li>
1896
1904
  <li
@@ -1903,36 +1911,44 @@ exports[`typeahead multi select renders selected successfully 1`] = `
1903
1911
  data-ouia-safe="true"
1904
1912
  >
1905
1913
  <span
1906
- class="pf-c-chip__text"
1907
- id="pf-random-id-26"
1914
+ class="pf-c-chip__content"
1908
1915
  >
1909
- Mrs
1916
+ <span
1917
+ class="pf-c-chip__text"
1918
+ id="pf-random-id-26"
1919
+ >
1920
+ Mrs
1921
+ </span>
1910
1922
  </span>
1911
- <button
1912
- aria-disabled="false"
1913
- aria-label="Remove"
1914
- aria-labelledby="remove_pf-random-id-26 pf-random-id-26"
1915
- class="pf-c-button pf-m-plain"
1916
- data-ouia-component-id="Remove"
1917
- data-ouia-component-type="PF4/Button"
1918
- data-ouia-safe="true"
1919
- id="remove_pf-random-id-26"
1920
- type="button"
1923
+ <span
1924
+ class="pf-c-chip__actions"
1921
1925
  >
1922
- <svg
1923
- aria-hidden="true"
1924
- fill="currentColor"
1925
- height="1em"
1926
- role="img"
1927
- style="vertical-align: -0.125em;"
1928
- viewBox="0 0 352 512"
1929
- width="1em"
1926
+ <button
1927
+ aria-disabled="false"
1928
+ aria-label="Remove"
1929
+ aria-labelledby="remove_pf-random-id-26 pf-random-id-26"
1930
+ class="pf-c-button pf-m-plain"
1931
+ data-ouia-component-id="Remove"
1932
+ data-ouia-component-type="PF4/Button"
1933
+ data-ouia-safe="true"
1934
+ id="remove_pf-random-id-26"
1935
+ type="button"
1930
1936
  >
1931
- <path
1932
- 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"
1933
- />
1934
- </svg>
1935
- </button>
1937
+ <svg
1938
+ aria-hidden="true"
1939
+ fill="currentColor"
1940
+ height="1em"
1941
+ role="img"
1942
+ style="vertical-align: -0.125em;"
1943
+ viewBox="0 0 352 512"
1944
+ width="1em"
1945
+ >
1946
+ <path
1947
+ 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"
1948
+ />
1949
+ </svg>
1950
+ </button>
1951
+ </span>
1936
1952
  </div>
1937
1953
  </li>
1938
1954
  </ul>