@patternfly/patternfly 6.0.0-alpha.218 → 6.0.0-alpha.219

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 (12) hide show
  1. package/components/ModalBox/modal-box.css +2 -0
  2. package/components/ModalBox/modal-box.scss +2 -0
  3. package/components/_index.css +2 -0
  4. package/docs/components/ModalBox/examples/ModalBox.md +109 -83
  5. package/docs/demos/Modal/examples/Modal.md +37 -25
  6. package/docs/demos/Table/examples/Table.md +12 -7
  7. package/docs/demos/Tabs/examples/Tabs.md +6 -4
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +2 -0
  10. package/patternfly.css +2 -0
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/components/ModalBox/modal-box.css CHANGED
@@ -25,6 +25,7 @@
25
25
  --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
26
26
  --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
27
27
  --pf-v6-c-modal-box__header-main--Gap: var(--pf-t--global--spacer--md);
28
+ --pf-v6-c-modal-box__header-main--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
28
29
  --pf-v6-c-modal-box__title--LineHeight: var(--pf-t--global--font--line-height--heading);
29
30
  --pf-v6-c-modal-box__title--FontFamily: var(--pf-t--global--font--family--heading);
30
31
  --pf-v6-c-modal-box__title--FontWeight: var(--pf-t--global--font--weight--heading--default);
@@ -136,6 +137,7 @@
136
137
  flex-grow: 1;
137
138
  gap: var(--pf-v6-c-modal-box__header-main--Gap);
138
139
  min-width: 0;
140
+ padding-block-start: var(--pf-v6-c-modal-box__header-main--PaddingBlockStart);
139
141
  }
140
142
 
141
143
  .pf-v6-c-modal-box__title,
package/components/ModalBox/modal-box.scss CHANGED
@@ -37,6 +37,7 @@
37
37
 
38
38
  // Header main
39
39
  --#{$modal-box}__header-main--Gap: var(--pf-t--global--spacer--md);
40
+ --#{$modal-box}__header-main--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
40
41
 
41
42
  // Title
42
43
  --#{$modal-box}__title--LineHeight: var(--pf-t--global--font--line-height--heading);
@@ -181,6 +182,7 @@
181
182
  flex-grow: 1;
