@patternfly/react-table 4.48.0 → 4.48.1

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.
@@ -3829,6 +3829,7 @@
3829
3829
  "action": "pf-m-action",
3830
3830
  "disabled": "pf-m-disabled",
3831
3831
  "plain": "pf-m-plain",
3832
+ "text": "pf-m-text",
3832
3833
  "splitButton": "pf-m-split-button",
3833
3834
  "primary": "pf-m-primary",
3834
3835
  "active": "pf-m-active",
@@ -3848,8 +3849,7 @@
3848
3849
  "alignLeftOn_2xl": "pf-m-align-left-on-2xl",
3849
3850
  "ariaDisabled": "pf-m-aria-disabled",
3850
3851
  "icon": "pf-m-icon",
3851
- "description": "pf-m-description",
3852
- "text": "pf-m-text"
3852
+ "description": "pf-m-description"
3853
3853
  }
3854
3854
  };
3855
3855
 
@@ -4762,6 +4762,12 @@
4762
4762
  "horizontal": "pf-m-horizontal",
4763
4763
  "alignRight": "pf-m-align-right",
4764
4764
  "noPaddingTop": "pf-m-no-padding-top",
4765
+ "horizontalOnXs": "pf-m-horizontal-on-xs",
4766
+ "horizontalOnSm": "pf-m-horizontal-on-sm",
4767
+ "horizontalOnMd": "pf-m-horizontal-on-md",
4768
+ "horizontalOnLg": "pf-m-horizontal-on-lg",
4769
+ "horizontalOnXl": "pf-m-horizontal-on-xl",
4770
+ "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
4765
4771
  "limitWidth": "pf-m-limit-width",
4766
4772
  "action": "pf-m-action",
4767
4773
  "info": "pf-m-info",
@@ -526,10 +526,16 @@
526
526
  }
527
527
 
528
528
  .pf-c-table thead.pf-m-nested-column-header th,
529
- .pf-c-table thead.pf-m-nested-column-header td {
529
+ .pf-c-table thead.pf-m-nested-column-header td,
530
+ .pf-c-table thead.pf-m-nested-column-header input {
530
531
  vertical-align: middle;
531
532
  }
532
533
 
534
+ .pf-c-table thead.pf-m-nested-column-header .pf-c-table__check label {
535
+ display: flex;
536
+ align-items: center;
537
+ }
538
+
533
539
  .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) th:not([rowspan]),
534
540
  .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) td:not([rowspan]) {
535
541
  --pf-c-table--cell--PaddingTop: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingTop);
@@ -569,7 +575,7 @@
569
575
  border-left: var(--pf-c-table__expandable-row--after--BorderLeftWidth) solid var(--pf-c-table__expandable-row--after--BorderColor);
570
576
  }
571
577
 
572
- .pf-c-table tbody .pf-c-table__check > input {
578
+ .pf-c-table tbody .pf-c-table__check input {
573
579
  margin-top: var(--pf-c-table__check--input--MarginTop);
574
580
  vertical-align: top;
575
581
  }
@@ -905,10 +911,17 @@
905
911
  --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
906
912
  }
907
913
 
