feat(system): path to upgrade standalone to BE [EE-4071] (#8095)

app/react/components/form-components/FormControl/FormControl.stories.tsx

@@ -12,15 +12,31 @@ export default {
 interface TextFieldProps {
   label: string;
   tooltip?: string;
+  vertical?: boolean;
+  required?: boolean;
+  error?: string;
 }
 
 export { TextField, SelectField };
 
-function TextField({ label, tooltip = '' }: TextFieldProps) {
+function TextField({
+  label,
+  tooltip = '',
+  required,
+  error,
+  vertical,
+}: TextFieldProps) {
   const [value, setValue] = useState('');
   const inputId = 'input';
   return (
-    <FormControl inputId={inputId} label={label} tooltip={tooltip}>
+    <FormControl
+      inputId={inputId}
+      label={label}
+      tooltip={tooltip}
+      required={required}
+      errors={error}
+      size={vertical ? 'vertical' : undefined}
+    >
       <Input
         id={inputId}
         type="text"
@@ -34,9 +50,18 @@ function TextField({ label, tooltip = '' }: TextFieldProps) {
 TextField.args = {
   label: 'label',
   tooltip: '',
+  vertical: false,
+  required: false,
+  error: '',
 };
 
-function SelectField({ label, tooltip = '' }: TextFieldProps) {
+function SelectField({
+  label,
+  tooltip = '',
+  vertical,
+  required,
+  error,
+}: TextFieldProps) {
   const options = [
     { value: 1, label: 'one' },
     { value: 2, label: 'two' },
@@ -44,7 +69,14 @@ function SelectField({ label, tooltip = '' }: TextFieldProps) {
   const [value, setValue] = useState(0);
   const inputId = 'input';
   return (
-    <FormControl inputId={inputId} label={label} tooltip={tooltip}>
+    <FormControl
+      inputId={inputId}
+      label={label}
+      tooltip={tooltip}
+      size={vertical ? 'vertical' : undefined}
+      required={required}
+      errors={error}
+    >
       <Select
         className="form-control"
         value={value}
@@ -58,4 +90,7 @@ function SelectField({ label, tooltip = '' }: TextFieldProps) {
 SelectField.args = {
   label: 'select',
   tooltip: '',
+  vertical: false,
+  required: false,
+  error: '',
 };

app/react/components/form-components/FormControl/FormControl.tsx

@@ -5,9 +5,7 @@ import { Tooltip } from '@@/Tip/Tooltip';
 
 import { FormError } from '../FormError';
 
-import styles from './FormControl.module.css';
-
-export type Size = 'xsmall' | 'small' | 'medium' | 'large';
+export type Size = 'xsmall' | 'small' | 'medium' | 'large' | 'vertical';
 
 export interface Props {
   inputId?: string;
@@ -29,7 +27,12 @@ export function FormControl({
   required,
 }: PropsWithChildren<Props>) {
   return (
-    <div className={clsx('form-group', styles.container)}>
+    <div
+      className={clsx(
+        'form-group',
+        'after:content-[""] after:clear-both after:table' // to fix issues with float
+      )}
+    >
       <label
         htmlFor={inputId}
         className={clsx(sizeClassLabel(size), 'control-label', 'text-left')}
@@ -62,6 +65,8 @@ function sizeClassLabel(size?: Size) {
       return 'col-sm-4 col-lg-3';
     case 'xsmall':
       return 'col-sm-2';
+    case 'vertical':
+      return '';
     default:
       return 'col-sm-3 col-lg-2';
   }
@@ -75,6 +80,8 @@ function sizeClassChildren(size?: Size) {
       return 'col-sm-8 col-lg-9';
     case 'xsmall':
       return 'col-sm-8';
+    case 'vertical':
+      return '';
     default:
       return 'col-sm-9 col-lg-10';
   }