@patternfly/patternfly 5.0.0-alpha.19 → 5.0.0-alpha.20

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 (11) hide show
  1. package/components/ModalBox/modal-box.css +9 -8
  2. package/components/ModalBox/modal-box.scss +11 -11
  3. package/docs/components/ModalBox/examples/ModalBox.md +71 -50
  4. package/docs/demos/Modal/examples/Modal.md +30 -42
  5. package/docs/demos/Table/examples/Table.md +5 -3
  6. package/docs/demos/Tabs/examples/Tabs.md +5 -7
  7. package/package.json +1 -1
  8. package/patternfly-no-reset.css +9 -8
  9. package/patternfly.css +9 -8
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/components/ModalBox/modal-box.css CHANGED
@@ -34,9 +34,9 @@
34
34
  --pf-c-modal-box__body--PaddingLeft: var(--pf-global--spacer--lg);
35
35
  --pf-c-modal-box__body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
36
36
  --pf-c-modal-box__header--body--PaddingTop: var(--pf-global--spacer--md);
37
- --pf-c-modal-box--c-button--Top: calc(var(--pf-global--spacer--lg));
38
- --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
39
- --pf-c-modal-box--c-button--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
37
+ --pf-c-modal-box__close--Top: calc(var(--pf-global--spacer--lg));
38
+ --pf-c-modal-box__close--Right: var(--pf-global--spacer--md);
39
+ --pf-c-modal-box__close--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
40
40
  --pf-c-modal-box__footer--PaddingTop: var(--pf-global--spacer--lg);
41
41
  --pf-c-modal-box__footer--PaddingRight: var(--pf-global--spacer--lg);
42
42
  --pf-c-modal-box__footer--PaddingBottom: var(--pf-global--spacer--lg);
@@ -88,13 +88,14 @@
88
88
  .pf-c-modal-box.pf-m-info {
89
89
  --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
90
90
  }