908
- .pf-c-table__check > input:not([disabled]) {
914
+ .pf-c-table__check label:not([disabled]),
915
+ .pf-c-table__check input:not([disabled]) {
909
916
  cursor: pointer;
910
917
  }
911
918
 
919
+ .pf-c-table__check label {
920
+ display: block;
921
+ padding: inherit;
922
+ margin: calc(var(--pf-c-table--cell--PaddingTop) * -1) calc(var(--pf-c-table--cell--PaddingRight) * -1) calc(var(--pf-c-table--cell--PaddingBottom) * -1) calc(var(--pf-c-table--cell--PaddingLeft) * -1);
923
+ }
924
+
912
925
  .pf-c-table__favorite .pf-c-button {
913
926
  --pf-c-button--m-plain--Color: var(--pf-c-table__favorite--c-button--Color);
914
927
  --pf-c-button--FontSize: var(--pf-c-table__favorite--c-button--FontSize);
@@ -4319,7 +4332,7 @@
4319
4332
  text-align: right;
4320
4333
  }
4321
4334
 
4322
- @media (min-width: 768px) {
4335
+ @media screen and (min-width: 768px) {
4323
4336
  .pf-c-form.pf-m-horizontal {
4324
4337
  --pf-c-form__group-label--PaddingBottom: 0;
4325
4338
  }
@@ -4343,6 +4356,150 @@
4343
4356
  grid-column: 2;
4344
4357
  }
4345
4358
  }
4359
+ @media screen and (min-width: 0) {
4360
+ .pf-c-form.pf-m-horizontal-on-xs {
4361
+ --pf-c-form__group-label--PaddingBottom: 0;
4362
+ }
4363
+
4364
+ .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group {
4365
+ display: grid;
4366
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
4367
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
4368
+ }
4369
+
4370
+ .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label {
4371
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
4372
+ }
4373
+
4374
+ .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label.pf-m-no-padding-top {
4375
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
4376
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
4377
+ }
4378
+
4379
+ .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-control {
4380
+ grid-column: 2;
4381
+ }
4382
+ }
4383
+ @media (min-width: 576px) {
4384
+ .pf-c-form.pf-m-horizontal-on-sm {
4385
+ --pf-c-form__group-label--PaddingBottom: 0;
4386
+ }
4387
+
4388
+ .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group {
4389
+ display: grid;
4390
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
4391
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
4392
+ }
4393
+
4394
+ .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label {
4395
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
4396
+ }
4397
+
4398
+ .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label.pf-m-no-padding-top {
4399
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
4400
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
4401
+ }
4402
+
4403
+ .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-control {
4404
+ grid-column: 2;
4405
+ }
4406
+ }
4407
+ @media (min-width: 768px) {
4408
+ .pf-c-form.pf-m-horizontal-on-md {
4409
+ --pf-c-form__group-label--PaddingBottom: 0;
4410
+ }
4411
+
4412
+ .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group {
4413
+ display: grid;
4414
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
4415
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
4416
+ }
4417
+
4418
+ .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label {
4419
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
4420
+ }
4421
+
4422
+ .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label.pf-m-no-padding-top {
4423
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
4424
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
4425
+ }
4426
+
4427
+ .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-control {
4428
+ grid-column: 2;
4429
+ }
4430
+ }
4431
+ @media (min-width: 992px) {
4432
+ .pf-c-form.pf-m-horizontal-on-lg {
4433
+ --pf-c-form__group-label--PaddingBottom: 0;
4434
+ }
4435
+
4436
+ .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group {
4437
+ display: grid;
4438
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
4439
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
4440
+ }
4441
+
4442
+ .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label {
4443
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
4444
+ }
4445
+
4446
+ .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label.pf-m-no-padding-top {
4447
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
4448
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
4449
+ }
4450
+
4451
+ .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-control {
4452
+ grid-column: 2;
4453
+ }
4454
+ }
4455
+ @media (min-width: 1200px) {
4456
+ .pf-c-form.pf-m-horizontal-on-xl {
4457
+ --pf-c-form__group-label--PaddingBottom: 0;
4458
+ }
4459
+
4460
+ .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group {
4461
+ display: grid;
4462
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
4463
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
4464
+ }
4465
+
4466
+ .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label {
4467
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
4468
+ }
4469
+
4470
+ .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label.pf-m-no-padding-top {
4471
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
4472
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
4473
+ }
4474
+
4475
+ .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-control {
4476
+ grid-column: 2;
4477
+ }
4478
+ }
4479
+ @media (min-width: 1450px) {
4480
+ .pf-c-form.pf-m-horizontal-on-2xl {
4481
+ --pf-c-form__group-label--PaddingBottom: 0;
4482
+ }
4483
+
4484
+ .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group {
4485
+ display: grid;
4486
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
4487
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
4488
+ }
4489
+
4490
+ .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label {
4491
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
4492
+ }
4493
+
4494
+ .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label.pf-m-no-padding-top {
4495
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
4496
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
4497
+ }
4498
+
4499
+ .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-control {
4500
+ grid-column: 2;
4501
+ }
4502
+ }
4346
4503
  .pf-c-form.pf-m-limit-width {
4347
4504
  max-width: var(--pf-c-form--m-limit-width--MaxWidth);
4348
4505
  }
@@ -5523,14 +5680,15 @@ label.pf-c-check, .pf-c-check__label,
5523
5680
  }
5524
5681
 
5525
5682
  .pf-c-dropdown__toggle.pf-m-disabled, .pf-c-dropdown__toggle:disabled {
5683
+ --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
5526
5684
  pointer-events: none;
5527
5685
  }
5528
5686
 
5529
- .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled:not(.pf-m-plain) {
5687
+ .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text {
5530
5688
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--disabled--BackgroundColor);
5531
5689
  }
