@patternfly/patternfly 6.5.0-prerelease.39 → 6.5.0-prerelease.40

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 (14) hide show
  1. package/base/patternfly-common.css +4 -0
  2. package/base/patternfly-common.scss +3 -0
  3. package/components/Table/table-grid.css +28 -36
  4. package/components/Table/table-grid.scss +4 -4
  5. package/components/_index.css +28 -36
  6. package/docs/components/Table/examples/Table.md +1 -0
  7. package/docs/demos/Table/examples/Table.md +1847 -0
  8. package/package.json +1 -1
  9. package/patternfly-base-no-globals.css +4 -0
  10. package/patternfly-base.css +4 -0
  11. package/patternfly-no-globals.css +32 -36
  12. package/patternfly.css +32 -36
  13. package/patternfly.min.css +1 -1
  14. 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": "6.5.0-prerelease.39",
4
+ "version": "6.5.0-prerelease.40",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals.css CHANGED
@@ -107,6 +107,10 @@
107
107
  --pf-v6-global--thinking-active--Animation--Duration: 2s;
108
108
  }
109
109
  }
110
+ :root {
111
+ container-type: inline-size;
112
+ container-name: pf-v6-contain-viewport pf-v6-contain-table;
113
+ }
110
114
 
111
115
  @property --pf-v6-global--danger-jiggle--TranslateX {
112
116
  syntax: "<length>";
package/patternfly-base.css CHANGED
@@ -254,6 +254,10 @@ button) {
254
254
  --pf-v6-global--thinking-active--Animation--Duration: 2s;
255
255
  }
256
256
  }
257
+ :root {
258
+ container-type: inline-size;
259
+ container-name: pf-v6-contain-viewport pf-v6-contain-table;
260
+ }
257
261
 
258
262
  @property --pf-v6-global--danger-jiggle--TranslateX {
259
263
  syntax: "<length>";
package/patternfly-no-globals.css CHANGED
@@ -107,6 +107,10 @@
107
107
  --pf-v6-global--thinking-active--Animation--Duration: 2s;
108
108
  }
109
109
  }
110
+ :root {
111
+ container-type: inline-size;
112
+ container-name: pf-v6-contain-viewport pf-v6-contain-table;
113
+ }
110
114
 
111
115
  @property --pf-v6-global--danger-jiggle--TranslateX {
112
116
  syntax: "<length>";
@@ -26158,7 +26162,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
26158
26162
  --pf-v6-c-table--cell--Width: auto;
26159
26163
  }
26160
26164
 
26161
- @media screen and (max-width: calc(48rem - 1px)) {
26165
+ @container pf-v6-contain-table (max-width: 48rem) {
26162
26166
  .pf-m-grid-md.pf-v6-c-table {
26163
26167
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
26164
26168
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -26436,15 +26440,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
26436
26440
  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
26437
26441
  text-align: end;
26438
26442
  }
26439
- }
26440
- @media screen and (max-width: calc(48rem - 1px)) and (max-width: 36rem) {
26441
- .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
26442
- grid-row-start: 1;
26443
- grid-column-start: 2;
26444
- margin-inline-start: 0;
26443
+ @media screen and (max-width: 36rem) {
26444
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
26445
+ grid-row-start: 1;
26446
+ grid-column-start: 2;
26447
+ margin-inline-start: 0;
26448
+ }
26445
26449
  }
26446
- }
26447
- @media screen and (max-width: calc(48rem - 1px)) {
26448
26450
  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
26449
26451
  grid-column: 2;
26450
26452
  grid-row: 2;
@@ -26470,7 +26472,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
26470
26472
  }
26471
26473
  }
26472
26474
 
