@patternfly/patternfly 5.0.0-alpha.22 → 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 (15) hide show
  1. package/base/_icons.scss +1 -28
  2. package/base/_svg-icons.scss +6 -0
  3. package/base/patternfly-icons.css +1 -19
  4. package/components/Popover/popover.css +21 -24
  5. package/components/Popover/popover.scss +25 -32
  6. package/docs/components/LogViewer/examples/LogViewer.md +10 -4
  7. package/docs/components/Popover/examples/Popover.md +175 -104
  8. package/docs/demos/Card/examples/Card.md +17 -11
  9. package/package.json +1 -1
  10. package/patternfly-base-no-reset.css +1 -19
  11. package/patternfly-base.css +1 -19
  12. package/patternfly-no-reset.css +22 -43
  13. package/patternfly.css +22 -43
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/docs/components/Popover/examples/Popover.md CHANGED
@@ -18,10 +18,16 @@ cssPrefix: pf-c-popover
18
18
  >
19
19
  <div class="pf-c-popover__arrow"></div>
20
20
  <div class="pf-c-popover__content">
21
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
22
- <i class="fas fa-times" aria-hidden="true"></i>
23
- </button>
24
- <h1 class="pf-c-title pf-m-md" id="popover-top-header">Popover header</h1>
21
+ <div class="pf-c-popover__close">
22
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
23
+ <i class="fas fa-times" aria-hidden="true"></i>
24
+ </button>
25
+ </div>
26
+ <header class="pf-c-popover__header">
27
+ <div class="pf-c-popover__title" id="popover-top-header">
28
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
29
+ </div>
30
+ </header>
25
31
  <div
26
32
  class="pf-c-popover__body"
27
33
  id="popover-top-body"
@@ -44,10 +50,16 @@ cssPrefix: pf-c-popover
44
50
  >
45
51
  <div class="pf-c-popover__arrow"></div>
46
52
  <div class="pf-c-popover__content">
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
- <h1 class="pf-c-title pf-m-md" id="popover-right-header">Popover header</h1>
53
+ <div class="pf-c-popover__close">
54
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
55
+ <i class="fas fa-times" aria-hidden="true"></i>
56
+ </button>
57
+ </div>
58
+ <header class="pf-c-popover__header">
59
+ <div class="pf-c-popover__title" id="popover-right-header">
60
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
61
+ </div>
62
+ </header>
51
63
  <div
52
64
  class="pf-c-popover__body"
53
65
  id="popover-right-body"
@@ -70,10 +82,16 @@ cssPrefix: pf-c-popover
70
82
  >
71
83
  <div class="pf-c-popover__arrow"></div>
72
84
  <div class="pf-c-popover__content">
73
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
74
- <i class="fas fa-times" aria-hidden="true"></i>
75
- </button>
76
- <h1 class="pf-c-title pf-m-md" id="popover-bottom-header">Popover header</h1>
85
+ <div class="pf-c-popover__close">
86
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
87
+ <i class="fas fa-times" aria-hidden="true"></i>
88
+ </button>
89
+ </div>
90
+ <header class="pf-c-popover__header">
91
+ <div class="pf-c-popover__title" id="popover-bottom-header">
92
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
93
+ </div>
94
+ </header>
77
95
  <div
78
96
  class="pf-c-popover__body"
79
97
  id="popover-bottom-body"
@@ -96,10 +114,16 @@ cssPrefix: pf-c-popover
96
114
  >
97
115
  <div class="pf-c-popover__arrow"></div>
98
116
  <div class="pf-c-popover__content">
99
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
100
- <i class="fas fa-times" aria-hidden="true"></i>
101
- </button>
102
- <h1 class="pf-c-title pf-m-md" id="popover-left-header">Popover header</h1>
117
+ <div class="pf-c-popover__close">
118
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
119
+ <i class="fas fa-times" aria-hidden="true"></i>
120
+ </button>
121
+ </div>
122
+ <header class="pf-c-popover__header">
123
+ <div class="pf-c-popover__title" id="popover-left-header">
124
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
125
+ </div>
126
+ </header>
103
127
  <div
