Button bar component add Font Size property

Author: reguer0

src/common/components/mock-components/front-rich-components/buttonBar/buttonBar.tsx

@@ -10,6 +10,7 @@ import {
   splitCSVContentIntoRows,
 } from '@/common/utils/active-element-selector.utils';
 import { useGroupShapeProps } from '../../mock-components.utils';
+import { useResizeOnFontSizeChange } from '../../front-text-components/front-text-hooks/resize-fontsize-change.hook';
 
 const buttonBarShapeSizeRestrictions: ShapeSizeRestrictions = {
   minWidth: 200,
@@ -49,13 +50,11 @@ export const ButtonBarShape = forwardRef<any, ShapeProps>((props, ref) => {
   const csvData = splitCSVContentIntoRows(text);
   const headers = extractCSVHeaders(csvData[0]);
   const tabLabels = headers.map(header => header.text);
-
+  const verticalPadding = 8;
   const dynamicTabWidth = restrictedWidth / tabLabels.length;
 
-  const { stroke, strokeStyle, fill, textColor } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const { stroke, strokeStyle, fill, textColor, fontSize, fontVariant } =
+    useShapeProps(otherProps, BASIC_SHAPE);
 
   const activeTab = otherProps?.activeElement ?? 0;
 
@@ -65,29 +64,30 @@ export const ButtonBarShape = forwardRef<any, ShapeProps>((props, ref) => {
     shapeType,
     ref
   );
+  useResizeOnFontSizeChange(id, { x, y }, text, fontSize, fontVariant);
 
   return (
     <Group {...commonGroupProps} {...shapeProps}>
       {tabLabels.map((header, index) => (
         <Group key={index} x={index * dynamicTabWidth}>
           <Rect
             width={dynamicTabWidth}
-            height={restrictedHeight}
+            height={restrictedHeight - verticalPadding}
             fill={index === activeTab ? 'lightblue' : fill}
             stroke={stroke}
             strokeWidth={1}
             dash={strokeStyle}
           />
           <Text
             x={0}
-            y={18}
+            y={restrictedHeight / 2 - fontSize / 2}
             width={dynamicTabWidth - 20}
             height={restrictedHeight - 20}
             ellipsis={true}
             wrap="none"
             text={header} // Use the header text
             fontFamily="Arial"
-            fontSize={16}
+            fontSize={fontSize}
             fill={textColor}
             align="center"
           />

src/pods/canvas/model/shape-other-props.utils.ts

@@ -104,6 +104,8 @@ export const generateDefaultOtherProps = (
         textColor: BASIC_SHAPE.DEFAULT_FILL_TEXT,
         strokeStyle: [],
         activeElement: 0,
+        fontSize: FONT_SIZE_VALUES.NORMALTEXT,
+        fontVariant: `${INPUT_SHAPE.DEFAULT_FONT_VARIANT}`,
       };
     case 'largeArrow':
       return {