@patternfly/patternfly 5.0.0-alpha.27 → 5.0.0-alpha.29

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/components/Popover/popover.css +2 -0
  2. package/components/Popover/popover.scss +2 -0
  3. package/components/Table/table-scrollable.css +31 -26
  4. package/components/Table/table-scrollable.scss +33 -28
  5. package/components/Table/table.css +2 -1
  6. package/components/Table/table.scss +4 -1
  7. package/docs/components/Popover/examples/Popover.md +6 -19
  8. package/docs/components/Table/examples/Table.css +4 -0
  9. package/docs/components/Table/examples/Table.md +657 -147
  10. package/docs/demos/Table/examples/Table.md +1943 -100
  11. package/package.json +1 -1
  12. package/patternfly-no-reset.css +36 -28
  13. package/patternfly.css +36 -28
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/components/Popover/popover.css CHANGED
@@ -43,6 +43,7 @@
43
43
  --pf-c-popover__title-text--FontSize: var(--pf-global--FontSize--md);
44
44
  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
45
45
  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
46
+ --pf-c-popover__title-icon--FontSize: var(--pf-global--FontSize--md);
46
47
  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
47
48
  position: relative;
48
49
  min-width: var(--pf-c-popover--MinWidth);
@@ -150,6 +151,7 @@
150
151
 
151
152
  .pf-c-popover__title-icon {
152
153
  margin-right: var(--pf-c-popover__title-icon--MarginRight);
154
+ font-size: var(--pf-c-popover__title-icon--FontSize);
153
155
  color: var(--pf-c-popover__title-icon--Color);
154
156
  }
155
157
 
package/components/Popover/popover.scss CHANGED
@@ -60,6 +60,7 @@
60
60
  // Title icon
61
61
  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
62
62
  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
63
+ --pf-c-popover__title-icon--FontSize: var(--pf-global--FontSize--md);
63
64
 
64
65
  // Footer
65
66
  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
@@ -219,6 +220,7 @@
219
220
 
220
221
  .pf-c-popover__title-icon {
221
222
  margin-right: var(--pf-c-popover__title-icon--MarginRight);
223
+ font-size: var(--pf-c-popover__title-icon--FontSize);
222
224
  color: var(--pf-c-popover__title-icon--Color);
223
225
  }
224
226
 
package/components/Table/table-scrollable.css CHANGED
@@ -1,37 +1,42 @@
1
1
  .pf-c-table {
2
- --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
3
- --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
4
- --pf-c-table__sticky-column--Left: 0;
5
- --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
6
- --pf-c-table__sticky-column--Top: 0;
7
- --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
8
- --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
9
- --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
10
- --pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
11
- --pf-c-table__sticky-column--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
12
- --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
2
+ --pf-c-table__sticky-cell--MinWidth--base: 12.5rem;
3
+ --pf-c-table__sticky-cell--MinWidth: var(--pf-c-table__sticky-cell--MinWidth--base);
4
+ --pf-c-table__sticky-cell--ZIndex: var(--pf-global--ZIndex--xs);
5
+ --pf-c-table__sticky-cell--Right: auto;
6
+ --pf-c-table__sticky-cell--Left: auto;
7
+ --pf-c-table__sticky-cell--BackgroundColor: var(--pf-global--BackgroundColor--100);
8
+ --pf-c-table__sticky-cell--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
9
+ --pf-c-table__sticky-cell--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
10
+ --pf-c-table__sticky-cell--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
11
+ --pf-c-table__sticky-cell--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
12
+ --pf-c-table__sticky-cell--m-right--Right: 0;
13
+ --pf-c-table__sticky-cell--m-left--Left: 0;
14
+ --pf-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-c-table__sticky-cell--ZIndex) + 1);
13
15
  }