104
128
  class="pf-c-popover__body"
105
129
  id="popover-left-body"
@@ -122,10 +146,16 @@ cssPrefix: pf-c-popover
122
146
  >
123
147
  <div class="pf-c-popover__arrow"></div>
124
148
  <div class="pf-c-popover__content">
125
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
126
- <i class="fas fa-times" aria-hidden="true"></i>
127
- </button>
128
- <h1 class="pf-c-title pf-m-md" id="popover-left-start-header">Popover header</h1>
149
+ <div class="pf-c-popover__close">
150
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
151
+ <i class="fas fa-times" aria-hidden="true"></i>
152
+ </button>
153
+ </div>
154
+ <header class="pf-c-popover__header">
155
+ <div class="pf-c-popover__title" id="popover-left-start-header">
156
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
157
+ </div>
158
+ </header>
129
159
  <div
130
160
  class="pf-c-popover__body"
131
161
  id="popover-left-start-body"
@@ -148,10 +178,16 @@ cssPrefix: pf-c-popover
148
178
  >
149
179
  <div class="pf-c-popover__arrow"></div>
150
180
  <div class="pf-c-popover__content">
151
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
152
- <i class="fas fa-times" aria-hidden="true"></i>
153
- </button>
154
- <h1 class="pf-c-title pf-m-md" id="popover-left-end-header">Popover header</h1>
181
+ <div class="pf-c-popover__close">
182
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
183
+ <i class="fas fa-times" aria-hidden="true"></i>
184
+ </button>
185
+ </div>
186
+ <header class="pf-c-popover__header">
187
+ <div class="pf-c-popover__title" id="popover-left-end-header">
188
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
189
+ </div>
190
+ </header>
155
191
  <div
156
192
  class="pf-c-popover__body"
157
193
  id="popover-left-end-body"
@@ -174,13 +210,16 @@ cssPrefix: pf-c-popover
174
210
  >
175
211
  <div class="pf-c-popover__arrow"></div>
176
212
  <div class="pf-c-popover__content">
177
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
178
- <i class="fas fa-times" aria-hidden="true"></i>
179
- </button>
180
- <h1
181
- class="pf-c-title pf-m-md"
182
- id="popover-bottom-start-header"
183
- >Popover header</h1>
213
+ <div class="pf-c-popover__close">
214
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
215
+ <i class="fas fa-times" aria-hidden="true"></i>
216
+ </button>
217
+ </div>
218
+ <header class="pf-c-popover__header">
219
+ <div class="pf-c-popover__title" id="popover-bottom-start-header">
220
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
221
+ </div>
222
+ </header>
184
223
  <div
185
224
  class="pf-c-popover__body"
186
225
  id="popover-bottom-start-body"
@@ -203,10 +242,16 @@ cssPrefix: pf-c-popover
203
242
  >
204
243
  <div class="pf-c-popover__arrow"></div>
205
244
  <div class="pf-c-popover__content">
206
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
207
- <i class="fas fa-times" aria-hidden="true"></i>
208
- </button>
209
- <h1 class="pf-c-title pf-m-md" id="popover-bottom-end-header">Popover header</h1>
245
+ <div class="pf-c-popover__close">
246
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
247
+ <i class="fas fa-times" aria-hidden="true"></i>
248
+ </button>
249
+ </div>
250
+ <header class="pf-c-popover__header">
251
+ <div class="pf-c-popover__title" id="popover-bottom-end-header">
252
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
253
+ </div>
254
+ </header>
210
255
  <div
211
256
  class="pf-c-popover__body"
212
257
  id="popover-bottom-end-body"
@@ -229,9 +274,11 @@ cssPrefix: pf-c-popover
229
274
  >
230
275
  <div class="pf-c-popover__arrow"></div>
231
276
  <div class="pf-c-popover__content">
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>
277
+ <div class="pf-c-popover__close">
278
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
279
+ <i class="fas fa-times" aria-hidden="true"></i>
280
+ </button>
281
+ </div>
235
282
  <div
