From fe9d4c5d38a503de850786ae061071c6fb0c2240 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Wed, 15 Mar 2023 18:57:42 +0300
Subject: [PATCH 1/4] feat: add `row_verbose` layout

---
 src/lib/kit/components/Layouts/Row/Row.scss | 10 +++++
 src/lib/kit/components/Layouts/Row/Row.tsx  | 49 +++++++++++++++------
 src/lib/kit/constants/config.tsx            |  4 ++
 3 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/src/lib/kit/components/Layouts/Row/Row.scss b/src/lib/kit/components/Layouts/Row/Row.scss
index 64c0af8f..3b31e813 100644
--- a/src/lib/kit/components/Layouts/Row/Row.scss
+++ b/src/lib/kit/components/Layouts/Row/Row.scss
@@ -54,8 +54,18 @@
 
     &__right {
         display: flex;
+        flex-direction: column;
         flex-grow: 1;
         margin-left: 15px;
+
+        &-inner {
+            display: flex;
+        }
+    }
+
+    &__description {
+        margin-top: 10px;
+        color: var(--yc-color-text-secondary);
     }
 
     &__remove-button {
diff --git a/src/lib/kit/components/Layouts/Row/Row.tsx b/src/lib/kit/components/Layouts/Row/Row.tsx
index 2353cb90..d0ef83cb 100644
--- a/src/lib/kit/components/Layouts/Row/Row.tsx
+++ b/src/lib/kit/components/Layouts/Row/Row.tsx
@@ -18,13 +18,18 @@ import './Row.scss';
 
 const b = block('row');
 
-export const Row = <T extends FieldValue, S extends Spec>({
+interface RowProps {
+    verboseDescription?: boolean;
+}
+
+const RowBase = <T extends FieldValue, S extends Spec>({
     name,
     spec,
     input,
     meta,
+    verboseDescription,
     children,
-}: LayoutProps<T, S>) => {
+}: LayoutProps<T, S> & RowProps) => {
     const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
 
     return (
@@ -35,7 +40,7 @@ export const Row = <T extends FieldValue, S extends Spec>({
                         {spec.viewSpec.layoutTitle}
                         {spec.required && <span className={b('required-mark')}>*</span>}
                     </div>
-                    {spec.viewSpec.layoutDescription ? (
+                    {!verboseDescription && spec.viewSpec.layoutDescription ? (
                         <div className={b('note')}>
                             <HelpPopover
                                 htmlContent={spec.viewSpec.layoutDescription}
@@ -46,19 +51,35 @@ export const Row = <T extends FieldValue, S extends Spec>({
                 </div>
             </div>
             <div className={b('right')}>
-                <ErrorWrapper
-                    name={name}
-                    meta={meta}
-                    withoutChildErrorStyles={isArraySpec(spec) || isObjectSpec(spec)}
-                >
-                    {children}
-                </ErrorWrapper>
-                {arrayItem ? (
-                    <Button view="flat" className={b('remove-button')} onClick={input.onDrop}>
-                        <Icon data={Xmark} size={16} />
-                    </Button>
+                <div className={b('right-inner')}>
+                    <ErrorWrapper
+                        name={name}
+                        meta={meta}
+                        withoutChildErrorStyles={isArraySpec(spec) || isObjectSpec(spec)}
+                    >
+                        {children}
+                    </ErrorWrapper>
+                    {arrayItem ? (
+                        <Button view="flat" className={b('remove-button')} onClick={input.onDrop}>
+                            <Icon data={Xmark} size={16} />
+                        </Button>
+                    ) : null}
+                </div>
+                {verboseDescription && spec.viewSpec.layoutDescription ? (
+                    <div
+                        className={b('description')}
+                        dangerouslySetInnerHTML={{__html: spec.viewSpec.layoutDescription}}
+                    />
                 ) : null}
             </div>
         </div>
     );
 };
+
+export const Row = <T extends FieldValue, S extends Spec>(props: LayoutProps<T, S>) => (
+    <RowBase {...props} />
+);
+
+export const RowVerbose = <T extends FieldValue, S extends Spec>(props: LayoutProps<T, S>) => (
+    <RowBase verboseDescription {...props} />
+);
diff --git a/src/lib/kit/constants/config.tsx b/src/lib/kit/constants/config.tsx
index eef74ea2..e78129e1 100644
--- a/src/lib/kit/constants/config.tsx
+++ b/src/lib/kit/constants/config.tsx
@@ -28,6 +28,7 @@ import {
     OneOfView,
     Row,
     Row2,
+    RowVerbose,
     Secret,
     Section,
     Section2,
@@ -96,6 +97,7 @@ export const dynamicConfig: DynamicFormConfig = {
         },
         layouts: {
             row: Row,
+            row_verbose: RowVerbose,
             table_item: TableCell,
         },
         validators: {
@@ -108,6 +110,7 @@ export const dynamicConfig: DynamicFormConfig = {
         },
         layouts: {
             row: Row,
+            row_verbose: RowVerbose,
             table_item: TableCell,
             transparent: Transparent,
         },
@@ -149,6 +152,7 @@ export const dynamicConfig: DynamicFormConfig = {
         },
         layouts: {
             row: Row,
+            row_verbose: RowVerbose,
             table_item: TableCell,
             transparent: Transparent,
             section: Section,

From 4c07d7caaa01100903987b6eb5b61f71b3f1c545 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Wed, 15 Mar 2023 19:26:42 +0300
Subject: [PATCH 2/4] fix: verbose description overflow

---
 src/lib/kit/components/Layouts/Row/Row.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/kit/components/Layouts/Row/Row.scss b/src/lib/kit/components/Layouts/Row/Row.scss
index 3b31e813..2b684b19 100644
--- a/src/lib/kit/components/Layouts/Row/Row.scss
+++ b/src/lib/kit/components/Layouts/Row/Row.scss
@@ -57,6 +57,7 @@
         flex-direction: column;
         flex-grow: 1;
         margin-left: 15px;
+        overflow: hidden;
 
         &-inner {
             display: flex;
@@ -66,6 +67,7 @@
     &__description {
         margin-top: 10px;
         color: var(--yc-color-text-secondary);
+        overflow-wrap: break-word;
     }
 
     &__remove-button {

From ce0a815c0ebf4e58d7039591bd17c4daf55d9bd5 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Wed, 15 Mar 2023 19:39:15 +0300
Subject: [PATCH 3/4] fix: do not use overflow

---
 src/lib/kit/components/Layouts/Row/Row.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/kit/components/Layouts/Row/Row.scss b/src/lib/kit/components/Layouts/Row/Row.scss
index 2b684b19..ee73db06 100644
--- a/src/lib/kit/components/Layouts/Row/Row.scss
+++ b/src/lib/kit/components/Layouts/Row/Row.scss
@@ -57,7 +57,6 @@
         flex-direction: column;
         flex-grow: 1;
         margin-left: 15px;
-        overflow: hidden;
 
         &-inner {
             display: flex;
@@ -67,7 +66,7 @@
     &__description {
         margin-top: 10px;
         color: var(--yc-color-text-secondary);
-        overflow-wrap: break-word;
+        word-break: break-word;
     }
 
     &__remove-button {

From 514a9f255af0d4a8c7ba6ba17c5a2400829e3025 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Wed, 15 Mar 2023 19:39:30 +0300
Subject: [PATCH 4/4] fix: add arrays and objects

---
 src/lib/kit/constants/config.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/kit/constants/config.tsx b/src/lib/kit/constants/config.tsx
index e78129e1..23363532 100644
--- a/src/lib/kit/constants/config.tsx
+++ b/src/lib/kit/constants/config.tsx
@@ -77,6 +77,7 @@ export const dynamicConfig: DynamicFormConfig = {
         },
         layouts: {
             row: Row,
+            row_verbose: RowVerbose,
             accordeon: Accordeon,
             section: Section,
             section2: Section2,
@@ -127,6 +128,7 @@ export const dynamicConfig: DynamicFormConfig = {
         },
         layouts: {
             row: Row,
+            row_verbose: RowVerbose,
             accordeon: Accordeon,
             section: Section,
             section2: Section2,