14
- .pf-c-table .pf-c-table__sticky-column {
16
+ .pf-c-table .pf-c-table__sticky-cell {
17
+ --pf-c-table--cell--Overflow: visible;
18
+ --pf-c-table--m-sticky-header--cell--ZIndex: var(--pf-c-table--m-sticky-header__sticky-cell--ZIndex);
15
19
  position: sticky;
16
- left: var(--pf-c-table__sticky-column--Left);
17
- z-index: var(--pf-c-table__sticky-column--ZIndex);
18
- min-width: var(--pf-c-table__sticky-column--MinWidth);
19
- background-color: var(--pf-c-table__sticky-column--BackgroundColor);
20
+ right: var(--pf-c-table__sticky-cell--Right);
21
+ left: var(--pf-c-table__sticky-cell--Left);
22
+ z-index: var(--pf-c-table__sticky-cell--ZIndex);
23
+ min-width: var(--pf-c-table__sticky-cell--MinWidth);
24
+ background-color: var(--pf-c-table__sticky-cell--BackgroundColor);
20
25
  background-clip: padding-box;
21
26
  }
22
- .pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
23
- --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth);
24
- --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
27
+ .pf-c-table .pf-c-table__sticky-cell.pf-m-border-right::before {
28
+ --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-cell--m-border-right--before--BorderRightWidth);
29
+ --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-cell--m-border-right--before--BorderRightColor);
25
30
  }
26
- .pf-c-table .pf-c-table__sticky-column.pf-m-border-left::before {
27
- --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth);
28
- --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftColor);
31
+ .pf-c-table .pf-c-table__sticky-cell.pf-m-border-left::before {
32
+ --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
33
+ --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
29
34
  }
30
- .pf-c-table.pf-m-sticky-header {
31
- --pf-c-table--cell--Overflow: visible;
35
+ .pf-c-table .pf-c-table__sticky-cell.pf-m-right {
36
+ --pf-c-table__sticky-cell--Right: var(--pf-c-table__sticky-cell--m-right--Right);
32
37
  }
33
- .pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
34
- z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
38
+ .pf-c-table .pf-c-table__sticky-cell.pf-m-left {
39
+ --pf-c-table__sticky-cell--Left: var(--pf-c-table__sticky-cell--m-left--Left);
35
40
  }
36
41
 
37
42
  .pf-c-scroll-outer-wrapper {
package/components/Table/table-scrollable.scss CHANGED
@@ -1,43 +1,48 @@
1
1
  .pf-c-table {
2
- --pf-c-table__sticky-column--cell-min-width--base: #{pf-size-prem(200px)};
3
- --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
4
- --pf-c-table__sticky-column--Left: 0;
5
- --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
6
- --pf-c-table__sticky-column--Top: 0;
7
- --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
8
- --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
9
- --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
10
- --pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
11
- --pf-c-table__sticky-column--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
12
- --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
13
-
14
- .pf-c-table__sticky-column {
2
+ --pf-c-table__sticky-cell--MinWidth--base: #{pf-size-prem(200px)};
3
+ --pf-c-table__sticky-cell--MinWidth: var(--pf-c-table__sticky-cell--MinWidth--base);
4
+ --pf-c-table__sticky-cell--ZIndex: var(--pf-global--ZIndex--xs);
5
+ --pf-c-table__sticky-cell--Right: auto;
6
+ --pf-c-table__sticky-cell--Left: auto;
7
+ --pf-c-table__sticky-cell--BackgroundColor: var(--pf-global--BackgroundColor--100);
8
+ --pf-c-table__sticky-cell--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
9
+ --pf-c-table__sticky-cell--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
10
+ --pf-c-table__sticky-cell--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
11
+ --pf-c-table__sticky-cell--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
12
+ --pf-c-table__sticky-cell--m-right--Right: 0;
13
+ --pf-c-table__sticky-cell--m-left--Left: 0;
14
+ --pf-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-c-table__sticky-cell--ZIndex) + 1);
15
+
16
+ .pf-c-table__sticky-cell {
17
+ --pf-c-table--cell--Overflow: visible;
18
+ --pf-c-table--m-sticky-header--cell--ZIndex: var(--pf-c-table--m-sticky-header__sticky-cell--ZIndex);
19
+
15
20
  position: sticky;
16
- left: var(--pf-c-table__sticky-column--Left);
17
- z-index: var(--pf-c-table__sticky-column--ZIndex);
18
- min-width: var(--pf-c-table__sticky-column--MinWidth);
19
- background-color: var(--pf-c-table__sticky-column--BackgroundColor);
21
+ right: var(--pf-c-table__sticky-cell--Right);
22
+ left: var(--pf-c-table__sticky-cell--Left);
23
+ z-index: var(--pf-c-table__sticky-cell--ZIndex);
24
+ min-width: var(--pf-c-table__sticky-cell--MinWidth);
25
+ background-color: var(--pf-c-table__sticky-cell--BackgroundColor);
20
26
  background-clip: padding-box;
21
27
 
22
28
  &.pf-m-border-right::before {
23
- --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth);
24
- --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
29
+ --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-cell--m-border-right--before--BorderRightWidth);
30
+ --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-cell--m-border-right--before--BorderRightColor);
25
31
  }
