@cloud-ru/uikit-product-page-layout 2.1.12-preview-41e0b1d4.0 → 2.2.0
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 +11 -0
- package/dist/cjs/components/PageForm/PageForm.js +2 -2
- package/dist/cjs/components/PageForm/styles.module.css +17 -4
- package/dist/esm/components/PageForm/PageForm.js +2 -2
- package/dist/esm/components/PageForm/styles.module.css +17 -4
- package/package.json +2 -2
- package/src/components/PageForm/PageForm.tsx +8 -2
- package/src/components/PageForm/styles.module.scss +24 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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
|
+
# 2.2.0 (2026-07-09)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **FF-8766:** add stickyFooter prop to PageForm ([2074571](https://github.com/cloud-ru-tech/uikit-product/commit/2074571df26fa07d2cfec2b85bccba415de17c73))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## 2.1.11 (2026-07-07)
|
|
7
18
|
|
|
8
19
|
### Only dependencies have been changed
|
|
@@ -32,12 +32,12 @@ function PageForm(_a) {
|
|
|
32
32
|
const PrimaryButton = (0, hooks_1.useButtonWithTooltip)({ Button: button_1.ButtonFilled, tooltip: footer === null || footer === void 0 ? void 0 : footer.buttonPrimary.tooltip });
|
|
33
33
|
const SecondaryButton = (0, hooks_1.useButtonWithTooltip)({ Button: button_1.ButtonOutline, tooltip: (_b = footer === null || footer === void 0 ? void 0 : footer.buttonSecondary) === null || _b === void 0 ? void 0 : _b.tooltip });
|
|
34
34
|
const AdditionalButton = (0, hooks_1.useButtonWithTooltip)({ Button: button_1.ButtonSimple, tooltip: (_c = footer === null || footer === void 0 ? void 0 : footer.buttonAdditional) === null || _c === void 0 ? void 0 : _c.tooltip });
|
|
35
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.container, className) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.form, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headline, children: (0, jsx_runtime_1.jsx)(Headline_1.Headline, { title: title, subHeader: subHeader }) }), stepper, (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.body, children: children }), footer && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.footer, {
|
|
35
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.container, className) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.form, { [styles_module_scss_1.default.formStickyFooter]: stickyFooter && footer }), children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headline, children: (0, jsx_runtime_1.jsx)(Headline_1.Headline, { title: title, subHeader: subHeader }) }), stepper, (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.body, children: children }), footer && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.footer, {
|
|
36
36
|
[styles_module_scss_1.default.footerSticky]: stickyFooter,
|
|
37
37
|
[styles_module_scss_1.default.footerStuck]: stickyFooter && !atBottom,
|
|
38
38
|
}), children: [footer.buttonSecondary && ((0, jsx_runtime_1.jsx)(SecondaryButton, Object.assign({}, footer.buttonSecondary, { size: 'm', appearance: 'neutral', label: footer.buttonSecondary.variant === 'custom'
|
|
39
39
|
? footer.buttonSecondary.label
|
|
40
40
|
: getButtonLabel(footer.buttonSecondary.variant) }))), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.mainActions, children: [footer.buttonAdditional && (0, jsx_runtime_1.jsx)(AdditionalButton, Object.assign({}, footer.buttonAdditional, { size: 'm' })), (0, jsx_runtime_1.jsx)(PrimaryButton, Object.assign({}, footer.buttonPrimary, { size: 'm', label: footer.buttonPrimary.variant === 'custom'
|
|
41
41
|
? footer.buttonPrimary.label
|
|
42
|
-
: getButtonLabel(footer.buttonPrimary.variant) }))] })] }), stickyFooter && (0, jsx_runtime_1.jsx)("div", { ref: sentinelRef, className: styles_module_scss_1.default.footerSentinel, "aria-hidden": true })] }))] }), (moreItems === null || moreItems === void 0 ? void 0 : moreItems.length) > 0 && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.sideItems, children: moreItems })] })));
|
|
42
|
+
: getButtonLabel(footer.buttonPrimary.variant) }))] })] }), stickyFooter && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: sentinelRef, className: styles_module_scss_1.default.footerSentinel, "aria-hidden": true }), (0, jsx_runtime_1.jsx)("div", {})] }))] }))] }), (moreItems === null || moreItems === void 0 ? void 0 : moreItems.length) > 0 && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.sideItems, children: moreItems })] })));
|
|
43
43
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
1
2
|
.container{
|
|
2
3
|
padding:var(--dimension-3m, 24px);
|
|
3
4
|
min-width:-moz-fit-content;
|
|
@@ -36,18 +37,30 @@
|
|
|
36
37
|
.footerSticky{
|
|
37
38
|
position:sticky;
|
|
38
39
|
bottom:0;
|
|
39
|
-
z-index:1;
|
|
40
40
|
box-sizing:border-box;
|
|
41
41
|
background-color:var(--sys-neutral-background1-level, #fdfdfd);
|
|
42
42
|
border-radius:16px;
|
|
43
43
|
padding:24px 56px;
|
|
44
|
-
margin
|
|
45
|
-
transition:
|
|
44
|
+
margin:-24px -56px -56px;
|
|
45
|
+
transition:border-radius 0.15s ease;
|
|
46
|
+
}
|
|
47
|
+
.footerSticky::before{
|
|
48
|
+
content:"";
|
|
49
|
+
position:absolute;
|
|
50
|
+
inset:0;
|
|
51
|
+
border-radius:inherit;
|
|
52
|
+
box-shadow:var(--box-shadow-elevation-level3, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 8px 16px 0px rgba(0, 0, 0, 0.0784313725));
|
|
53
|
+
clip-path:inset(-24px -8px calc(100% - 16px) -8px);
|
|
54
|
+
opacity:0;
|
|
55
|
+
pointer-events:none;
|
|
56
|
+
transition:opacity 0.15s ease;
|
|
46
57
|
}
|
|
47
58
|
|
|
48
59
|
.footerStuck{
|
|
49
60
|
border-radius:16px 16px 0 0;
|
|
50
|
-
|
|
61
|
+
}
|
|
62
|
+
.footerStuck::before{
|
|
63
|
+
opacity:1;
|
|
51
64
|
}
|
|
52
65
|
|
|
53
66
|
.footerSentinel{
|
|
@@ -26,12 +26,12 @@ export function PageForm(_a) {
|
|
|
26
26
|
const PrimaryButton = useButtonWithTooltip({ Button: ButtonFilled, tooltip: footer === null || footer === void 0 ? void 0 : footer.buttonPrimary.tooltip });
|
|
27
27
|
const SecondaryButton = useButtonWithTooltip({ Button: ButtonOutline, tooltip: (_b = footer === null || footer === void 0 ? void 0 : footer.buttonSecondary) === null || _b === void 0 ? void 0 : _b.tooltip });
|
|
28
28
|
const AdditionalButton = useButtonWithTooltip({ Button: ButtonSimple, tooltip: (_c = footer === null || footer === void 0 ? void 0 : footer.buttonAdditional) === null || _c === void 0 ? void 0 : _c.tooltip });
|
|
29
|
-
return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.form, children: [_jsx("div", { className: styles.headline, children: _jsx(Headline, { title: title, subHeader: subHeader }) }), stepper, _jsx("div", { className: styles.body, children: children }), footer && (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(styles.footer, {
|
|
29
|
+
return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: cn(styles.form, { [styles.formStickyFooter]: stickyFooter && footer }), children: [_jsx("div", { className: styles.headline, children: _jsx(Headline, { title: title, subHeader: subHeader }) }), stepper, _jsx("div", { className: styles.body, children: children }), footer && (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(styles.footer, {
|
|
30
30
|
[styles.footerSticky]: stickyFooter,
|
|
31
31
|
[styles.footerStuck]: stickyFooter && !atBottom,
|
|
32
32
|
}), children: [footer.buttonSecondary && (_jsx(SecondaryButton, Object.assign({}, footer.buttonSecondary, { size: 'm', appearance: 'neutral', label: footer.buttonSecondary.variant === 'custom'
|
|
33
33
|
? footer.buttonSecondary.label
|
|
34
34
|
: getButtonLabel(footer.buttonSecondary.variant) }))), _jsxs("div", { className: styles.mainActions, children: [footer.buttonAdditional && _jsx(AdditionalButton, Object.assign({}, footer.buttonAdditional, { size: 'm' })), _jsx(PrimaryButton, Object.assign({}, footer.buttonPrimary, { size: 'm', label: footer.buttonPrimary.variant === 'custom'
|
|
35
35
|
? footer.buttonPrimary.label
|
|
36
|
-
: getButtonLabel(footer.buttonPrimary.variant) }))] })] }), stickyFooter && _jsx("div", { ref: sentinelRef, className: styles.footerSentinel, "aria-hidden": true })] }))] }), (moreItems === null || moreItems === void 0 ? void 0 : moreItems.length) > 0 && _jsx("div", { className: styles.sideItems, children: moreItems })] })));
|
|
36
|
+
: getButtonLabel(footer.buttonPrimary.variant) }))] })] }), stickyFooter && (_jsxs(_Fragment, { children: [_jsx("div", { ref: sentinelRef, className: styles.footerSentinel, "aria-hidden": true }), _jsx("div", {})] }))] }))] }), (moreItems === null || moreItems === void 0 ? void 0 : moreItems.length) > 0 && _jsx("div", { className: styles.sideItems, children: moreItems })] })));
|
|
37
37
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
1
2
|
.container{
|
|
2
3
|
padding:var(--dimension-3m, 24px);
|
|
3
4
|
min-width:-moz-fit-content;
|
|
@@ -36,18 +37,30 @@
|
|
|
36
37
|
.footerSticky{
|
|
37
38
|
position:sticky;
|
|
38
39
|
bottom:0;
|
|
39
|
-
z-index:1;
|
|
40
40
|
box-sizing:border-box;
|
|
41
41
|
background-color:var(--sys-neutral-background1-level, #fdfdfd);
|
|
42
42
|
border-radius:16px;
|
|
43
43
|
padding:24px 56px;
|
|
44
|
-
margin
|
|
45
|
-
transition:
|
|
44
|
+
margin:-24px -56px -56px;
|
|
45
|
+
transition:border-radius 0.15s ease;
|
|
46
|
+
}
|
|
47
|
+
.footerSticky::before{
|
|
48
|
+
content:"";
|
|
49
|
+
position:absolute;
|
|
50
|
+
inset:0;
|
|
51
|
+
border-radius:inherit;
|
|
52
|
+
box-shadow:var(--box-shadow-elevation-level3, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 8px 16px 0px rgba(0, 0, 0, 0.0784313725));
|
|
53
|
+
clip-path:inset(-24px -8px calc(100% - 16px) -8px);
|
|
54
|
+
opacity:0;
|
|
55
|
+
pointer-events:none;
|
|
56
|
+
transition:opacity 0.15s ease;
|
|
46
57
|
}
|
|
47
58
|
|
|
48
59
|
.footerStuck{
|
|
49
60
|
border-radius:16px 16px 0 0;
|
|
50
|
-
|
|
61
|
+
}
|
|
62
|
+
.footerStuck::before{
|
|
63
|
+
opacity:1;
|
|
51
64
|
}
|
|
52
65
|
|
|
53
66
|
.footerSentinel{
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloud-ru/uikit-product-page-layout",
|
|
3
3
|
"title": "Page Layout",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.2.0",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"*.css",
|
|
7
7
|
"*.woff",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"@cloud-ru/uikit-product-locale": "*"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "5469b86628964c46df87598a5ec968a3ab2f7258"
|
|
61
61
|
}
|
|
@@ -95,7 +95,7 @@ export function PageForm({
|
|
|
95
95
|
|
|
96
96
|
return (
|
|
97
97
|
<div className={cn(styles.container, className)} {...extractSupportProps(rest)}>
|
|
98
|
-
<div className={styles.form}>
|
|
98
|
+
<div className={cn(styles.form, { [styles.formStickyFooter]: stickyFooter && footer })}>
|
|
99
99
|
<div className={styles.headline}>
|
|
100
100
|
<Headline title={title} subHeader={subHeader} />
|
|
101
101
|
</div>
|
|
@@ -140,7 +140,13 @@ export function PageForm({
|
|
|
140
140
|
</div>
|
|
141
141
|
</div>
|
|
142
142
|
|
|
143
|
-
{stickyFooter &&
|
|
143
|
+
{stickyFooter && (
|
|
144
|
+
<>
|
|
145
|
+
<div ref={sentinelRef} className={styles.footerSentinel} aria-hidden />
|
|
146
|
+
{/* Нужно для правильного отступа снизу */}
|
|
147
|
+
<div />
|
|
148
|
+
</>
|
|
149
|
+
)}
|
|
144
150
|
</>
|
|
145
151
|
)}
|
|
146
152
|
</div>
|
|
@@ -40,22 +40,40 @@ $prefix-height: styles-theme-variables.simple-var(styles-theme-variables.$sans-h
|
|
|
40
40
|
position: sticky;
|
|
41
41
|
bottom: 0;
|
|
42
42
|
|
|
43
|
-
/* stylelint-disable-next-line declaration-property-value-allowed-list */
|
|
44
|
-
z-index: 1;
|
|
45
|
-
|
|
46
43
|
box-sizing: border-box;
|
|
47
44
|
background-color: styles-theme-variables.$sys-neutral-background1-level;
|
|
48
45
|
border-radius: 16px;
|
|
49
46
|
padding: 24px 56px;
|
|
50
|
-
margin:
|
|
47
|
+
margin: -24px -56px -56px;
|
|
51
48
|
|
|
52
49
|
/* stylelint-disable-next-line declaration-property-value-allowed-list */
|
|
53
|
-
transition:
|
|
50
|
+
transition: border-radius 0.15s ease;
|
|
51
|
+
|
|
52
|
+
/* Тень из токена, но обрезаем всё ниже верхней кромки — остаётся только тень сверху. */
|
|
53
|
+
&::before {
|
|
54
|
+
content: '';
|
|
55
|
+
position: absolute;
|
|
56
|
+
inset: 0;
|
|
57
|
+
border-radius: inherit;
|
|
58
|
+
box-shadow: styles-theme-variables.$box-shadow-elevation-level3;
|
|
59
|
+
|
|
60
|
+
/* оставляем полосу над верхней кромкой + зону скруглённых углов (до высоты радиуса),
|
|
61
|
+
по бокам чуть выходим наружу, чтобы поймать тень на скруглении */
|
|
62
|
+
clip-path: inset(-24px -8px calc(100% - 16px) -8px);
|
|
63
|
+
opacity: 0;
|
|
64
|
+
pointer-events: none;
|
|
65
|
+
|
|
66
|
+
/* stylelint-disable-next-line declaration-property-value-allowed-list */
|
|
67
|
+
transition: opacity 0.15s ease;
|
|
68
|
+
}
|
|
54
69
|
}
|
|
55
70
|
|
|
56
71
|
.footerStuck {
|
|
57
72
|
border-radius: 16px 16px 0 0;
|
|
58
|
-
|
|
73
|
+
|
|
74
|
+
&::before {
|
|
75
|
+
opacity: 1;
|
|
76
|
+
}
|
|
59
77
|
}
|
|
60
78
|
|
|
61
79
|
.footerSentinel {
|