@patternfly/patternfly 5.0.0-alpha.28 → 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 (12) hide show
  1. package/components/Table/table-scrollable.css +31 -26
  2. package/components/Table/table-scrollable.scss +33 -28
  3. package/components/Table/table.css +2 -1
  4. package/components/Table/table.scss +4 -1
  5. package/docs/components/Table/examples/Table.css +4 -0
  6. package/docs/components/Table/examples/Table.md +657 -147
  7. package/docs/demos/Table/examples/Table.md +1943 -100
  8. package/package.json +1 -1
  9. package/patternfly-no-reset.css +34 -28
  10. package/patternfly.css +34 -28
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
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/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
  }