@patternfly/patternfly 6.0.0-alpha.151 → 6.0.0-alpha.153

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 (31) hide show
  1. package/components/Alert/alert-group.css +2 -1
  2. package/components/Alert/alert-group.scss +3 -1
  3. package/components/Brand/brand.css +4 -1
  4. package/components/Brand/brand.scss +3 -1
  5. package/components/Button/button.scss +1 -1
  6. package/components/CalendarMonth/calendar-month.css +1 -1
  7. package/components/CalendarMonth/calendar-month.scss +1 -2
  8. package/components/Card/card.scss +0 -1
  9. package/components/DataList/data-list.scss +0 -1
  10. package/components/FormControl/form-control.scss +0 -1
  11. package/components/HelperText/helper-text.scss +1 -0
  12. package/components/InlineEdit/inline-edit.scss +1 -1
  13. package/components/List/list.css +4 -1
  14. package/components/List/list.scss +3 -1
  15. package/components/LogViewer/log-viewer.css +4 -1
  16. package/components/LogViewer/log-viewer.scss +3 -1
  17. package/components/Page/page.scss +1 -2
  18. package/components/Popover/popover.css +4 -1
  19. package/components/Popover/popover.scss +3 -1
  20. package/components/Table/table-grid.css +1 -1
  21. package/components/Table/table-grid.scss +1 -1
  22. package/components/Table/table.css +10 -3
  23. package/components/Table/table.scss +13 -4
  24. package/components/Wizard/wizard.scss +3 -3
  25. package/components/_index.css +30 -10
  26. package/docs/components/Table/examples/Table.md +22 -10
  27. package/package.json +1 -1
  28. package/patternfly-no-globals.css +30 -10
  29. package/patternfly.css +30 -10
  30. package/patternfly.min.css +1 -1
  31. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -6602,7 +6602,7 @@
6602
6602
  margin-inline-end: var(--pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd);
6603
6603
  }
6604
6604
 
6605
- .pf-v6-c-alert-group {
6605
+ :where(:root, .pf-v6-c-alert-group) {
6606
6606
  --pf-v6-c-alert-group__item--MarginBlockStart: var(--pf-t--global--spacer--md);
6607
6607
  --pf-v6-c-alert-group--m-toast--InsetBlockStart: var(--pf-t--global--spacer--2xl);
6608
6608
  --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
@@ -6625,6 +6625,7 @@
6625
6625
  --pf-v6-c-alert-group__overflow-button--active--Color: var(--pf-t--global--text--color--link--hover);
6626
6626
  --pf-v6-c-alert-group__overflow-button--active--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
6627
6627
  }
6628
+
6628
6629
  .pf-v6-c-alert-group > * + * {
6629
6630
  margin-block-start: var(--pf-v6-c-alert-group__item--MarginBlockStart);
6630
6631
  }
@@ -7207,9 +7208,12 @@
7207
7208
  cursor: not-allowed;
7208
7209
  }
7209
7210
 
