@patternfly/react-core 4.234.1 → 4.234.4

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 (55) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/esm/components/LoginPage/LoginFooterItem.d.ts +3 -3
  3. package/dist/esm/components/LoginPage/LoginForm.d.ts +18 -18
  4. package/dist/esm/components/LoginPage/LoginHeader.d.ts +1 -1
  5. package/dist/esm/components/LoginPage/LoginMainBody.d.ts +2 -2
  6. package/dist/esm/components/LoginPage/LoginMainFooter.d.ts +5 -5
  7. package/dist/esm/components/LoginPage/LoginMainFooterBandItem.d.ts +2 -2
  8. package/dist/esm/components/LoginPage/LoginMainFooterLinksItem.d.ts +5 -5
  9. package/dist/esm/components/LoginPage/LoginMainHeader.d.ts +6 -4
  10. package/dist/esm/components/LoginPage/LoginMainHeader.d.ts.map +1 -1
  11. package/dist/esm/components/LoginPage/LoginMainHeader.js +2 -1
  12. package/dist/esm/components/LoginPage/LoginMainHeader.js.map +1 -1
  13. package/dist/esm/components/LoginPage/LoginPage.d.ts +16 -14
  14. package/dist/esm/components/LoginPage/LoginPage.d.ts.map +1 -1
  15. package/dist/esm/components/LoginPage/LoginPage.js +2 -2
  16. package/dist/esm/components/LoginPage/LoginPage.js.map +1 -1
  17. package/dist/js/components/LoginPage/LoginFooterItem.d.ts +3 -3
  18. package/dist/js/components/LoginPage/LoginForm.d.ts +18 -18
  19. package/dist/js/components/LoginPage/LoginHeader.d.ts +1 -1
  20. package/dist/js/components/LoginPage/LoginMainBody.d.ts +2 -2
  21. package/dist/js/components/LoginPage/LoginMainFooter.d.ts +5 -5
  22. package/dist/js/components/LoginPage/LoginMainFooterBandItem.d.ts +2 -2
  23. package/dist/js/components/LoginPage/LoginMainFooterLinksItem.d.ts +5 -5
  24. package/dist/js/components/LoginPage/LoginMainHeader.d.ts +6 -4
  25. package/dist/js/components/LoginPage/LoginMainHeader.d.ts.map +1 -1
  26. package/dist/js/components/LoginPage/LoginMainHeader.js +2 -1
  27. package/dist/js/components/LoginPage/LoginMainHeader.js.map +1 -1
  28. package/dist/js/components/LoginPage/LoginPage.d.ts +16 -14
  29. package/dist/js/components/LoginPage/LoginPage.d.ts.map +1 -1
  30. package/dist/js/components/LoginPage/LoginPage.js +2 -2
  31. package/dist/js/components/LoginPage/LoginPage.js.map +1 -1
  32. package/dist/umd/react-core.css +976 -976
  33. package/dist/umd/react-core.js +4 -3
  34. package/dist/umd/react-core.min.css +70 -70
  35. package/dist/umd/react-core.min.js +4 -4
  36. package/package.json +6 -6
  37. package/src/components/Card/examples/Card.md +67 -38
  38. package/src/components/LoginPage/LoginFooterItem.tsx +3 -3
  39. package/src/components/LoginPage/LoginForm.tsx +18 -18
  40. package/src/components/LoginPage/LoginHeader.tsx +1 -1
  41. package/src/components/LoginPage/LoginMainBody.tsx +2 -2
  42. package/src/components/LoginPage/LoginMainFooter.tsx +5 -5
  43. package/src/components/LoginPage/LoginMainFooterBandItem.tsx +2 -2
  44. package/src/components/LoginPage/LoginMainFooterLinksItem.tsx +5 -5
  45. package/src/components/LoginPage/LoginMainHeader.tsx +8 -4
  46. package/src/components/LoginPage/LoginPage.tsx +18 -15
  47. package/src/components/LoginPage/examples/LoginPage.md +8 -0
  48. package/src/components/LoginPage/examples/LoginPageBasic.tsx +0 -1
  49. package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx +194 -0
  50. package/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx +0 -1
  51. package/src/components/NotificationDrawer/examples/NotificationDrawer.md +3 -708
  52. package/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx +185 -0
  53. package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx +337 -0
  54. package/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx +185 -0
  55. package/src/demos/CardDemos.md +4 -0
@@ -14974,10 +14974,11 @@
14974
14974
  LoginFooter.displayName = 'LoginFooter';
14975
14975
 
14976
14976
  const LoginMainHeader = (_a) => {
14977
- var { children = null, className = '', title = '', subtitle = '' } = _a, props = __rest$1(_a, ["children", "className", "title", "subtitle"]);
14977
+ var { children = null, className = '', title = '', subtitle = '', headerUtilities = null } = _a, props = __rest$1(_a, ["children", "className", "title", "subtitle", "headerUtilities"]);
14978
14978
  return (React__namespace.createElement("header", Object.assign({ className: css(styles$B.loginMainHeader, className) }, props),
14979
14979
  title && (React__namespace.createElement(Title, { headingLevel: "h2", size: exports.TitleSizes['3xl'] }, title)),
14980
14980
  subtitle && React__namespace.createElement("p", { className: css(styles$B.loginMainHeaderDesc) }, subtitle),
14981
+ headerUtilities && React__namespace.createElement("div", { className: css(styles$B.loginMainHeaderUtilities) }, headerUtilities),
14981
14982
  children));
14982
14983
  };
