@patternfly/react-core 5.0.0-alpha.36 → 5.0.0-alpha.37

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 (14) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/components/Modal/ModalBoxCloseButton.d.ts.map +1 -1
  3. package/components/Modal/ModalBoxCloseButton.js +6 -3
  4. package/components/Modal/ModalBoxCloseButton.js.map +1 -1
  5. package/dist/esm/components/Modal/ModalBoxCloseButton.d.ts.map +1 -1
  6. package/dist/esm/components/Modal/ModalBoxCloseButton.js +6 -3
  7. package/dist/esm/components/Modal/ModalBoxCloseButton.js.map +1 -1
  8. package/dist/js/components/Modal/ModalBoxCloseButton.d.ts.map +1 -1
  9. package/dist/js/components/Modal/ModalBoxCloseButton.js +6 -3
  10. package/dist/js/components/Modal/ModalBoxCloseButton.js.map +1 -1
  11. package/dist/umd/react-core.min.js +1 -1
  12. package/package.json +5 -5
  13. package/src/components/Modal/ModalBoxCloseButton.tsx +14 -11
  14. package/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap +200 -168
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-core",
3
- "version": "5.0.0-alpha.36",
3
+ "version": "5.0.0-alpha.37",
4
4
  "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
5
5
  "main": "dist/js/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -45,7 +45,7 @@
45
45
  "subpaths": "node scripts/copySubpaths.js"
46
46
  },
47
47
  "dependencies": {
48
- "@patternfly/react-icons": "^5.0.0-alpha.4",
48
+ "@patternfly/react-icons": "^5.0.0-alpha.5",
49
49
  "@patternfly/react-styles": "^5.0.0-alpha.4",
50
50
  "@patternfly/react-tokens": "^5.0.0-alpha.4",
51
51
  "focus-trap": "6.9.2",
@@ -67,8 +67,8 @@
67
67
  "typescript": "^4.7.4"
68
68
  },
69
69
  "peerDependencies": {
70
- "react": "^16.8 || ^17 || ^18",
71
- "react-dom": "^16.8 || ^17 || ^18"
70
+ "react": "^17 || ^18",
71
+ "react-dom": "^17 || ^18"
72
72
  },
73
- "gitHead": "150dae762baafab2bdcdbc8c9860204e9b35d3cc"
73
+ "gitHead": "67f588da8b7b8858729deeb6472e63b88da4d3cc"
74
74
  }
package/src/components/Modal/ModalBoxCloseButton.tsx CHANGED
@@ -1,4 +1,6 @@
1
1
  import * as React from 'react';
2
+ import { css } from '@patternfly/react-styles';
3
+ import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
2
4
  import { Button } from '../Button';
3
5
  import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
4
6
  import { OUIAProps } from '../../helpers';
@@ -13,20 +15,21 @@ export interface ModalBoxCloseButtonProps extends OUIAProps {
13
15
  }
14
16
 
15
17
  export const ModalBoxCloseButton: React.FunctionComponent<ModalBoxCloseButtonProps> = ({
16
- className = '',
18
+ className,
17
19
  onClose = () => undefined as any,
18
20
  ouiaId,
19
21
  ...props
20
22
  }: ModalBoxCloseButtonProps) => (
21
- <Button
22
- className={className}
23
- variant="plain"
24
- onClick={onClose}
25
- aria-label="Close"
26
- {...(ouiaId && { ouiaId: `${ouiaId}-${ModalBoxCloseButton.displayName}` })}
27
- {...props}
28
- >
29
- <TimesIcon />
30
- </Button>
23
+ <div className={css(styles.modalBoxClose, className)}>
24
+ <Button
25
+ variant="plain"
26
+ onClick={onClose}
27
+ aria-label="Close"
28
+ {...(ouiaId && { ouiaId: `${ouiaId}-${ModalBoxCloseButton.displayName}` })}
29
+ {...props}
30
+ >
31
+ <TimesIcon />
32
+ </Button>
33
+ </div>
31
34
  );
32
35
  ModalBoxCloseButton.displayName = 'ModalBoxCloseButton';
package/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap CHANGED
@@ -18,29 +18,33 @@ exports[`Modal Content Test description 1`] = `
18
18
  id="boxId"
19
19
  role="dialog"
20
20
  >
21
- <button
22
- aria-disabled="false"
23
- aria-label="Close"
24
- class="pf-c-button pf-m-plain"
25
- data-ouia-component-id="OUIA-Generated-Button-plain-3"
26
- data-ouia-component-type="PF4/Button"
27
- data-ouia-safe="true"
28
- type="button"
21
+ <div
22
+ class="pf-c-modal-box__close"
29
23
  >
30
- <svg
31
- aria-hidden="true"
32
- fill="currentColor"
33
- height="1em"
34
- role="img"
35
- style="vertical-align: -0.125em;"
36
- viewBox="0 0 352 512"
37
- width="1em"
24
+ <button
25
+ aria-disabled="false"
26
+ aria-label="Close"
27
+ class="pf-c-button pf-m-plain"
28
+ data-ouia-component-id="OUIA-Generated-Button-plain-3"
29
+ data-ouia-component-type="PF4/Button"
30
+ data-ouia-safe="true"
31
+ type="button"
38
32
  >
39
- <path
40
- 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"
41
- />
42
- </svg>
43
- </button>
33
+ <svg
34
+ aria-hidden="true"
35
+ fill="currentColor"
36
+ height="1em"
37
+ role="img"
38
+ style="vertical-align: -0.125em;"
39
+ viewBox="0 0 352 512"
40
+ width="1em"
41
+ >
42
+ <path
43
+ 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"
44
+ />
45
+ </svg>
46
+ </button>
47
+ </div>
44
48
  <header
45
49
  class="pf-c-modal-box__header"
46
50
  >
@@ -90,29 +94,33 @@ exports[`Modal Content Test isOpen 1`] = `
90
94
  id="boxId"
91
95
  role="dialog"
92
96
  >
93
- <button
94
- aria-disabled="false"
95
- aria-label="Close"
96
- class="pf-c-button pf-m-plain"
97
- data-ouia-component-id="OUIA-Generated-Button-plain-2"
98
- data-ouia-component-type="PF4/Button"
99
- data-ouia-safe="true"
100
- type="button"
97
+ <div
98
+ class="pf-c-modal-box__close"
101
99
  >
102
- <svg
103
- aria-hidden="true"
104
- fill="currentColor"
105
- height="1em"
106
- role="img"
107
- style="vertical-align: -0.125em;"
108
- viewBox="0 0 352 512"
109
- width="1em"
100
+ <button
101
+ aria-disabled="false"
102
+ aria-label="Close"
103
+ class="pf-c-button pf-m-plain"
104
+ data-ouia-component-id="OUIA-Generated-Button-plain-2"
105
+ data-ouia-component-type="PF4/Button"
106
+ data-ouia-safe="true"
107
+ type="button"
110
108
  >
111
- <path
112
- 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"
113
- />
114
- </svg>
115
- </button>
109
+ <svg
110
+ aria-hidden="true"
111
+ fill="currentColor"
112
+ height="1em"
113
+ role="img"
114
+ style="vertical-align: -0.125em;"
115
+ viewBox="0 0 352 512"
116
+ width="1em"
117
+ >
118
+ <path
119
+ 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"
120
+ />
121
+ </svg>
122
+ </button>
123
+ </div>
116
124
  <header
117
125
  class="pf-c-modal-box__header"
118
126
  >
@@ -157,29 +165,33 @@ exports[`Modal Content Test only body 1`] = `
157
165
  id="boxId"
158
166
  role="dialog"
159
167
  >
160
- <button
161
- aria-disabled="false"
162
- aria-label="Close"
163
- class="pf-c-button pf-m-plain"
164
- data-ouia-component-id="OUIA-Generated-Button-plain-1"
165
- data-ouia-component-type="PF4/Button"
166
- data-ouia-safe="true"
167
- type="button"
168
+ <div
169
+ class="pf-c-modal-box__close"
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"
174
+ class="pf-c-button pf-m-plain"
175
+ data-ouia-component-id="OUIA-Generated-Button-plain-1"
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
+ </div>
183
195
  <header
184
196
  class="pf-c-modal-box__header"
185
197
  >
@@ -224,29 +236,33 @@ exports[`Modal Content Test with footer 1`] = `
224
236
  id="boxId"
