@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.
- package/CHANGELOG.md +24 -0
- package/dist/esm/components/LoginPage/LoginFooterItem.d.ts +3 -3
- package/dist/esm/components/LoginPage/LoginForm.d.ts +18 -18
- package/dist/esm/components/LoginPage/LoginHeader.d.ts +1 -1
- package/dist/esm/components/LoginPage/LoginMainBody.d.ts +2 -2
- package/dist/esm/components/LoginPage/LoginMainFooter.d.ts +5 -5
- package/dist/esm/components/LoginPage/LoginMainFooterBandItem.d.ts +2 -2
- package/dist/esm/components/LoginPage/LoginMainFooterLinksItem.d.ts +5 -5
- package/dist/esm/components/LoginPage/LoginMainHeader.d.ts +6 -4
- package/dist/esm/components/LoginPage/LoginMainHeader.d.ts.map +1 -1
- package/dist/esm/components/LoginPage/LoginMainHeader.js +2 -1
- package/dist/esm/components/LoginPage/LoginMainHeader.js.map +1 -1
- package/dist/esm/components/LoginPage/LoginPage.d.ts +16 -14
- package/dist/esm/components/LoginPage/LoginPage.d.ts.map +1 -1
- package/dist/esm/components/LoginPage/LoginPage.js +2 -2
- package/dist/esm/components/LoginPage/LoginPage.js.map +1 -1
- package/dist/js/components/LoginPage/LoginFooterItem.d.ts +3 -3
- package/dist/js/components/LoginPage/LoginForm.d.ts +18 -18
- package/dist/js/components/LoginPage/LoginHeader.d.ts +1 -1
- package/dist/js/components/LoginPage/LoginMainBody.d.ts +2 -2
- package/dist/js/components/LoginPage/LoginMainFooter.d.ts +5 -5
- package/dist/js/components/LoginPage/LoginMainFooterBandItem.d.ts +2 -2
- package/dist/js/components/LoginPage/LoginMainFooterLinksItem.d.ts +5 -5
- package/dist/js/components/LoginPage/LoginMainHeader.d.ts +6 -4
- package/dist/js/components/LoginPage/LoginMainHeader.d.ts.map +1 -1
- package/dist/js/components/LoginPage/LoginMainHeader.js +2 -1
- package/dist/js/components/LoginPage/LoginMainHeader.js.map +1 -1
- package/dist/js/components/LoginPage/LoginPage.d.ts +16 -14
- package/dist/js/components/LoginPage/LoginPage.d.ts.map +1 -1
- package/dist/js/components/LoginPage/LoginPage.js +2 -2
- package/dist/js/components/LoginPage/LoginPage.js.map +1 -1
- package/dist/umd/react-core.css +976 -976
- package/dist/umd/react-core.js +4 -3
- package/dist/umd/react-core.min.css +70 -70
- package/dist/umd/react-core.min.js +4 -4
- package/package.json +6 -6
- package/src/components/Card/examples/Card.md +67 -38
- package/src/components/LoginPage/LoginFooterItem.tsx +3 -3
- package/src/components/LoginPage/LoginForm.tsx +18 -18
- package/src/components/LoginPage/LoginHeader.tsx +1 -1
- package/src/components/LoginPage/LoginMainBody.tsx +2 -2
- package/src/components/LoginPage/LoginMainFooter.tsx +5 -5
- package/src/components/LoginPage/LoginMainFooterBandItem.tsx +2 -2
- package/src/components/LoginPage/LoginMainFooterLinksItem.tsx +5 -5
- package/src/components/LoginPage/LoginMainHeader.tsx +8 -4
- package/src/components/LoginPage/LoginPage.tsx +18 -15
- package/src/components/LoginPage/examples/LoginPage.md +8 -0
- package/src/components/LoginPage/examples/LoginPageBasic.tsx +0 -1
- package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx +194 -0
- package/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx +0 -1
- package/src/components/NotificationDrawer/examples/NotificationDrawer.md +3 -708
- package/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx +185 -0
- package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx +337 -0
- package/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx +185 -0
- package/src/demos/CardDemos.md +4 -0
package/dist/umd/react-core.js
CHANGED
|
@@ -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);
|