FOnt added for testing, circle progress and progress updated

Author: imtananikhwa

client/packages/lowcoder/index.html

@@ -7,6 +7,10 @@
     <meta name="theme-color" content="#000000" />
     <meta property="iframely:title" content="Lowcoder" />
     <meta property="iframely:description" content="Lowcoder | rapid App & VideoMeeting builder for everyone." />
+    <!-- Added Montserrat google font link to test font family style property for components -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <style>
       html,
       body {

client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx

@@ -1,6 +1,6 @@
 import { default as Progress } from "antd/es/progress";
 import { styleControl } from "comps/controls/styleControl";
-import { ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { CircleProgressStyle, CircleProgressType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { Section, sectionNames } from "lowcoder-design";
 import { numberExposingStateControl } from "../controls/codeStateControl";
@@ -14,33 +14,38 @@ import { EditorContext } from "comps/editorState";
 
 // TODO: after Update of ANTd, introduce Size attribute to ProgressCircle
 
-const getStyle = (style: ProgressStyleType) => {
+const getStyle = (style: CircleProgressType) => {
   return css`
     width: ${widthCalculator(style.margin)};	
     height: ${heightCalculator(style.margin)};	
     margin: ${style.margin};	
     padding: ${style.padding};
+    border-radius:${style.radius};
     .ant-progress-text {
-      color: ${style.text};
+      color: ${style.text} !important;
+      font-family:${style.fontFamily};
+      font-style:${style.fontStyle};
+      font-size:${style.textSize} !important;
+      font-weight:${style.textWeight};
     }
     .ant-progress-circle-trail {
       stroke: ${style.track};
     }
     .ant-progress-inner .ant-progress-circle-path {
-      stroke: ${style.fill};
+      stroke: ${style.fill} !important;
     }
     &.ant-progress-status-success {
       .ant-progress-inner .ant-progress-circle-path {
-        stroke: ${style.success};
+        stroke: ${style.success} !important;
       }
       .ant-progress-text {
-        color: ${style.success};
+        color: ${style.success} !important;
       }
     }
   `;
 };
 
-export const StyledProgressCircle = styled(Progress)<{ $style: ProgressStyleType }>`
+export const StyledProgressCircle = styled(Progress) <{ $style: CircleProgressType }>`
   width: 100%;
   height: 100%;
   padding: 2px;
@@ -59,7 +64,8 @@ export const StyledProgressCircle = styled(Progress)<{ $style: ProgressStyleType
 let ProgressCircleTmpComp = (function () {
   const childrenMap = {
     value: numberExposingStateControl("value", 60),
-    style: styleControl(ProgressStyle),
+    // borderRadius property hidden as it's not valid for progress circle
+    style: styleControl(CircleProgressStyle),
   };
   return new UICompBuilder(childrenMap, (props) => {
     return (

client/packages/lowcoder/src/comps/comps/progressComp.tsx

@@ -21,6 +21,7 @@ const getStyle = (style: ProgressStyleType) => {
       font-style:${style.fontStyle};
         font-family:${style.fontFamily};
         font-weight:${style.textWeight};
+        font-size:${style.textSize};
     }
     width: ${widthCalculator(style.margin)};	
     height: ${heightCalculator(style.margin)};	

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -1091,6 +1091,8 @@ export const ProgressStyle = [
   SUCCESS,
 ] as const;
 
+export const CircleProgressStyle = [...ProgressStyle.filter((style) => style.name !== 'radius')]
+
 export const NavigationStyle = [
   ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [
     {
@@ -1375,6 +1377,7 @@ export type DateTimeStyleType = StyleConfigType<typeof DateTimeStyle>;
 export type LinkStyleType = StyleConfigType<typeof LinkStyle>;
 export type DividerStyleType = StyleConfigType<typeof DividerStyle>;
 export type ProgressStyleType = StyleConfigType<typeof ProgressStyle>;
+export type CircleProgressType = StyleConfigType<typeof CircleProgressStyle>;
 export type NavigationStyleType = StyleConfigType<typeof NavigationStyle>;
 export type ImageStyleType = StyleConfigType<typeof ImageStyle>;
 export type ListViewStyleType = StyleConfigType<typeof ListViewStyle>;