182
183
  gap: var(--#{$modal-box}__header-main--Gap);
183
184
  min-width: 0;
185
+ padding-block-start: var(--#{$modal-box}__header-main--PaddingBlockStart);
184
186
  }
185
187
 
186
188
  .#{$modal-box}__title,
package/components/_index.css CHANGED
@@ -10385,6 +10385,7 @@ ul.pf-v6-c-list {
10385
10385
  --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
10386
10386
  --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
10387
10387
  --pf-v6-c-modal-box__header-main--Gap: var(--pf-t--global--spacer--md);
10388
+ --pf-v6-c-modal-box__header-main--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
10388
10389
  --pf-v6-c-modal-box__title--LineHeight: var(--pf-t--global--font--line-height--heading);
10389
10390
  --pf-v6-c-modal-box__title--FontFamily: var(--pf-t--global--font--family--heading);
10390
10391
  --pf-v6-c-modal-box__title--FontWeight: var(--pf-t--global--font--weight--heading--default);
@@ -10496,6 +10497,7 @@ ul.pf-v6-c-list {
10496
10497
  flex-grow: 1;
10497
10498
  gap: var(--pf-v6-c-modal-box__header-main--Gap);
10498
10499
  min-width: 0;
10500
+ padding-block-start: var(--pf-v6-c-modal-box__header-main--PaddingBlockStart);
10499
10501
  }
10500
10502
 
10501
10503
  .pf-v6-c-modal-box__title,
package/docs/components/ModalBox/examples/ModalBox.md CHANGED
@@ -24,7 +24,9 @@ cssPrefix: pf-v6-c-modal-box
24
24
  </button>
25
25
  </div>
26
26
  <header class="pf-v6-c-modal-box__header">
27
- <h1 class="pf-v6-c-modal-box__title" id="modal-title">Modal title</h1>
27
+ <div class="pf-v6-c-modal-box__header-main">
28
+ <h1 class="pf-v6-c-modal-box__title" id="modal-title">Modal title</h1>
29
+ </div>
28
30
  </header>
29
31
  <div
30
32
  class="pf-v6-c-modal-box__body"
@@ -97,7 +99,9 @@ cssPrefix: pf-v6-c-modal-box
97
99
  </button>
98
100
  </div>
99
101
  <header class="pf-v6-c-modal-box__header">
100
- <h1 class="pf-v6-c-modal-box__title" id="modal-sm-title">Modal title</h1>
102
+ <div class="pf-v6-c-modal-box__header-main">
103
+ <h1 class="pf-v6-c-modal-box__title" id="modal-sm-title">Modal title</h1>
104
+ </div>
101
105
  </header>
102
106
  <div class="pf-v6-c-modal-box__body" id="modal-sm-description">
103
107
  Static text describing modal purpose. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -128,7 +132,9 @@ cssPrefix: pf-v6-c-modal-box
128
132
  </button>
129
133
  </div>
130
134
  <header class="pf-v6-c-modal-box__header">
131
- <h1 class="pf-v6-c-modal-box__title" id="modal-md-title">Modal title</h1>
135
+ <div class="pf-v6-c-modal-box__header-main">
136
+ <h1 class="pf-v6-c-modal-box__title" id="modal-md-title">Modal title</h1>
137
+ </div>
132
138
  </header>
133
139
  <div class="pf-v6-c-modal-box__body" id="modal-md-description">
134
140
  Static text describing modal purpose. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -159,7 +165,9 @@ cssPrefix: pf-v6-c-modal-box
159
165
  </button>
160
166
  </div>
161
167
  <header class="pf-v6-c-modal-box__header">
162
- <h1 class="pf-v6-c-modal-box__title" id="modal-lg-title">Modal title</h1>
168
+ <div class="pf-v6-c-modal-box__header-main">
169
+ <h1 class="pf-v6-c-modal-box__title" id="modal-lg-title">Modal title</h1>
170
+ </div>
163
171
  </header>
164
172
  <div class="pf-v6-c-modal-box__body" id="modal-lg-description">
165
173
  Static text describing modal purpose. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -217,14 +225,16 @@ cssPrefix: pf-v6-c-modal-box
217
225
  </button>
218
226
  </div>
219
227
  <header class="pf-v6-c-modal-box__header">
220
- <h1
221
- class="pf-v6-c-modal-box__title"
222
- id="modal-with-description-title"
223
- >Modal title</h1>
224
- <div
225
- class="pf-v6-c-modal-box__description"
226
- id="modal-with-description-description"
227
- >A description is used when you want to provide more info about the modal than the title is able to describe. The content in the description is static and will not scroll with the rest of the modal body.</div>
228
+ <div class="pf-v6-c-modal-box__header-main">
229
+ <h1
230
+ class="pf-v6-c-modal-box__title"
231
+ id="modal-with-description-title"
232
+ >Modal title</h1>
233
+ <div
234
+ class="pf-v6-c-modal-box__description"
235
+ id="modal-with-description-description"
236
+ >A description is used when you want to provide more info about the modal than the title is able to describe. The content in the description is static and will not scroll with the rest of the modal body.</div>
237
+ </div>
228
238
  </header>
229
239
  <div
230
240
  class="pf-v6-c-modal-box__body"
@@ -252,7 +262,9 @@ cssPrefix: pf-v6-c-modal-box
252
262
  </button>
253
263
  </div>
254
264
  <header class="pf-v6-c-modal-box__header">
255
- <h1 class="pf-v6-c-title pf-m-4xl" id="modal-custom-title">Custom title</h1>
265
+ <div class="pf-v6-c-modal-box__header-main">
266
+ <h1 class="pf-v6-c-title pf-m-4xl" id="modal-custom-title">Custom title</h1>
267
+ </div>
256
268
  </header>
257
269
  <div
258
270
  class="pf-v6-c-modal-box__body"
@@ -297,12 +309,14 @@ cssPrefix: pf-v6-c-modal-box
297
309
  </button>
298
310
  </div>
299
311
  <header class="pf-v6-c-modal-box__header">
300
- <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="icon-title">
301
- <span class="pf-v6-c-modal-box__title-icon">
302
- <i class="fas fa-fw fa-bullhorn" aria-hidden="true"></i>
303
- </span>
304
- <span class="pf-v6-c-modal-box__title-text">Modal with icon title</span>
305
- </h1>
312
+ <div class="pf-v6-c-modal-box__header-main">
313
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="icon-title">
314
+ <span class="pf-v6-c-modal-box__title-icon">
315
+ <i class="fas fa-fw fa-bullhorn" aria-hidden="true"></i>
316
+ </span>
317
+ <span class="pf-v6-c-modal-box__title-text">Modal with icon title</span>
318
+ </h1>
319
+ </div>
306
320
  </header>
307
321
  <div class="pf-v6-c-modal-box__body" id="icon-description">Modal description</div>
308
322
  <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
@@ -328,16 +342,18 @@ cssPrefix: pf-v6-c-modal-box
328
342
  </button>
329
343
  </div>
330
344
  <header class="pf-v6-c-modal-box__header">
331
- <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="custom-alert-title">
332
- <span class="pf-v6-c-modal-box__title-icon">
333
- <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
334
- </span>
335
- <span class="pf-v6-u-screen-reader">
336
- Default
337
- alert:
338
- </span>
339
- <span class="pf-v6-c-modal-box__title-text">Custom alert modal title</span>
340
- </h1>
345
+ <div class="pf-v6-c-modal-box__header-main">
346
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="custom-alert-title">
347
+ <span class="pf-v6-c-modal-box__title-icon">
348
+ <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
349
+ </span>
350
+ <span class="pf-v6-u-screen-reader">
351
+ Default
352
+ alert:
353
+ </span>
354
+ <span class="pf-v6-c-modal-box__title-text">Custom alert modal title</span>
355
+ </h1>
356
+ </div>
341
357
  </header>
342
358
  <div
343
359
  class="pf-v6-c-modal-box__body"
@@ -366,16 +382,18 @@ cssPrefix: pf-v6-c-modal-box
366
382
  </button>
367
383
  </div>
368
384
  <header class="pf-v6-c-modal-box__header">
369
- <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="info-alert-title">
370
- <span class="pf-v6-c-modal-box__title-icon">
371
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
372
- </span>
373
- <span class="pf-v6-u-screen-reader">
374
- Info
375
- alert:
376
- </span>
377
- <span class="pf-v6-c-modal-box__title-text">Info alert modal title</span>
378
- </h1>
385
+ <div class="pf-v6-c-modal-box__header-main">
386
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="info-alert-title">
387
+ <span class="pf-v6-c-modal-box__title-icon">
388
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
389
+ </span>
390
+ <span class="pf-v6-u-screen-reader">
391
+ Info
392
+ alert:
393
+ </span>
394
+ <span class="pf-v6-c-modal-box__title-text">Info alert modal title</span>
395
+ </h1>
396
+ </div>
379
397
  </header>
380
398
  <div
381
399
  class="pf-v6-c-modal-box__body"
@@ -404,16 +422,18 @@ cssPrefix: pf-v6-c-modal-box
404
422
  </button>
405
423
  </div>
406
424
  <header class="pf-v6-c-modal-box__header">
407
- <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="success-alert-title">
408
- <span class="pf-v6-c-modal-box__title-icon">
409
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
410
- </span>
411
- <span class="pf-v6-u-screen-reader">
412
- Success
413
- alert:
414
- </span>
415
- <span class="pf-v6-c-modal-box__title-text">Success alert modal title</span>
416
- </h1>
425
+ <div class="pf-v6-c-modal-box__header-main">
426
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="success-alert-title">
427
+ <span class="pf-v6-c-modal-box__title-icon">
428
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
429
+ </span>
430
+ <span class="pf-v6-u-screen-reader">
431
+ Success
432
+ alert:
433
+ </span>
434
+ <span class="pf-v6-c-modal-box__title-text">Success alert modal title</span>
435
+ </h1>
436
+ </div>
417
437
  </header>
418
438
  <div
419
439
  class="pf-v6-c-modal-box__body"
@@ -442,16 +462,18 @@ cssPrefix: pf-v6-c-modal-box
442
462
  </button>
443
463
  </div>
444
464
  <header class="pf-v6-c-modal-box__header">
445
- <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="warning-alert-title">
446
- <span class="pf-v6-c-modal-box__title-icon">
447
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
448
- </span>
449
- <span class="pf-v6-u-screen-reader">
450
- Warning
451
- alert:
452
- </span>
453
- <span class="pf-v6-c-modal-box__title-text">Warning alert modal title</span>
454
- </h1>
465
+ <div class="pf-v6-c-modal-box__header-main">
466
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="warning-alert-title">
467
+ <span class="pf-v6-c-modal-box__title-icon">
468
+ <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
469
+ </span>
470
+ <span class="pf-v6-u-screen-reader">
471
+ Warning
472
+ alert:
473
+ </span>
474
+ <span class="pf-v6-c-modal-box__title-text">Warning alert modal title</span>
475
+ </h1>
476
+ </div>
455
477
  </header>
456
478
  <div
457
479
  class="pf-v6-c-modal-box__body"
@@ -480,16 +502,18 @@ cssPrefix: pf-v6-c-modal-box
480
502
  </button>
481
503
  </div>
482
504
  <header class="pf-v6-c-modal-box__header">
483
- <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="danger-alert-title">
484
- <span class="pf-v6-c-modal-box__title-icon">
485
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
486
- </span>
487
- <span class="pf-v6-u-screen-reader">
488
- Danger
489
- alert:
490
- </span>
491
- <span class="pf-v6-c-modal-box__title-text">Danger alert modal title</span>
492
- </h1>
505
+ <div class="pf-v6-c-modal-box__header-main">
506
+ <h1 class="pf-v6-c-modal-box__title pf-m-icon" id="danger-alert-title">
507
+ <span class="pf-v6-c-modal-box__title-icon">
508
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
509
+ </span>
510
+ <span class="pf-v6-u-screen-reader">
511
+ Danger
512
+ alert:
513
+ </span>
514
+ <span class="pf-v6-c-modal-box__title-text">Danger alert modal title</span>
515
+ </h1>
516
+ </div>
493
517
  </header>
494
518
  <div
495
519
  class="pf-v6-c-modal-box__body"
@@ -520,19 +544,21 @@ The status modifier classes can be applied directly to the modal title element,
520
544
  </button>
521
545
  </div>
522
546
  <header class="pf-v6-c-modal-box__header">
523
- <h1
524
- class="pf-v6-c-modal-box__title pf-m-icon pf-m-danger"
525
- id="danger-alert-title-title"
526
- >
527
- <span class="pf-v6-c-modal-box__title-icon">
528
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
529
- </span>
530
- <span class="pf-v6-u-screen-reader">
531
- Danger
532
- alert:
533
- </span>
534
- <span class="pf-v6-c-modal-box__title-text">Danger alert modal title</span>
535
- </h1>
547
+ <div class="pf-v6-c-modal-box__header-main">
548
+ <h1
549
+ class="pf-v6-c-modal-box__title pf-m-icon pf-m-danger"
550
+ id="danger-alert-title-title"
551
+ >
552
+ <span class="pf-v6-c-modal-box__title-icon">
553
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
554
+ </span>
555
+ <span class="pf-v6-u-screen-reader">
556
+ Danger
557
+ alert:
558
+ </span>
559
+ <span class="pf-v6-c-modal-box__title-text">Danger alert modal title</span>
560
+ </h1>
561
+ </div>
536
562
  </header>
537
563
  <div
538
564
  class="pf-v6-c-modal-box__body"
@@ -571,7 +597,7 @@ A modal box is a generic rectangular container that can be used to build modals.
571
597
  | `.pf-v6-c-modal-box__close` | `<div>` | Creates a container for the modal box close button. **Required** if there is a close button. |
572
598
  | `.pf-v6-c-button.pf-m-plain` | `<button>` | Initiates a modal box close button. |
573
599
  | `.pf-v6-c-modal-box__header` | `<header>` | Initiates a modal box header. **Required** if using a `.pf-v6-c-modal-box__title`. |
574
- | `.pf-v6-c-modal-box__header-main` | `<div>` | Initiates a modal box header main container. **Required** when `pf-v6-c-modal-box__header-help` is used. |
600
+ | `.pf-v6-c-modal-box__header-main` | `<div>` | Initiates a modal box header main container. **Required** when using a modal header. |
575
601
  | `.pf-v6-c-modal-box__header-help` | `<div>` | Initiates the help button container in the modal box header actions. |
576
602
  | `.pf-v6-c-modal-box__title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a modal box title. **Required** if using a modal description. |
577
603
  | `.pf-v6-c-modal-box__title-icon` | `<span>` | Initiates a container for the modal box title icon. |
package/docs/demos/Modal/examples/Modal.md CHANGED
@@ -325,10 +325,12 @@ section: components
325
325
  </button>
326
326
  </div>
327
327
  <header class="pf-v6-c-modal-box__header">
328
- <h1
329
- class="pf-v6-c-modal-box__title"
330
- id="modal-title-modal-basic-example-modal"
331
- >Overwrite existing file?</h1>
328
+ <div class="pf-v6-c-modal-box__header-main">
329
+ <h1
330
+ class="pf-v6-c-modal-box__title"
331
+ id="modal-title-modal-basic-example-modal"
332
+ >Overwrite existing file?</h1>
333
+ </div>
332
334
  </header>
333
335
  <div
334
336
  class="pf-v6-c-modal-box__body"
@@ -676,14 +678,16 @@ section: components
676
678
  </button>
677
679
  </div>
678
680
  <header class="pf-v6-c-modal-box__header">
679
- <h1
680
- class="pf-v6-c-modal-box__title"
681
- id="modal-scroll-title"
682
- >This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.</h1>
683
- <div
684
- class="pf-v6-c-modal-box__description"
685
- id="modal-scroll-description"
686
- >This is a modal description. The description will not scroll with the body contents.</div>
681
+ <div class="pf-v6-c-modal-box__header-main">
682
+ <h1
683
+ class="pf-v6-c-modal-box__title"
684
+ id="modal-scroll-title"
685
+ >This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.</h1>
686
+ <div
687
+ class="pf-v6-c-modal-box__description"
688
+ id="modal-scroll-description"
689
+ >This is a modal description. The description will not scroll with the body contents.</div>
690
+ </div>
687
691
  </header>
688
692
  <div class="pf-v6-c-modal-box__body" tabindex="0">
689
693
  <p>general_modal_final_finalfinal_v9_actualfinal.sketch</p>
@@ -1033,10 +1037,12 @@ section: components
1033
1037
  </button>
1034
1038
  </div>
1035
1039
  <header class="pf-v6-c-modal-box__header">
1036
- <h1
1037
- class="pf-v6-c-modal-box__title"
1038
- id="modal-md-title"
1039
- >This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.</h1>
1040
+ <div class="pf-v6-c-modal-box__header-main">
1041
+ <h1
1042
+ class="pf-v6-c-modal-box__title"
1043
+ id="modal-md-title"
1044
+ >This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.</h1>
1045
+ </div>
1040
1046
  </header>
1041
1047
  <div class="pf-v6-c-modal-box__body">
1042
1048
  <p
@@ -1380,10 +1386,12 @@ section: components
1380
1386
  </button>
1381
1387
  </div>
1382
1388
  <header class="pf-v6-c-modal-box__header">
1383
- <h1
1384
- class="pf-v6-c-modal-box__title"
1385
- id="modal-lg-title"
1386
- >This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.</h1>
1389
+ <div class="pf-v6-c-modal-box__header-main">
1390
+ <h1
1391
+ class="pf-v6-c-modal-box__title"
1392
+ id="modal-lg-title"
1393
+ >This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.</h1>
1394
+ </div>
1387
1395
  </header>
1388
1396
  <div class="pf-v6-c-modal-box__body">
1389
1397
  <p
@@ -1727,10 +1735,12 @@ section: components
1727
1735
  </button>
1728
1736
  </div>
1729
1737
  <header class="pf-v6-c-modal-box__header">
1730
- <h1
1731
- class="pf-v6-c-modal-box__title"
1732
- id="modal-top-aligned-title"
1733
- >Modal header</h1>
1738
+ <div class="pf-v6-c-modal-box__header-main">
1739
+ <h1
1740
+ class="pf-v6-c-modal-box__title"
1741
+ id="modal-top-aligned-title"
1742
+ >Modal header</h1>
1743
+ </div>
1734
1744
  </header>
1735
1745
  <div class="pf-v6-c-modal-box__body">
1736
1746
  <p
@@ -2074,7 +2084,9 @@ section: components
2074
2084
  </button>
2075
2085
  </div>
2076
2086
  <header class="pf-v6-c-modal-box__header">
2077
- <h1 class="pf-v6-c-modal-box__title" id="modal-title-">Create account</h1>
2087
+ <div class="pf-v6-c-modal-box__header-main">
2088
+ <h1 class="pf-v6-c-modal-box__title" id="modal-title-">Create account</h1>
2089
+ </div>
2078
2090
  </header>
2079
2091
  <div class="pf-v6-c-modal-box__body" id="modal-description-">
2080
2092
  <p>Enter your personal information below to create an account.</p>
package/docs/demos/Table/examples/Table.md CHANGED
@@ -9670,13 +9670,18 @@ wrapperTag: div
9670
9670
  </button>
9671
9671
  </div>
9672
9672
  <header class="pf-v6-c-modal-box__header">
9673
- <h1 class="pf-v6-c-modal-box__title" id="modal-title">Manage columns</h1>
9674
- <div class="pf-v6-c-modal-box__description">
9675
- <div class="pf-v6-c-content">
9676
- <p>Selected categories will be displayed in the table.</p>
9677
- <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
9678
- <span class="pf-v6-c-button__text">Select all</span>
9679
- </button>
9673
+ <div class="pf-v6-c-modal-box__header-main">
9674
+ <h1 class="pf-v6-c-modal-box__title" id="modal-title">Manage columns</h1>
9675
+ <div class="pf-v6-c-modal-box__description">
9676
+ <div class="pf-v6-c-content">
9677
+ <p>Selected categories will be displayed in the table.</p>
9678
+ <button
9679
+ class="pf-v6-c-button pf-m-inline pf-m-link"
9680
+ type="button"
9681
+ >
9682
+ <span class="pf-v6-c-button__text">Select all</span>
9683
+ </button>
9684
+ </div>
9680
9685
  </div>
9681
9686
  </div>
9682
9687
  </header>
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -2805,10 +2805,12 @@ section: components
2805
2805
  </button>
2806
2806
  </div>
2807
2807
  <header class="pf-v6-c-modal-box__header">
2808
- <h1
2809
- class="pf-v6-c-modal-box__title"
2810
- id="modal-tabs-example-modal-title"
2811
- >PatternFly</h1>
2808
+ <div class="pf-v6-c-modal-box__header-main">
2809
+ <h1
2810
+ class="pf-v6-c-modal-box__title"
2811
+ id="modal-tabs-example-modal-title"
2812
+ >PatternFly</h1>
2813
+ </div>
2812
2814
  </header>
2813
2815
  <div
2814
2816
  class="pf-v6-c-modal-box__body"
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": "6.0.0-alpha.218",
4
+ "version": "6.0.0-alpha.219",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -16448,6 +16448,7 @@ ul.pf-v6-c-list {
16448
16448
  --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
16449
16449
  --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
16450
16450
  --pf-v6-c-modal-box__header-main--Gap: var(--pf-t--global--spacer--md);
16451
+ --pf-v6-c-modal-box__header-main--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
16451
16452
  --pf-v6-c-modal-box__title--LineHeight: var(--pf-t--global--font--line-height--heading);
16452
16453
  --pf-v6-c-modal-box__title--FontFamily: var(--pf-t--global--font--family--heading);
16453
16454
  --pf-v6-c-modal-box__title--FontWeight: var(--pf-t--global--font--weight--heading--default);
@@ -16559,6 +16560,7 @@ ul.pf-v6-c-list {
16559
16560
  flex-grow: 1;
16560
16561
  gap: var(--pf-v6-c-modal-box__header-main--Gap);
16561
16562
  min-width: 0;
16563
+ padding-block-start: var(--pf-v6-c-modal-box__header-main--PaddingBlockStart);
16562
16564
  }
16563
16565
 
16564
16566
  .pf-v6-c-modal-box__title,
package/patternfly.css CHANGED
@@ -16569,6 +16569,7 @@ ul.pf-v6-c-list {
16569
16569
  --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
16570
16570
  --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
16571
16571
  --pf-v6-c-modal-box__header-main--Gap: var(--pf-t--global--spacer--md);
16572
+ --pf-v6-c-modal-box__header-main--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
16572
16573
  --pf-v6-c-modal-box__title--LineHeight: var(--pf-t--global--font--line-height--heading);
16573
16574
  --pf-v6-c-modal-box__title--FontFamily: var(--pf-t--global--font--family--heading);
16574
16575
  --pf-v6-c-modal-box__title--FontWeight: var(--pf-t--global--font--weight--heading--default);
@@ -16680,6 +16681,7 @@ ul.pf-v6-c-list {
16680
16681
  flex-grow: 1;
16681
16682
  gap: var(--pf-v6-c-modal-box__header-main--Gap);
16682
16683
  min-width: 0;
16684
+ padding-block-start: var(--pf-v6-c-modal-box__header-main--PaddingBlockStart);
16683
16685
  }
16684
16686
 
16685
16687
  .pf-v6-c-modal-box__title,