@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/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.28",
4
+ "version": "5.0.0-alpha.29",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -28016,6 +28016,7 @@ svg.pf-c-spinner.pf-m-xl {
28016
28016
  --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs);
28017
28017
  --pf-c-table__subhead--Color: var(--pf-global--Color--200);
28018
28018
  --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
28019
+ --pf-c-table--m-sticky-header--cell--ZIndex: var(--pf-global--ZIndex--xs);
28019
28020
  color: var(--pf-global--Color--100);
28020
28021
  width: 100%;
28021
28022
  background-color: var(--pf-c-table--BackgroundColor);
@@ -28044,7 +28045,7 @@ svg.pf-c-spinner.pf-m-xl {
28044
28045
  border-bottom: 0;
28045
28046
  }
28046
28047
  .pf-c-table.pf-m-sticky-header > thead > tr > * {
28047
- z-index: var(--pf-global--ZIndex--xs);
28048
+ z-index: var(--pf-c-table--m-sticky-header--cell--ZIndex);
28048
28049
  }
28049
28050
  .pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > * {
28050
28051
  position: sticky;
@@ -28864,39 +28865,44 @@ svg.pf-c-spinner.pf-m-xl {
28864
28865
  }
28865
28866
 
28866
28867
  .pf-c-table {
28867
- --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
28868
- --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
28869
- --pf-c-table__sticky-column--Left: 0;
28870
- --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
28871
- --pf-c-table__sticky-column--Top: 0;
28872
- --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
28873
- --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
28874
- --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
28875
- --pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
28876
- --pf-c-table__sticky-column--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
28877
- --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
28878
- }
28879
- .pf-c-table .pf-c-table__sticky-column {
28868
+ --pf-c-table__sticky-cell--MinWidth--base: 12.5rem;
28869
+ --pf-c-table__sticky-cell--MinWidth: var(--pf-c-table__sticky-cell--MinWidth--base);
28870
+ --pf-c-table__sticky-cell--ZIndex: var(--pf-global--ZIndex--xs);
28871
+ --pf-c-table__sticky-cell--Right: auto;
28872
+ --pf-c-table__sticky-cell--Left: auto;
28873
+ --pf-c-table__sticky-cell--BackgroundColor: var(--pf-global--BackgroundColor--100);
28874
+ --pf-c-table__sticky-cell--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
28875
+ --pf-c-table__sticky-cell--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
28876
+ --pf-c-table__sticky-cell--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
28877
+ --pf-c-table__sticky-cell--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
28878
+ --pf-c-table__sticky-cell--m-right--Right: 0;
28879
+ --pf-c-table__sticky-cell--m-left--Left: 0;
28880
+ --pf-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-c-table__sticky-cell--ZIndex) + 1);
28881
+ }
28882
+ .pf-c-table .pf-c-table__sticky-cell {
28883
+ --pf-c-table--cell--Overflow: visible;
28884
+ --pf-c-table--m-sticky-header--cell--ZIndex: var(--pf-c-table--m-sticky-header__sticky-cell--ZIndex);
28880
28885
  position: sticky;
28881
- left: var(--pf-c-table__sticky-column--Left);
28882
- z-index: var(--pf-c-table__sticky-column--ZIndex);
28883
- min-width: var(--pf-c-table__sticky-column--MinWidth);
28884
- background-color: var(--pf-c-table__sticky-column--BackgroundColor);
28886
+ right: var(--pf-c-table__sticky-cell--Right);
28887
+ left: var(--pf-c-table__sticky-cell--Left);
28888
+ z-index: var(--pf-c-table__sticky-cell--ZIndex);
28889
+ min-width: var(--pf-c-table__sticky-cell--MinWidth);
28890
+ background-color: var(--pf-c-table__sticky-cell--BackgroundColor);
28885
28891
  background-clip: padding-box;
28886
28892
  }
28887
- .pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
28888
- --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth);
28889
- --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
28893
+ .pf-c-table .pf-c-table__sticky-cell.pf-m-border-right::before {
28894
+ --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-cell--m-border-right--before--BorderRightWidth);
28895
+ --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-cell--m-border-right--before--BorderRightColor);
28890
28896
  }
28891
- .pf-c-table .pf-c-table__sticky-column.pf-m-border-left::before {
28892
- --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth);
28893
- --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftColor);
28897
+ .pf-c-table .pf-c-table__sticky-cell.pf-m-border-left::before {
28898
+ --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
28899
+ --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
28894
28900
  }