225
237
  role="dialog"
226
238
  >
227
- <button
228
- aria-disabled="false"
229
- aria-label="Close"
230
- class="pf-c-button pf-m-plain"
231
- data-ouia-component-id="OUIA-Generated-Button-plain-4"
232
- data-ouia-component-type="PF4/Button"
233
- data-ouia-safe="true"
234
- type="button"
239
+ <div
240
+ class="pf-c-modal-box__close"
235
241
  >
236
- <svg
237
- aria-hidden="true"
238
- fill="currentColor"
239
- height="1em"
240
- role="img"
241
- style="vertical-align: -0.125em;"
242
- viewBox="0 0 352 512"
243
- width="1em"
242
+ <button
243
+ aria-disabled="false"
244
+ aria-label="Close"
245
+ class="pf-c-button pf-m-plain"
246
+ data-ouia-component-id="OUIA-Generated-Button-plain-4"
247
+ data-ouia-component-type="PF4/Button"
248
+ data-ouia-safe="true"
249
+ type="button"
244
250
  >
245
- <path
246
- 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"
247
- />
248
- </svg>
249
- </button>
251
+ <svg
252
+ aria-hidden="true"
253
+ fill="currentColor"
254
+ height="1em"
255
+ role="img"
256
+ style="vertical-align: -0.125em;"
257
+ viewBox="0 0 352 512"
258
+ width="1em"
259
+ >
260
+ <path
261
+ 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"
262
+ />
263
+ </svg>
264
+ </button>
265
+ </div>
250
266
  <header
251
267
  class="pf-c-modal-box__header"
252
268
  >
@@ -296,29 +312,33 @@ exports[`Modal Content Test with onclose 1`] = `
296
312
  id="boxId"
297
313
  role="dialog"
298
314
  >
299
- <button
300
- aria-disabled="false"
301
- aria-label="Close"
302
- class="pf-c-button pf-m-plain"
303
- data-ouia-component-id="OUIA-Generated-Button-plain-6"
304
- data-ouia-component-type="PF4/Button"
305
- data-ouia-safe="true"
306
- type="button"
315
+ <div
316
+ class="pf-c-modal-box__close"
307
317
  >
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 352 512"
315
- width="1em"
318
+ <button
319
+ aria-disabled="false"
320
+ aria-label="Close"
321
+ class="pf-c-button pf-m-plain"
322
+ data-ouia-component-id="OUIA-Generated-Button-plain-6"
323
+ data-ouia-component-type="PF4/Button"
324
+ data-ouia-safe="true"
325
+ type="button"
316
326
  >
317
- <path
318
- 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"
319
- />
320
- </svg>
321
- </button>
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 352 512"
334
+ width="1em"
335
+ >
336
+ <path
337
+ 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"
338
+ />
339
+ </svg>
340
+ </button>
341
+ </div>
322
342
  <header
323
343
  class="pf-c-modal-box__header"
324
344
  >
@@ -368,29 +388,33 @@ exports[`Modal Content test without footer 1`] = `
368
388
  id="boxId"
369
389
  role="dialog"
370
390
  >
371
- <button
372
- aria-disabled="false"
373
- aria-label="Close"
374
- class="pf-c-button pf-m-plain"
375
- data-ouia-component-id="OUIA-Generated-Button-plain-5"
376
- data-ouia-component-type="PF4/Button"
377
- data-ouia-safe="true"
378
- type="button"
391
+ <div
392
+ class="pf-c-modal-box__close"
379
393
  >
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 352 512"
387
- width="1em"
394
+ <button
395
+ aria-disabled="false"
396
+ aria-label="Close"
397
+ class="pf-c-button pf-m-plain"
398
+ data-ouia-component-id="OUIA-Generated-Button-plain-5"
399
+ data-ouia-component-type="PF4/Button"
400
+ data-ouia-safe="true"
401
+ type="button"
388
402
  >