26
32
 
27
33
  &.pf-m-border-left::before {
28
- --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth);
29
- --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftColor);
34
+ --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
35
+ --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
30
36
  }
31
- }
32
37
 
33
- &.pf-m-sticky-header {
34
- --pf-c-table--cell--Overflow: visible;
38
+ &.pf-m-right {
39
+ --pf-c-table__sticky-cell--Right: var(--pf-c-table__sticky-cell--m-right--Right);
40
+ }
35
41
 
36
- thead {
37
- .pf-c-table__sticky-column {
38
- z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
39
- }
42
+ &.pf-m-left {
43
+ --pf-c-table__sticky-cell--Left: var(--pf-c-table__sticky-cell--m-left--Left);
40
44
  }
45
+
41
46
  }
42
47
  }
43
48
 
package/components/Table/table.css CHANGED
@@ -261,6 +261,7 @@
261
261
  --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs);
262
262
  --pf-c-table__subhead--Color: var(--pf-global--Color--200);
263
263
  --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
264
+ --pf-c-table--m-sticky-header--cell--ZIndex: var(--pf-global--ZIndex--xs);
264
265
  color: var(--pf-global--Color--100);
265
266
  width: 100%;
266
267
  background-color: var(--pf-c-table--BackgroundColor);
@@ -289,7 +290,7 @@
289
290
  border-bottom: 0;
290
291
  }
291
292
  .pf-c-table.pf-m-sticky-header > thead > tr > * {
292
- z-index: var(--pf-global--ZIndex--xs);
293
+ z-index: var(--pf-c-table--m-sticky-header--cell--ZIndex);
293
294
  }
294
295
  .pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > * {
295
296
  position: sticky;
package/components/Table/table.scss CHANGED
@@ -306,6 +306,9 @@
306
306
  // Striped
307
307
  --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
308
308
 
309
+ // Sticky
310
+ --pf-c-table--m-sticky-header--cell--ZIndex: var(--pf-global--ZIndex--xs);
311
+
309
312
  @media screen and (min-width: $pf-global--breakpoint--xl) {
310
313
  --pf-c-table--cell--first-last-child--PaddingRight: var(--pf-c-table--cell--first-last-child--xl--PaddingRight);
311
314
  --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-c-table--cell--first-last-child--xl--PaddingLeft);
@@ -330,7 +333,7 @@
330
333
  border-bottom: 0;
331
334
 
332
335
  > * {
333
- z-index: var(--pf-global--ZIndex--xs); // set z-index here to allow sticky column to override
336
+ z-index: var(--pf-c-table--m-sticky-header--cell--ZIndex); // set z-index here to allow sticky column to override
334
337
  }
335
338
  }
336
339
 
package/docs/components/Popover/examples/Popover.md CHANGED
@@ -356,7 +356,7 @@ cssPrefix: pf-c-popover
356
356
  </button>
357
357
  </div>
358
358
  <header class="pf-c-popover__header">