28895
- .pf-c-table.pf-m-sticky-header {
28896
- --pf-c-table--cell--Overflow: visible;
28901
+ .pf-c-table .pf-c-table__sticky-cell.pf-m-right {
28902
+ --pf-c-table__sticky-cell--Right: var(--pf-c-table__sticky-cell--m-right--Right);
28897
28903
  }
28898
- .pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
28899
- z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
28904
+ .pf-c-table .pf-c-table__sticky-cell.pf-m-left {
28905
+ --pf-c-table__sticky-cell--Left: var(--pf-c-table__sticky-cell--m-left--Left);
28900
28906
  }
28901
28907
 
28902
28908
  .pf-c-scroll-outer-wrapper {
package/patternfly.css CHANGED
@@ -28139,6 +28139,7 @@ svg.pf-c-spinner.pf-m-xl {
28139
28139
  --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs);
28140
28140
  --pf-c-table__subhead--Color: var(--pf-global--Color--200);
28141
28141
  --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
28142
+ --pf-c-table--m-sticky-header--cell--ZIndex: var(--pf-global--ZIndex--xs);
28142
28143
  color: var(--pf-global--Color--100);
28143
28144
  width: 100%;
28144
28145
  background-color: var(--pf-c-table--BackgroundColor);
@@ -28167,7 +28168,7 @@ svg.pf-c-spinner.pf-m-xl {
28167
28168
  border-bottom: 0;
28168
28169
  }
28169
28170
  .pf-c-table.pf-m-sticky-header > thead > tr > * {
28170
- z-index: var(--pf-global--ZIndex--xs);
28171
+ z-index: var(--pf-c-table--m-sticky-header--cell--ZIndex);
28171
28172
  }
28172
28173
  .pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > * {
28173
28174
  position: sticky;
@@ -28987,39 +28988,44 @@ svg.pf-c-spinner.pf-m-xl {
28987
28988
  }
28988
28989
 
28989
28990
  .pf-c-table {
28990
- --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
28991
- --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
28992
- --pf-c-table__sticky-column--Left: 0;
28993
- --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
28994
- --pf-c-table__sticky-column--Top: 0;
28995
- --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
28996
- --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
28997
- --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
28998
- --pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
28999
- --pf-c-table__sticky-column--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
29000
- --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
29001
- }
29002
- .pf-c-table .pf-c-table__sticky-column {
28991
+ --pf-c-table__sticky-cell--MinWidth--base: 12.5rem;
28992
+ --pf-c-table__sticky-cell--MinWidth: var(--pf-c-table__sticky-cell--MinWidth--base);
28993
+ --pf-c-table__sticky-cell--ZIndex: var(--pf-global--ZIndex--xs);
28994
+ --pf-c-table__sticky-cell--Right: auto;
28995
+ --pf-c-table__sticky-cell--Left: auto;
28996
+ --pf-c-table__sticky-cell--BackgroundColor: var(--pf-global--BackgroundColor--100);
28997
+ --pf-c-table__sticky-cell--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
28998
+ --pf-c-table__sticky-cell--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
28999
+ --pf-c-table__sticky-cell--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
29000
+ --pf-c-table__sticky-cell--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
29001
+ --pf-c-table__sticky-cell--m-right--Right: 0;
29002
+ --pf-c-table__sticky-cell--m-left--Left: 0;
29003
+ --pf-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-c-table__sticky-cell--ZIndex) + 1);
29004
+ }
29005
+ .pf-c-table .pf-c-table__sticky-cell {
29006
+ --pf-c-table--cell--Overflow: visible;
29007
+ --pf-c-table--m-sticky-header--cell--ZIndex: var(--pf-c-table--m-sticky-header__sticky-cell--ZIndex);
29003
29008
  position: sticky;
29004
- left: var(--pf-c-table__sticky-column--Left);
29005
- z-index: var(--pf-c-table__sticky-column--ZIndex);
29006
- min-width: var(--pf-c-table__sticky-column--MinWidth);
29007
- background-color: var(--pf-c-table__sticky-column--BackgroundColor);
29009
+ right: var(--pf-c-table__sticky-cell--Right);
29010
+ left: var(--pf-c-table__sticky-cell--Left);
29011
+ z-index: var(--pf-c-table__sticky-cell--ZIndex);
29012
+ min-width: var(--pf-c-table__sticky-cell--MinWidth);
29013
+ background-color: var(--pf-c-table__sticky-cell--BackgroundColor);
29008
29014
  background-clip: padding-box;
29009
29015
  }
29010
- .pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
29011
- --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth);
29012
- --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
29016
+ .pf-c-table .pf-c-table__sticky-cell.pf-m-border-right::before {
29017
+ --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-cell--m-border-right--before--BorderRightWidth);
29018
+ --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-cell--m-border-right--before--BorderRightColor);
29013
29019
  }
29014
- .pf-c-table .pf-c-table__sticky-column.pf-m-border-left::before {
29015
- --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth);
29016
- --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftColor);
29020
+ .pf-c-table .pf-c-table__sticky-cell.pf-m-border-left::before {
29021
+ --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
29022
+ --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
29017
29023
  }
29018
- .pf-c-table.pf-m-sticky-header {
29019
- --pf-c-table--cell--Overflow: visible;
29024
+ .pf-c-table .pf-c-table__sticky-cell.pf-m-right {
29025
+ --pf-c-table__sticky-cell--Right: var(--pf-c-table__sticky-cell--m-right--Right);
29020
29026
  }
29021
- .pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
29022
- z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
29027
+ .pf-c-table .pf-c-table__sticky-cell.pf-m-left {
29028
+ --pf-c-table__sticky-cell--Left: var(--pf-c-table__sticky-cell--m-left--Left);
29023
29029
  }
29024
29030
 
29025
29031
  .pf-c-scroll-outer-wrapper {