From d48d3ffd2663d9ef8b781ff1589db172314e1824 Mon Sep 17 00:00:00 2001
From: leutinatasya <leutinatasya@yandex-team.ru>
Date: Tue, 26 Sep 2023 18:47:12 +0300
Subject: [PATCH 1/2] feat(FormRow): add direction prop

---
 src/components/FormRow/FormRow.scss           | 31 ++++++++++++++-----
 src/components/FormRow/FormRow.tsx            |  3 +-
 .../FormRow/__stories__/FormRow.stories.tsx   |  6 ++++
 src/components/FormRow/types.ts               |  4 +++
 4 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/components/FormRow/FormRow.scss b/src/components/FormRow/FormRow.scss
index e5ed7b1c..fbdecb0e 100644
--- a/src/components/FormRow/FormRow.scss
+++ b/src/components/FormRow/FormRow.scss
@@ -1,21 +1,38 @@
 @use '../variables';
 
-.#{variables.$ns}form-row {
+$block: '.#{variables.$ns}form-row';
+
+#{$block} {
     --gc-form-row-label-width: 172px;
     --gc-form-row-field-height: 28px;
 
-    margin-bottom: 20px;
-    align-items: flex-start;
     display: flex;
+    margin-bottom: 20px;
+
+    &_direction_row {
+        align-items: flex-start;
+    }
+
+    &_direction_column {
+        flex-direction: column;
+    }
 
     &__left {
         display: flex;
         flex-flow: row;
-        min-height: var(--gc-form-row-field-height);
         box-sizing: border-box;
-        flex-shrink: 0;
-        width: var(--gc-form-row-label-width);
-        padding-right: 8px;
+
+        #{$block}_direction_row & {
+            min-height: var(--gc-form-row-field-height);
+            flex-shrink: 0;
+            width: var(--gc-form-row-label-width);
+            padding-right: 8px;
+        }
+
+        #{$block}_direction_column & {
+            width: 100%;
+            margin-bottom: 10px;
+        }
     }
 
     &__field-name {
diff --git a/src/components/FormRow/FormRow.tsx b/src/components/FormRow/FormRow.tsx
index f2cc06ef..5515d4c1 100644
--- a/src/components/FormRow/FormRow.tsx
+++ b/src/components/FormRow/FormRow.tsx
@@ -17,11 +17,12 @@ const FormRowComponent: FC<FormRowProps> = ({
     fieldId,
     required = false,
     children,
+    direction = 'row',
 }) => {
     const LabelComponent = fieldId ? 'label' : 'span';
 
     return (
-        <div className={b(null, className)}>
+        <div className={b({direction}, className)}>
             <div className={b('left')}>
                 <LabelComponent className={b('field-name')} htmlFor={fieldId ? fieldId : undefined}>
                     <span className={b('field-name-text')}>{label}</span>
diff --git a/src/components/FormRow/__stories__/FormRow.stories.tsx b/src/components/FormRow/__stories__/FormRow.stories.tsx
index 8842e7e4..0c64fabf 100644
--- a/src/components/FormRow/__stories__/FormRow.stories.tsx
+++ b/src/components/FormRow/__stories__/FormRow.stories.tsx
@@ -20,6 +20,7 @@ export default {
         label: 'Enter your name',
         fieldId,
         children: <TextInput id={fieldId} />,
+        direction: 'row',
     },
     argTypes: {
         children: argTypeReactNode,
@@ -88,3 +89,8 @@ WithHelpPopoverAndLongLabel.args = {
     ...WithLongLabel.args,
     ...WithHelpPopover.args,
 };
+
+export const ColumnDirection = Template.bind({});
+ColumnDirection.args = {
+    direction: 'column',
+};
diff --git a/src/components/FormRow/types.ts b/src/components/FormRow/types.ts
index e1431a0a..a3e6e0d7 100644
--- a/src/components/FormRow/types.ts
+++ b/src/components/FormRow/types.ts
@@ -1,5 +1,7 @@
 import type {HTMLAttributes, PropsWithChildren, ReactNode} from 'react';
 
+export type FormRowDirection = 'row' | 'column';
+
 export interface FormRowProps {
     className?: string;
     /** Field label */
@@ -13,6 +15,8 @@ export interface FormRowProps {
     /** Field component itself. `<FormRow.FieldDescription/>` could be used here
      * next to field component itself */
     children?: ReactNode;
+    /** Direction in which the elements are placed */
+    direction?: FormRowDirection;
 }
 
 export type FormRowFieldDescriptionProps = PropsWithChildren<{}> &

From 621791462f3b57de6b62551267517dfd8cb6f917 Mon Sep 17 00:00:00 2001
From: leutinatasya <leutinatasya@yandex-team.ru>
Date: Tue, 3 Oct 2023 16:14:05 +0300
Subject: [PATCH 2/2] fix: use vars

---
 src/components/FormRow/FormRow.scss | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/FormRow/FormRow.scss b/src/components/FormRow/FormRow.scss
index fbdecb0e..0d1e038f 100644
--- a/src/components/FormRow/FormRow.scss
+++ b/src/components/FormRow/FormRow.scss
@@ -26,12 +26,11 @@ $block: '.#{variables.$ns}form-row';
             min-height: var(--gc-form-row-field-height);
             flex-shrink: 0;
             width: var(--gc-form-row-label-width);
-            padding-right: 8px;
+            padding-right: var(--g-spacing-2);
         }
 
         #{$block}_direction_column & {
-            width: 100%;
-            margin-bottom: 10px;
+            margin-bottom: var(--g-spacing-2);
         }
     }