236
283
  class="pf-c-popover__body"
237
284
  id="popover-no-header-body"
@@ -274,10 +321,16 @@ cssPrefix: pf-c-popover
274
321
  >
275
322
  <div class="pf-c-popover__arrow"></div>
276
323
  <div class="pf-c-popover__content">
277
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
278
- <i class="fas fa-times" aria-hidden="true"></i>
279
- </button>
280
- <h1 class="pf-c-title pf-m-md" id="popover-width-auto-header">Popover header</h1>
324
+ <div class="pf-c-popover__close">
325
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
326
+ <i class="fas fa-times" aria-hidden="true"></i>
327
+ </button>
328
+ </div>
329
+ <header class="pf-c-popover__header">
330
+ <div class="pf-c-popover__title" id="popover-width-auto-header">
331
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
332
+ </div>
333
+ </header>
281
334
  <div class="pf-c-popover__body" id="popover-width-auto-body">Popovers body</div>
282
335
  <footer class="pf-c-popover__footer">Popover footer</footer>
283
336
  </div>
@@ -297,16 +350,18 @@ cssPrefix: pf-c-popover
297
350
  >
298
351
  <div class="pf-c-popover__arrow"></div>
299
352
  <div class="pf-c-popover__content">
300
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
301
- <i class="fas fa-times" aria-hidden="true"></i>
302
- </button>
353
+ <div class="pf-c-popover__close">
354
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
355
+ <i class="fas fa-times" aria-hidden="true"></i>
356
+ </button>
357
+ </div>
303
358
  <header class="pf-c-popover__header">
304
- <h1 class="pf-c-popover__title pf-m-icon" id="popover-icon-title-header">
359
+ <div class="pf-c-popover__title pf-m-icon" id="popover-icon-title-header">
305
360
  <span class="pf-c-popover__title-icon">
306
361
  <i class="fas fa-fw fa-bullhorn" aria-hidden="true"></i>
307
362
  </span>
308
- <span class="pf-c-popover__title-text">Popover with icon title</span>
309
- </h1>
363
+ <h1 class="pf-c-popover__title-text">Popover with icon title</h1>
364
+ </div>
310
365
  </header>
311
366
  <div
312
367
  class="pf-c-popover__body"
@@ -330,23 +385,27 @@ cssPrefix: pf-c-popover
330
385
  >
331
386
  <div class="pf-c-popover__arrow"></div>
332
387
  <div class="pf-c-popover__content">
333
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
334
- <i class="fas fa-times" aria-hidden="true"></i>
335
- </button>
388
+ <div class="pf-c-popover__close">
389
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
390
+ <i class="fas fa-times" aria-hidden="true"></i>
391
+ </button>
392
+ </div>
336
393
  <header class="pf-c-popover__header">
337
- <h1
394
+ <div
338
395
  class="pf-c-popover__title pf-m-icon"
339
396
  id="popover-default-alert-header"
340
397
  >
341
398
  <span class="pf-c-popover__title-icon">
342
399
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
343
400
  </span>
344
- <span class="pf-u-screen-reader">
345
- Default
346
- alert:
347
- </span>
348
- <span class="pf-c-popover__title-text">Default popover title</span>
349
- </h1>
401
+ <h1 class="pf-c-popover__title-text">
402
+ <span class="pf-screen-reader">
403
+ Default
404
+ alert:
405
+ </span>
406
+ Default popover title
407
+ </h1>
408
+ </div>
350
409
  </header>
351
410
  <div
352
411
  class="pf-c-popover__body"
@@ -370,20 +429,24 @@ cssPrefix: pf-c-popover
370
429
  >
371
430
  <div class="pf-c-popover__arrow"></div>
372
431
  <div class="pf-c-popover__content">
