@gravity-ui/page-constructor 3.8.2 → 3.8.3

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 (21) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +22 -0
  3. package/build/cjs/editor/components/AddBlock/AddBlock.css +1 -1
  4. package/build/cjs/editor/components/BlockForm/BlockForm.js +2 -2
  5. package/build/cjs/editor/components/ControlPanel/ControlPanel.css +2 -1
  6. package/build/cjs/editor/components/EditBlock/EditBlock.css +6 -6
  7. package/build/cjs/editor/components/Layout/Layout.css +4 -1
  8. package/build/cjs/editor/components/Layout/Layout.js +3 -1
  9. package/build/cjs/editor/containers/Form/Form.css +36 -18
  10. package/build/cjs/editor/containers/Form/Form.js +8 -7
  11. package/build/cjs/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.css +1 -1
  12. package/build/esm/editor/components/AddBlock/AddBlock.css +1 -1
  13. package/build/esm/editor/components/BlockForm/BlockForm.js +3 -3
  14. package/build/esm/editor/components/ControlPanel/ControlPanel.css +2 -1
  15. package/build/esm/editor/components/EditBlock/EditBlock.css +6 -6
  16. package/build/esm/editor/components/Layout/Layout.css +4 -1
  17. package/build/esm/editor/components/Layout/Layout.js +3 -1
  18. package/build/esm/editor/containers/Form/Form.css +36 -18
  19. package/build/esm/editor/containers/Form/Form.js +8 -7
  20. package/build/esm/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.css +1 -1
  21. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ## [3.8.3](https://github.com/gravity-ui/page-constructor/compare/v3.8.2...v3.8.3) (2023-06-27)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * editor form style indent ([#428](https://github.com/gravity-ui/page-constructor/issues/428)) ([3fc6da7](https://github.com/gravity-ui/page-constructor/commit/3fc6da73f7e724aaa4e8f22a45228f1a2cc4dc81))
9
+
3
10
  ## [3.8.2](https://github.com/gravity-ui/page-constructor/compare/v3.8.1...v3.8.2) (2023-06-23)
4
11
 
5
12
 