26473
- @media screen and (max-width: calc(62rem - 1px)) {
26475
+ @container pf-v6-contain-table (max-width: 62rem) {
26474
26476
  .pf-m-grid-lg.pf-v6-c-table {
26475
26477
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
26476
26478
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -26748,15 +26750,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
26748
26750
  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
26749
26751
  text-align: end;
26750
26752
  }
26751
- }
26752
- @media screen and (max-width: calc(62rem - 1px)) and (max-width: 36rem) {
26753
- .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
26754
- grid-row-start: 1;
26755
- grid-column-start: 2;
26756
- margin-inline-start: 0;
26753
+ @media screen and (max-width: 36rem) {
26754
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
26755
+ grid-row-start: 1;
26756
+ grid-column-start: 2;
26757
+ margin-inline-start: 0;
26758
+ }
26757
26759
  }
26758
- }
26759
- @media screen and (max-width: calc(62rem - 1px)) {
26760
26760
  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
26761
26761
  grid-column: 2;
26762
26762
  grid-row: 2;
@@ -26782,7 +26782,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
26782
26782
  }
26783
26783
  }
26784
26784
 
26785
- @media screen and (max-width: calc(75rem - 1px)) {
26785
+ @container pf-v6-contain-table (max-width: 75rem) {
26786
26786
  .pf-m-grid-xl.pf-v6-c-table {
26787
26787
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
26788
26788
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -27060,15 +27060,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
27060
27060
  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
27061
27061
  text-align: end;
27062
27062
  }
27063
- }
27064
- @media screen and (max-width: calc(75rem - 1px)) and (max-width: 36rem) {
27065
- .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
27066
- grid-row-start: 1;
27067
- grid-column-start: 2;
27068
- margin-inline-start: 0;
27063
+ @media screen and (max-width: 36rem) {
27064
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
27065
+ grid-row-start: 1;
27066
+ grid-column-start: 2;
27067
+ margin-inline-start: 0;
27068
+ }
27069
27069
  }
27070
- }
27071
- @media screen and (max-width: calc(75rem - 1px)) {
27072
27070
  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
27073
27071
  grid-column: 2;
27074
27072
  grid-row: 2;
@@ -27094,7 +27092,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
27094
27092
  }
27095
27093
  }
27096
27094
 
27097
- @media screen and (max-width: calc(90.625rem - 1px)) {
27095
+ @container pf-v6-contain-table (max-width: 90.625rem) {
27098
27096
  .pf-m-grid-2xl.pf-v6-c-table {
27099
27097
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
27100
27098
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -27372,15 +27370,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
27372
27370
  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
27373
27371
  text-align: end;
27374
27372
  }
27375
- }
27376
- @media screen and (max-width: calc(90.625rem - 1px)) and (max-width: 36rem) {
27377
- .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
27378
- grid-row-start: 1;
27379
- grid-column-start: 2;
27380
- margin-inline-start: 0;
27373
+ @media screen and (max-width: 36rem) {
27374
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
27375
+ grid-row-start: 1;
27376
+ grid-column-start: 2;
27377
+ margin-inline-start: 0;
27378
+ }
27381
27379
  }
27382
- }
27383
- @media screen and (max-width: calc(90.625rem - 1px)) {
27384
27380
  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
27385
27381
  grid-column: 2;
27386
27382
  grid-row: 2;
package/patternfly.css CHANGED
@@ -254,6 +254,10 @@ button) {
254
254
  --pf-v6-global--thinking-active--Animation--Duration: 2s;
255
255
  }
256
256
  }
257
+ :root {
258
+ container-type: inline-size;
259
+ container-name: pf-v6-contain-viewport pf-v6-contain-table;
260
+ }
257
261
 
258
262
  @property --pf-v6-global--danger-jiggle--TranslateX {
259
263
  syntax: "<length>";
@@ -26305,7 +26309,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
26305
26309
  --pf-v6-c-table--cell--Width: auto;
26306
26310
  }
26307
26311
 