373
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
374
- <i class="fas fa-times" aria-hidden="true"></i>
375
- </button>
432
+ <div class="pf-c-popover__close">
433
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
434
+ <i class="fas fa-times" aria-hidden="true"></i>
435
+ </button>
436
+ </div>
376
437
  <header class="pf-c-popover__header">
377
- <h1 class="pf-c-popover__title pf-m-icon" id="popover-info-alert-header">
438
+ <div class="pf-c-popover__title pf-m-icon" id="popover-info-alert-header">
378
439
  <span class="pf-c-popover__title-icon">
379
440
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
380
441
  </span>
381
- <span class="pf-u-screen-reader">
382
- Info
383
- alert:
384
- </span>
385
- <span class="pf-c-popover__title-text">Info popover title</span>
386
- </h1>
442
+ <h1 class="pf-c-popover__title-text">
443
+ <span class="pf-screen-reader">
444
+ Info
445
+ alert:
446
+ </span>
447
+ Info popover title
448
+ </h1>
449
+ </div>
387
450
  </header>
388
451
  <div
389
452
  class="pf-c-popover__body"
@@ -407,23 +470,27 @@ cssPrefix: pf-c-popover
407
470
  >
408
471
  <div class="pf-c-popover__arrow"></div>
409
472
  <div class="pf-c-popover__content">
410
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
411
- <i class="fas fa-times" aria-hidden="true"></i>
412
- </button>
473
+ <div class="pf-c-popover__close">
474
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
475
+ <i class="fas fa-times" aria-hidden="true"></i>
476
+ </button>
477
+ </div>
413
478
  <header class="pf-c-popover__header">
414
- <h1
479
+ <div
415
480
  class="pf-c-popover__title pf-m-icon"
416
481
  id="popover-success-alert-header"
417
482
  >
418
483
  <span class="pf-c-popover__title-icon">
419
484
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
420
485
  </span>
421
- <span class="pf-u-screen-reader">
422
- Success
423
- alert:
424
- </span>
425
- <span class="pf-c-popover__title-text">Success popover title</span>
426
- </h1>
486
+ <h1 class="pf-c-popover__title-text">
487
+ <span class="pf-screen-reader">
488
+ Success
489
+ alert:
490
+ </span>
491
+ Success popover title
492
+ </h1>
493
+ </div>
427
494
  </header>
428
495
  <div
429
496
  class="pf-c-popover__body"
@@ -447,23 +514,22 @@ cssPrefix: pf-c-popover
447
514
  >
448
515
  <div class="pf-c-popover__arrow"></div>
449
516
  <div class="pf-c-popover__content">
450
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
451
- <i class="fas fa-times" aria-hidden="true"></i>
452
- </button>
453
517
  <header class="pf-c-popover__header">
454
- <h1
518
+ <div
455
519
  class="pf-c-popover__title pf-m-icon"
456
520
  id="popover-warning-alert-header"
457
521
  >
458
522
  <span class="pf-c-popover__title-icon">
459
523
  <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
460
524
  </span>
461
- <span class="pf-u-screen-reader">
462
- Warning
463
- alert:
464
- </span>
465
- <span class="pf-c-popover__title-text">Warning popover title</span>
466
- </h1>
525
+ <h1 class="pf-c-popover__title-text">
526
+ <span class="pf-screen-reader">
527
+ Warning
528
+ alert:
529
+ </span>
530
+ Warning popover title
531
+ </h1>
532
+ </div>
467
533
  </header>
468
534
  <div
469
535
  class="pf-c-popover__body"
@@ -487,23 +553,27 @@ cssPrefix: pf-c-popover
487
553
  >
488
554
  <div class="pf-c-popover__arrow"></div>
489
555
  <div class="pf-c-popover__content">
490
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
491
- <i class="fas fa-times" aria-hidden="true"></i>
492
- </button>
556
+ <div class="pf-c-popover__close">
557
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
558
+ <i class="fas fa-times" aria-hidden="true"></i>
559
+ </button>
560
+ </div>
493
561
  <header class="pf-c-popover__header">
494
- <h1
562
+ <div
495
563
  class="pf-c-popover__title pf-m-icon"
496
564
  id="popover-danger-alert-header"
497
565
  >
498
566
  <span class="pf-c-popover__title-icon">
499
567
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
500
568
  </span>
501
- <span class="pf-u-screen-reader">
502
- Danger
503
- alert:
504
- </span>
505
- <span class="pf-c-popover__title-text">Danger popover title</span>
506
- </h1>
569
+ <h1 class="pf-c-popover__title-text">
570
+ <span class="pf-screen-reader">
571
+ Danger
572
+ alert:
573
+ </span>
574
+ Danger popover title
575
+ </h1>
576
+ </div>
507
577
  </header>
508
578
  <div
509
579
  class="pf-c-popover__body"
@@ -532,6 +602,7 @@ A popover is used to provide contextual information for another component on cli
532
602
  | `aria-modal="true"` | `.pf-c-popover` | Tells assistive technologies that the windows underneath the current popover are not available for interaction. **Required**|
533
603
  | `aria-label="Close"` | `.pf-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required**|
534
604
  | `aria-hidden="true"` | Parent element containing the page contents when the popover is open. | Hides main contents of the page from screen readers. The element with `.pf-c-popover` must not be a descendent of the element with `aria-hidden="true"`. For more info, see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
605
+ | `.pf-screen-reader` | `.pf-c-popover__title-text` | Adds text to be read saying the alert status before the title. If `.pf-c-popover__title-text` is not used to create a title, this must be added within the title. **Required for popovers that are alerts** |
535
606
 
536
607
  ### Usage
537
608
 
@@ -540,12 +611,12 @@ A popover is used to provide contextual information for another component on cli
540
611
  | `.pf-c-popover` | `<div>` | Creates a popover. Always use it with a modifier class that positions the popover relative to the element that triggered it. **Required** |
541
612
  | `.pf-c-popover__arrow` | `<div>` | Creates an arrow pointing towards the element the popover describes. **Required** |
542
613
  | `.pf-c-popover__content` | `<div>` | Creates the content area of the popover. **Required** |
543
- | `.pf-c-button` | `<button>` | Positions the close icon in the top-right corner of the popover. **Required** |
544
- | `.pf-c-popover__header` | `<header>` | Creates the popover header |
545
- | `.pf-c-popover__title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`,`<div>` | Creates the popover title |
546
- | `.pf-c-title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>` | Initiates a title. Always use it with a modifier class. See the [title component](/components/title) for more info.|
547
- | `.pf-c-popover__title-icon` | `<span>` | Creates the popover title icon |
548
- | `.pf-c-popover__title-text` | `<span>` | Creates the popover title text |
614
+ | `.pf-c-popover__close` | `<div>` | Positions the close icon in the top-right corner of the popover. **Required if there is a close button** |
615
+ | `.pf-c-button` | `<button>` | Creates the close button for the popover. |
616
+ | `.pf-c-popover__header` | `<header>` | Creates the popover header. **Required if there is a title**|
617
+ | `.pf-c-popover__title` | `<div>` | Creates the popover title. |
618
+ | `.pf-c-popover__title-icon` | `<span>` | Creates the popover title icon. |
619
+ | `.pf-c-popover__title-text` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`,`<span>` | Creates the popover title text. |
549
620
  | `.pf-c-popover__body` | `<div>` | The popover's body text. **Required** |
550
621
  | `.pf-c-popover__footer` | `<footer>` | Initiates a popover footer. |
551
622
  | `.pf-m-left{-top/bottom}` | `.pf-c-popover` | Positions the popover to the left (or left top/left bottom) of the element. |
package/docs/demos/Card/examples/Card.md CHANGED
@@ -1326,17 +1326,23 @@ wrapperTag: div
1326
1326
  >
1327
1327
  <div class="pf-c-popover__arrow"></div>
1328
1328
  <div class="pf-c-popover__content">
1329
- <button
1330
- class="pf-c-button pf-m-plain"
1331
- type="button"
1332
- aria-label="Close"
1333
- >
1334
- <i class="fas fa-times" aria-hidden="true"></i>
1335
- </button>
1336
- <h1
1337
- class="pf-c-title pf-m-md"
1338
- id="status-card-expanded-with-popover-example-popover-popover-right-header"
1339
- >Control Panel Status</h1>
1329
+ <div class="pf-c-popover__close">
1330
+ <button
1331
+ class="pf-c-button pf-m-plain"
1332
+ type="button"
1333
+ aria-label="Close"
1334
+ >
1335
+ <i class="fas fa-times" aria-hidden="true"></i>
1336
+ </button>
1337
+ </div>
1338
+ <header class="pf-c-popover__header">
1339
+ <div
1340
+ class="pf-c-popover__title"
1341
+ id="status-card-expanded-with-popover-example-popover-popover-right-header"
1342
+ >
1343
+ <h1 class="pf-c-popover__title-text">Control Panel Status</h1>
1344
+ </div>
1345
+ </header>
1340
1346
  <div
1341
1347
  class="pf-c-popover__body"
1342
1348
  id="status-card-expanded-with-popover-example-popover-popover-right-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": "5.0.0-alpha.22",
4
+ "version": "5.0.0-alpha.24",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-reset.css CHANGED
@@ -5262,26 +5262,8 @@
5262
5262
  content: "\e911";
5263
5263
  }
5264
5264
 
5265
- .pf-svg-size-sm {
5265
+ .pf-svg {
5266
5266
  width: 1em;
5267
5267
  height: 1em;
5268
5268
  vertical-align: -0.125em;
5269
- }
5270
-
5271
- .pf-svg-size-md {
5272
- width: 1.5em;
5273
- height: 1.5em;
5274
- vertical-align: -0.1875em;
5275
- }
5276
-
5277
- .pf-svg-size-lg {
5278
- width: 2em;
5279
- height: 2em;
5280
- vertical-align: -0.25em;
5281
- }
5282
-
5283
- .pf-svg-size-xl {
5284
- width: 3em;
5285
- height: 3em;
5286
- vertical-align: -0.375em;
5287
5269
  }
package/patternfly-base.css CHANGED
@@ -5385,26 +5385,8 @@ a {
5385
5385
  content: "\e911";
5386
5386
  }
5387
5387
 
5388
- .pf-svg-size-sm {
5388
+ .pf-svg {
5389
5389
  width: 1em;
5390
5390
  height: 1em;
5391
5391
  vertical-align: -0.125em;
5392
- }
5393
-
5394
- .pf-svg-size-md {
5395
- width: 1.5em;
5396
- height: 1.5em;
5397
- vertical-align: -0.1875em;
5398
- }
5399
-
5400
- .pf-svg-size-lg {
5401
- width: 2em;
5402
- height: 2em;
5403
- vertical-align: -0.25em;
5404
- }
5405
-
5406
- .pf-svg-size-xl {
5407
- width: 3em;
5408
- height: 3em;
5409
- vertical-align: -0.375em;
5410
5392
  }
package/patternfly-no-reset.css CHANGED
@@ -5356,30 +5356,12 @@
5356
5356
  content: "\e911";
5357
5357
  }
5358
5358
 
5359
- .pf-svg-size-sm {
5359
+ .pf-svg {
5360
5360
  width: 1em;
5361
5361
  height: 1em;
5362
5362
  vertical-align: -0.125em;
5363
5363
  }
5364
5364
 
5365
- .pf-svg-size-md {
5366
- width: 1.5em;
5367
- height: 1.5em;
5368
- vertical-align: -0.1875em;
5369
- }
5370
-
5371
- .pf-svg-size-lg {
5372
- width: 2em;
5373
- height: 2em;
5374
- vertical-align: -0.25em;
5375
- }
5376
-
5377
- .pf-svg-size-xl {
5378
- width: 3em;
5379
- height: 3em;
5380
- vertical-align: -0.375em;
5381
- }
5382
-
5383
5365
  .pf-c-about-modal-box {
5384
5366
  --pf-c-about-modal-box--BackgroundColor: var(--pf-global--palette--black-1000);
5385
5367
  --pf-c-about-modal-box--Height: 100%;
@@ -23017,15 +22999,13 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23017
22999
  --pf-c-popover__arrow--m-left--TranslateX: 50%;
23018
23000
  --pf-c-popover__arrow--m-left--TranslateY: -50%;
23019
23001
  --pf-c-popover__arrow--m-left--Rotate: 45deg;
23020
- --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
23021
- --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
23022
- --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
23023
- --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
23024
- --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
23025
- --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
23026
- --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
23027
- --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
23028
- --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
23002
+ --pf-c-popover__close--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
23003
+ --pf-c-popover__close--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
23004
+ --pf-c-popover__close--sibling--PaddingRight: var(--pf-global--spacer--2xl);
23005
+ --pf-c-popover__header--MarginBottom: var(--pf-global--spacer--sm);
23006
+ --pf-c-popover__title-text--LineHeight: var(--pf-global--LineHeight--md);
23007
+ --pf-c-popover__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
23008
+ --pf-c-popover__title-text--FontSize: var(--pf-global--FontSize--md);
23029
23009
  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
23030
23010
  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
23031
23011
  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
@@ -23105,16 +23085,14 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23105
23085
  padding: var(--pf-c-popover__content--PaddingTop) var(--pf-c-popover__content--PaddingRight) var(--pf-c-popover__content--PaddingBottom) var(--pf-c-popover__content--PaddingLeft);
23106
23086
  background-color: var(--pf-c-popover__content--BackgroundColor);
23107
23087
  }
23108
- .pf-c-popover__content > .pf-c-title {
23109
- margin-bottom: var(--pf-c-popover--c-title--MarginBottom);
23110
- }
23111
- .pf-c-popover__content > .pf-c-button {
23088
+
23089
+ .pf-c-popover__close {
23112
23090
  position: absolute;
23113
- top: var(--pf-c-popover--c-button--Top);
23114
- right: var(--pf-c-popover--c-button--Right);
23091
+ top: var(--pf-c-popover__close--Top);
23092
+ right: var(--pf-c-popover__close--Right);
23115
23093
  }
23116
- .pf-c-popover__content > .pf-c-button + * {
23117
- padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight);
23094
+ .pf-c-popover__close + * {
23095
+ padding-right: var(--pf-c-popover__close--sibling--PaddingRight);
23118
23096
  }
23119
23097
 
23120
23098
  .pf-c-popover__arrow {
@@ -23126,15 +23104,13 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23126
23104
  box-shadow: var(--pf-c-popover__arrow--BoxShadow);
23127
23105
  }
23128
23106
 
23129
- .pf-c-popover__title {
23130
- flex: 0 0 auto;
23131
- margin-bottom: var(--pf-c-popover__title--MarginBottom);
23132
- font-family: var(--pf-c-popover__title--FontFamily);
23133
- font-size: var(--pf-c-popover__title--FontSize);
23134
- line-height: var(--pf-c-popover__title--LineHeight);
23107
+ .pf-c-popover__header {
23108
+ margin-bottom: var(--pf-c-popover__header--MarginBottom);
23135
23109
  }
23136
- .pf-c-popover__title.pf-m-icon {
23110
+
23111
+ .pf-c-popover__title {
23137
23112
  display: flex;
23113
+ flex: 0 0 auto;
23138
23114
  }
23139
23115
 
23140
23116
  .pf-c-popover__title-icon {
@@ -23143,6 +23119,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23143
23119
  }
23144
23120
 
23145
23121
  .pf-c-popover__title-text {
23122
+ font-family: var(--pf-c-popover__title-text--FontFamily);
23123
+ font-size: var(--pf-c-popover__title-text--FontSize);
23124
+ line-height: var(--pf-c-popover__title-text--LineHeight);
23146
23125
  color: var(--pf-c-popover__title-text--Color, inherit);
23147
23126
  }
23148
23127