fix(SplitterElement): allow passing number for size prop (#7499)

Author: Lukas742

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

@@ -47,7 +47,8 @@ const SplitterElement = forwardRef<HTMLDivElement, SplitterElementPropTypes>((pr
   const [componentRef, splitterElementRef] = useSyncRef(ref);
   const { vertical, reset } = useContext(SplitterLayoutContext);
   const safariStyles = Device.isSafari() ? { width: 'min-content', flex: '1 1 auto' } : {};
-  const defaultFlexStyles = size !== 'auto' ? { flex: `0 1 ${size}` } : { flex: '1 0 min-content', ...safariStyles };
+  const _size = typeof size === 'number' ? `${size}px` : size;
+  const defaultFlexStyles = _size !== 'auto' ? { flex: `0 1 ${_size}` } : { flex: '1 0 min-content', ...safariStyles };
   const [flexStyles, setFlexStyles] = useState(defaultFlexStyles);
   const [flexBasisApplied, setFlexBasisApplied] = useState(false);
 
@@ -65,23 +66,23 @@ const SplitterElement = forwardRef<HTMLDivElement, SplitterElementPropTypes>((pr
       }
     });
 
-    if (size === 'auto' && splitterElementRef.current) {
+    if (_size === 'auto' && splitterElementRef.current) {
       elementObserver.observe(splitterElementRef.current);
     } else {
-      setFlexStyles({ flex: `0 1 ${size}` });
+      setFlexStyles({ flex: `0 1 ${_size}` });
     }
 
     return () => {
       elementObserver.disconnect();
     };
-  }, [size, flexBasisApplied, vertical]);
+  }, [_size, flexBasisApplied, vertical]);
 
   useIsomorphicLayoutEffect(() => {
     if (reset) {
       setFlexStyles(undefined);
       setFlexBasisApplied(false);
     }
-  }, [reset, size]);
+  }, [reset, _size]);
 
   useIsomorphicLayoutEffect(() => {
     if (flexStyles === undefined) {

packages/main/src/components/SplitterLayout/SplitterLayout.cy.tsx

@@ -97,7 +97,7 @@ describe('SplitterLayout', () => {
               Button 1
             </Button>
           </SplitterElement>
-          <SplitterElement minSize={300} size={'400px'} data-testid={'se2'}>
+          <SplitterElement minSize={300} size={400} data-testid={'se2'}>
             <Button>Button 2</Button>
           </SplitterElement>
           <SplitterElement resizable={false} data-testid={'se3'}>

packages/main/src/components/SplitterLayout/useConcatSplitterElements.tsx

@@ -59,9 +59,10 @@ export const useConcatSplitterElements = (concatSplitterElements: ConcatSplitter
 
     indicesWithSplitter.forEach((index) => {
       const size = childrenArray[index]?.props?.size;
+      const _size = typeof size === 'number' ? `${size}px` : size;
       if (size && size !== 'auto') {
         childrenArray[index] = cloneElement(childrenArray[index], {
-          size: `calc(${size} - var(--_ui5wcr-SplitterSize))`,
+          size: `calc(${_size} - var(--_ui5wcr-SplitterSize))`,
         });
       }
     });