389
- <path
390
- 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"
391
- />
392
- </svg>
393
- </button>
403
+ <svg
404
+ aria-hidden="true"
405
+ fill="currentColor"
406
+ height="1em"
407
+ role="img"
408
+ style="vertical-align: -0.125em;"
409
+ viewBox="0 0 352 512"
410
+ width="1em"
411
+ >
412
+ <path
413
+ 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"
414
+ />
415
+ </svg>
416
+ </button>
417
+ </div>
394
418
  <header
395
419
  class="pf-c-modal-box__header"
396
420
  >
@@ -435,29 +459,33 @@ exports[`Modal Test with custom footer 1`] = `
435
459
  id="boxId"
436
460
  role="dialog"
437
461
  >
438
- <button
439
- aria-disabled="false"
440
- aria-label="Close"
441
- class="pf-c-button pf-m-plain"
442
- data-ouia-component-id="OUIA-Generated-Button-plain-8"
443
- data-ouia-component-type="PF4/Button"
444
- data-ouia-safe="true"
445
- type="button"
462
+ <div
463
+ class="pf-c-modal-box__close"
446
464
  >
447
- <svg
448
- aria-hidden="true"
449
- fill="currentColor"
450
- height="1em"
451
- role="img"
452
- style="vertical-align: -0.125em;"
453
- viewBox="0 0 352 512"
454
- width="1em"
465
+ <button
466
+ aria-disabled="false"
467
+ aria-label="Close"
468
+ class="pf-c-button pf-m-plain"
469
+ data-ouia-component-id="OUIA-Generated-Button-plain-8"
470
+ data-ouia-component-type="PF4/Button"
471
+ data-ouia-safe="true"
472
+ type="button"
455
473
  >
456
- <path
457
- 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"
458
- />
459
- </svg>
460
- </button>
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 352 512"
481
+ width="1em"
482
+ >
483
+ <path
484
+ 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"
485
+ />
486
+ </svg>
487
+ </button>
488
+ </div>
461
489
  <header
462
490
  class="pf-c-modal-box__header"
463
491
  >
@@ -511,29 +539,33 @@ exports[`Modal Test with custom header 1`] = `
511
539
  id="boxId"
512
540
  role="dialog"
513
541
  >
514
- <button
515
- aria-disabled="false"
516
- aria-label="Close"
517
- class="pf-c-button pf-m-plain"
518
- data-ouia-component-id="OUIA-Generated-Button-plain-7"
519
- data-ouia-component-type="PF4/Button"
520
- data-ouia-safe="true"
521
- type="button"
542
+ <div
543
+ class="pf-c-modal-box__close"
522
544
  >
523
- <svg
524
- aria-hidden="true"
525
- fill="currentColor"
526
- height="1em"
527
- role="img"
528
- style="vertical-align: -0.125em;"
529
- viewBox="0 0 352 512"
530
- width="1em"
545
+ <button
546
+ aria-disabled="false"
547
+ aria-label="Close"
548
+ class="pf-c-button pf-m-plain"
549
+ data-ouia-component-id="OUIA-Generated-Button-plain-7"
550
+ data-ouia-component-type="PF4/Button"
551
+ data-ouia-safe="true"
552
+ type="button"
531
553
  >
532
- <path
533
- 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"
534
- />
535
- </svg>
536
- </button>
554
+ <svg
555
+ aria-hidden="true"
556
+ fill="currentColor"
557
+ height="1em"
558
+ role="img"
559
+ style="vertical-align: -0.125em;"
560
+ viewBox="0 0 352 512"
561
+ width="1em"
562
+ >
563
+ <path
564
+ 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"
565
+ />
566
+ </svg>
567
+ </button>
568
+ </div>
537
569
  <header
538
570
  class="pf-c-modal-box__header"
539
571
  >