package/README.md CHANGED
@@ -366,3 +366,25 @@ If you want to release a new version in previous major after commit it to the ma
366
366
  6. Wait until robot creates a PR with a new version of the package and information about your changes in CHANGELOG.md. You can see the process on [the Actions tab](https://github.com/gravity-ui/page-constructor/actions).
367
367
  7. Check your changes in CHANGELOG.md and approve robot's PR.
368
368
  8. Squash and merge PR. You can see release process on [the Actions tab](https://github.com/gravity-ui/page-constructor/actions).
369
+
370
+ ## Page constructor editor
371
+
372
+ Editor provides user interface for page content management with realtime preview.
373
+
374
+ How to use:
375
+
376
+ ```tsx
377
+ import {PageConstructor} from '@gravity-ui/page-constructor';
378
+ import {Editor} from '@gravity-ui/page-constructor/editor';
379
+
380
+ interface MyAppEditorProps {
381
+ initialContent: PageContent;
382
+ onChange: (content: PageContent) => void;
383
+ }
384
+
385
+ export const MyAppEditor = ({initialContent, onChange}: MyAppEditorProps) => (
386
+ <Editor onChange={onChange} content={initialContent}>
387
+ {(props) => <PageConstructor {...props} />}
388
+ </Editor>
389
+ );
390
+ ```
package/build/cjs/editor/components/AddBlock/AddBlock.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* use this for style redefinitions to awoid problems with
2
2
  unpredictable css rules order in build */
3
3
  .pc-add-block {
4
- position: fixed;
4
+ position: absolute;
5
5
  bottom: 32px;
6
6
  left: calc(50% + var(--editor-left-column-width) / 2);
7
7
  transform: translateX(-50%);
package/build/cjs/editor/components/BlockForm/BlockForm.js CHANGED
@@ -14,9 +14,9 @@ exports.BlockForm = (0, react_1.memo)((_a) => {
14
14
  const prevContent = (0, usePreviousValue_1.default)(content);
15
15
  const spec = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, specRaw), { viewSpec: Object.assign(Object.assign({}, specRaw.viewSpec), { layoutOpen: active }) })), [specRaw, active]);
16
16
  if (!active) {
17
- return (react_1.default.createElement(dynamic_forms_1.SimpleVerticalAccordeon, { open: false, name: type, title: spec.viewSpec.layoutTitle || type, onOpenChange: onSelect }, 1));
17
+ return (react_1.default.createElement(dynamic_forms_1.SimpleVerticalAccordeon, { open: false, name: type, title: spec.viewSpec.layoutTitle || type, onOpenChange: onSelect }, ' '));
18
18
  }
19
- return (react_1.default.createElement(react_final_form_1.Form, { initialValues: initialValues, onSubmit: lodash_1.default.noop }, () => (react_1.default.createElement("div", null,
19
+ return (react_1.default.createElement(react_final_form_1.Form, { initialValues: initialValues, onSubmit: lodash_1.default.noop }, () => (react_1.default.createElement(react_1.Fragment, null,
20
20
  react_1.default.createElement(react_final_form_1.FormSpy, { onChange: ({ values }) => {
21
21
  // fix for FormSpy onChange called twice without content changes
22
22
  if (!lodash_1.default.isEqual(values.content, prevContent)) {
package/build/cjs/editor/components/ControlPanel/ControlPanel.css CHANGED
@@ -7,7 +7,8 @@ unpredictable css rules order in build */
7
7
  height: var(--editor-header-height);
8
8
  padding: 8px 20px;
9
9
  background-color: var(--yc-color-base-background);
10
- border-bottom: 1px solid var(--yc-color-line-generic);
10
+ border: 1px var(--yc-color-line-generic);
11
+ border-style: solid none;
11
12
  }
12
13
  .pc-control-panel__icon {
13
14
  display: flex;
package/build/cjs/editor/components/EditBlock/EditBlock.css CHANGED
@@ -10,7 +10,7 @@ unpredictable css rules order in build */
10
10
  height: calc(100% + 40px);
11
11
  top: -20px;
12
12
  left: -20px;
13
- border-radius: 8px;
13
+ border-radius: var(--pc-border-radius);
14
14
  z-index: 100;
15
15
  }
16
16
  .pc-edit-block__controls_isHeader {
@@ -25,7 +25,7 @@ unpredictable css rules order in build */
25
25
  .pc-edit-block__controls-content {
26
26
  display: flex;
27
27
  position: absolute;
28
- bottom: -44px;
28
+ bottom: -40px;
29
29
  left: 50%;
30
30
  transform: translateX(-50%);
31
31
  }
@@ -34,14 +34,14 @@ unpredictable css rules order in build */
34
34
  justify-content: center;
35
35
  align-items: center;
36
36
  transition: transform 0.2s;
37
- width: 24px;
38
- height: 24px;
39
- border-radius: calc(8px / 2);
37
+ width: 48px;
38
+ height: 32px;
39
+ border-radius: 8px;
40
40
  background-color: var(--yc-color-promo-highlight-neon);
41
41
  }
42
42
  .pc-edit-block__control:hover {
43
43
  transform: scale(1.1);
44
44
  }
45
45
  .pc-edit-block__control:not(:first-child) {
46
- margin-left: 12px;
46
+ margin-left: 4px;
47
47
  }
package/build/cjs/editor/components/Layout/Layout.css CHANGED
@@ -29,11 +29,14 @@ unpredictable css rules order in build */
29
29
  }
30
30
  .pc-editor-layout__left {
31
31
  flex: 0 0 auto;
32
- padding: 8px 20px 20px;
32
+ padding: 24px 16px;
33
33
  width: var(--editor-left-column-width);
34
34
  border-right: var(--editor-divider-width) solid var(--yc-color-line-generic);
35
35
  overflow-x: auto;
36
36
  }
37
37
  .pc-editor-layout__right {
38
38
  width: 100%;
39
+ }
40
+ .pc-editor-layout__right_editing {
41
+ padding-bottom: 200px;
39
42
  }
package/build/cjs/editor/components/Layout/Layout.js CHANGED
@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const utils_1 = require("../../../utils");
6
+ const types_1 = require("../../types");
6
7
  const ControlPanel_1 = tslib_1.__importDefault(require("../ControlPanel/ControlPanel"));
7
8
  const b = (0, utils_1.block)('editor-layout');
8
9
  const Left = () => null;
9
10
  const Right = () => null;
10
11
  const Layout = ({ children, mode, onModeChange }) => {
11
12
  let left, right;
13
+ const isEditingMode = mode === types_1.ViewModeItem.Edititng;
12
14
  function handleChild(child) {
13
15
  switch (child === null || child === void 0 ? void 0 : child.type) {
14
16
  case Left:
@@ -27,7 +29,7 @@ const Layout = ({ children, mode, onModeChange }) => {
27
29
  react_1.default.createElement("div", { className: b('container') },
28
30
  react_1.default.createElement(react_1.Fragment, null,
29
31
  left && react_1.default.createElement("div", { className: b('left') }, left),
30
- right && react_1.default.createElement("div", { className: b('right') }, right)))));
32
+ right && react_1.default.createElement("div", { className: b('right', { editing: isEditingMode }) }, right)))));
31
33
  };
32
34
  Layout.Left = Left;
33
35
  Layout.Right = Right;
package/build/cjs/editor/containers/Form/Form.css CHANGED
@@ -3,14 +3,14 @@ unpredictable css rules order in build */
3
3
  .pc-editor-form {
4
4
  --top-level-font-size: var(--yc-text-display-2-font-size);
5
5
  --top-level-line-height: var(--yc-text-display-2-line-height);
6
- --block-propery-font-size: var(--yc-text-body-3-font-size);
7
- --block-property-line-height: var(--yc-text-body-3-line-height);
8
- --nested-property-font-size: var(--yc-text-body-1-font-size);
9
- --nested-property-line-height: var(--yc-text-body-1-line-height);
10
- --complex-nested-property-font-size: var(--yc-text-body-2-font-size);
11
- --complex-nested-property-line-height: var(--yc-text-body-2-line-height);
6
+ --block-level-complex-propery-font-size: var(--yc-text-body-3-font-size);
7
+ --block-level-complex-property-line-height: var(--yc-text-body-3-line-height);
8
+ --complex-property-font-size: var(--yc-text-body-2-font-size);
9
+ --complex-property-line-height: var(--yc-text-body-2-line-height);
10
+ --property-font-size: var(--yc-text-body-1-font-size);
11
+ --property-line-height: var(--yc-text-body-1-line-height);
12
12
  --input-min-width: 150px;
13
- --property-title-width: 140px;
13
+ --property-title-width: 96px;
14
14
  --button-height: 48px;
15
15
  --icon-size: 32px;
16
16
  --icon-margin: 42px;
@@ -24,20 +24,23 @@ unpredictable css rules order in build */
24
24
  --button-height: 32px;
25
25
  --icon-size: 20px;
26
26
  --icon-margin: 30px;
27
- --header-text-size: var(--block-propery-font-size);
28
- --header-line-height: var(--block-property-line-height);
29
- --text-size: var(--block-propery-font-size);
30
- --line-height: var(--block-property-line-height);
27
+ --header-text-size: var(--block-level-complex-propery-font-size);
28
+ --header-line-height: var(--block-level-complex-property-line-height);
29
+ --text-size: var(--property-font-size);
30
+ --line-height: var(--property-line-height);
31
+ --property-font-weight: 400;
31
32
  }
32
33
  .pc-editor-form .df-use-search .df-use-search .df-use-search {
33
34
  --button-height: 28px;
34
35
  --icon-size: 16px;
35
36
  --icon-margin: 25px;
36
37
  --property-font-weight: 400;
37
- --header-text-size: var(--complex-nested-property-font-size);
38
- --header-line-height: var(--complex-nested-property-line-height);
39
- --text-size: var(--nested-property-font-size);
40
- --line-height: var(--nested-property-line-height);
38
+ --header-text-size: var(--complex-property-font-size);
39
+ --header-line-height: var(--complex-property-line-height);
40
+ --text-size: var(--property-font-size);
41
+ --line-height: var(--property-line-height);
42
+ --oneof-text-size: var(--complex-propery-font-size);
43
+ --oneof-line-height: var(--complex-property-line-height);
41
44
  }
42
45
  .pc-editor-form .df-row {
43
46
  width: inherit;
@@ -73,17 +76,29 @@ unpredictable css rules order in build */
73
76
  .pc-editor-form .df-simple-vertical-accordeon__header .yc-button .yc-button__icon_side_right ~ .yc-button__text {
74
77
  margin-right: var(--icon-margin);
75
78
  }
79
+ .pc-editor-form .df-simple-vertical-accordeon__body {
80
+ margin-top: 0px;
81
+ padding-top: 12px;
82
+ }
83
+ .pc-editor-form .df-use-search {
84
+ margin: 4px 0;
85
+ }
76
86
  .pc-editor-form .df-simple-vertical-accordeon__body,
77
87
  .pc-editor-form .df-group-indent > .df-use-search {
78
88
  margin-top: 0;
79
89
  margin-left: 1px;
80
- padding-top: 12px;
81
- padding-left: 16px;
90
+ padding-top: 4px;
91
+ padding-bottom: 4px;
92
+ padding-left: 12px;
82
93
  border-left: 1px solid var(--yc-color-line-generic-accent);
83
94
  }
95
+ .pc-editor-form .df-simple-vertical-accordeon_branch .df-simple-vertical-accordeon__body {
96
+ padding-left: 12px;
97
+ }
84
98
  .pc-editor-form .g-select,
85
99
  .pc-editor-form .yc-text-input {
86
- width: var(--input-min-width);
100
+ min-width: var(--input-min-width);
101
+ width: 100%;
87
102
  }
88
103
  .pc-editor-form + .pc-editor-form {
89
104
  margin-top: 12px;
@@ -91,4 +106,7 @@ unpredictable css rules order in build */
91
106
  .pc-editor-form__tabs {
92
107
  --yc-color-base-special: var(--yc-color-promo-base-neon);
93
108
  margin-bottom: 20px;
109
+ }
110
+ .pc-editor-form__block-form {
111
+ margin-bottom: 16px;
94
112
  }
package/build/cjs/editor/containers/Form/Form.js CHANGED
@@ -30,13 +30,14 @@ exports.Form = (0, react_1.memo)(({ content, onChange, activeBlockIndex, onSelec
30
30
  break;
31
31
  }
32
32
  case FormTab.Blocks: {
33
- form = (react_1.default.createElement(react_1.Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (react_1.default.createElement(BlockForm_1.BlockForm, { spec: blocksSpec[blockData.type], key: (0, utils_1.getBlockKey)(blockData, index), data: blockData, active: activeBlockIndex === index, onChange: (data) => {
34
- onChange(Object.assign(Object.assign({}, content), { blocks: [
35
- ...blocks.slice(0, index),
36
- data,
37
- ...blocks.slice(index + 1),
38
- ] }));
39
- }, onSelect: () => onSelect(index) })) : null)));
33
+ form = (react_1.default.createElement(react_1.Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (react_1.default.createElement("div", { className: b('block-form') },
34
+ react_1.default.createElement(BlockForm_1.BlockForm, { spec: blocksSpec[blockData.type], key: (0, utils_1.getBlockKey)(blockData, index), data: blockData, active: activeBlockIndex === index, onChange: (data) => {
35
+ onChange(Object.assign(Object.assign({}, content), { blocks: [
36
+ ...blocks.slice(0, index),
37
+ data,
38
+ ...blocks.slice(index + 1),
39
+ ] }));
40
+ }, onSelect: () => onSelect(index) }))) : null)));
40
41
  break;
41
42
  }
42
43
  }
package/build/cjs/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.css CHANGED
@@ -10,7 +10,7 @@
10
10
  }
11
11
  .pc-one-of-custom .df-group-indent > .df-use-search {
12
12
  padding-top: 11px;
13
- padding-left: 20px;
13
+ padding-left: 12px;
14
14
  margin-top: 4px;
15
15
  margin-bottom: 20px;
16
16
  margin-left: 5px;
package/build/esm/editor/components/AddBlock/AddBlock.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* use this for style redefinitions to awoid problems with
2
2
  unpredictable css rules order in build */
3
3
  .pc-add-block {
4
- position: fixed;
4
+ position: absolute;
5
5
  bottom: 32px;
6
6
  left: calc(50% + var(--editor-left-column-width) / 2);
7
7
  transform: translateX(-50%);
package/build/esm/editor/components/BlockForm/BlockForm.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __rest } from "tslib";
2
- import React, { memo, useMemo } from 'react';
2
+ import React, { Fragment, memo, useMemo } from 'react';
3
3
  import { DynamicField, SimpleVerticalAccordeon } from '@gravity-ui/dynamic-forms';
4
4
  import _ from 'lodash';
5
5
  import { Form as FinalForm, FormSpy } from 'react-final-form';
@@ -11,9 +11,9 @@ export const BlockForm = memo((_a) => {
11
11
  const prevContent = usePreviousValue(content);
12
12
  const spec = useMemo(() => (Object.assign(Object.assign({}, specRaw), { viewSpec: Object.assign(Object.assign({}, specRaw.viewSpec), { layoutOpen: active }) })), [specRaw, active]);
13
13
  if (!active) {
14
- return (React.createElement(SimpleVerticalAccordeon, { open: false, name: type, title: spec.viewSpec.layoutTitle || type, onOpenChange: onSelect }, 1));
14
+ return (React.createElement(SimpleVerticalAccordeon, { open: false, name: type, title: spec.viewSpec.layoutTitle || type, onOpenChange: onSelect }, ' '));
15
15
  }
16
- return (React.createElement(FinalForm, { initialValues: initialValues, onSubmit: _.noop }, () => (React.createElement("div", null,
16
+ return (React.createElement(FinalForm, { initialValues: initialValues, onSubmit: _.noop }, () => (React.createElement(Fragment, null,
17
17
  React.createElement(FormSpy, { onChange: ({ values }) => {
18
18
  // fix for FormSpy onChange called twice without content changes
19
19
  if (!_.isEqual(values.content, prevContent)) {
package/build/esm/editor/components/ControlPanel/ControlPanel.css CHANGED
@@ -7,7 +7,8 @@ unpredictable css rules order in build */
7
7
  height: var(--editor-header-height);
8
8
  padding: 8px 20px;
9
9
  background-color: var(--yc-color-base-background);
10
- border-bottom: 1px solid var(--yc-color-line-generic);
10
+ border: 1px var(--yc-color-line-generic);
11
+ border-style: solid none;
11
12
  }
12
13
  .pc-control-panel__icon {
13
14
  display: flex;
package/build/esm/editor/components/EditBlock/EditBlock.css CHANGED
@@ -10,7 +10,7 @@ unpredictable css rules order in build */
10
10
  height: calc(100% + 40px);
11
11
  top: -20px;
12
12
  left: -20px;
13
- border-radius: 8px;
13
+ border-radius: var(--pc-border-radius);
14
14
  z-index: 100;
15
15
  }
16
16
  .pc-edit-block__controls_isHeader {
@@ -25,7 +25,7 @@ unpredictable css rules order in build */
25
25
  .pc-edit-block__controls-content {
26
26
  display: flex;
27
27
  position: absolute;
28
- bottom: -44px;
28
+ bottom: -40px;
29
29
  left: 50%;
30
30
  transform: translateX(-50%);
31
31
  }
@@ -34,14 +34,14 @@ unpredictable css rules order in build */
34
34
  justify-content: center;
35
35
  align-items: center;
36
36
  transition: transform 0.2s;
37
- width: 24px;
38
- height: 24px;
39
- border-radius: calc(8px / 2);
37
+ width: 48px;
38
+ height: 32px;
39
+ border-radius: 8px;
40
40
  background-color: var(--yc-color-promo-highlight-neon);
41
41
  }
42
42
  .pc-edit-block__control:hover {
43
43
  transform: scale(1.1);
44
44
  }
45
45
  .pc-edit-block__control:not(:first-child) {
46
- margin-left: 12px;
46
+ margin-left: 4px;
47
47
  }
package/build/esm/editor/components/Layout/Layout.css CHANGED
@@ -29,11 +29,14 @@ unpredictable css rules order in build */
29
29
  }
30
30
  .pc-editor-layout__left {
31
31
  flex: 0 0 auto;
32
- padding: 8px 20px 20px;
32
+ padding: 24px 16px;
33
33
  width: var(--editor-left-column-width);
34
34
  border-right: var(--editor-divider-width) solid var(--yc-color-line-generic);
35
35
  overflow-x: auto;
36
36
  }
37
37
  .pc-editor-layout__right {
38
38
  width: 100%;
39
+ }
40
+ .pc-editor-layout__right_editing {
41
+ padding-bottom: 200px;
39
42
  }
package/build/esm/editor/components/Layout/Layout.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { Children, Fragment } from 'react';
2
2
  import { block } from '../../../utils';
3
+ import { ViewModeItem } from '../../types';
3
4
  import ControlPanel from '../ControlPanel/ControlPanel';
4
5
  import './Layout.css';
5
6
  const b = block('editor-layout');
@@ -7,6 +8,7 @@ const Left = () => null;
7
8
  const Right = () => null;
8
9
  const Layout = ({ children, mode, onModeChange }) => {
9
10
  let left, right;
11
+ const isEditingMode = mode === ViewModeItem.Edititng;
10
12
  function handleChild(child) {
11
13
  switch (child === null || child === void 0 ? void 0 : child.type) {
12
14
  case Left:
@@ -25,7 +27,7 @@ const Layout = ({ children, mode, onModeChange }) => {
25
27
  React.createElement("div", { className: b('container') },
26
28
  React.createElement(Fragment, null,
27
29
  left && React.createElement("div", { className: b('left') }, left),
28
- right && React.createElement("div", { className: b('right') }, right)))));
30
+ right && React.createElement("div", { className: b('right', { editing: isEditingMode }) }, right)))));
29
31
  };
30
32
  Layout.Left = Left;
31
33
  Layout.Right = Right;
package/build/esm/editor/containers/Form/Form.css CHANGED
@@ -3,14 +3,14 @@ unpredictable css rules order in build */
3
3
  .pc-editor-form {
4
4
  --top-level-font-size: var(--yc-text-display-2-font-size);
5
5
  --top-level-line-height: var(--yc-text-display-2-line-height);
6
- --block-propery-font-size: var(--yc-text-body-3-font-size);
7
- --block-property-line-height: var(--yc-text-body-3-line-height);
8
- --nested-property-font-size: var(--yc-text-body-1-font-size);
9
- --nested-property-line-height: var(--yc-text-body-1-line-height);
10
- --complex-nested-property-font-size: var(--yc-text-body-2-font-size);
11
- --complex-nested-property-line-height: var(--yc-text-body-2-line-height);
6
+ --block-level-complex-propery-font-size: var(--yc-text-body-3-font-size);
7
+ --block-level-complex-property-line-height: var(--yc-text-body-3-line-height);
8
+ --complex-property-font-size: var(--yc-text-body-2-font-size);
9
+ --complex-property-line-height: var(--yc-text-body-2-line-height);
10
+ --property-font-size: var(--yc-text-body-1-font-size);
11
+ --property-line-height: var(--yc-text-body-1-line-height);
12
12
  --input-min-width: 150px;
13
- --property-title-width: 140px;
13
+ --property-title-width: 96px;
14
14
  --button-height: 48px;
15
15
  --icon-size: 32px;
16
16
  --icon-margin: 42px;
@@ -24,20 +24,23 @@ unpredictable css rules order in build */
24
24
  --button-height: 32px;
25
25
  --icon-size: 20px;
26
26
  --icon-margin: 30px;
27
- --header-text-size: var(--block-propery-font-size);
28
- --header-line-height: var(--block-property-line-height);
29
- --text-size: var(--block-propery-font-size);
30
- --line-height: var(--block-property-line-height);
27
+ --header-text-size: var(--block-level-complex-propery-font-size);
28
+ --header-line-height: var(--block-level-complex-property-line-height);
29
+ --text-size: var(--property-font-size);
30
+ --line-height: var(--property-line-height);
31
+ --property-font-weight: 400;
31
32
  }
32
33
  .pc-editor-form .df-use-search .df-use-search .df-use-search {
33
34
  --button-height: 28px;
34
35
  --icon-size: 16px;
35
36
  --icon-margin: 25px;
36
37
  --property-font-weight: 400;
37
- --header-text-size: var(--complex-nested-property-font-size);
38
- --header-line-height: var(--complex-nested-property-line-height);
39
- --text-size: var(--nested-property-font-size);
40
- --line-height: var(--nested-property-line-height);
38
+ --header-text-size: var(--complex-property-font-size);
39
+ --header-line-height: var(--complex-property-line-height);
40
+ --text-size: var(--property-font-size);
41
+ --line-height: var(--property-line-height);
42
+ --oneof-text-size: var(--complex-propery-font-size);
43
+ --oneof-line-height: var(--complex-property-line-height);
41
44
  }
42
45
  .pc-editor-form .df-row {
43
46
  width: inherit;
@@ -73,17 +76,29 @@ unpredictable css rules order in build */
73
76
  .pc-editor-form .df-simple-vertical-accordeon__header .yc-button .yc-button__icon_side_right ~ .yc-button__text {
74
77
  margin-right: var(--icon-margin);
75
78
  }
79
+ .pc-editor-form .df-simple-vertical-accordeon__body {
80
+ margin-top: 0px;
81
+ padding-top: 12px;
82
+ }
83
+ .pc-editor-form .df-use-search {
84
+ margin: 4px 0;
85
+ }
76
86
  .pc-editor-form .df-simple-vertical-accordeon__body,
77
87
  .pc-editor-form .df-group-indent > .df-use-search {
78
88
  margin-top: 0;
79
89
  margin-left: 1px;
80
- padding-top: 12px;
81
- padding-left: 16px;
90
+ padding-top: 4px;
91
+ padding-bottom: 4px;
92
+ padding-left: 12px;
82
93
  border-left: 1px solid var(--yc-color-line-generic-accent);
83
94
  }
95
+ .pc-editor-form .df-simple-vertical-accordeon_branch .df-simple-vertical-accordeon__body {
96
+ padding-left: 12px;
97
+ }
84
98
  .pc-editor-form .g-select,
85
99
  .pc-editor-form .yc-text-input {
86
- width: var(--input-min-width);
100
+ min-width: var(--input-min-width);
101
+ width: 100%;
87
102
  }
88
103
  .pc-editor-form + .pc-editor-form {
89
104
  margin-top: 12px;
@@ -91,4 +106,7 @@ unpredictable css rules order in build */
91
106
  .pc-editor-form__tabs {
92
107
  --yc-color-base-special: var(--yc-color-promo-base-neon);
93
108
  margin-bottom: 20px;
109
+ }
110
+ .pc-editor-form__block-form {
111
+ margin-bottom: 16px;
94
112
  }
package/build/esm/editor/containers/Form/Form.js CHANGED
@@ -28,13 +28,14 @@ export const Form = memo(({ content, onChange, activeBlockIndex, onSelect, spec
28
28
  break;
29
29
  }
30
30
  case FormTab.Blocks: {
31
- form = (React.createElement(Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (React.createElement(BlockForm, { spec: blocksSpec[blockData.type], key: getBlockKey(blockData, index), data: blockData, active: activeBlockIndex === index, onChange: (data) => {
32
- onChange(Object.assign(Object.assign({}, content), { blocks: [
33
- ...blocks.slice(0, index),
34
- data,
35
- ...blocks.slice(index + 1),
36
- ] }));
37
- }, onSelect: () => onSelect(index) })) : null)));
31
+ form = (React.createElement(Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (React.createElement("div", { className: b('block-form') },
32
+ React.createElement(BlockForm, { spec: blocksSpec[blockData.type], key: getBlockKey(blockData, index), data: blockData, active: activeBlockIndex === index, onChange: (data) => {
33
+ onChange(Object.assign(Object.assign({}, content), { blocks: [
34
+ ...blocks.slice(0, index),
35
+ data,
36
+ ...blocks.slice(index + 1),
37
+ ] }));
38
+ }, onSelect: () => onSelect(index) }))) : null)));
38
39
  break;
39
40
  }
40
41
  }
package/build/esm/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.css CHANGED
@@ -10,7 +10,7 @@
10
10
  }
11
11
  .pc-one-of-custom .df-group-indent > .df-use-search {
12
12
  padding-top: 11px;
13
- padding-left: 20px;
13
+ padding-left: 12px;
14
14
  margin-top: 4px;
15
15
  margin-bottom: 20px;
16
16
  margin-left: 5px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "3.8.2",
3
+ "version": "3.8.3",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {