@patternfly/react-core 4.232.8 → 4.232.9

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 (47) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/esm/components/Page/PageBreadcrumb.d.ts +3 -1
  3. package/dist/esm/components/Page/PageBreadcrumb.d.ts.map +1 -1
  4. package/dist/esm/components/Page/PageBreadcrumb.js +8 -2
  5. package/dist/esm/components/Page/PageBreadcrumb.js.map +1 -1
  6. package/dist/esm/components/Page/PageGroup.d.ts +3 -1
  7. package/dist/esm/components/Page/PageGroup.d.ts.map +1 -1
  8. package/dist/esm/components/Page/PageGroup.js +8 -2
  9. package/dist/esm/components/Page/PageGroup.js.map +1 -1
  10. package/dist/esm/components/Page/PageNavigation.d.ts +3 -1
  11. package/dist/esm/components/Page/PageNavigation.d.ts.map +1 -1
  12. package/dist/esm/components/Page/PageNavigation.js +8 -2
  13. package/dist/esm/components/Page/PageNavigation.js.map +1 -1
  14. package/dist/esm/components/Page/PageSection.d.ts +4 -0
  15. package/dist/esm/components/Page/PageSection.d.ts.map +1 -1
  16. package/dist/esm/components/Page/PageSection.js +8 -2
  17. package/dist/esm/components/Page/PageSection.js.map +1 -1
  18. package/dist/js/components/Page/PageBreadcrumb.d.ts +3 -1
  19. package/dist/js/components/Page/PageBreadcrumb.d.ts.map +1 -1
  20. package/dist/js/components/Page/PageBreadcrumb.js +8 -2
  21. package/dist/js/components/Page/PageBreadcrumb.js.map +1 -1
  22. package/dist/js/components/Page/PageGroup.d.ts +3 -1
  23. package/dist/js/components/Page/PageGroup.d.ts.map +1 -1
  24. package/dist/js/components/Page/PageGroup.js +8 -2
  25. package/dist/js/components/Page/PageGroup.js.map +1 -1
  26. package/dist/js/components/Page/PageNavigation.d.ts +3 -1
  27. package/dist/js/components/Page/PageNavigation.d.ts.map +1 -1
  28. package/dist/js/components/Page/PageNavigation.js +8 -2
  29. package/dist/js/components/Page/PageNavigation.js.map +1 -1
  30. package/dist/js/components/Page/PageSection.d.ts +4 -0
  31. package/dist/js/components/Page/PageSection.d.ts.map +1 -1
  32. package/dist/js/components/Page/PageSection.js +8 -2
  33. package/dist/js/components/Page/PageSection.js.map +1 -1
  34. package/dist/umd/react-core.js +32 -8
  35. package/dist/umd/react-core.min.css +106 -106
  36. package/dist/umd/react-core.min.js +1 -1
  37. package/package.json +5 -5
  38. package/src/components/Page/PageBreadcrumb.tsx +11 -0
  39. package/src/components/Page/PageGroup.tsx +11 -0
  40. package/src/components/Page/PageNavigation.tsx +11 -0
  41. package/src/components/Page/PageSection.tsx +13 -0
  42. package/src/components/Page/__tests__/PageBreadcrumb.test.tsx +41 -1
  43. package/src/components/Page/__tests__/PageGroup.test.tsx +41 -1
  44. package/src/components/Page/__tests__/PageNavigation.test.tsx +41 -1
  45. package/src/components/Page/__tests__/PageSection.test.tsx +41 -1
  46. package/src/demos/JumpLinks.md +1 -0
  47. package/src/demos/examples/BackToTop/BackToTopNameDemo.tsx +6 -1
@@ -9396,6 +9396,112 @@ label.pf-c-check, .pf-c-check__label,
9396
9396
  --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
9397
9397
  }
9398
9398
 
9399
+ .pf-c-input-group {
9400
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
9401
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
9402
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9403
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9404
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
9405
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9406
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9407
+ }
9408
+
9409
+ .pf-c-input-group {
9410
+ --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
9411
+ --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
9412
+ --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
9413
+ --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
9414
+ --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
9415
+ --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
9416
+ --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
9417
+ --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
9418
+ --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
9419
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
9420
+ --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
9421
+ --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
9422
+ --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
9423
+ --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
9424
+ --pf-c-input-group--c-form-control--MarginRight: 0;
9425
+ color: var(--pf-global--Color--100);
9426
+ display: flex;
9427
+ width: 100%;
9428
+ background-color: var(--pf-c-input-group--BackgroundColor);
9429
+ }
9430
+
9431
+ .pf-c-input-group.pf-m-plain {
9432
+ --pf-c-input-group--BackgroundColor: transparent;
9433
+ }
9434
+
9435
+ .pf-c-input-group > * + * {
9436
+ margin-left: -1px;
9437
+ }
9438
+
9439
+ .pf-c-input-group > :focus,
9440
+ .pf-c-input-group > :focus-within {
9441
+ z-index: var(--pf-c-input-group--child--ZIndex);
9442
+ }
9443
+
9444
+ .pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
9445
+ margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
9446
+ }
9447
+
9448
+ .pf-c-input-group input:not([type=checkbox]):not([type=radio]),
9449
+ .pf-c-input-group textarea {
9450
+ flex: 2;
9451
+ min-width: 0;
9452
+ }
9453
+
9454
+ .pf-c-input-group textarea {
9455
+ min-height: var(--pf-c-input-group__textarea--MinHeight);
9456
+ }
9457
+
9458
+ .pf-c-input-group__text {
9459
+ display: flex;
9460
+ align-items: center;
9461
+ padding-right: var(--pf-c-input-group__text--PaddingRight);
9462
+ padding-left: var(--pf-c-input-group__text--PaddingLeft);
9463
+ font-size: var(--pf-c-input-group__text--FontSize);
9464
+ color: var(--pf-c-input-group__text--Color);
9465
+ text-align: center;
9466
+ background-color: var(--pf-c-input-group__text--BackgroundColor);
9467
+ border: var(--pf-c-input-group__text--BorderWidth) solid;
9468
+ border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
9469
+ }
9470
+
9471
+ label.pf-c-input-group__text {
9472
+ cursor: pointer;
9473
+ }
9474
+
9475
+ .pf-c-input-group__text.pf-m-plain {
9476
+ --pf-c-input-group__text--BorderWidth: 0;
9477
+ margin-left: 0;
9478
+ }
9479
+
9480
+ :where(.pf-theme-dark) .pf-c-input-group {
9481
+ --pf-c-input-group--BackgroundColor: transparent;
9482
+ --pf-c-input-group__text--BorderTopColor: transparent;
9483
+ --pf-c-input-group__text--BorderRightColor: transparent;
9484
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9485
+ --pf-c-input-group__text--BorderLeftColor: transparent;
9486
+ --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
9487
+ }
9488
+
9489
+ :where(.pf-theme-dark) .pf-c-input-group > * + * {
9490
+ margin-left: 0;
9491
+ border-left: 1px solid var(--pf-global--palette--black-700);
9492
+ }
9493
+
9494
+ :where(.pf-theme-dark) .pf-c-input-group__text {
9495
+ --pf-c-input-group__text--BorderTopColor: transparent;
9496
+ --pf-c-input-group__text--BorderRightColor: transparent;
9497
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9498
+ --pf-c-input-group__text--BorderLeftColor: transparent;
9499
+ }
9500
+
9501
+ :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
9502
+ --pf-c-input-group__text--BackgroundColor: transparent;
9503
+ }
9504
+
9399
9505
  .pf-c-jump-links {
9400
9506
  --pf-c-jump-links__list--Display: flex;
9401
9507
  --pf-c-jump-links__list--Visibility: visible;
@@ -10040,112 +10146,6 @@ label.pf-c-check, .pf-c-check__label,
10040
10146
  --pf-c-sidebar__panel--FlexBasis: 100%;
10041
10147
  }