359
- <div class="pf-c-popover__title pf-m-icon" id="popover-icon-title-header">
359
+ <div class="pf-c-popover__title" id="popover-icon-title-header">
360
360
  <span class="pf-c-popover__title-icon">
361
361
  <i class="fas fa-fw fa-bullhorn" aria-hidden="true"></i>
362
362
  </span>
@@ -391,10 +391,7 @@ cssPrefix: pf-c-popover
391
391
  </button>
392
392
  </div>
393
393
  <header class="pf-c-popover__header">
394
- <div
395
- class="pf-c-popover__title pf-m-icon"
396
- id="popover-default-alert-header"
397
- >
394
+ <div class="pf-c-popover__title" id="popover-default-alert-header">
398
395
  <span class="pf-c-popover__title-icon">
399
396
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
400
397
  </span>
@@ -435,7 +432,7 @@ cssPrefix: pf-c-popover
435
432
  </button>
436
433
  </div>
437
434
  <header class="pf-c-popover__header">
438
- <div class="pf-c-popover__title pf-m-icon" id="popover-info-alert-header">
435
+ <div class="pf-c-popover__title" id="popover-info-alert-header">
439
436
  <span class="pf-c-popover__title-icon">
440
437
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
441
438
  </span>
@@ -476,10 +473,7 @@ cssPrefix: pf-c-popover
476
473
  </button>
477
474
  </div>
478
475
  <header class="pf-c-popover__header">
479
- <div
480
- class="pf-c-popover__title pf-m-icon"
481
- id="popover-success-alert-header"
482
- >
476
+ <div class="pf-c-popover__title" id="popover-success-alert-header">
483
477
  <span class="pf-c-popover__title-icon">
484
478
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
485
479
  </span>
@@ -515,10 +509,7 @@ cssPrefix: pf-c-popover
515
509
  <div class="pf-c-popover__arrow"></div>
516
510
  <div class="pf-c-popover__content">
517
511
  <header class="pf-c-popover__header">
518
- <div
519
- class="pf-c-popover__title pf-m-icon"
520
- id="popover-warning-alert-header"
521
- >
512
+ <div class="pf-c-popover__title" id="popover-warning-alert-header">
522
513
  <span class="pf-c-popover__title-icon">
523
514
  <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
524
515
  </span>
@@ -559,10 +550,7 @@ cssPrefix: pf-c-popover
559
550
  </button>
560
551
  </div>
561
552
  <header class="pf-c-popover__header">
562
- <div
563
- class="pf-c-popover__title pf-m-icon"
564
- id="popover-danger-alert-header"
565
- >
553
+ <div class="pf-c-popover__title" id="popover-danger-alert-header">
566
554
  <span class="pf-c-popover__title-icon">
567
555
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
568
556
  </span>
@@ -624,7 +612,6 @@ A popover is used to provide contextual information for another component on cli
624
612
  | `.pf-m-bottom{-left/right}` | `.pf-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
625
613
  | `.pf-m-no-padding` | `.pf-c-popover` | Removes the outer padding from the popover content. |
626
614
  | `.pf-m-width-auto` | `.pf-c-popover` | Allows popover width to be defined by the popover content. |
627
- | `.pf-m-icon` | `.pf-c-popover__title` | Modifies the title layout to accommodate an icon. |
628
615
  | `.pf-m-default` | `.pf-c-popover` | Modifies for the default alert state. |
629
616
  | `.pf-m-info` | `.pf-c-popover` | Modifies for the info alert state. |
630
617
  | `.pf-m-success` | `.pf-c-popover` | Modifies for the success alert state. |
package/docs/components/Table/examples/Table.css CHANGED
@@ -9,6 +9,10 @@
9
9
  top: -18px;
10
10
  }
11
11
 
12
+ #ws-core-c-table-sticky-header .ws-preview-html {
13
+ height: 300px;
14
+ }
15
+
12
16
  #ws-core-c-table-sticky-columns-and-header .ws-preview-html {
13
17
  height: 600px;
14
18
  }