14983
14984
  LoginMainHeader.displayName = 'LoginMainHeader';
@@ -15000,7 +15001,7 @@
15000
15001
  LoginMainFooter.displayName = 'LoginMainFooter';
15001
15002
 
15002
15003
  const LoginPage = (_a) => {
15003
- var { children = null, className = '', brandImgSrc = '', brandImgAlt = '', backgroundImgSrc = '', backgroundImgAlt = '', footerListItems = null, textContent = '', footerListVariants, loginTitle, loginSubtitle, signUpForAccountMessage = null, forgotCredentials = null, socialMediaLoginContent = null } = _a, props = __rest$1(_a, ["children", "className", "brandImgSrc", "brandImgAlt", "backgroundImgSrc", "backgroundImgAlt", "footerListItems", "textContent", "footerListVariants", "loginTitle", "loginSubtitle", "signUpForAccountMessage", "forgotCredentials", "socialMediaLoginContent"]);
15004
+ var { children = null, className = '', brandImgSrc = '', brandImgAlt = '', backgroundImgSrc = '', backgroundImgAlt = '', footerListItems = null, textContent = '', footerListVariants, loginTitle, loginSubtitle, headerUtilities, signUpForAccountMessage = null, forgotCredentials = null, socialMediaLoginContent = null } = _a, props = __rest$1(_a, ["children", "className", "brandImgSrc", "brandImgAlt", "backgroundImgSrc", "backgroundImgAlt", "footerListItems", "textContent", "footerListVariants", "loginTitle", "loginSubtitle", "headerUtilities", "signUpForAccountMessage", "forgotCredentials", "socialMediaLoginContent"]);
15004
15005
  const HeaderBrand = (React__namespace.createElement(React__namespace.Fragment, null,
15005
15006
  React__namespace.createElement(Brand, { src: brandImgSrc, alt: brandImgAlt })));
15006
15007
  const Header = React__namespace.createElement(LoginHeader, { headerBrand: HeaderBrand });
@@ -15010,7 +15011,7 @@
15010
15011
  return (React__namespace.createElement(React__namespace.Fragment, null,
15011
15012
  backgroundImgSrc && React__namespace.createElement(BackgroundImage, { src: backgroundImgSrc, alt: backgroundImgAlt }),
15012
15013
  React__namespace.createElement(Login, Object.assign({ header: Header, footer: Footer, className: css(className) }, props),
15013
- React__namespace.createElement(LoginMainHeader, { title: loginTitle, subtitle: loginSubtitle }),
15014
+ React__namespace.createElement(LoginMainHeader, { title: loginTitle, subtitle: loginSubtitle, headerUtilities: headerUtilities }),
15014
15015
  React__namespace.createElement(LoginMainBody, null, children),
15015
15016
  (socialMediaLoginContent || forgotCredentials || signUpForAccountMessage) && (React__namespace.createElement(LoginMainFooter, { socialMediaLoginContent: socialMediaLoginContent, forgotCredentials: forgotCredentials, signUpForAccountMessage: signUpForAccountMessage })))));
15016
15017
  };
@@ -9334,76 +9334,6 @@ label.pf-c-check, .pf-c-check__label,
9334
9334
  --pf-c-helper-text__item-text--m-success--Color: var(--pf-global--success-color--100);
9335
9335
  }
9336
9336
 
