feat(FormRow): add direction prop

gravity-ui · Oct 3, 2023 · e3eaade · e3eaade
1 parent 56dce92
commit e3eaade
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,5 +1,6 @@
 import type {HTMLAttributes, PropsWithChildren, ReactNode} from 'react';
 
+export type FormRowDirection = 'row' | 'column';
 export interface FormRowProps {
     className?: string;
     /** Field label */
@@ -13,6 +14,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<{}> &