@patternfly/react-core 4.213.0 → 4.213.3

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 (74) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.d.ts +2 -9
  3. package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.d.ts.map +1 -1
  4. package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.js.map +1 -1
  5. package/dist/esm/components/Card/Card.d.ts +7 -0
  6. package/dist/esm/components/Card/Card.d.ts.map +1 -1
  7. package/dist/esm/components/Card/Card.js +24 -1
  8. package/dist/esm/components/Card/Card.js.map +1 -1
  9. package/dist/esm/components/Card/CardTitle.d.ts.map +1 -1
  10. package/dist/esm/components/Card/CardTitle.js +8 -1
  11. package/dist/esm/components/Card/CardTitle.js.map +1 -1
  12. package/dist/esm/components/ContextSelector/ContextSelector.d.ts +2 -9
  13. package/dist/esm/components/ContextSelector/ContextSelector.d.ts.map +1 -1
  14. package/dist/esm/components/ContextSelector/ContextSelector.js.map +1 -1
  15. package/dist/esm/components/Dropdown/Dropdown.d.ts +2 -9
  16. package/dist/esm/components/Dropdown/Dropdown.d.ts.map +1 -1
  17. package/dist/esm/components/Dropdown/Dropdown.js +2 -2
  18. package/dist/esm/components/Dropdown/Dropdown.js.map +1 -1
  19. package/dist/esm/components/OptionsMenu/OptionsMenu.d.ts +2 -9
  20. package/dist/esm/components/OptionsMenu/OptionsMenu.d.ts.map +1 -1
  21. package/dist/esm/components/OptionsMenu/OptionsMenu.js.map +1 -1
  22. package/dist/esm/components/Select/Select.d.ts +2 -9
  23. package/dist/esm/components/Select/Select.d.ts.map +1 -1
  24. package/dist/esm/components/Select/Select.js.map +1 -1
  25. package/dist/esm/helpers/Popper/Popper.d.ts +10 -0
  26. package/dist/esm/helpers/Popper/Popper.d.ts.map +1 -1
  27. package/dist/esm/helpers/Popper/Popper.js.map +1 -1
  28. package/dist/js/components/ApplicationLauncher/ApplicationLauncher.d.ts +2 -9
  29. package/dist/js/components/ApplicationLauncher/ApplicationLauncher.d.ts.map +1 -1
  30. package/dist/js/components/ApplicationLauncher/ApplicationLauncher.js.map +1 -1
  31. package/dist/js/components/Card/Card.d.ts +7 -0
  32. package/dist/js/components/Card/Card.d.ts.map +1 -1
  33. package/dist/js/components/Card/Card.js +24 -1
  34. package/dist/js/components/Card/Card.js.map +1 -1
  35. package/dist/js/components/Card/CardTitle.d.ts.map +1 -1
  36. package/dist/js/components/Card/CardTitle.js +8 -1
  37. package/dist/js/components/Card/CardTitle.js.map +1 -1
  38. package/dist/js/components/ContextSelector/ContextSelector.d.ts +2 -9
  39. package/dist/js/components/ContextSelector/ContextSelector.d.ts.map +1 -1
  40. package/dist/js/components/ContextSelector/ContextSelector.js.map +1 -1
  41. package/dist/js/components/Dropdown/Dropdown.d.ts +2 -9
  42. package/dist/js/components/Dropdown/Dropdown.d.ts.map +1 -1
  43. package/dist/js/components/Dropdown/Dropdown.js +2 -2
  44. package/dist/js/components/Dropdown/Dropdown.js.map +1 -1
  45. package/dist/js/components/OptionsMenu/OptionsMenu.d.ts +2 -9
  46. package/dist/js/components/OptionsMenu/OptionsMenu.d.ts.map +1 -1
  47. package/dist/js/components/OptionsMenu/OptionsMenu.js.map +1 -1
  48. package/dist/js/components/Select/Select.d.ts +2 -9
  49. package/dist/js/components/Select/Select.d.ts.map +1 -1
  50. package/dist/js/components/Select/Select.js.map +1 -1
  51. package/dist/js/helpers/Popper/Popper.d.ts +10 -0
  52. package/dist/js/helpers/Popper/Popper.d.ts.map +1 -1
  53. package/dist/js/helpers/Popper/Popper.js.map +1 -1
  54. package/dist/umd/react-core.js +33 -4
  55. package/dist/umd/react-core.min.css +128 -128
  56. package/dist/umd/react-core.min.js +1 -1
  57. package/package.json +6 -6
  58. package/src/components/ApplicationLauncher/ApplicationLauncher.tsx +2 -9
  59. package/src/components/Card/Card.tsx +53 -0
  60. package/src/components/Card/CardTitle.tsx +11 -1
  61. package/src/components/Card/__tests__/Card.test.tsx +90 -1
  62. package/src/components/Card/__tests__/CardTitle.test.tsx +13 -0
  63. package/src/components/Card/examples/Card.md +17 -0
  64. package/src/components/Card/examples/CardLegacySelectable.tsx +11 -2
  65. package/src/components/Card/examples/CardSelectable.tsx +10 -1
  66. package/src/components/Card/examples/CardSelectableA11yHighlight.tsx +61 -0
  67. package/src/components/ContextSelector/ContextSelector.tsx +2 -9
  68. package/src/components/Dropdown/Dropdown.tsx +3 -11
  69. package/src/components/OptionsMenu/OptionsMenu.tsx +2 -9
  70. package/src/components/Select/Select.tsx +3 -10
  71. package/src/demos/Card/Card.md +29 -29
  72. package/src/demos/PrimaryDetail.md +16 -2
  73. package/src/demos/examples/Tabs/ModalTabs.tsx +4 -1
  74. package/src/helpers/Popper/Popper.tsx +11 -0