9337
- .pf-c-hint {
9338
- --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
9339
- --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg);
9340
- --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg);
9341
- --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg);
9342
- --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg);
9343
- --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50);
9344
- --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100);
9345
- --pf-c-hint--BorderWidth: var(--pf-global--BorderWidth--sm);
9346
- --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm);
9347
- --pf-c-hint--Color: var(--pf-global--Color--100);
9348
- --pf-c-hint__title--FontSize: var(--pf-global--FontSize--lg);
9349
- --pf-c-hint__body--FontSize: var(--pf-global--FontSize--md);
9350
- --pf-c-hint__footer--child--MarginRight: var(--pf-global--spacer--md);
9351
- --pf-c-hint__actions--MarginLeft: var(--pf-global--spacer--2xl);
9352
- --pf-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9353
- display: grid;
9354
- grid-template-columns: 1fr auto;
9355
- grid-row-gap: var(--pf-c-hint--GridRowGap);
9356
- padding: var(--pf-c-hint--PaddingTop) var(--pf-c-hint--PaddingRight) var(--pf-c-hint--PaddingBottom) var(--pf-c-hint--PaddingLeft);
9357
- color: var(--pf-c-hint--Color);
9358
- background-color: var(--pf-c-hint--BackgroundColor);
9359
- border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
9360
- box-shadow: var(--pf-c-hint--BoxShadow);
9361
- }
9362
-
9363
- .pf-c-hint .pf-c-button.pf-m-link.pf-m-inline {
9364
- text-align: left;
9365
- white-space: normal;
9366
- }
9367
-
9368
- .pf-c-hint__actions {
9369
- display: inline-grid;
9370
- grid-auto-flow: column;
9371
- margin-left: var(--pf-c-hint__actions--MarginLeft);
9372
- text-align: right;
9373
- grid-column: 2;
9374
- grid-row: 1;
9375
- }
9376
-
9377
- .pf-c-hint__actions .pf-c-dropdown .pf-c-dropdown__toggle.pf-m-plain {
9378
- margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
9379
- }
9380
-
9381
- .pf-c-hint__actions + .pf-c-hint__body {
9382
- grid-column: 1;
9383
- }
9384
-
9385
- .pf-c-hint__title {
9386
- font-size: var(--pf-c-hint__title--FontSize);
9387
- }
9388
-
9389
- .pf-c-hint__body {
9390
- grid-column: 1/-1;
9391
- font-size: var(--pf-c-hint__body--FontSize);
9392
- }
9393
-
9394
- .pf-c-hint__footer {
9395
- grid-column: 1/-1;
9396
- }
9397
-
9398
- .pf-c-hint__footer > :not(:last-child) {
9399
- margin-right: var(--pf-c-hint__footer--child--MarginRight);
9400
- }
9401
-
9402
- :where(.pf-theme-dark) .pf-c-hint {
9403
- --pf-c-hint--BackgroundColor: var(--pf-global--BackgroundColor--400);
9404
- --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
9405
- }
9406
-
9407
9337
  .pf-c-input-group {
9408
9338
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
9409
9339
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -10761,6 +10691,76 @@ button.pf-c-label__content:focus {
10761
10691
  display: none;
10762
10692
  }
10763
10693
 
10694
+ .pf-c-hint {
10695
+ --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
10696
+ --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg);
10697
+ --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg);
10698
+ --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg);
10699
+ --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg);
10700
+ --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50);
10701
+ --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100);
10702
+ --pf-c-hint--BorderWidth: var(--pf-global--BorderWidth--sm);
10703
+ --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm);
10704
+ --pf-c-hint--Color: var(--pf-global--Color--100);
10705
+ --pf-c-hint__title--FontSize: var(--pf-global--FontSize--lg);
10706
+ --pf-c-hint__body--FontSize: var(--pf-global--FontSize--md);
10707
+ --pf-c-hint__footer--child--MarginRight: var(--pf-global--spacer--md);
10708
+ --pf-c-hint__actions--MarginLeft: var(--pf-global--spacer--2xl);
10709
+ --pf-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10710
+ display: grid;
10711
+ grid-template-columns: 1fr auto;
10712
+ grid-row-gap: var(--pf-c-hint--GridRowGap);
10713
+ padding: var(--pf-c-hint--PaddingTop) var(--pf-c-hint--PaddingRight) var(--pf-c-hint--PaddingBottom) var(--pf-c-hint--PaddingLeft);
10714
+ color: var(--pf-c-hint--Color);
10715
+ background-color: var(--pf-c-hint--BackgroundColor);
10716
+ border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
10717
+ box-shadow: var(--pf-c-hint--BoxShadow);
10718
+ }
10719
+
10720
+ .pf-c-hint .pf-c-button.pf-m-link.pf-m-inline {
10721
+ text-align: left;
10722
+ white-space: normal;
10723
+ }
10724
+
10725
+ .pf-c-hint__actions {
10726
+ display: inline-grid;
10727
+ grid-auto-flow: column;
10728
+ margin-left: var(--pf-c-hint__actions--MarginLeft);
10729
+ text-align: right;
10730
+ grid-column: 2;
10731
+ grid-row: 1;
10732
+ }
10733
+
10734
+ .pf-c-hint__actions .pf-c-dropdown .pf-c-dropdown__toggle.pf-m-plain {
10735
+ margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
10736
+ }
10737
+
10738
+ .pf-c-hint__actions + .pf-c-hint__body {
10739
+ grid-column: 1;
10740
+ }
10741
+
10742
+ .pf-c-hint__title {
10743
+ font-size: var(--pf-c-hint__title--FontSize);
10744
+ }
10745
+
10746
+ .pf-c-hint__body {
10747
+ grid-column: 1/-1;
10748
+ font-size: var(--pf-c-hint__body--FontSize);
10749
+ }
10750
+
10751
+ .pf-c-hint__footer {
10752
+ grid-column: 1/-1;
10753
+ }
10754
+
10755
+ .pf-c-hint__footer > :not(:last-child) {
10756
+ margin-right: var(--pf-c-hint__footer--child--MarginRight);
10757
+ }
10758
+
10759
+ :where(.pf-theme-dark) .pf-c-hint {
10760
+ --pf-c-hint--BackgroundColor: var(--pf-global--BackgroundColor--400);
10761
+ --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
10762
+ }
10763
+
10764
10764
  .pf-c-list {
10765
10765
  --pf-c-list--PaddingLeft: var(--pf-global--spacer--lg);
10766
10766
  --pf-c-list--nested--MarginTop: var(--pf-global--spacer--sm);