7210
- .pf-v6-c-brand {
7211
+ :where(:root, .pf-v6-c-brand) {
7211
7212
  --pf-v6-c-brand--Width: auto;
7212
7213
  --pf-v6-c-brand--Height: auto;
7214
+ }
7215
+
7216
+ .pf-v6-c-brand {
7213
7217
  width: var(--pf-v6-c-brand--Width--base);
7214
7218
  height: var(--pf-v6-c-brand--Height--base);
7215
7219
  --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width);
@@ -7998,7 +8002,7 @@ button.pf-v6-c-breadcrumb__link {
7998
8002
  --pf-v6-c-calendar-month__date--after--focus--OutlineOffset: -2px;
7999
8003
  }
8000
8004
 
8001
- :where(.pf-v6-c-calendar-month) {
8005
+ .pf-v6-c-calendar-month {
8002
8006
  display: inline-flex;
8003
8007
  flex-direction: column;
8004
8008
  padding-block-start: var(--pf-v6-c-calendar-month--PaddingBlockStart);
@@ -14442,7 +14446,7 @@ input.pf-v6-c-label__content {
14442
14446
  display: none;
14443
14447
  }
14444
14448
 
14445
- .pf-v6-c-list {
14449
+ :where(:root, .pf-v6-c-list) {
14446
14450
  --pf-v6-c-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
14447
14451
  --pf-v6-c-list--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
14448
14452
  --pf-v6-c-list--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
@@ -14460,6 +14464,9 @@ input.pf-v6-c-label__content {
14460
14464
  --pf-v6-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-t--global--icon--size--lg);
14461
14465
  --pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
14462
14466
  --pf-v6-c-list--m-icon-lg__item-icon--FontSize: var(--pf-t--global--icon--size--lg);
14467
+ }
14468
+
14469
+ .pf-v6-c-list {
14463
14470
  padding-inline-start: var(--pf-v6-c-list--PaddingInlineStart);
14464
14471
  }
14465
14472
  .pf-v6-c-list ol,
@@ -14517,7 +14524,7 @@ ul.pf-v6-c-list {
14517
14524
  --pf-v6-c-list--m-bordered--li--BorderBlockEndWidth: 0;
14518
14525
  }
14519
14526
 
14520
- .pf-v6-c-log-viewer {
14527
+ :where(:root, .pf-v6-c-log-viewer) {
14521
14528
  --pf-v6-c-log-viewer--Height: 100%;
14522
14529
  --pf-v6-c-log-viewer--MaxHeight: auto;
14523
14530
  --pf-v6-c-log-viewer--m-line-numbers__index--Display: inline;
@@ -14564,6 +14571,9 @@ ul.pf-v6-c-list {
14564
14571
  --pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--spacer: 0;
14565
14572
  --pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-t--global--spacer--sm);
14566
14573
  --pf-v6-c-log-viewer--m-dark__main--BorderWidth: 0;
14574
+ }
14575
+
14576
+ .pf-v6-c-log-viewer {
14567
14577
  display: flex;
14568
14578
  flex-direction: column;
14569
14579
  height: var(--pf-v6-c-log-viewer--Height);
@@ -18645,7 +18655,7 @@ ul.pf-v6-c-list {
18645
18655
  box-shadow: var(--pf-v6-c-panel__footer--BoxShadow);
18646
18656
  }
18647
18657
 
18648
- .pf-v6-c-popover {
18658
+ :where(:root, .pf-v6-c-popover) {
18649
18659
  --pf-v6-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
18650
18660
  --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
18651
18661
  --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
@@ -18694,6 +18704,9 @@ ul.pf-v6-c-list {
18694
18704
  --pf-v6-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular);
18695
18705
  --pf-v6-c-popover__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
18696
18706
  --pf-v6-c-popover__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
18707
+ }
18708
+
18709
+ .pf-v6-c-popover {
18697
18710
  position: relative;
18698
18711
  min-width: var(--pf-v6-c-popover--MinWidth);
18699
18712
  max-width: var(--pf-v6-c-popover--MaxWidth);
@@ -20787,7 +20800,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
20787
20800
  --pf-v6-c-tab-content__body--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineStart);
20788
20801
  }
20789
20802
 
20790
- .pf-v6-c-table[class*=pf-m-grid] {
20803
+ :where(:root, .pf-v6-c-table[class*=pf-m-grid]) {
20791
20804
  --pf-v6-c-table--responsive--BorderColor: var(--pf-t--global--border--color--default);
20792
20805
  --pf-v6-c-table__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
20793
20806
  --pf-v6-c-table__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong);
@@ -22847,6 +22860,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
22847
22860
  .pf-v6-c-table .pf-v6-c-table :is(.pf-v6-c-table__tbody, .pf-v6-c-table__tr:last-child) {
22848
22861
  border-block-end: 0;
22849
22862
  }
22863
+ .pf-v6-c-table .pf-v6-c-button .pf-v6-c-table__sort-indicator {
22864
+ --pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
22865
+ }
22850
22866
 
22851
22867
  .pf-v6-c-table__text {
22852
22868
  --pf-v6-c-table--cell--MaxWidth: 100%;
@@ -22942,14 +22958,16 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
22942
22958
  .pf-v6-c-table .pf-v6-c-table__check,
22943
22959
  .pf-v6-c-table .pf-v6-c-table__toggle,
22944
22960
  .pf-v6-c-table .pf-v6-c-table__action,
22945
- .pf-v6-c-table .pf-v6-c-table__favorite,
22946
- .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-favorite,
22947
22961
  .pf-v6-c-table .pf-v6-c-table__inline-edit-action,
22948
22962
  .pf-v6-c-table .pf-v6-c-table__draggable {
22949
22963
  --pf-v6-c-table--cell--MinWidth: 0;
22950
22964
  --pf-v6-c-table--cell--Width: 1%;
22951
22965
  }
22952
22966
 
22967
+ .pf-v6-c-table .pf-v6-c-table__favorite {
22968
+ --pf-v6-c-table--cell--MaxWidth: auto;
22969
+ }
22970
+
22953
22971
  .pf-v6-c-table__toggle {
22954
22972
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__toggle--PaddingBlockStart);
22955
22973
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__toggle--PaddingBlockEnd);
@@ -23087,8 +23105,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23087
23105
  .pf-v6-c-table__sort .pf-v6-c-table__button .pf-v6-c-table__text {
23088
23106
  color: var(--pf-v6-c-table__sort__button__text--Color);
23089
23107
  }
23090
- .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__button {
23108
+ .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__button, .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-button {
23091
23109
  --pf-v6-c-table__sort-indicator--Color: var(--pf-v6-c-table__sort--m-selected__sort-indicator--Color);
23110
+ }
23111
+ .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__button .pf-v6-c-table__text, .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-button .pf-v6-c-table__text {
23092
23112
  color: var(--pf-v6-c-table__sort--m-selected__button--Color);
23093
23113
  }
23094
23114
  .pf-v6-c-table__sort.pf-m-help {
package/patternfly.css CHANGED
@@ -6723,7 +6723,7 @@ button) {
6723
6723
  margin-inline-end: var(--pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd);
6724
6724
  }
6725
6725
 
6726
- .pf-v6-c-alert-group {
6726
+ :where(:root, .pf-v6-c-alert-group) {
6727
6727
  --pf-v6-c-alert-group__item--MarginBlockStart: var(--pf-t--global--spacer--md);
6728
6728
  --pf-v6-c-alert-group--m-toast--InsetBlockStart: var(--pf-t--global--spacer--2xl);
6729
6729
  --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
@@ -6746,6 +6746,7 @@ button) {
6746
6746
  --pf-v6-c-alert-group__overflow-button--active--Color: var(--pf-t--global--text--color--link--hover);
6747
6747
  --pf-v6-c-alert-group__overflow-button--active--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
6748
6748
  }
6749
+
6749
6750
  .pf-v6-c-alert-group > * + * {
6750
6751
  margin-block-start: var(--pf-v6-c-alert-group__item--MarginBlockStart);
6751
6752
  }
@@ -7328,9 +7329,12 @@ button) {
7328
7329
  cursor: not-allowed;
7329
7330
  }
7330
7331
 
7331
- .pf-v6-c-brand {
7332
+ :where(:root, .pf-v6-c-brand) {
7332
7333
  --pf-v6-c-brand--Width: auto;
7333
7334
  --pf-v6-c-brand--Height: auto;
7335
+ }
7336
+
7337
+ .pf-v6-c-brand {
7334
7338
  width: var(--pf-v6-c-brand--Width--base);
7335
7339
  height: var(--pf-v6-c-brand--Height--base);
7336
7340
  --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width);
@@ -8119,7 +8123,7 @@ button.pf-v6-c-breadcrumb__link {
8119
8123
  --pf-v6-c-calendar-month__date--after--focus--OutlineOffset: -2px;
8120
8124
  }
8121
8125
 
8122
- :where(.pf-v6-c-calendar-month) {
8126
+ .pf-v6-c-calendar-month {
8123
8127
  display: inline-flex;
8124
8128
  flex-direction: column;
8125
8129
  padding-block-start: var(--pf-v6-c-calendar-month--PaddingBlockStart);
@@ -14563,7 +14567,7 @@ input.pf-v6-c-label__content {
14563
14567
  display: none;
14564
14568
  }
14565
14569
 
14566
- .pf-v6-c-list {
14570
+ :where(:root, .pf-v6-c-list) {
14567
14571
  --pf-v6-c-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
14568
14572
  --pf-v6-c-list--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
14569
14573
  --pf-v6-c-list--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
@@ -14581,6 +14585,9 @@ input.pf-v6-c-label__content {
14581
14585
  --pf-v6-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-t--global--icon--size--lg);
14582
14586
  --pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
14583
14587
  --pf-v6-c-list--m-icon-lg__item-icon--FontSize: var(--pf-t--global--icon--size--lg);
14588
+ }
14589
+
14590
+ .pf-v6-c-list {
14584
14591
  padding-inline-start: var(--pf-v6-c-list--PaddingInlineStart);
14585
14592
  }
14586
14593
  .pf-v6-c-list ol,
@@ -14638,7 +14645,7 @@ ul.pf-v6-c-list {
14638
14645
  --pf-v6-c-list--m-bordered--li--BorderBlockEndWidth: 0;
14639
14646
  }
14640
14647
 
14641
- .pf-v6-c-log-viewer {
14648
+ :where(:root, .pf-v6-c-log-viewer) {
14642
14649
  --pf-v6-c-log-viewer--Height: 100%;
14643
14650
  --pf-v6-c-log-viewer--MaxHeight: auto;
14644
14651
  --pf-v6-c-log-viewer--m-line-numbers__index--Display: inline;
@@ -14685,6 +14692,9 @@ ul.pf-v6-c-list {
14685
14692
  --pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--spacer: 0;
14686
14693
  --pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-t--global--spacer--sm);
14687
14694
  --pf-v6-c-log-viewer--m-dark__main--BorderWidth: 0;
14695
+ }
14696
+
14697
+ .pf-v6-c-log-viewer {
14688
14698
  display: flex;
14689
14699
  flex-direction: column;
14690
14700
  height: var(--pf-v6-c-log-viewer--Height);
@@ -18766,7 +18776,7 @@ ul.pf-v6-c-list {
18766
18776
  box-shadow: var(--pf-v6-c-panel__footer--BoxShadow);
18767
18777
  }
18768
18778
 
18769
- .pf-v6-c-popover {
18779
+ :where(:root, .pf-v6-c-popover) {
18770
18780
  --pf-v6-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
18771
18781
  --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
18772
18782
  --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
@@ -18815,6 +18825,9 @@ ul.pf-v6-c-list {
18815
18825
  --pf-v6-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular);
18816
18826
  --pf-v6-c-popover__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
18817
18827
  --pf-v6-c-popover__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
18828
+ }
18829
+
18830
+ .pf-v6-c-popover {
18818
18831
  position: relative;
18819
18832
  min-width: var(--pf-v6-c-popover--MinWidth);
18820
18833
  max-width: var(--pf-v6-c-popover--MaxWidth);
@@ -20908,7 +20921,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
20908
20921
  --pf-v6-c-tab-content__body--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineStart);
20909
20922
  }
20910
20923
 
20911
- .pf-v6-c-table[class*=pf-m-grid] {
20924
+ :where(:root, .pf-v6-c-table[class*=pf-m-grid]) {
20912
20925
  --pf-v6-c-table--responsive--BorderColor: var(--pf-t--global--border--color--default);
20913
20926
  --pf-v6-c-table__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
20914
20927
  --pf-v6-c-table__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong);
@@ -22968,6 +22981,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
22968
22981
  .pf-v6-c-table .pf-v6-c-table :is(.pf-v6-c-table__tbody, .pf-v6-c-table__tr:last-child) {
22969
22982
  border-block-end: 0;
22970
22983
  }
22984
+ .pf-v6-c-table .pf-v6-c-button .pf-v6-c-table__sort-indicator {
22985
+ --pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
22986
+ }
22971
22987
 
22972
22988
  .pf-v6-c-table__text {
22973
22989
  --pf-v6-c-table--cell--MaxWidth: 100%;
@@ -23063,14 +23079,16 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
23063
23079
  .pf-v6-c-table .pf-v6-c-table__check,
23064
23080
  .pf-v6-c-table .pf-v6-c-table__toggle,
23065
23081
  .pf-v6-c-table .pf-v6-c-table__action,
23066
- .pf-v6-c-table .pf-v6-c-table__favorite,
23067
- .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-favorite,
23068
23082
  .pf-v6-c-table .pf-v6-c-table__inline-edit-action,
23069
23083
  .pf-v6-c-table .pf-v6-c-table__draggable {
23070
23084
  --pf-v6-c-table--cell--MinWidth: 0;
23071
23085
  --pf-v6-c-table--cell--Width: 1%;
23072
23086
  }
23073
23087
 
23088
+ .pf-v6-c-table .pf-v6-c-table__favorite {
23089
+ --pf-v6-c-table--cell--MaxWidth: auto;
23090
+ }
23091
+
23074
23092
  .pf-v6-c-table__toggle {
23075
23093
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__toggle--PaddingBlockStart);
23076
23094
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__toggle--PaddingBlockEnd);
@@ -23208,8 +23226,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23208
23226
  .pf-v6-c-table__sort .pf-v6-c-table__button .pf-v6-c-table__text {
23209
23227
  color: var(--pf-v6-c-table__sort__button__text--Color);
23210
23228
  }
23211
- .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__button {
23229
+ .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__button, .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-button {
23212
23230
  --pf-v6-c-table__sort-indicator--Color: var(--pf-v6-c-table__sort--m-selected__sort-indicator--Color);
23231
+ }
23232
+ .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__button .pf-v6-c-table__text, .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-button .pf-v6-c-table__text {
23213
23233
  color: var(--pf-v6-c-table__sort--m-selected__button--Color);
23214
23234
  }
23215
23235
  .pf-v6-c-table__sort.pf-m-help {