@patternfly/react-core 4.232.5 → 4.232.6

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 4.232.6 (2022-08-17)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-core
9
+
10
+
11
+
12
+
13
+
6
14
  ## 4.232.5 (2022-08-17)
7
15
 
8
16
 
@@ -10753,6 +10753,92 @@ button.pf-c-label__content:focus {
10753
10753
  display: none;
10754
10754
  }
10755
10755
 
10756
+ .pf-c-list {
10757
+ --pf-c-list--PaddingLeft: var(--pf-global--spacer--lg);
10758
+ --pf-c-list--nested--MarginTop: var(--pf-global--spacer--sm);
10759
+ --pf-c-list--nested--MarginLeft: var(--pf-global--spacer--sm);
10760
+ --pf-c-list--ul--ListStyle: var(--pf-global--ListStyle);
10761
+ --pf-c-list--li--MarginTop: var(--pf-global--spacer--sm);
10762
+ --pf-c-list--m-inline--li--MarginRight: var(--pf-global--spacer--lg);
10763
+ --pf-c-list--m-bordered--li--PaddingBottom: var(--pf-global--spacer--sm);
10764
+ --pf-c-list--m-bordered--li--BorderBottomColor: var(--pf-global--BorderColor--100);
10765
+ --pf-c-list--m-bordered--li--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
10766
+ --pf-c-list__item-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
10767
+ --pf-c-list__item-icon--MarginTop: 0.375rem;
10768
+ --pf-c-list__item-icon--MarginRight: var(--pf-global--spacer--sm);
10769
+ --pf-c-list__item-icon--Color: var(--pf-global--icon--Color--light);
10770
+ --pf-c-list__item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
10771
+ --pf-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-global--icon--FontSize--lg);
10772
+ --pf-c-list--m-icon-lg__item-icon--MarginRight: var(--pf-global--spacer--md);
10773
+ --pf-c-list--m-icon-lg__item-icon--FontSize: var(--pf-global--icon--FontSize--lg);
10774
+ padding-left: var(--pf-c-list--PaddingLeft);
10775
+ }
10776
+
10777
+ .pf-c-list ol,
10778
+ .pf-c-list ul {
10779
+ margin-top: var(--pf-c-list--nested--MarginTop);
10780
+ margin-left: var(--pf-c-list--nested--MarginLeft);
10781
+ }
10782
+
10783
+ .pf-c-list li + li {
10784
+ margin-top: var(--pf-c-list--li--MarginTop);
10785
+ }
10786
+
10787
+ ul.pf-c-list {
10788
+ list-style: var(--pf-c-list--ul--ListStyle);
10789
+ }
10790
+
10791
+ .pf-c-list .pf-c-list__item {
10792
+ display: flex;
10793
+ }
10794
+
10795
+ .pf-c-list .pf-c-list__item-icon {
10796
+ flex-shrink: 0;
10797
+ min-width: var(--pf-c-list__item-icon--MinWidth);
10798
+ margin-top: var(--pf-c-list__item-icon--MarginTop);
10799
+ margin-right: var(--pf-c-list__item-icon--MarginRight);
10800
+ font-size: var(--pf-c-list__item-icon--FontSize);
10801
+ line-height: 1;
10802
+ color: var(--pf-c-list__item-icon--Color);
10803
+ }
10804
+
10805
+ .pf-c-list.pf-m-icon-lg {
10806
+ --pf-c-list__item-icon--MinWidth: var(--pf-c-list--m-icon-lg__item-icon--MinWidth);
10807
+ --pf-c-list__item-icon--MarginTop: 0;
10808
+ --pf-c-list__item-icon--MarginRight: var(--pf-c-list--m-icon-lg__item-icon--MarginRight);
10809
+ --pf-c-list__item-icon--FontSize: var(--pf-c-list--m-icon-lg__item-icon--FontSize);
10810
+ }
10811
+
10812
+ .pf-c-list.pf-m-plain {
10813
+ --pf-c-list--PaddingLeft: 0;
10814
+ list-style: none;
10815
+ }
10816
+
10817
+ .pf-c-list.pf-m-inline {
10818
+ --pf-c-list--PaddingLeft: 0;
10819
+ display: flex;
10820
+ flex-wrap: wrap;
10821
+ list-style: none;
10822
+ }
10823
+
10824
+ .pf-c-list.pf-m-inline li {
10825
+ --pf-c-list--li--MarginTop: 0;
10826
+ }
10827
+
10828
+ .pf-c-list.pf-m-inline li:not(:last-child) {
10829
+ margin-right: var(--pf-c-list--m-inline--li--MarginRight);
10830
+ }
10831
+
10832
+ .pf-c-list.pf-m-bordered > * {
10833
+ padding-bottom: var(--pf-c-list--m-bordered--li--PaddingBottom);
10834
+ border-bottom: var(--pf-c-list--m-bordered--li--BorderBottomWidth) solid var(--pf-c-list--m-bordered--li--BorderBottomColor);
10835
+ }
10836
+
10837
+ .pf-c-list.pf-m-bordered > :last-child {
10838
+ --pf-c-list--m-bordered--li--PaddingBottom: 0;
10839
+ --pf-c-list--m-bordered--li--BorderBottomWidth: 0;
10840
+ }
10841
+
10756
10842
  .pf-c-login__footer, .pf-c-login__header {
10757
10843
  --pf-global--Color--100: var(--pf-global--Color--light-100);
10758
10844
  --pf-global--Color--200: var(--pf-global--Color--light-200);
@@ -11099,92 +11185,6 @@ button.pf-c-label__content:focus {
11099
11185
  color: var(--pf-global--Color--100);
11100
11186
  }
11101
11187
 
11102
- .pf-c-list {
11103
- --pf-c-list--PaddingLeft: var(--pf-global--spacer--lg);
11104
- --pf-c-list--nested--MarginTop: var(--pf-global--spacer--sm);
11105
- --pf-c-list--nested--MarginLeft: var(--pf-global--spacer--sm);
11106
- --pf-c-list--ul--ListStyle: var(--pf-global--ListStyle);
11107
- --pf-c-list--li--MarginTop: var(--pf-global--spacer--sm);
11108
- --pf-c-list--m-inline--li--MarginRight: var(--pf-global--spacer--lg);
11109
- --pf-c-list--m-bordered--li--PaddingBottom: var(--pf-global--spacer--sm);
11110
- --pf-c-list--m-bordered--li--BorderBottomColor: var(--pf-global--BorderColor--100);
11111
- --pf-c-list--m-bordered--li--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
11112
- --pf-c-list__item-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
11113
- --pf-c-list__item-icon--MarginTop: 0.375rem;
11114
- --pf-c-list__item-icon--MarginRight: var(--pf-global--spacer--sm);
11115
- --pf-c-list__item-icon--Color: var(--pf-global--icon--Color--light);
11116
- --pf-c-list__item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
11117
- --pf-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-global--icon--FontSize--lg);
11118
- --pf-c-list--m-icon-lg__item-icon--MarginRight: var(--pf-global--spacer--md);
11119
- --pf-c-list--m-icon-lg__item-icon--FontSize: var(--pf-global--icon--FontSize--lg);
11120
- padding-left: var(--pf-c-list--PaddingLeft);
11121
- }
11122
-
11123
- .pf-c-list ol,
11124
- .pf-c-list ul {
11125
- margin-top: var(--pf-c-list--nested--MarginTop);
11126
- margin-left: var(--pf-c-list--nested--MarginLeft);
11127
- }
11128
-
11129
- .pf-c-list li + li {
11130
- margin-top: var(--pf-c-list--li--MarginTop);
11131
- }
11132
-
11133
- ul.pf-c-list {
11134
- list-style: var(--pf-c-list--ul--ListStyle);
11135
- }
11136
-
11137
- .pf-c-list .pf-c-list__item {
11138
- display: flex;
11139
- }
11140
-
11141
- .pf-c-list .pf-c-list__item-icon {
11142
- flex-shrink: 0;
11143
- min-width: var(--pf-c-list__item-icon--MinWidth);
11144
- margin-top: var(--pf-c-list__item-icon--MarginTop);
11145
- margin-right: var(--pf-c-list__item-icon--MarginRight);
11146
- font-size: var(--pf-c-list__item-icon--FontSize);
11147
- line-height: 1;
11148
- color: var(--pf-c-list__item-icon--Color);
11149
- }
11150
-
11151
- .pf-c-list.pf-m-icon-lg {
11152
- --pf-c-list__item-icon--MinWidth: var(--pf-c-list--m-icon-lg__item-icon--MinWidth);
11153
- --pf-c-list__item-icon--MarginTop: 0;
11154
- --pf-c-list__item-icon--MarginRight: var(--pf-c-list--m-icon-lg__item-icon--MarginRight);
11155
- --pf-c-list__item-icon--FontSize: var(--pf-c-list--m-icon-lg__item-icon--FontSize);
11156
- }
11157
-
11158
- .pf-c-list.pf-m-plain {
11159
- --pf-c-list--PaddingLeft: 0;
11160
- list-style: none;
11161
- }
11162
-
11163
- .pf-c-list.pf-m-inline {
11164
- --pf-c-list--PaddingLeft: 0;
11165
- display: flex;
11166
- flex-wrap: wrap;
11167
- list-style: none;
11168
- }
11169
-
11170
- .pf-c-list.pf-m-inline li {
11171
- --pf-c-list--li--MarginTop: 0;
11172
- }
11173
-
11174
- .pf-c-list.pf-m-inline li:not(:last-child) {
11175
- margin-right: var(--pf-c-list--m-inline--li--MarginRight);
11176
- }
11177
-
11178
- .pf-c-list.pf-m-bordered > * {
11179
- padding-bottom: var(--pf-c-list--m-bordered--li--PaddingBottom);
11180
- border-bottom: var(--pf-c-list--m-bordered--li--BorderBottomWidth) solid var(--pf-c-list--m-bordered--li--BorderBottomColor);
11181
- }
11182
-
11183
- .pf-c-list.pf-m-bordered > :last-child {
11184
- --pf-c-list--m-bordered--li--PaddingBottom: 0;
11185
- --pf-c-list--m-bordered--li--BorderBottomWidth: 0;
11186
- }
11187
-
11188
11188
  .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light {
11189
11189
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
11190
11190
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -15586,6 +15586,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
15586
15586
  grid-template-areas: "header header" "nav main";
15587
15587
  }
