@cloud-ru/ds-uikit-product-modal-predefined 1.0.8 → 1.0.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.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/components/DeleteModal/DeleteModal.js +1 -1
- package/dist/cjs/components/DeleteModal/styles.module.css +0 -16
- package/dist/cjs/components/RecallModal/RecallModal.js +1 -1
- package/dist/cjs/components/RecallModal/styles.module.css +0 -16
- package/dist/cjs/helperComponents/DesktopReleaseNotes/DesktopReleaseNotes.js +1 -1
- package/dist/cjs/helperComponents/DesktopReleaseNotes/styles.module.css +0 -16
- package/dist/cjs/style.css +0 -48
- package/dist/esm/components/DeleteModal/DeleteModal.js +1 -1
- package/dist/esm/components/DeleteModal/styles.module.css +0 -16
- package/dist/esm/components/RecallModal/RecallModal.js +1 -1
- package/dist/esm/components/RecallModal/styles.module.css +0 -16
- package/dist/esm/helperComponents/DesktopReleaseNotes/DesktopReleaseNotes.js +1 -1
- package/dist/esm/helperComponents/DesktopReleaseNotes/styles.module.css +0 -16
- package/dist/esm/style.css +0 -48
- package/dist/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/package.json +6 -6
- package/src/components/DeleteModal/DeleteModal.tsx +0 -2
- package/src/components/DeleteModal/styles.module.scss +0 -19
- package/src/components/RecallModal/RecallModal.tsx +0 -2
- package/src/components/RecallModal/styles.module.scss +0 -19
- package/src/helperComponents/DesktopReleaseNotes/DesktopReleaseNotes.tsx +0 -2
- package/src/helperComponents/DesktopReleaseNotes/styles.module.scss +0 -19
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
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
|
+
## 1.0.9 (2026-08-27)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- **FF-8868:** keep window safe-area in modal dialog slots and lay out footer with FooterActions ([0fd2dd6](https://github.com/cloud-ru-tech/snack-v2/commit/0fd2dd6a8c7deaacbf240013cb307899cc54b994))
|
|
11
|
+
|
|
6
12
|
## 1.0.8 (2026-08-27)
|
|
7
13
|
|
|
8
14
|
### Bug Fixes
|
|
@@ -35,5 +35,5 @@ function DeleteModal({ open, onClose, mode, closeOnPopstate, objectType, titleTo
|
|
|
35
35
|
}
|
|
36
36
|
onDelete(handleClose);
|
|
37
37
|
};
|
|
38
|
-
return ((0, jsx_runtime_1.jsxs)(modal_1.ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: modal_1.WIDTH.S, "data-test-id": constants_1.TEST_IDS.deleteModal, ...rest, children: [(0, jsx_runtime_1.jsx)(
|
|
38
|
+
return ((0, jsx_runtime_1.jsxs)(modal_1.ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: modal_1.WIDTH.S, "data-test-id": constants_1.TEST_IDS.deleteModal, ...rest, children: [(0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Header, { title: title, subtitle: subtitle, slotAfterTitle: titleTooltip ? (0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Body, { className: styles_module_scss_1.default.body, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [content ?? t('deleteModal.content'), shouldShowConfirm && ((0, jsx_runtime_1.jsx)(helperComponents_1.InputConfirm, { ref: inputRef, confirmText: confirmText ?? '', hideConfirmCopyButton: hideConfirmCopyButton, value: value, error: error, size: 'l', copyLineAlign: 'start', confirmLabel: t('deleteModal.confirmLabel'), placeholder: confirmPlaceholder, onChange: handleChange }))] }) }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Footer, { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Outline, appearance: button_1.APPEARANCE.Neutral, label: t('deleteModal.cancel'), onClick: handleClose, "data-test-id": constants_1.TEST_IDS.cancelButton }), (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Filled, appearance: button_1.APPEARANCE.Critical, label: t('deleteModal.approve'), loading: deleting, onClick: handleApproveClick, "data-test-id": constants_1.TEST_IDS.approveButton })] }) })] }));
|
|
39
39
|
}
|
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
.safeAreaTop{
|
|
2
|
-
display:flex;
|
|
3
|
-
flex-direction:column;
|
|
4
|
-
align-items:flex-start;
|
|
5
|
-
align-self:stretch;
|
|
6
|
-
padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.safeAreaBottom{
|
|
10
|
-
display:flex;
|
|
11
|
-
flex-direction:column;
|
|
12
|
-
align-items:flex-start;
|
|
13
|
-
align-self:stretch;
|
|
14
|
-
padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
|
|
15
|
-
}
|
|
16
|
-
|
|
17
1
|
.body{
|
|
18
2
|
min-height:auto;
|
|
19
3
|
}
|
|
@@ -33,5 +33,5 @@ function RecallModal({ open, onClose, mode, closeOnPopstate, titleTooltip, onRec
|
|
|
33
33
|
}
|
|
34
34
|
onRecall(handleClose);
|
|
35
35
|
};
|
|
36
|
-
return ((0, jsx_runtime_1.jsxs)(modal_1.ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: modal_1.WIDTH.S, "data-test-id": constants_1.TEST_IDS.recallModal, ...rest, children: [(0, jsx_runtime_1.jsx)(
|
|
36
|
+
return ((0, jsx_runtime_1.jsxs)(modal_1.ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: modal_1.WIDTH.S, "data-test-id": constants_1.TEST_IDS.recallModal, ...rest, children: [(0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Header, { title: t('recallModal.title'), subtitle: subtitle, slotAfterTitle: titleTooltip ? (0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Body, { className: styles_module_scss_1.default.body, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [content ?? t('recallModal.content'), shouldShowConfirm && ((0, jsx_runtime_1.jsx)(helperComponents_1.InputConfirm, { ref: inputRef, confirmText: confirmText ?? '', confirmLabel: t('recallModal.confirmLabel'), hideConfirmCopyButton: hideConfirmCopyButton, value: value, error: error, size: 'l', copyLineAlign: 'start', placeholder: t('confirm.namePlaceholder'), onChange: handleChange }))] }) }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Footer, { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Outline, appearance: button_1.APPEARANCE.Neutral, label: t('recallModal.cancel'), onClick: handleClose, "data-test-id": constants_1.TEST_IDS.cancelButton }), (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Filled, appearance: button_1.APPEARANCE.Critical, label: t('recallModal.approve'), loading: loading, onClick: handleApproveClick, "data-test-id": constants_1.TEST_IDS.approveButton })] }) })] }));
|
|
37
37
|
}
|
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
.safeAreaTop{
|
|
2
|
-
display:flex;
|
|
3
|
-
flex-direction:column;
|
|
4
|
-
align-items:flex-start;
|
|
5
|
-
align-self:stretch;
|
|
6
|
-
padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.safeAreaBottom{
|
|
10
|
-
display:flex;
|
|
11
|
-
flex-direction:column;
|
|
12
|
-
align-items:flex-start;
|
|
13
|
-
align-self:stretch;
|
|
14
|
-
padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
|
|
15
|
-
}
|
|
16
|
-
|
|
17
1
|
.body{
|
|
18
2
|
min-height:auto;
|
|
19
3
|
}
|
|
@@ -17,5 +17,5 @@ function DesktopReleaseNotes({ open, onClose, closeOnPopstate, contentState = co
|
|
|
17
17
|
const { t } = locale_1.modalPredefinedLocale.useTranslations();
|
|
18
18
|
const { pageIndex, readablePageNumber, setPage, handleClose, handleReadLaterClick, handleNextPageClick, handlePrevPageClick, } = (0, hooks_1.useReleaseNotesNavigation)({ onClose, onReadLaterClick, onSlideChange });
|
|
19
19
|
const shouldShowFooter = contentState === constants_1.CONTENT_STATE.Data && (loading || items.length > 0);
|
|
20
|
-
return ((0, jsx_runtime_1.jsxs)(modal_1.ModalCustom, { open: open, onClose: handleClose, closeOnPopstate: closeOnPopstate, width: modal_1.WIDTH.M, "data-content-state": contentState, "data-surface": 'modal', ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsx)(
|
|
20
|
+
return ((0, jsx_runtime_1.jsxs)(modal_1.ModalCustom, { open: open, onClose: handleClose, closeOnPopstate: closeOnPopstate, width: modal_1.WIDTH.M, "data-content-state": contentState, "data-surface": 'modal', ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Header, { title: t('releaseNotes.title') }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Body, { className: styles_module_scss_1.default.body, content: (0, jsx_runtime_1.jsx)(ReleaseNotesContent_1.ReleaseNotesContent, { contentState: contentState, items: items, loading: loading, pageIndex: pageIndex, surface: 'modal', noDataTitle: t('releaseNotes.noDataTitle'), noDataDescription: t('releaseNotes.noDataDescription'), errorTitle: t('releaseNotes.errorTitle'), errorDescription: t('releaseNotes.errorDescription'), retryLabel: t('releaseNotes.retry'), onPageChange: setPage, onDataErrorRetryClick: onDataErrorRetryClick }) }), shouldShowFooter && ((0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Footer, { children: (0, jsx_runtime_1.jsx)(ReleaseNotesFooter_1.ReleaseNotesFooter, { surface: 'modal', total: items.length, pageIndex: pageIndex, readablePageNumber: readablePageNumber, counterLabel: t('releaseNotes.counter', { page: readablePageNumber, total: items.length }), readLaterLabel: t('releaseNotes.readLater'), onReadLaterClick: handleReadLaterClick, onPrevPageClick: handlePrevPageClick, onNextPageClick: () => handleNextPageClick(items.length) }) }))] }));
|
|
21
21
|
}
|
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
.safeAreaTop{
|
|
2
|
-
display:flex;
|
|
3
|
-
flex-direction:column;
|
|
4
|
-
align-items:flex-start;
|
|
5
|
-
align-self:stretch;
|
|
6
|
-
padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.safeAreaBottom{
|
|
10
|
-
display:flex;
|
|
11
|
-
flex-direction:column;
|
|
12
|
-
align-items:flex-start;
|
|
13
|
-
align-self:stretch;
|
|
14
|
-
padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
|
|
15
|
-
}
|
|
16
|
-
|
|
17
1
|
.body{
|
|
18
2
|
min-height:calc(6 * var(--sn-primitive-dimension-64, 64px));
|
|
19
3
|
}
|
package/dist/cjs/style.css
CHANGED
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
.safeAreaTop{
|
|
2
|
-
display:flex;
|
|
3
|
-
flex-direction:column;
|
|
4
|
-
align-items:flex-start;
|
|
5
|
-
align-self:stretch;
|
|
6
|
-
padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.safeAreaBottom{
|
|
10
|
-
display:flex;
|
|
11
|
-
flex-direction:column;
|
|
12
|
-
align-items:flex-start;
|
|
13
|
-
align-self:stretch;
|
|
14
|
-
padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
|
|
15
|
-
}
|
|
16
|
-
|
|
17
1
|
.body{
|
|
18
2
|
min-height:auto;
|
|
19
3
|
}
|
|
@@ -31,22 +15,6 @@
|
|
|
31
15
|
justify-content:flex-end;
|
|
32
16
|
width:100%;
|
|
33
17
|
}
|
|
34
|
-
.safeAreaTop{
|
|
35
|
-
display:flex;
|
|
36
|
-
flex-direction:column;
|
|
37
|
-
align-items:flex-start;
|
|
38
|
-
align-self:stretch;
|
|
39
|
-
padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.safeAreaBottom{
|
|
43
|
-
display:flex;
|
|
44
|
-
flex-direction:column;
|
|
45
|
-
align-items:flex-start;
|
|
46
|
-
align-self:stretch;
|
|
47
|
-
padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
|
|
48
|
-
}
|
|
49
|
-
|
|
50
18
|
.body{
|
|
51
19
|
min-height:auto;
|
|
52
20
|
}
|
|
@@ -64,22 +32,6 @@
|
|
|
64
32
|
justify-content:flex-end;
|
|
65
33
|
width:100%;
|
|
66
34
|
}
|
|
67
|
-
.safeAreaTop{
|
|
68
|
-
display:flex;
|
|
69
|
-
flex-direction:column;
|
|
70
|
-
align-items:flex-start;
|
|
71
|
-
align-self:stretch;
|
|
72
|
-
padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.safeAreaBottom{
|
|
76
|
-
display:flex;
|
|
77
|
-
flex-direction:column;
|
|
78
|
-
align-items:flex-start;
|
|
79
|
-
align-self:stretch;
|
|
80
|
-
padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
|
|
81
|
-
}
|
|
82
|
-
|
|
83
35
|
.body{
|
|
84
36
|
min-height:calc(6 * var(--sn-primitive-dimension-64, 64px));
|
|
85
37
|
}
|
|
@@ -29,5 +29,5 @@ export function DeleteModal({ open, onClose, mode, closeOnPopstate, objectType,
|
|
|
29
29
|
}
|
|
30
30
|
onDelete(handleClose);
|
|
31
31
|
};
|
|
32
|
-
return (_jsxs(ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: WIDTH.S, "data-test-id": TEST_IDS.deleteModal, ...rest, children: [_jsx(
|
|
32
|
+
return (_jsxs(ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: WIDTH.S, "data-test-id": TEST_IDS.deleteModal, ...rest, children: [_jsx(ModalCustom.Header, { title: title, subtitle: subtitle, slotAfterTitle: titleTooltip ? _jsx(QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), _jsx(ModalCustom.Body, { className: styles.body, content: _jsxs("div", { className: styles.content, children: [content ?? t('deleteModal.content'), shouldShowConfirm && (_jsx(InputConfirm, { ref: inputRef, confirmText: confirmText ?? '', hideConfirmCopyButton: hideConfirmCopyButton, value: value, error: error, size: 'l', copyLineAlign: 'start', confirmLabel: t('deleteModal.confirmLabel'), placeholder: confirmPlaceholder, onChange: handleChange }))] }) }), _jsx(ModalCustom.Footer, { children: _jsxs("div", { className: styles.footer, children: [_jsx(Button, { view: VIEW.Outline, appearance: APPEARANCE.Neutral, label: t('deleteModal.cancel'), onClick: handleClose, "data-test-id": TEST_IDS.cancelButton }), _jsx(Button, { view: VIEW.Filled, appearance: APPEARANCE.Critical, label: t('deleteModal.approve'), loading: deleting, onClick: handleApproveClick, "data-test-id": TEST_IDS.approveButton })] }) })] }));
|
|
33
33
|
}
|
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
.safeAreaTop{
|
|
2
|
-
display:flex;
|
|
3
|
-
flex-direction:column;
|
|
4
|
-
align-items:flex-start;
|
|
5
|
-
align-self:stretch;
|
|
6
|
-
padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.safeAreaBottom{
|
|
10
|
-
display:flex;
|
|
11
|
-
flex-direction:column;
|
|
12
|
-
align-items:flex-start;
|
|
13
|
-
align-self:stretch;
|
|
14
|
-
padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
|
|
15
|
-
}
|
|
16
|
-
|
|
17
1
|
.body{
|
|
18
2
|
min-height:auto;
|
|
19
3
|
}
|
|
@@ -27,5 +27,5 @@ export function RecallModal({ open, onClose, mode, closeOnPopstate, titleTooltip
|
|
|
27
27
|
}
|
|
28
28
|
onRecall(handleClose);
|
|
29
29
|
};
|
|
30
|
-
return (_jsxs(ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: WIDTH.S, "data-test-id": TEST_IDS.recallModal, ...rest, children: [_jsx(
|
|
30
|
+
return (_jsxs(ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: WIDTH.S, "data-test-id": TEST_IDS.recallModal, ...rest, children: [_jsx(ModalCustom.Header, { title: t('recallModal.title'), subtitle: subtitle, slotAfterTitle: titleTooltip ? _jsx(QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), _jsx(ModalCustom.Body, { className: styles.body, content: _jsxs("div", { className: styles.content, children: [content ?? t('recallModal.content'), shouldShowConfirm && (_jsx(InputConfirm, { ref: inputRef, confirmText: confirmText ?? '', confirmLabel: t('recallModal.confirmLabel'), hideConfirmCopyButton: hideConfirmCopyButton, value: value, error: error, size: 'l', copyLineAlign: 'start', placeholder: t('confirm.namePlaceholder'), onChange: handleChange }))] }) }), _jsx(ModalCustom.Footer, { children: _jsxs("div", { className: styles.footer, children: [_jsx(Button, { view: VIEW.Outline, appearance: APPEARANCE.Neutral, label: t('recallModal.cancel'), onClick: handleClose, "data-test-id": TEST_IDS.cancelButton }), _jsx(Button, { view: VIEW.Filled, appearance: APPEARANCE.Critical, label: t('recallModal.approve'), loading: loading, onClick: handleApproveClick, "data-test-id": TEST_IDS.approveButton })] }) })] }));
|
|
31
31
|
}
|
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
.safeAreaTop{
|
|
2
|
-
display:flex;
|
|
3
|
-
flex-direction:column;
|
|
4
|
-
align-items:flex-start;
|
|
5
|
-
align-self:stretch;
|
|
6
|
-
padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.safeAreaBottom{
|
|
10
|
-
display:flex;
|
|
11
|
-
flex-direction:column;
|
|
12
|
-
align-items:flex-start;
|
|
13
|
-
align-self:stretch;
|
|
14
|
-
padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
|
|
15
|
-
}
|
|
16
|
-
|
|
17
1
|
.body{
|
|
18
2
|
min-height:auto;
|
|
19
3
|
}
|
|
@@ -11,5 +11,5 @@ export function DesktopReleaseNotes({ open, onClose, closeOnPopstate, contentSta
|
|
|
11
11
|
const { t } = modalPredefinedLocale.useTranslations();
|
|
12
12
|
const { pageIndex, readablePageNumber, setPage, handleClose, handleReadLaterClick, handleNextPageClick, handlePrevPageClick, } = useReleaseNotesNavigation({ onClose, onReadLaterClick, onSlideChange });
|
|
13
13
|
const shouldShowFooter = contentState === CONTENT_STATE.Data && (loading || items.length > 0);
|
|
14
|
-
return (_jsxs(ModalCustom, { open: open, onClose: handleClose, closeOnPopstate: closeOnPopstate, width: WIDTH.M, "data-content-state": contentState, "data-surface": 'modal', ...extractSupportProps(rest), children: [_jsx(
|
|
14
|
+
return (_jsxs(ModalCustom, { open: open, onClose: handleClose, closeOnPopstate: closeOnPopstate, width: WIDTH.M, "data-content-state": contentState, "data-surface": 'modal', ...extractSupportProps(rest), children: [_jsx(ModalCustom.Header, { title: t('releaseNotes.title') }), _jsx(ModalCustom.Body, { className: styles.body, content: _jsx(ReleaseNotesContent, { contentState: contentState, items: items, loading: loading, pageIndex: pageIndex, surface: 'modal', noDataTitle: t('releaseNotes.noDataTitle'), noDataDescription: t('releaseNotes.noDataDescription'), errorTitle: t('releaseNotes.errorTitle'), errorDescription: t('releaseNotes.errorDescription'), retryLabel: t('releaseNotes.retry'), onPageChange: setPage, onDataErrorRetryClick: onDataErrorRetryClick }) }), shouldShowFooter && (_jsx(ModalCustom.Footer, { children: _jsx(ReleaseNotesFooter, { surface: 'modal', total: items.length, pageIndex: pageIndex, readablePageNumber: readablePageNumber, counterLabel: t('releaseNotes.counter', { page: readablePageNumber, total: items.length }), readLaterLabel: t('releaseNotes.readLater'), onReadLaterClick: handleReadLaterClick, onPrevPageClick: handlePrevPageClick, onNextPageClick: () => handleNextPageClick(items.length) }) }))] }));
|
|
15
15
|
}
|
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
.safeAreaTop{
|
|
2
|
-
display:flex;
|
|
3
|
-
flex-direction:column;
|
|
4
|
-
align-items:flex-start;
|
|
5
|
-
align-self:stretch;
|
|
6
|
-
padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.safeAreaBottom{
|
|
10
|
-
display:flex;
|
|
11
|
-
flex-direction:column;
|
|
12
|
-
align-items:flex-start;
|
|
13
|
-
align-self:stretch;
|
|
14
|
-
padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
|
|
15
|
-
}
|
|
16
|
-
|
|
17
1
|
.body{
|
|
18
2
|
min-height:calc(6 * var(--sn-primitive-dimension-64, 64px));
|
|
19
3
|
}
|
package/dist/esm/style.css
CHANGED
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
.safeAreaTop{
|
|
2
|
-
display:flex;
|
|
3
|
-
flex-direction:column;
|
|
4
|
-
align-items:flex-start;
|
|
5
|
-
align-self:stretch;
|
|
6
|
-
padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.safeAreaBottom{
|
|
10
|
-
display:flex;
|
|
11
|
-
flex-direction:column;
|
|
12
|
-
align-items:flex-start;
|
|
13
|
-
align-self:stretch;
|
|
14
|
-
padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
|
|
15
|
-
}
|
|
16
|
-
|
|
17
1
|
.body{
|
|
18
2
|
min-height:auto;
|
|
19
3
|
}
|
|
@@ -31,22 +15,6 @@
|
|
|
31
15
|
justify-content:flex-end;
|
|
32
16
|
width:100%;
|
|
33
17
|
}
|
|
34
|
-
.safeAreaTop{
|
|
35
|
-
display:flex;
|
|
36
|
-
flex-direction:column;
|
|
37
|
-
align-items:flex-start;
|
|
38
|
-
align-self:stretch;
|
|
39
|
-
padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.safeAreaBottom{
|
|
43
|
-
display:flex;
|
|
44
|
-
flex-direction:column;
|
|
45
|
-
align-items:flex-start;
|
|
46
|
-
align-self:stretch;
|
|
47
|
-
padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
|
|
48
|
-
}
|
|
49
|
-
|
|
50
18
|
.body{
|
|
51
19
|
min-height:auto;
|
|
52
20
|
}
|
|
@@ -64,22 +32,6 @@
|
|
|
64
32
|
justify-content:flex-end;
|
|
65
33
|
width:100%;
|
|
66
34
|
}
|
|
67
|
-
.safeAreaTop{
|
|
68
|
-
display:flex;
|
|
69
|
-
flex-direction:column;
|
|
70
|
-
align-items:flex-start;
|
|
71
|
-
align-self:stretch;
|
|
72
|
-
padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.safeAreaBottom{
|
|
76
|
-
display:flex;
|
|
77
|
-
flex-direction:column;
|
|
78
|
-
align-items:flex-start;
|
|
79
|
-
align-self:stretch;
|
|
80
|
-
padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
|
|
81
|
-
}
|
|
82
|
-
|
|
83
35
|
.body{
|
|
84
36
|
min-height:calc(6 * var(--sn-primitive-dimension-64, 64px));
|
|
85
37
|
}
|