fix(Form): fix labelSpan, columns and size calculation (#4681)

Part of #4497, #4597, #4668

Fixes #4638

Author: Lukas742

packages/main/src/components/Form/Form.jss.ts

@@ -9,34 +9,31 @@ const styles = {
     alignItems: 'center',
     rowGap: '0.25rem',
     columnGap: '0.5rem',
-    gridTemplateColumns: `repeat(calc(12 * var(--ui5wcr_form_columns)), 1fr)`,
     '--ui5wcr_form_label_text_align': 'end',
-    '--ui5wcr_form_content_span': 'calc(12 - var(--ui5wcr_form_label_span))',
-
-    '--ui5wcr_form_columns_s': 1,
-    '--ui5wcr_form_columns_m': 1,
-    '--ui5wcr_form_columns_l': 1,
-    '--ui5wcr_form_columns_xl': 2,
-    '--ui5wcr_form_label_span_s': 12,
-    '--ui5wcr_form_label_span_m': 2,
-    '--ui5wcr_form_label_span_l': 4,
-    '--ui5wcr_form_label_span_xl': 4,
 
     '@container (max-width: 599px)': {
       '--ui5wcr_form_label_span': 'var(--ui5wcr_form_label_span_s)',
-      '--ui5wcr_form_columns': 'var(--ui5wcr_form_columns_s)'
+      '--ui5wcr_form_columns': 'var(--ui5wcr_form_columns_s)',
+      gridTemplateColumns: `repeat(calc(12 * var(--ui5wcr_form_columns)), 1fr)`,
+      '--ui5wcr_form_content_span': 'calc(12 - var(--ui5wcr_form_label_span))'
     },
     '@container (min-width: 600px) and (max-width: 1023px)': {
       '--ui5wcr_form_label_span': 'var(--ui5wcr_form_label_span_m)',
-      '--ui5wcr_form_columns': 'var(--ui5wcr_form_columns_m)'
+      '--ui5wcr_form_columns': 'var(--ui5wcr_form_columns_m)',
+      gridTemplateColumns: `repeat(calc(12 * var(--ui5wcr_form_columns)), 1fr)`,
+      '--ui5wcr_form_content_span': 'calc(12 - var(--ui5wcr_form_label_span))'
     },
     '@container (min-width: 1024px) and (max-width: 1439px)': {
       '--ui5wcr_form_label_span': 'var(--ui5wcr_form_label_span_l)',
-      '--ui5wcr_form_columns': 'var(--ui5wcr_form_columns_l)'
+      '--ui5wcr_form_columns': 'var(--ui5wcr_form_columns_l)',
+      gridTemplateColumns: `repeat(calc(12 * var(--ui5wcr_form_columns)), 1fr)`,
+      '--ui5wcr_form_content_span': 'calc(12 - var(--ui5wcr_form_label_span))'
     },
     '@container (min-width: 1440px)': {
       '--ui5wcr_form_label_span': 'var(--ui5wcr_form_label_span_xl)',
-      '--ui5wcr_form_columns': 'var(--ui5wcr_form_columns_xl)'
+      '--ui5wcr_form_columns': 'var(--ui5wcr_form_columns_xl)',
+      gridTemplateColumns: `repeat(calc(12 * var(--ui5wcr_form_columns)), 1fr)`,
+      '--ui5wcr_form_content_span': 'calc(12 - var(--ui5wcr_form_label_span))'
     }
   },
   solid: {

packages/main/src/components/Form/index.tsx

@@ -118,7 +118,6 @@ const Form = forwardRef<HTMLFormElement, FormPropTypes>((props, ref) => {
     labelSpanL = 4,
     labelSpanXL = 4,
     titleText,
-    style,
     ...rest
   } = props;
 
@@ -134,7 +133,7 @@ const Form = forwardRef<HTMLFormElement, FormPropTypes>((props, ref) => {
   labelSpanMap.set('Desktop', labelSpanL);
   labelSpanMap.set('LargeDesktop', labelSpanXL);
 
-  const [componentRef, formRef] = useSyncRef<HTMLFormElement>(ref);
+  const [componentRef, containerRef] = useSyncRef<HTMLFormElement>(ref);
   // use the window range set as first best guess, if not available use Desktop
   const [currentRange, setCurrentRange] = useState(Device.getCurrentRange()?.name ?? 'Desktop');
   const lastRange = useRef(currentRange);
@@ -148,14 +147,14 @@ const Form = forwardRef<HTMLFormElement, FormPropTypes>((props, ref) => {
       }
     });
 
-    if (formRef.current) {
-      observer.observe(formRef.current);
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
     }
 
     return () => {
       observer.disconnect();
     };
-  }, [formRef]);
+  }, [containerRef]);
 
   const classes = useStyles();
 
@@ -246,20 +245,23 @@ const Form = forwardRef<HTMLFormElement, FormPropTypes>((props, ref) => {
         className={clsx(classes.formContainer, className)}
         suppressHydrationWarning={true}
         ref={componentRef}
-        style={{
-          ...style,
-          '--ui5wcr_form_label_span_s': labelSpanS,
-          '--ui5wcr_form_label_span_m': labelSpanM,
-          '--ui5wcr_form_label_span_l': labelSpanL,
-          '--ui5wcr_form_label_span_xl': labelSpanXL,
-          '--ui5wcr_form_columns_s': columnsS,
-          '--ui5wcr_form_columns_m': columnsM,
-          '--ui5wcr_form_columns_l': columnsL,
-          '--ui5wcr_form_columns_xl': columnsXL
-        }}
         {...rest}
       >
-        <div className={formClassNames}>
+        <div
+          className={formClassNames}
+          style={
+            {
+              '--ui5wcr_form_label_span_s': labelSpanS,
+              '--ui5wcr_form_label_span_m': labelSpanM,
+              '--ui5wcr_form_label_span_l': labelSpanL,
+              '--ui5wcr_form_label_span_xl': labelSpanXL,
+              '--ui5wcr_form_columns_s': columnsS,
+              '--ui5wcr_form_columns_m': columnsM,
+              '--ui5wcr_form_columns_l': columnsL,
+              '--ui5wcr_form_columns_xl': columnsXL
+            } as CSSProperties
+          }
+        >
           {titleText && (
             <Title level={TitleLevel.H3} className={classes.formTitle}>
               {titleText}