91
- .pf-c-modal-box > .pf-c-button {
91
+
92
+ .pf-c-modal-box__close {
92
93
  position: absolute;
93
- top: var(--pf-c-modal-box--c-button--Top);
94
- right: var(--pf-c-modal-box--c-button--Right);
94
+ top: var(--pf-c-modal-box__close--Top);
95
+ right: var(--pf-c-modal-box__close--Right);
95
96
  }
96
- .pf-c-modal-box > .pf-c-button + * {
97
- margin-right: var(--pf-c-modal-box--c-button--sibling--MarginRight);
97
+ .pf-c-modal-box__close + * {
98
+ margin-right: var(--pf-c-modal-box__close--sibling--MarginRight);
98
99
  }
99
100
 
100
101
  .pf-c-modal-box__header {
package/components/ModalBox/modal-box.scss CHANGED
@@ -52,9 +52,9 @@
52
52
  --pf-c-modal-box__header--body--PaddingTop: var(--pf-global--spacer--md);
53
53
 
54
54
  // Close
55
- --pf-c-modal-box--c-button--Top: calc(var(--pf-global--spacer--lg));
56
- --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
57
- --pf-c-modal-box--c-button--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
55
+ --pf-c-modal-box__close--Top: calc(var(--pf-global--spacer--lg));
56
+ --pf-c-modal-box__close--Right: var(--pf-global--spacer--md);
57
+ --pf-c-modal-box__close--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
58
58
 
59
59
  // Footer
60
60
  --pf-c-modal-box__footer--PaddingTop: var(--pf-global--spacer--lg);
@@ -114,16 +114,16 @@
114
114
  &.pf-m-info {
115
115
  --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
116
116
  }
117
+ }
117
118
 
118
- // Close button
119
- > .pf-c-button {
120
- position: absolute;
121
- top: var(--pf-c-modal-box--c-button--Top);
122
- right: var(--pf-c-modal-box--c-button--Right);
119
+ // Close button
120
+ .pf-c-modal-box__close {
121
+ position: absolute;
122
+ top: var(--pf-c-modal-box__close--Top);
123
+ right: var(--pf-c-modal-box__close--Right);
123
124
 
124
- + * {
125
- margin-right: var(--pf-c-modal-box--c-button--sibling--MarginRight); // Create room for the close button
126
- }
125
+ + * {
126
+ margin-right: var(--pf-c-modal-box__close--sibling--MarginRight); // Create room for the close button
127
127
  }
128
128
  }
129
129
 
package/docs/components/ModalBox/examples/ModalBox.md CHANGED
@@ -16,9 +16,11 @@ cssPrefix: pf-c-modal-box
16
16
  aria-labelledby="modal-title"
17
17
  aria-describedby="modal-description"
18
18
  >
19
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
20
- <i class="fas fa-times" aria-hidden="true"></i>
21
- </button>
19
+ <div class="pf-c-modal-box__close">
20
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
21
+ <i class="fas fa-times" aria-hidden="true"></i>
22
+ </button>
23
+ </div>
22
24
  <header class="pf-c-modal-box__header">
23
25
  <h1 class="pf-c-modal-box__title" id="modal-title">Modal title</h1>
24
26
  </header>
@@ -41,9 +43,11 @@ cssPrefix: pf-c-modal-box
41
43
  aria-labelledby="modal-help-title"
42
44
  aria-describedby="modal-help-description"
43
45
  >
44
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
45
- <i class="fas fa-times" aria-hidden="true"></i>
46
- </button>
46
+ <div class="pf-c-modal-box__close">
47
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
48
+ <i class="fas fa-times" aria-hidden="true"></i>
49
+ </button>
50
+ </div>
47
51
  <header class="pf-c-modal-box__header pf-m-help">
48
52
  <div class="pf-c-modal-box__header-main">
49
53
  <h1
@@ -79,13 +83,11 @@ cssPrefix: pf-c-modal-box
79
83
  aria-labelledby="modal-sm-title"
80
84
  aria-describedby="modal-sm-description"
81
85
  >
82
- <button
83
- class="pf-c-button pf-m-plain"
84
- type="button"
85
- aria-label="Close dialog"
86
- >
87
- <i class="fas fa-times" aria-hidden="true"></i>
88
- </button>
86
+ <div class="pf-c-modal-box__close">
87
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
88
+ <i class="fas fa-times" aria-hidden="true"></i>
89
+ </button>
90
+ </div>
89
91
  <header class="pf-c-modal-box__header">
90
92
  <h1 class="pf-c-modal-box__title" id="modal-sm-title">Modal title</h1>
91
93
  </header>
@@ -110,13 +112,11 @@ cssPrefix: pf-c-modal-box
110
112
  aria-labelledby="modal-md-title"
111
113
  aria-describedby="modal-md-description"
112
114
  >
113
- <button
114
- class="pf-c-button pf-m-plain"
115
- type="button"
116
- aria-label="Close dialog"
117
- >
118
- <i class="fas fa-times" aria-hidden="true"></i>
119
- </button>
115
+ <div class="pf-c-modal-box__close">
116
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
117
+ <i class="fas fa-times" aria-hidden="true"></i>
118
+ </button>
119
+ </div>
120
120
  <header class="pf-c-modal-box__header">
121
121
  <h1 class="pf-c-modal-box__title" id="modal-md-title">Modal title</h1>
122
122
  </header>
@@ -141,9 +141,11 @@ cssPrefix: pf-c-modal-box
141
141
  aria-labelledby="modal-lg-title"
142
142
  aria-describedby="modal-lg-description"
143
143
  >
144
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
145
- <i class="fas fa-times" aria-hidden="true"></i>
146
- </button>
144
+ <div class="pf-c-modal-box__close">
145
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
146
+ <i class="fas fa-times" aria-hidden="true"></i>
147
+ </button>
148
+ </div>
147
149
  <header class="pf-c-modal-box__header">
148
150
  <h1 class="pf-c-modal-box__title" id="modal-lg-title">Modal title</h1>
149
151
  </header>
@@ -168,9 +170,11 @@ cssPrefix: pf-c-modal-box
168
170
  aria-label="Example of a modal without a title"
169
171
  aria-describedby="modal-no-title-description"
170
172
  >
171
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
172
- <i class="fas fa-times" aria-hidden="true"></i>
173
- </button>
173
+ <div class="pf-c-modal-box__close">
174
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
175
+ <i class="fas fa-times" aria-hidden="true"></i>
176
+ </button>
177
+ </div>
174
178
  <div class="pf-c-modal-box__body">
175
179
  <span
176
180
  id="modal-no-title-description"
@@ -191,9 +195,11 @@ cssPrefix: pf-c-modal-box
191
195
  aria-labelledby="modal-with-description-title"
192
196
  aria-describedby="modal-with-description-description"
193
197
  >
194
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
195
- <i class="fas fa-times" aria-hidden="true"></i>
196
- </button>
198
+ <div class="pf-c-modal-box__close">
199
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
200
+ <i class="fas fa-times" aria-hidden="true"></i>
201
+ </button>
202
+ </div>
197
203
  <header class="pf-c-modal-box__header">
198
204
  <h1
199
205
  class="pf-c-modal-box__title"
@@ -222,9 +228,11 @@ cssPrefix: pf-c-modal-box
222
228
  aria-labelledby="modal-custom-title"
223
229
  aria-describedby="modal-custom-description"
224
230
  >
225
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
226
- <i class="fas fa-times" aria-hidden="true"></i>
227
- </button>
231
+ <div class="pf-c-modal-box__close">
232
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
233
+ <i class="fas fa-times" aria-hidden="true"></i>
234
+ </button>
235
+ </div>
228
236
  <header class="pf-c-modal-box__header">
229
237
  <h1 class="pf-c-title pf-m-4xl" id="modal-custom-title">Custom title</h1>
230
238
  </header>
@@ -263,9 +271,11 @@ cssPrefix: pf-c-modal-box
263
271
  aria-labelledby="icon-title"
264
272
  aria-describedby="icon-description"
265
273
  >
266
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
267
- <i class="fas fa-times" aria-hidden="true"></i>
268
- </button>
274
+ <div class="pf-c-modal-box__close">
275
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
276
+ <i class="fas fa-times" aria-hidden="true"></i>
277
+ </button>
278
+ </div>
269
279
  <header class="pf-c-modal-box__header">
270
280
  <h1 class="pf-c-modal-box__title pf-m-icon" id="icon-title">
271
281
  <span class="pf-c-modal-box__title-icon">
@@ -290,9 +300,11 @@ cssPrefix: pf-c-modal-box
290
300
  aria-labelledby="default-alert-title"
291
301
  aria-describedby="default-alert-description"
292
302
  >
293
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
294
- <i class="fas fa-times" aria-hidden="true"></i>
295
- </button>
303
+ <div class="pf-c-modal-box__close">
304
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
305
+ <i class="fas fa-times" aria-hidden="true"></i>
306
+ </button>
307
+ </div>
296
308
  <header class="pf-c-modal-box__header">
297
309
  <h1 class="pf-c-modal-box__title pf-m-icon" id="default-alert-title">
298
310
  <span class="pf-c-modal-box__title-icon">
@@ -324,9 +336,11 @@ cssPrefix: pf-c-modal-box
324
336
  aria-labelledby="info-alert-title"
325
337
  aria-describedby="info-alert-description"
326
338
  >
327
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
328
- <i class="fas fa-times" aria-hidden="true"></i>
329
- </button>
339
+ <div class="pf-c-modal-box__close">
340
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
341
+ <i class="fas fa-times" aria-hidden="true"></i>
342
+ </button>
343
+ </div>
330
344
  <header class="pf-c-modal-box__header">
331
345
  <h1 class="pf-c-modal-box__title pf-m-icon" id="info-alert-title">
332
346
  <span class="pf-c-modal-box__title-icon">
@@ -358,9 +372,11 @@ cssPrefix: pf-c-modal-box
358
372
  aria-labelledby="success-alert-title"
359
373
  aria-describedby="success-alert-description"
360
374
  >
361
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
362
- <i class="fas fa-times" aria-hidden="true"></i>
363
- </button>
375
+ <div class="pf-c-modal-box__close">
376
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
377
+ <i class="fas fa-times" aria-hidden="true"></i>
378
+ </button>
379
+ </div>
364
380
  <header class="pf-c-modal-box__header">
365
381
  <h1 class="pf-c-modal-box__title pf-m-icon" id="success-alert-title">
366
382
  <span class="pf-c-modal-box__title-icon">
@@ -392,9 +408,11 @@ cssPrefix: pf-c-modal-box
392
408
  aria-labelledby="warning-alert-title"
393
409
  aria-describedby="warning-alert-description"
394
410
  >
395
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
396
- <i class="fas fa-times" aria-hidden="true"></i>
397
- </button>
411
+ <div class="pf-c-modal-box__close">
412
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
413
+ <i class="fas fa-times" aria-hidden="true"></i>
414
+ </button>
415
+ </div>
398
416
  <header class="pf-c-modal-box__header">
399
417
  <h1 class="pf-c-modal-box__title pf-m-icon" id="warning-alert-title">
400
418
  <span class="pf-c-modal-box__title-icon">
@@ -426,9 +444,11 @@ cssPrefix: pf-c-modal-box
426
444
  aria-labelledby="danger-alert-title"
427
445
  aria-describedby="danger-alert-description"
428
446
  >
429
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
430
- <i class="fas fa-times" aria-hidden="true"></i>
431
- </button>
447
+ <div class="pf-c-modal-box__close">
448
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
449
+ <i class="fas fa-times" aria-hidden="true"></i>
450
+ </button>
451
+ </div>
432
452
  <header class="pf-c-modal-box__header">
433
453
  <h1 class="pf-c-modal-box__title pf-m-icon" id="danger-alert-title">
434
454
  <span class="pf-c-modal-box__title-icon">
@@ -475,6 +495,7 @@ A modal box is a generic rectangular container that can be used to build modals.
475
495
  | Class | Applied | Outcome |
476
496
  | -- | -- | -- |
477
497
  | `.pf-c-modal-box` | `<div>` | Initiates a modal box. **Required** |
498
+ | `.pf-c-modal-box__close` | `<div>` | Creates a container for the modal box close button. **Required** if there is a close button. |
478
499
  | `.pf-c-button.pf-m-plain` | `<button>` | Initiates a modal box close button. |
479
500
  | `.pf-c-modal-box__header` | `<header>` | Initiates a modal box header. **Required** if using a `.pf-c-modal-box__title`. |
480
501
  | `.pf-c-modal-box__header-main` | `<div>` | Initiates a modal box header main container. **Required** when `pf-c-modal-box__header-help` is used. |
package/docs/demos/Modal/examples/Modal.md CHANGED
@@ -922,13 +922,11 @@ section: components
922
922
  aria-labelledby="modal-title-modal-basic-example-modal"
923
923
  aria-describedby="modal-description-modal-basic-example-modal"
924
924
  >
925
- <button
926
- class="pf-c-button pf-m-plain"
927
- type="button"
928
- aria-label="Close dialog"
929
- >
930
- <i class="fas fa-times" aria-hidden="true"></i>
931
- </button>
925
+ <div class="pf-c-modal-box__close">
926
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
927
+ <i class="fas fa-times" aria-hidden="true"></i>
928
+ </button>
929
+ </div>
932
930
  <header class="pf-c-modal-box__header">
933
931
  <h1
934
932
  class="pf-c-modal-box__title"
@@ -1871,13 +1869,11 @@ section: components
1871
1869
  aria-labelledby="modal-scroll-title"
1872
1870
  aria-describedby="modal-scroll-description"
1873
1871
  >
1874
- <button
1875
- class="pf-c-button pf-m-plain"
1876
- type="button"
1877
- aria-label="Close dialog"
1878
- >
1879
- <i class="fas fa-times" aria-hidden="true"></i>
1880
- </button>
1872
+ <div class="pf-c-modal-box__close">
1873
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
1874
+ <i class="fas fa-times" aria-hidden="true"></i>
1875
+ </button>
1876
+ </div>
1881
1877
  <header class="pf-c-modal-box__header">
1882
1878
  <h1
1883
1879
  class="pf-c-modal-box__title"
@@ -2829,13 +2825,11 @@ section: components
2829
2825
  aria-labelledby="modal-md-title"
2830
2826
  aria-describedby="modal-md-description"
2831
2827
  >
2832
- <button
2833
- class="pf-c-button pf-m-plain"
2834
- type="button"
2835
- aria-label="Close dialog"
2836
- >
2837
- <i class="fas fa-times" aria-hidden="true"></i>
2838
- </button>
2828
+ <div class="pf-c-modal-box__close">
2829
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
2830
+ <i class="fas fa-times" aria-hidden="true"></i>
2831
+ </button>
2832
+ </div>
2839
2833
  <header class="pf-c-modal-box__header">
2840
2834
  <h1
2841
2835
  class="pf-c-modal-box__title"
@@ -3777,13 +3771,11 @@ section: components
3777
3771
  aria-labelledby="modal-lg-title"
3778
3772
  aria-describedby="modal-lg-description"
3779
3773
  >
3780
- <button
3781
- class="pf-c-button pf-m-plain"
3782
- type="button"
3783
- aria-label="Close dialog"
3784
- >
3785
- <i class="fas fa-times" aria-hidden="true"></i>
3786
- </button>
3774
+ <div class="pf-c-modal-box__close">
3775
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
3776
+ <i class="fas fa-times" aria-hidden="true"></i>
3777
+ </button>
3778
+ </div>
3787
3779
  <header class="pf-c-modal-box__header">
3788
3780
  <h1
3789
3781
  class="pf-c-modal-box__title"
@@ -4725,13 +4717,11 @@ section: components
4725
4717
  aria-labelledby="modal-top-aligned-title"
4726
4718
  aria-describedby="modal-top-aligned-description"
4727
4719
  >
4728
- <button
4729
- class="pf-c-button pf-m-plain"
4730
- type="button"
4731
- aria-label="Close dialog"
4732
- >
4733
- <i class="fas fa-times" aria-hidden="true"></i>
4734
- </button>
4720
+ <div class="pf-c-modal-box__close">
4721
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
4722
+ <i class="fas fa-times" aria-hidden="true"></i>
4723
+ </button>
4724
+ </div>
4735
4725
  <header class="pf-c-modal-box__header">
4736
4726
  <h1
4737
4727
  class="pf-c-modal-box__title"
@@ -5673,13 +5663,11 @@ section: components
5673
5663
  aria-labelledby="modal-title-"
5674
5664
  aria-describedby="modal-description-"
5675
5665
  >
5676
- <button
5677
- class="pf-c-button pf-m-plain"
5678
- type="button"
5679
- aria-label="Close dialog"
5680
- >
5681
- <i class="fas fa-times" aria-hidden="true"></i>
5682
- </button>
5666
+ <div class="pf-c-modal-box__close">
5667
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
5668
+ <i class="fas fa-times" aria-hidden="true"></i>
5669
+ </button>
5670
+ </div>
5683
5671
  <header class="pf-c-modal-box__header">
5684
5672
  <h1 class="pf-c-modal-box__title" id="modal-title-">Create account</h1>
5685
5673
  </header>
package/docs/demos/Table/examples/Table.md CHANGED
@@ -17983,9 +17983,11 @@ wrapperTag: div
17983
17983
  aria-labelledby="modal-title"
17984
17984
  aria-describedby="modal-description"
17985
17985
  >
17986
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
17987
- <i class="fas fa-times" aria-hidden="true"></i>
17988
- </button>
17986
+ <div class="pf-c-modal-box__close">
17987
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
17988
+ <i class="fas fa-times" aria-hidden="true"></i>
17989
+ </button>
17990
+ </div>
17989
17991
  <header class="pf-c-modal-box__header">
17990
17992
  <h1 class="pf-c-modal-box__title" id="modal-title">Manage columns</h1>
17991
17993
  <div class="pf-c-modal-box__description">
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -5069,13 +5069,11 @@ section: components
5069
5069
  aria-labelledby="modal-tabs-example-modal-title"
5070
5070
  aria-describedby="modal-tabs-example-modal-description"
5071
5071
  >
5072
- <button
5073
- class="pf-c-button pf-m-plain"
5074
- type="button"
5075
- aria-label="Close dialog"
5076
- >
5077
- <i class="fas fa-times" aria-hidden="true"></i>
5078
- </button>
5072
+ <div class="pf-c-modal-box__close">
5073
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
5074
+ <i class="fas fa-times" aria-hidden="true"></i>
5075
+ </button>
5076
+ </div>
5079
5077
  <header class="pf-c-modal-box__header">
5080
5078
  <h1
5081
5079
  class="pf-c-modal-box__title"
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "5.0.0-alpha.19",
4
+ "version": "5.0.0-alpha.20",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -19320,9 +19320,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19320
19320
  --pf-c-modal-box__body--PaddingLeft: var(--pf-global--spacer--lg);
19321
19321
  --pf-c-modal-box__body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
19322
19322
  --pf-c-modal-box__header--body--PaddingTop: var(--pf-global--spacer--md);
19323
- --pf-c-modal-box--c-button--Top: calc(var(--pf-global--spacer--lg));
19324
- --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
19325
- --pf-c-modal-box--c-button--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
19323
+ --pf-c-modal-box__close--Top: calc(var(--pf-global--spacer--lg));
19324
+ --pf-c-modal-box__close--Right: var(--pf-global--spacer--md);
19325
+ --pf-c-modal-box__close--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
19326
19326
  --pf-c-modal-box__footer--PaddingTop: var(--pf-global--spacer--lg);
19327
19327
  --pf-c-modal-box__footer--PaddingRight: var(--pf-global--spacer--lg);
19328
19328
  --pf-c-modal-box__footer--PaddingBottom: var(--pf-global--spacer--lg);
@@ -19374,13 +19374,14 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19374
19374
  .pf-c-modal-box.pf-m-info {
19375
19375
  --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
19376
19376
  }
19377
- .pf-c-modal-box > .pf-c-button {
19377
+
19378
+ .pf-c-modal-box__close {
19378
19379
  position: absolute;
19379
- top: var(--pf-c-modal-box--c-button--Top);
19380
- right: var(--pf-c-modal-box--c-button--Right);
19380
+ top: var(--pf-c-modal-box__close--Top);
19381
+ right: var(--pf-c-modal-box__close--Right);
19381
19382
  }
19382
- .pf-c-modal-box > .pf-c-button + * {
19383
- margin-right: var(--pf-c-modal-box--c-button--sibling--MarginRight);
19383
+ .pf-c-modal-box__close + * {
19384
+ margin-right: var(--pf-c-modal-box__close--sibling--MarginRight);
19384
19385
  }
19385
19386
 
19386
19387
  .pf-c-modal-box__header {
package/patternfly.css CHANGED
@@ -19443,9 +19443,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19443
19443
  --pf-c-modal-box__body--PaddingLeft: var(--pf-global--spacer--lg);
19444
19444
  --pf-c-modal-box__body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
19445
19445
  --pf-c-modal-box__header--body--PaddingTop: var(--pf-global--spacer--md);
19446
- --pf-c-modal-box--c-button--Top: calc(var(--pf-global--spacer--lg));
19447
- --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
19448
- --pf-c-modal-box--c-button--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
19446
+ --pf-c-modal-box__close--Top: calc(var(--pf-global--spacer--lg));
19447
+ --pf-c-modal-box__close--Right: var(--pf-global--spacer--md);
19448
+ --pf-c-modal-box__close--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
19449
19449
  --pf-c-modal-box__footer--PaddingTop: var(--pf-global--spacer--lg);
19450
19450
  --pf-c-modal-box__footer--PaddingRight: var(--pf-global--spacer--lg);
19451
19451
  --pf-c-modal-box__footer--PaddingBottom: var(--pf-global--spacer--lg);
@@ -19497,13 +19497,14 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19497
19497
  .pf-c-modal-box.pf-m-info {
19498
19498
  --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
19499
19499
  }
19500
- .pf-c-modal-box > .pf-c-button {
19500
+
19501
+ .pf-c-modal-box__close {
19501
19502
  position: absolute;
19502
- top: var(--pf-c-modal-box--c-button--Top);
19503
- right: var(--pf-c-modal-box--c-button--Right);
19503
+ top: var(--pf-c-modal-box__close--Top);
19504
+ right: var(--pf-c-modal-box__close--Right);
19504
19505
  }
19505
- .pf-c-modal-box > .pf-c-button + * {
19506
- margin-right: var(--pf-c-modal-box--c-button--sibling--MarginRight);
19506
+ .pf-c-modal-box__close + * {
19507
+ margin-right: var(--pf-c-modal-box__close--sibling--MarginRight);
19507
19508
  }
19508
19509
 
19509
19510
  .pf-c-modal-box__header {