15588
15588
  }
15589
+ .pf-c-page.pf-m-full-height {
15590
+ height: 100vh;
15591
+ height: 100dvh;
15592
+ }
15593
+
15589
15594
  .pf-c-page__header,
15590
15595
  .pf-c-page > .pf-c-masthead {
15591
15596
  grid-area: header;
@@ -23747,6 +23752,89 @@ label.pf-c-tree-view__node-text {
23747
23752
  --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-c-droppable--m-drag-outside--after--BorderColor);
23748
23753
  }
23749
23754
 
23755
+ .pf-c-panel {
23756
+ --pf-c-panel--Width: auto;
23757
+ --pf-c-panel--MinWidth: auto;
23758
+ --pf-c-panel--MaxWidth: none;
23759
+ --pf-c-panel--ZIndex: auto;
23760
+ --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
23761
+ --pf-c-panel--BoxShadow: none;
23762
+ --pf-c-panel--before--BorderWidth: 0;
23763
+ --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
23764
+ --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
23765
+ --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
23766
+ --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
23767
+ --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
23768
+ --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
23769
+ --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
23770
+ --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
23771
+ --pf-c-panel__main--MaxHeight: none;
23772
+ --pf-c-panel__main--Overflow: visible;
23773
+ --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
23774
+ --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
23775
+ --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
23776
+ --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
23777
+ --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
23778
+ --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
23779
+ --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
23780
+ --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
23781
+ --pf-c-panel__footer--BoxShadow: none;
23782
+ --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
23783
+ --pf-c-panel--m-scrollable__main--Overflow: auto;
23784
+ --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
23785
+ position: relative;
23786
+ z-index: var(--pf-c-panel--ZIndex);
23787
+ width: var(--pf-c-panel--Width);
23788
+ min-width: var(--pf-c-panel--MinWidth);
23789
+ max-width: var(--pf-c-panel--MaxWidth);
23790
+ background-color: var(--pf-c-panel--BackgroundColor);
23791
+ box-shadow: var(--pf-c-panel--BoxShadow);
23792
+ }
23793
+
23794
+ .pf-c-panel::before {
23795
+ position: absolute;
23796
+ top: 0;
23797
+ right: 0;
23798
+ bottom: 0;
23799
+ left: 0;
23800
+ pointer-events: none;
23801
+ content: "";
23802
+ border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
23803
+ }
23804
+
23805
+ .pf-c-panel.pf-m-bordered {
23806
+ --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
23807
+ }
23808
+
23809
+ .pf-c-panel.pf-m-raised {
23810
+ --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
23811
+ --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
23812
+ }
23813
+
23814
+ .pf-c-panel.pf-m-scrollable {
23815
+ --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
23816
+ --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
23817
+ --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
23818
+ }
23819
+
23820
+ .pf-c-panel__header {
23821
+ padding: var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft);
23822
+ }
23823
+
23824
+ .pf-c-panel__main {
23825
+ max-height: var(--pf-c-panel__main--MaxHeight);
23826
+ overflow: var(--pf-c-panel__main--Overflow);
23827
+ }
23828
+
23829
+ .pf-c-panel__main-body {
23830
+ padding: var(--pf-c-panel__main-body--PaddingTop) var(--pf-c-panel__main-body--PaddingRight) var(--pf-c-panel__main-body--PaddingBottom) var(--pf-c-panel__main-body--PaddingLeft);
23831
+ }
23832
+
23833
+ .pf-c-panel__footer {
23834
+ padding: var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);
23835
+ box-shadow: var(--pf-c-panel__footer--BoxShadow);
23836
+ }
23837
+
23750
23838
  .pf-c-text-input-group {
23751
23839
  --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
23752
23840
  --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -23919,89 +24007,6 @@ label.pf-c-tree-view__node-text {
23919
24007
  display: flex;
23920
24008
  }
23921
24009
 
23922
- .pf-c-panel {
23923
- --pf-c-panel--Width: auto;
23924
- --pf-c-panel--MinWidth: auto;
23925
- --pf-c-panel--MaxWidth: none;
23926
- --pf-c-panel--ZIndex: auto;
23927
- --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
23928
- --pf-c-panel--BoxShadow: none;
23929
- --pf-c-panel--before--BorderWidth: 0;
23930
- --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
23931
- --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
23932
- --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
23933
- --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
23934
- --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
23935
- --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
23936
- --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
23937
- --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
23938
- --pf-c-panel__main--MaxHeight: none;
23939
- --pf-c-panel__main--Overflow: visible;
23940
- --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
23941
- --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
23942
- --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
23943
- --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
23944
- --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
23945
- --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
23946
- --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
23947
- --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
23948
- --pf-c-panel__footer--BoxShadow: none;
23949
- --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
23950
- --pf-c-panel--m-scrollable__main--Overflow: auto;
23951
- --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
23952
- position: relative;
23953
- z-index: var(--pf-c-panel--ZIndex);
23954
- width: var(--pf-c-panel--Width);
23955
- min-width: var(--pf-c-panel--MinWidth);
23956
- max-width: var(--pf-c-panel--MaxWidth);
23957
- background-color: var(--pf-c-panel--BackgroundColor);
23958
- box-shadow: var(--pf-c-panel--BoxShadow);
23959
- }
23960
-
23961
- .pf-c-panel::before {
23962
- position: absolute;
23963
- top: 0;
23964
- right: 0;
23965
- bottom: 0;
23966
- left: 0;
23967
- pointer-events: none;
23968
- content: "";
23969
- border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
23970
- }
23971
-
23972
- .pf-c-panel.pf-m-bordered {
23973
- --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
23974
- }
23975
-
23976
- .pf-c-panel.pf-m-raised {
23977
- --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
23978
- --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
23979
- }
23980
-
23981
- .pf-c-panel.pf-m-scrollable {
23982
- --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
23983
- --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
23984
- --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
23985
- }
23986
-
23987
- .pf-c-panel__header {
23988
- padding: var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft);
23989
- }
23990
-
23991
- .pf-c-panel__main {
23992
- max-height: var(--pf-c-panel__main--MaxHeight);
23993
- overflow: var(--pf-c-panel__main--Overflow);
23994
- }
23995
-
23996
- .pf-c-panel__main-body {
23997
- padding: var(--pf-c-panel__main-body--PaddingTop) var(--pf-c-panel__main-body--PaddingRight) var(--pf-c-panel__main-body--PaddingBottom) var(--pf-c-panel__main-body--PaddingLeft);
23998
- }
23999
-
24000
- .pf-c-panel__footer {
24001
- padding: var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);
24002
- box-shadow: var(--pf-c-panel__footer--BoxShadow);
24003
- }
24004
-
24005
24010
  .pf-c-truncate {
24006
24011
  --pf-c-truncate--MinWidth: 12ch;
24007
24012
  --pf-c-truncate__start--MinWidth: 6ch;
@@ -15210,6 +15210,7 @@
15210
15210
  "visibleOnXl": "pf-m-visible-on-xl",
15211
15211
  "hiddenOn_2xl": "pf-m-hidden-on-2xl",
15212
15212
  "visibleOn_2xl": "pf-m-visible-on-2xl",
15213
+ "fullHeight": "pf-m-full-height",
15213
15214
  "read": "pf-m-read",
15214
15215
  "selected": "pf-m-selected",
15215
15216
  "unread": "pf-m-unread",
@@ -15586,6 +15586,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
15586
15586
  grid-template-areas: "header header" "nav main";
15587
15587
  }
15588
15588
  }
15589
+ .pf-c-page.pf-m-full-height {
15590
+ height: 100vh;
15591
+ height: 100dvh;
15592
+ }
15593
+
15589
15594
  .pf-c-page__header,
15590
15595
  .pf-c-page > .pf-c-masthead {
15591
15596
  grid-area: header;