26308
- @media screen and (max-width: calc(48rem - 1px)) {
26312
+ @container pf-v6-contain-table (max-width: 48rem) {
26309
26313
  .pf-m-grid-md.pf-v6-c-table {
26310
26314
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
26311
26315
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -26583,15 +26587,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
26583
26587
  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
26584
26588
  text-align: end;
26585
26589
  }
26586
- }
26587
- @media screen and (max-width: calc(48rem - 1px)) and (max-width: 36rem) {
26588
- .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
26589
- grid-row-start: 1;
26590
- grid-column-start: 2;
26591
- margin-inline-start: 0;
26590
+ @media screen and (max-width: 36rem) {
26591
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
26592
+ grid-row-start: 1;
26593
+ grid-column-start: 2;
26594
+ margin-inline-start: 0;
26595
+ }
26592
26596
  }
26593
- }
26594
- @media screen and (max-width: calc(48rem - 1px)) {
26595
26597
  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
26596
26598
  grid-column: 2;
26597
26599
  grid-row: 2;
@@ -26617,7 +26619,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
26617
26619
  }
26618
26620
  }
26619
26621
 
26620
- @media screen and (max-width: calc(62rem - 1px)) {
26622
+ @container pf-v6-contain-table (max-width: 62rem) {
26621
26623
  .pf-m-grid-lg.pf-v6-c-table {
26622
26624
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
26623
26625
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -26895,15 +26897,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
26895
26897
  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
26896
26898
  text-align: end;
26897
26899
  }
26898
- }
26899
- @media screen and (max-width: calc(62rem - 1px)) and (max-width: 36rem) {
26900
- .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
26901
- grid-row-start: 1;
26902
- grid-column-start: 2;
26903
- margin-inline-start: 0;
26900
+ @media screen and (max-width: 36rem) {
26901
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
26902
+ grid-row-start: 1;
26903
+ grid-column-start: 2;
26904
+ margin-inline-start: 0;
26905
+ }
26904
26906
  }
26905
- }
26906
- @media screen and (max-width: calc(62rem - 1px)) {
26907
26907
  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
26908
26908
  grid-column: 2;
26909
26909
  grid-row: 2;
@@ -26929,7 +26929,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
26929
26929
  }
26930
26930
  }
26931
26931
 
26932
- @media screen and (max-width: calc(75rem - 1px)) {
26932
+ @container pf-v6-contain-table (max-width: 75rem) {
26933
26933
  .pf-m-grid-xl.pf-v6-c-table {
26934
26934
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
26935
26935
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -27207,15 +27207,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
27207
27207
  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
27208
27208
  text-align: end;
27209
27209
  }
27210
- }
27211
- @media screen and (max-width: calc(75rem - 1px)) and (max-width: 36rem) {
27212
- .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
27213
- grid-row-start: 1;
27214
- grid-column-start: 2;
27215
- margin-inline-start: 0;
27210
+ @media screen and (max-width: 36rem) {
27211
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
27212
+ grid-row-start: 1;
27213
+ grid-column-start: 2;
27214
+ margin-inline-start: 0;
27215
+ }
27216
27216
  }
27217
- }
27218
- @media screen and (max-width: calc(75rem - 1px)) {
27219
27217
  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
27220
27218
  grid-column: 2;
27221
27219
  grid-row: 2;
@@ -27241,7 +27239,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
27241
27239
  }
27242
27240
  }
27243
27241
 
27244
- @media screen and (max-width: calc(90.625rem - 1px)) {
27242
+ @container pf-v6-contain-table (max-width: 90.625rem) {
27245
27243
  .pf-m-grid-2xl.pf-v6-c-table {
27246
27244
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
27247
27245
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -27519,15 +27517,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
27519
27517
  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
27520
27518
  text-align: end;
27521
27519
  }
27522
- }
27523
- @media screen and (max-width: calc(90.625rem - 1px)) and (max-width: 36rem) {
27524
- .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
27525
- grid-row-start: 1;
27526
- grid-column-start: 2;
27527
- margin-inline-start: 0;
27520
+ @media screen and (max-width: 36rem) {
27521
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
27522
+ grid-row-start: 1;
27523
+ grid-column-start: 2;
27524
+ margin-inline-start: 0;
27525
+ }
27528
27526
  }
27529
- }
27530
- @media screen and (max-width: calc(90.625rem - 1px)) {
27531
27527
  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
27532
27528
  grid-column: 2;
27533
27529
  grid-row: 2;