@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/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.27",
4
+ "version": "5.0.0-alpha.29",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -23007,6 +23007,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23007
23007
  --pf-c-popover__title-text--FontSize: var(--pf-global--FontSize--md);
23008
23008
  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
23009
23009
  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
23010
+ --pf-c-popover__title-icon--FontSize: var(--pf-global--FontSize--md);
23010
23011
  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
23011
23012
  position: relative;
23012
23013
  min-width: var(--pf-c-popover--MinWidth);
@@ -23114,6 +23115,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23114
23115
 
23115
23116
  .pf-c-popover__title-icon {
23116
23117
  margin-right: var(--pf-c-popover__title-icon--MarginRight);
23118
+ font-size: var(--pf-c-popover__title-icon--FontSize);
23117
23119
  color: var(--pf-c-popover__title-icon--Color);
23118
23120
  }
23119
23121
 
@@ -28014,6 +28016,7 @@ svg.pf-c-spinner.pf-m-xl {
28014
28016
  --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs);
28015
28017
  --pf-c-table__subhead--Color: var(--pf-global--Color--200);
28016
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);
28017
28020
  color: var(--pf-global--Color--100);
28018
28021
  width: 100%;
28019
28022
  background-color: var(--pf-c-table--BackgroundColor);
@@ -28042,7 +28045,7 @@ svg.pf-c-spinner.pf-m-xl {
28042
28045
  border-bottom: 0;
28043
28046
  }
28044
28047
  .pf-c-table.pf-m-sticky-header > thead > tr > * {
28045
- z-index: var(--pf-global--ZIndex--xs);
28048
+ z-index: var(--pf-c-table--m-sticky-header--cell--ZIndex);
28046
28049
  }
28047
28050
  .pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > * {
28048
28051
  position: sticky;
@@ -28862,39 +28865,44 @@ svg.pf-c-spinner.pf-m-xl {
28862
28865
  }
28863
28866
 
28864
28867
  .pf-c-table {
28865
- --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
28866
- --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
28867
- --pf-c-table__sticky-column--Left: 0;
28868
- --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
28869
- --pf-c-table__sticky-column--Top: 0;
28870
- --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
28871
- --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
28872
- --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
28873
- --pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
28874
- --pf-c-table__sticky-column--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
28875
- --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
28876
- }
28877
- .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);
28878
28885
  position: sticky;
28879
- left: var(--pf-c-table__sticky-column--Left);
28880
- z-index: var(--pf-c-table__sticky-column--ZIndex);
28881
- min-width: var(--pf-c-table__sticky-column--MinWidth);
28882
- 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);
28883
28891
  background-clip: padding-box;
28884
28892
  }
28885
- .pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
28886
- --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth);
28887
- --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);
28888
28896
  }
28889
- .pf-c-table .pf-c-table__sticky-column.pf-m-border-left::before {
28890
- --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth);
28891
- --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);
28892
28900
  }
28893
- .pf-c-table.pf-m-sticky-header {
28894
- --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);
28895
28903
  }
28896
- .pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
28897
- 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);
28898
28906
  }
28899
28907
 
28900
28908
  .pf-c-scroll-outer-wrapper {
package/patternfly.css CHANGED
@@ -23130,6 +23130,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23130
23130
  --pf-c-popover__title-text--FontSize: var(--pf-global--FontSize--md);
23131
23131
  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
23132
23132
  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
23133
+ --pf-c-popover__title-icon--FontSize: var(--pf-global--FontSize--md);
23133
23134
  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
23134
23135
  position: relative;
23135
23136
  min-width: var(--pf-c-popover--MinWidth);
@@ -23237,6 +23238,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23237
23238
 
23238
23239
  .pf-c-popover__title-icon {
23239
23240
  margin-right: var(--pf-c-popover__title-icon--MarginRight);
23241
+ font-size: var(--pf-c-popover__title-icon--FontSize);
23240
23242
  color: var(--pf-c-popover__title-icon--Color);
23241
23243
  }
23242
23244
 
@@ -28137,6 +28139,7 @@ svg.pf-c-spinner.pf-m-xl {
28137
28139
  --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs);
28138
28140
  --pf-c-table__subhead--Color: var(--pf-global--Color--200);
28139
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);
28140
28143
  color: var(--pf-global--Color--100);
28141
28144
  width: 100%;
28142
28145
  background-color: var(--pf-c-table--BackgroundColor);
@@ -28165,7 +28168,7 @@ svg.pf-c-spinner.pf-m-xl {
28165
28168
  border-bottom: 0;
28166
28169
  }
28167
28170
  .pf-c-table.pf-m-sticky-header > thead > tr > * {
28168
- z-index: var(--pf-global--ZIndex--xs);
28171
+ z-index: var(--pf-c-table--m-sticky-header--cell--ZIndex);
28169
28172
  }
28170
28173
  .pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > * {
28171
28174
  position: sticky;
@@ -28985,39 +28988,44 @@ svg.pf-c-spinner.pf-m-xl {
28985
28988
  }
28986
28989
 
28987
28990
  .pf-c-table {
28988
- --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
28989
- --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
28990
- --pf-c-table__sticky-column--Left: 0;
28991
- --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
28992
- --pf-c-table__sticky-column--Top: 0;
28993
- --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
28994
- --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
28995
- --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
28996
- --pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
28997
- --pf-c-table__sticky-column--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
28998
- --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
28999
- }
29000
- .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);
29001
29008
  position: sticky;
29002
- left: var(--pf-c-table__sticky-column--Left);
29003
- z-index: var(--pf-c-table__sticky-column--ZIndex);
29004
- min-width: var(--pf-c-table__sticky-column--MinWidth);
29005
- 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);
29006
29014
  background-clip: padding-box;
29007
29015
  }
29008
- .pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
29009
- --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth);
29010
- --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);
29011
29019
  }
29012
- .pf-c-table .pf-c-table__sticky-column.pf-m-border-left::before {
29013
- --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth);
29014
- --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);
29015
29023
  }
29016
- .pf-c-table.pf-m-sticky-header {
29017
- --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);
29018
29026
  }
29019
- .pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
29020
- 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);
29021
29029
  }
29022
29030
 
29023
29031
  .pf-c-scroll-outer-wrapper {