10042
10148
  }
10043
- .pf-c-input-group {
10044
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
10045
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
10046
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
10047
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
10048
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
10049
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
10050
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
10051
- }
10052
-
10053
- .pf-c-input-group {
10054
- --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
10055
- --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
10056
- --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
10057
- --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
10058
- --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
10059
- --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
10060
- --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
10061
- --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
10062
- --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
10063
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
10064
- --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
10065
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
10066
- --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
10067
- --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
10068
- --pf-c-input-group--c-form-control--MarginRight: 0;
10069
- color: var(--pf-global--Color--100);
10070
- display: flex;
10071
- width: 100%;
10072
- background-color: var(--pf-c-input-group--BackgroundColor);
10073
- }
10074
-
10075
- .pf-c-input-group.pf-m-plain {
10076
- --pf-c-input-group--BackgroundColor: transparent;
10077
- }
10078
-
10079
- .pf-c-input-group > * + * {
10080
- margin-left: -1px;
10081
- }
10082
-
10083
- .pf-c-input-group > :focus,
10084
- .pf-c-input-group > :focus-within {
10085
- z-index: var(--pf-c-input-group--child--ZIndex);
10086
- }
10087
-
10088
- .pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
10089
- margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
10090
- }
10091
-
10092
- .pf-c-input-group input:not([type=checkbox]):not([type=radio]),
10093
- .pf-c-input-group textarea {
10094
- flex: 2;
10095
- min-width: 0;
10096
- }
10097
-
10098
- .pf-c-input-group textarea {
10099
- min-height: var(--pf-c-input-group__textarea--MinHeight);
10100
- }
10101
-
10102
- .pf-c-input-group__text {
10103
- display: flex;
10104
- align-items: center;
10105
- padding-right: var(--pf-c-input-group__text--PaddingRight);
10106
- padding-left: var(--pf-c-input-group__text--PaddingLeft);
10107
- font-size: var(--pf-c-input-group__text--FontSize);
10108
- color: var(--pf-c-input-group__text--Color);
10109
- text-align: center;
10110
- background-color: var(--pf-c-input-group__text--BackgroundColor);
10111
- border: var(--pf-c-input-group__text--BorderWidth) solid;
10112
- border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
10113
- }
10114
-
10115
- label.pf-c-input-group__text {
10116
- cursor: pointer;
10117
- }
10118
-
10119
- .pf-c-input-group__text.pf-m-plain {
10120
- --pf-c-input-group__text--BorderWidth: 0;
10121
- margin-left: 0;
10122
- }
10123
-
10124
- :where(.pf-theme-dark) .pf-c-input-group {
10125
- --pf-c-input-group--BackgroundColor: transparent;
10126
- --pf-c-input-group__text--BorderTopColor: transparent;
10127
- --pf-c-input-group__text--BorderRightColor: transparent;
10128
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
10129
- --pf-c-input-group__text--BorderLeftColor: transparent;
10130
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
10131
- }
10132
-
10133
- :where(.pf-theme-dark) .pf-c-input-group > * + * {
10134
- margin-left: 0;
10135
- border-left: 1px solid var(--pf-global--palette--black-700);
10136
- }
10137
-
10138
- :where(.pf-theme-dark) .pf-c-input-group__text {
10139
- --pf-c-input-group__text--BorderTopColor: transparent;
10140
- --pf-c-input-group__text--BorderRightColor: transparent;
10141
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
10142
- --pf-c-input-group__text--BorderLeftColor: transparent;
10143
- }
10144
-
10145
- :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
10146
- --pf-c-input-group__text--BackgroundColor: transparent;
10147
- }
10148
-
10149
10149
  .pf-c-label {
10150
10150
  --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10151
10151
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);