CSS styles and propeties added to tabbed container while ensuring the styling rules of container component

imtananikhwa · imtananikhwa · commit f50180215956 · 2024-02-27T22:10:46.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -69,6 +69,8 @@ export const getStyle = (
     }	
     .ant-select-selection-search-input {
       font-family:${(style as SelectStyleType).fontFamily} !important;
+      text-transform:${(style as SelectStyleType).textTransform} !important;
+      text-decoration:${(style as SelectStyleType).textDecoration} !important;
       font-size:${(style as SelectStyleType).textSize} !important;
       font-weight:${(style as SelectStyleType).textWeight};
       color:${(style as SelectStyleType).text} !important;
@@ -256,7 +258,6 @@ export const SelectUIView = (
           label={option.label}
           disabled={option.disabled}
           key={option.value}
-          style={{fontFamily:"Montserrat"}}
         >
           <Wrapper className="option-label">
             {props.options.findIndex((option) => hasIcon(option.prefixIcon)) > -1 &&
diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -111,6 +111,14 @@ const getStyle = (
           }
         }
 
+        .ant-tabs-tab-btn {
+          font-family:${style.fontFamily};
+          font-weight:${style.textWeight};
+          text-transform:${style.textTransform};
+          text-decoration:${style.textDecoration};
+          font-style:${style.fontStyle};
+        }
+
         .ant-tabs-ink-bar {
           background-color: ${style.accent};
         }
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -554,6 +554,7 @@ export const MarginStyle = [
 export const ContainerStyle = [
   // ...BG_STATIC_BORDER_RADIUS,
   getStaticBorder(),
+  // ...STYLING_FIELDS_SEQUENCE.filter((style) => style.name !== 'border'),
   RADIUS,
   BORDER_WIDTH,
   MARGIN,
@@ -798,21 +799,21 @@ export const MultiSelectStyle = [
 ] as const;
 
 export const TabContainerStyle = [
-  {
+  // Keep background related properties of container as STYLING_FIELDS_SEQUENCE has rest of the properties
+  ...replaceAndMergeMultipleStyles([...ContainerStyle.filter((style)=> ['border','radius','borderWidth','margin','padding'].includes(style.name) === false),...STYLING_FIELDS_SEQUENCE], 'text', [{
     name: "tabText",
     label: trans("style.tabText"),
     depName: "headerBackground",
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
-  },
+  },]),
   {
     name: "accent",
     label: trans("style.tabAccent"),
     depTheme: "primary",
     depType: DEP_TYPE.SELF,
     transformer: toSelf,
   },
-  ...ContainerStyle,
 ] as const;
 
 export const ModalStyle = [
@@ -1102,7 +1103,7 @@ export const ProgressStyle = [
     depTheme: "canvas",
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
-  }]).filter((style) => ['border', 'borderWidth','textTransform','textDecoration'].includes(style.name) === false),
+  }]).filter((style) => ['border', 'borderWidth', 'textTransform', 'textDecoration'].includes(style.name) === false),
   TRACK,
   FILL,
   SUCCESS,

Original file line number	Diff line number	Diff line change
`@@ -111,6 +111,14 @@ const getStyle = (`
`111`	`111`	`}`
`112`	`112`	`}`
`113`	`113`
	`114`	`+ .ant-tabs-tab-btn {`
	`115`	`+ font-family:${style.fontFamily};`
	`116`	`+ font-weight:${style.textWeight};`
	`117`	`+ text-transform:${style.textTransform};`
	`118`	`+ text-decoration:${style.textDecoration};`
	`119`	`+ font-style:${style.fontStyle};`
	`120`	`+ }`
	`121`	`+`
`114`	`122`	`.ant-tabs-ink-bar {`
`115`	`123`	`background-color: ${style.accent};`
`116`	`124`	`}`