@@ -19769,6 +19769,99 @@ svg.pf-c-spinner.pf-m-xl {
19769
19769
  margin-left: var(--pf-c-toggle-group__icon--text--MarginLeft);
19770
19770
  }
19771
19771
 
19772
+ .pf-c-tooltip {
19773
+ --pf-c-tooltip--MaxWidth: 18.75rem;
19774
+ --pf-c-tooltip--BoxShadow: var(--pf-global--BoxShadow--md);
19775
+ --pf-c-tooltip__content--PaddingTop: var(--pf-global--spacer--sm);
19776
+ --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--sm);
19777
+ --pf-c-tooltip__content--PaddingBottom: var(--pf-global--spacer--sm);
19778
+ --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--sm);
19779
+ --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
19780
+ --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
19781
+ --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
19782
+ --pf-c-tooltip__arrow--Width: 0.5rem;
19783
+ --pf-c-tooltip__arrow--Height: 0.5rem;
19784
+ --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
19785
+ --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
19786
+ --pf-c-tooltip__arrow--m-top--Rotate: 45deg;
19787
+ --pf-c-tooltip__arrow--m-right--TranslateX: -50%;
19788
+ --pf-c-tooltip__arrow--m-right--TranslateY: -50%;
19789
+ --pf-c-tooltip__arrow--m-right--Rotate: 45deg;
19790
+ --pf-c-tooltip__arrow--m-bottom--TranslateX: -50%;
19791
+ --pf-c-tooltip__arrow--m-bottom--TranslateY: -50%;
19792
+ --pf-c-tooltip__arrow--m-bottom--Rotate: 45deg;
19793
+ --pf-c-tooltip__arrow--m-left--TranslateX: 50%;
19794
+ --pf-c-tooltip__arrow--m-left--TranslateY: -50%;
19795
+ --pf-c-tooltip__arrow--m-left--Rotate: 45deg;
19796
+ position: relative;
19797
+ max-width: var(--pf-c-tooltip--MaxWidth);
19798
+ box-shadow: var(--pf-c-tooltip--BoxShadow);
19799
+ }
19800
+
19801
+ .pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow {
19802
+ bottom: 0;
19803
+ left: 50%;
19804
+ transform: translateX(var(--pf-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-top--Rotate));
19805
+ }
19806
+
19807
+ .pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
19808
+ top: 0;
19809
+ left: 50%;
19810
+ transform: translateX(var(--pf-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-bottom--Rotate));
19811
+ }
19812
+
19813
+ .pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow {
19814
+ top: 50%;
19815
+ right: 0;
19816
+ transform: translateX(var(--pf-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-left--Rotate));
19817
+ }
19818
+
19819
+ .pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
19820
+ top: 50%;
19821
+ left: 0;
19822
+ transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
19823
+ }
19824
+
19825
+ .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
19826
+ top: var(--pf-c-tooltip__arrow--Height);
19827
+ }
19828
+
19829
+ .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
19830
+ top: auto;
19831
+ bottom: 0;
19832
+ }
19833
+
19834
+ .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
19835
+ left: var(--pf-c-tooltip__arrow--Width);
19836
+ }
19837
+
19838
+ .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
19839
+ right: 0;
19840
+ left: auto;
19841
+ }
19842
+
19843
+ .pf-c-tooltip__content {
19844
+ position: relative;
19845
+ padding: var(--pf-c-tooltip__content--PaddingTop) var(--pf-c-tooltip__content--PaddingRight) var(--pf-c-tooltip__content--PaddingBottom) var(--pf-c-tooltip__content--PaddingLeft);
19846
+ font-size: var(--pf-c-tooltip__content--FontSize);
19847
+ color: var(--pf-c-tooltip__content--Color);
19848
+ text-align: center;
19849
+ word-break: break-word;
19850
+ background-color: var(--pf-c-tooltip__content--BackgroundColor);
19851
+ }
19852
+
19853
+ .pf-c-tooltip__content.pf-m-text-align-left {
19854
+ text-align: left;
19855
+ }
19856
+
19857
+ .pf-c-tooltip__arrow {
19858
+ position: absolute;
19859
+ width: var(--pf-c-tooltip__arrow--Width);
19860
+ height: var(--pf-c-tooltip__arrow--Height);
19861
+ pointer-events: none;
19862
+ background-color: var(--pf-c-tooltip__content--BackgroundColor);
19863
+ }
19864
+
19772
19865
  .pf-c-toolbar__content-section, .pf-c-toolbar__content, .pf-c-toolbar__item, .pf-c-toolbar__group {
19773
19866
  --pf-hidden-visible--visible--Visibility: visible;
19774
19867
  --pf-hidden-visible--hidden--Display: none;
@@ -21150,134 +21243,6 @@ svg.pf-c-spinner.pf-m-xl {
21150
21243
  --pf-c-toolbar--spacer: 0;
21151
21244
  }
21152
21245
 
21153
- .pf-c-tooltip {
21154
- --pf-c-tooltip--MaxWidth: 18.75rem;
21155
- --pf-c-tooltip--BoxShadow: var(--pf-global--BoxShadow--md);
21156
- --pf-c-tooltip__content--PaddingTop: var(--pf-global--spacer--sm);
21157
- --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--sm);
21158
- --pf-c-tooltip__content--PaddingBottom: var(--pf-global--spacer--sm);
21159
- --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--sm);
21160
- --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
21161
- --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
21162
- --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
21163
- --pf-c-tooltip__arrow--Width: 0.5rem;
21164
- --pf-c-tooltip__arrow--Height: 0.5rem;
21165
- --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
21166
- --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
21167
- --pf-c-tooltip__arrow--m-top--Rotate: 45deg;
21168
- --pf-c-tooltip__arrow--m-right--TranslateX: -50%;
21169
- --pf-c-tooltip__arrow--m-right--TranslateY: -50%;
21170
- --pf-c-tooltip__arrow--m-right--Rotate: 45deg;
21171
- --pf-c-tooltip__arrow--m-bottom--TranslateX: -50%;
21172
- --pf-c-tooltip__arrow--m-bottom--TranslateY: -50%;
21173
- --pf-c-tooltip__arrow--m-bottom--Rotate: 45deg;
21174
- --pf-c-tooltip__arrow--m-left--TranslateX: 50%;
21175
- --pf-c-tooltip__arrow--m-left--TranslateY: -50%;
21176
- --pf-c-tooltip__arrow--m-left--Rotate: 45deg;
21177
- position: relative;
21178
- max-width: var(--pf-c-tooltip--MaxWidth);
21179
- box-shadow: var(--pf-c-tooltip--BoxShadow);
21180
- }
21181
-
21182
- .pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow {
21183
- bottom: 0;
21184
- left: 50%;
21185
- transform: translateX(var(--pf-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-top--Rotate));
21186
- }
21187
-
21188
- .pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
21189
- top: 0;
21190
- left: 50%;
21191
- transform: translateX(var(--pf-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-bottom--Rotate));
21192
- }
21193
-
21194
- .pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow {
21195
- top: 50%;
21196
- right: 0;
21197
- transform: translateX(var(--pf-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-left--Rotate));
21198
- }
21199
-
21200
- .pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
21201
- top: 50%;
21202
- left: 0;
21203
- transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
21204
- }
21205
-
21206
- .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
21207
- top: var(--pf-c-tooltip__arrow--Height);
21208
- }
21209
-
21210
- .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
21211
- top: auto;
21212
- bottom: 0;
21213
- }
21214
-
21215
- .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
21216
- left: var(--pf-c-tooltip__arrow--Width);
21217
- }
21218
-
21219
- .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
21220
- right: 0;
21221
- left: auto;
21222
- }
21223
-
21224
- .pf-c-tooltip__content {
21225
- position: relative;
21226
- padding: var(--pf-c-tooltip__content--PaddingTop) var(--pf-c-tooltip__content--PaddingRight) var(--pf-c-tooltip__content--PaddingBottom) var(--pf-c-tooltip__content--PaddingLeft);
21227
- font-size: var(--pf-c-tooltip__content--FontSize);
21228
- color: var(--pf-c-tooltip__content--Color);
21229
- text-align: center;
21230
- word-break: break-word;
21231
- background-color: var(--pf-c-tooltip__content--BackgroundColor);
21232
- }
21233
-
21234
- .pf-c-tooltip__content.pf-m-text-align-left {
21235
- text-align: left;
21236
- }
21237
-
21238
- .pf-c-tooltip__arrow {
21239
- position: absolute;
21240
- width: var(--pf-c-tooltip__arrow--Width);
21241
- height: var(--pf-c-tooltip__arrow--Height);
21242
- pointer-events: none;
21243
- background-color: var(--pf-c-tooltip__content--BackgroundColor);
21244
- }
21245
-
21246
- .pf-c-number-input .pf-c-form-control {
21247
- appearance: textfield;
21248
- }
21249
-
21250
- .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button {
21251
- appearance: none;
21252
- margin: 0;
21253
- }
21254
-
21255
- .pf-c-number-input {
21256
- --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
21257
- --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
21258
- --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
21259
- --pf-c-number-input--c-form-control--width-chars: 4;
21260
- --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
21261
- display: inline-flex;
21262
- align-items: center;
21263
- }
21264
-
21265
- .pf-c-number-input .pf-c-form-control {
21266
- display: inline-flex;
21267
- width: var(--pf-c-number-input--c-form-control--Width);
21268
- text-align: right;
21269
- }
21270
-
21271
- .pf-c-input-group + .pf-c-number-input__unit,
21272
- .pf-c-number-input__unit + .pf-c-input-group {
21273
- margin-left: var(--pf-c-number-input__unit--c-input-group--MarginLeft);
21274
- }
21275
-
21276
- .pf-c-number-input__icon {
21277
- display: flex;
21278
- font-size: var(--pf-c-number-input__icon--FontSize);
21279
- }
21280
-
21281
21246
  .pf-c-tree-view {
21282
21247
  --pf-c-tree-view--PaddingTop: var(--pf-global--spacer--sm);
21283
21248
  --pf-c-tree-view--PaddingBottom: var(--pf-global--spacer--sm);
@@ -21749,6 +21714,41 @@ svg.pf-c-spinner.pf-m-xl {
21749
21714
  --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
21750
21715
  }
21751
21716
 
21717
+ .pf-c-number-input .pf-c-form-control {
21718
+ appearance: textfield;
21719
+ }
21720
+
21721
+ .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button {
21722
+ appearance: none;
21723
+ margin: 0;
21724
+ }
21725
+
21726
+ .pf-c-number-input {
21727
+ --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
21728
+ --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
21729
+ --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
21730
+ --pf-c-number-input--c-form-control--width-chars: 4;
21731
+ --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
21732
+ display: inline-flex;
21733
+ align-items: center;
21734
+ }
21735
+
21736
+ .pf-c-number-input .pf-c-form-control {
21737
+ display: inline-flex;
21738
+ width: var(--pf-c-number-input--c-form-control--Width);
21739
+ text-align: right;
21740
+ }
21741
+
21742
+ .pf-c-input-group + .pf-c-number-input__unit,
21743
+ .pf-c-number-input__unit + .pf-c-input-group {
21744
+ margin-left: var(--pf-c-number-input__unit--c-input-group--MarginLeft);
21745
+ }
21746
+
21747
+ .pf-c-number-input__icon {
21748
+ display: flex;
21749
+ font-size: var(--pf-c-number-input__icon--FontSize);
21750
+ }
21751
+
21752
21752
  .pf-c-wizard__header {
21753
21753
  --pf-global--Color--100: var(--pf-global--Color--light-100);
21754
21754
  --pf-global--Color--200: var(--pf-global--Color--light-200);