feat(file-tree): refine sizing system for both available sizes

Author: gustedeveloper

src/common/components/mock-components/front-rich-components/file-tree/file-tree.business.ts

@@ -2,28 +2,53 @@ import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes';
 import { ElementSize, ShapeSizeRestrictions, Size } from '@/core/model';
 import { FONT_SIZE_VALUES } from '../../front-components/shape.const';
 
-export const getFileTreeSizeValues = (size?: ElementSize) => {
+interface FileTreeSizeValues {
+  fontSize: number;
+  iconDimension: number;
+  elementHeight: number;
+  paddingX: number;
+  paddingY: number;
+  extraTextTopPadding: number;
+  iconTextSpacing: number;
+  indentationStep: number;
+}
+
+export const getFileTreeSizeValues = (
+  size?: ElementSize
+): FileTreeSizeValues => {
   switch (size) {
     case 'XS':
       return {
-        fontSize: FONT_SIZE_VALUES.SMALLTEXT,
-        iconWidth: 40,
-        elementHeight: 55,
-        size: 'XS',
+        fontSize: 12,
+        iconDimension: 25,
+        elementHeight: 30,
+        paddingX: 25,
+        paddingY: 15,
+        extraTextTopPadding: 9,
+        iconTextSpacing: 8,
+        indentationStep: 15,
       };
     case 'S':
       return {
         fontSize: FONT_SIZE_VALUES.NORMALTEXT,
-        iconWidth: 50,
+        iconDimension: 50,
         elementHeight: 60,
-        size: 'S',
+        paddingX: 30,
+        paddingY: 20,
+        extraTextTopPadding: 20,
+        iconTextSpacing: 10,
+        indentationStep: 27,
       };
     default:
       return {
         fontSize: FONT_SIZE_VALUES.NORMALTEXT,
-        iconWidth: 50,
+        iconDimension: 50,
         elementHeight: 60,
-        size: 'S',
+        paddingX: 30,
+        paddingY: 20,
+        extraTextTopPadding: 20,
+        iconTextSpacing: 10,
+        indentationStep: 25,
       };
   }
 };

src/common/components/mock-components/front-rich-components/file-tree/file-tree.tsx

@@ -14,7 +14,7 @@ import {
 } from './file-tree.business';
 
 const fileTreeShapeRestrictions: ShapeSizeRestrictions = {
-  minWidth: 200,
+  minWidth: 150,
   minHeight: 120,
   maxWidth: -1,
   maxHeight: -1,
@@ -55,14 +55,16 @@ export const FileTreeShape = forwardRef<any, FileTreeShapeProps>(
       }
     );
 
-    const { fontSize, iconWidth, elementHeight, size } = getFileTreeSizeValues(
-      otherProps?.size
-    );
-
-    const paddingX = 30;
-    const paddingY = 25;
-    const iconTextSpacing = 10;
-    const indentationStep = 25;
+    const {
+      fontSize,
+      iconDimension,
+      elementHeight,
+      extraTextTopPadding,
+      paddingX,
+      paddingY,
+      iconTextSpacing,
+      indentationStep,
+    } = getFileTreeSizeValues(otherProps?.size);
 
     const restrictedSize = calculateFileTreeDynamicSize(treeItems, {
       width,
@@ -89,7 +91,7 @@ export const FileTreeShape = forwardRef<any, FileTreeShapeProps>(
     };
 
     const calculateTextX = (item: FileTreeItem) => {
-      return calculateIconX(item) + iconWidth + iconTextSpacing;
+      return calculateIconX(item) + iconDimension + iconTextSpacing;
     };
 
     const calculateAvailableWidth = (item: FileTreeItem) => {
@@ -131,14 +133,14 @@ export const FileTreeShape = forwardRef<any, FileTreeShapeProps>(
               <Image
                 image={icons[item.type]!}
                 x={calculateIconX(item)}
-                y={paddingY + elementHeight * index + (size === 'XS' ? 5 : 0)}
-                width={iconWidth}
-                height={iconWidth}
+                y={paddingY + elementHeight * index}
+                width={iconDimension}
+                height={iconDimension}
               />
             )}
             <Text
               x={calculateTextX(item)}
-              y={paddingY + elementHeight * index + 20}
+              y={paddingY + elementHeight * index + extraTextTopPadding}
               text={item.text}
               width={calculateAvailableWidth(item)}
               height={elementHeight}