5532
5690
 
5533
- .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before {
5691
+ .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text::before {
5534
5692
  border: 0;
5535
5693
  }
5536
5694
 
@@ -5538,13 +5696,16 @@ label.pf-c-check, .pf-c-check__label,
5538
5696
  padding: 0;
5539
5697
  }
5540
5698
 
5699
+ .pf-c-dropdown__toggle.pf-m-split-button:not(.pf-m-disabled) {
5700
+ background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
5701
+ }
5702
+
5541
5703
  .pf-c-dropdown__toggle.pf-m-split-button > * {
5542
5704
  position: relative;
5543
5705
  padding-top: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingTop);
5544
5706
  padding-right: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingRight);
5545
5707
  padding-bottom: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingBottom);
5546
5708
  padding-left: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingLeft);
5547
- background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
5548
5709
  }
5549
5710
 
5550
5711
  .pf-c-dropdown__toggle.pf-m-split-button > *:first-child {
@@ -5576,6 +5737,10 @@ label.pf-c-check, .pf-c-check__label,
5576
5737
  border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
5577
5738
  }
5578
5739
 
5740
+ .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary[disabled] {
5741
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: 0;
5742
+ }
5743
+
5579
5744
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
5580
5745
  display: flex;
5581
5746
  align-items: center;
@@ -5648,14 +5813,14 @@ label.pf-c-check, .pf-c-check__label,
5648
5813
  border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
5649
5814
  }
5650
5815
 
5651
- .pf-c-dropdown__toggle.pf-m-plain {
5816
+ .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) {
5652
5817
  --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
5653
5818
  --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);
5654
5819
  display: inline-block;
5655
5820
  color: var(--pf-c-dropdown__toggle--m-plain--Color);
5656
5821
  }
5657
5822
 
5658
- .pf-c-dropdown__toggle.pf-m-plain > * {
5823
+ .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) > * {
5659
5824
  line-height: var(--pf-c-dropdown__toggle--m-plain--child--LineHeight);
5660
5825
  }
5661
5826
 
@@ -5672,13 +5837,13 @@ label.pf-c-check, .pf-c-check__label,
5672
5837
  }
5673
5838
 
5674
5839
  .pf-c-dropdown__toggle.pf-m-primary {
5675
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
5676
- --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
5677
5840
  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
5678
5841
  }
5679
5842
 
5680
- .pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled) {
5843
+ .pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled):not([disabled]) {
5681
5844
  --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
5845
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
5846
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
5682
5847
  }
5683
5848
 
5684
5849
  .pf-c-dropdown__toggle.pf-m-primary::before {
@@ -5697,17 +5862,20 @@ label.pf-c-check, .pf-c-check__label,
5697
5862
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
5698
5863
  }
5699
5864
 
5700
- .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
5865
+ .pf-c-dropdown__toggle.pf-m-primary .pf-m-expanded > :not(.pf-m-disabled):not([disabled]) {
5701
5866
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
5702
5867
  }
5703
5868
 
5704
5869
  .pf-c-dropdown__toggle.pf-m-secondary {
5870
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
5871
+ }
5872
+
5873
+ .pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled]) {
5705
5874
  --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
5706
5875
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
5707
- border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
5708
5876
  }
5709
5877
 
5710
- .pf-c-dropdown__toggle.pf-m-secondary::before {
5878
+ .pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled])::before {
5711
5879
  border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
5712
5880
  border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
5713
5881
  }
@@ -10876,6 +11044,22 @@ button.pf-c-breadcrumb__link {
10876
11044
  --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
10877
11045
  }
10878
11046
 
11047
+ .pf-c-description-list.pf-m-fill-columns {
11048
+ display: block;
11049
+ column-count: var(--pf-c-description-list--GridTemplateColumns--count);
11050
+ margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
11051
+ }
11052
+
11053
+ .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group {
11054
+ display: inline-grid;
11055
+ width: 100%;
11056
+ margin-bottom: var(--pf-c-description-list--RowGap);
11057
+ break-inside: avoid;
11058
+ page-break-inside: avoid;
11059
+ -webkit-column-break-inside: avoid;
11060
+ -moz-column-break-inside: avoid;
11061
+ }
11062
+
10879
11063
  .pf-c-description-list__group {
10880
11064
  display: grid;
10881
11065
  grid-column: var(--pf-c-description-list__group--GridColumn);