From 32b706f205649258e20271c5c477c9a3ca31c149 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Wed, 8 Oct 2025 20:52:11 +0500
Subject: [PATCH] [Feat]: #1867 add styles for the button column

---
 .../tableComp/column/simpleColumnTypeComps.tsx      | 13 +++++++++----
 .../lowcoder/src/comps/controls/styleControl.tsx    |  6 ++++--
 .../src/comps/controls/styleControlConstants.tsx    | 13 +++++++++++++
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx
index f9bedc7549..eaac533278 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx
@@ -4,8 +4,8 @@ import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { disabledPropertyView, loadingPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
-import { useStyle } from "comps/controls/styleControl";
-import { ButtonStyle } from "comps/controls/styleControlConstants";
+import { styleControl, useStyle } from "comps/controls/styleControl";
+import { ButtonStyle, TableColumnButtonStyle } from "comps/controls/styleControlConstants";
 import { Button100 } from "comps/comps/buttonComp/buttonCompConstants";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
@@ -58,10 +58,11 @@ const childrenMap = {
   disabled: BoolCodeControl,
   prefixIcon: IconControl,
   suffixIcon: IconControl,
+  style: styleControl(TableColumnButtonStyle, 'style', { boldTitle: true }),
 };
 
 const ButtonStyled = React.memo(({ props }: { props: ToViewReturn<RecordConstructorToComp<typeof childrenMap>>}) => {
-  const style = useStyle(ButtonStyle);
+  const themeButtonStyle = useStyle(ButtonStyle);
   const hasText = !!props.text;
   const hasPrefixIcon = hasIcon(props.prefixIcon);
   const hasSuffixIcon = hasIcon(props.suffixIcon);
@@ -85,7 +86,10 @@ const ButtonStyled = React.memo(({ props }: { props: ToViewReturn<RecordConstruc
       onClick={handleClick}
       loading={props.loading}
       disabled={props.disabled}
-      $buttonStyle={props.buttonType === "primary" ? style : undefined}
+      $buttonStyle={props.buttonType === "primary" ? ({
+        ...themeButtonStyle,
+        ...(props.style as any),
+      } as any) : undefined}
       style={buttonStyle}
       icon={hasPrefixIcon ? props.prefixIcon : undefined}
     >
@@ -120,6 +124,7 @@ const ButtonCompTmp = (function () {
         })}
         {loadingPropertyView(children)}
         {disabledPropertyView(children)}
+        {children.style.getPropertyView()}
         {children.onClick.propertyView()}
       </>
     ))
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
index 5d40a2db4d..a743d466dc 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -937,11 +937,12 @@ function calcColors<ColorMap extends Record<string, string>>(
   return res as ColorMap;
 }
 
-const TitleDiv = styled.div`
+const TitleDiv = styled.div<{ $boldTitle?: boolean }>`
   display: flex;
   justify-content: space-between;
   font-size: 13px;
   line-height: 1;
+  font-weight: ${(props) => (props.$boldTitle ? 600 : 400)};
 
   span:nth-of-type(2) {
     cursor: pointer;
@@ -1149,6 +1150,7 @@ const useThemeStyles = (
 export function styleControl<T extends readonly SingleColorConfig[]>(
   colorConfigs: T,
   styleKey: string = '',
+  options?: { boldTitle?: boolean },
 ) {
   type ColorMap = { [K in Names<T>]: string };
   const childrenMap: any = {};
@@ -1268,7 +1270,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
 
       return (
         <>
-          <TitleDiv>
+          <TitleDiv $boldTitle={options?.boldTitle}>
             <span>{label}</span>
             {showReset && (
               <span
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 330e43cfdd..569ada9c4d 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -2371,6 +2371,18 @@ export const RichTextEditorStyle = [
   BORDER_WIDTH,
 ] as const;
 
+export const TableColumnButtonStyle = [
+  getBackground('primary'),
+  {
+    name: "text",
+    label: trans("style.text"),
+    color: "#000000",
+  },
+  PADDING,  
+  BORDER,
+] as const;
+
+
 export type QRCodeStyleType = StyleConfigType<typeof QRCodeStyle>;
 export type TimeLineStyleType = StyleConfigType<typeof TimeLineStyle>;
 export type AvatarStyleType = StyleConfigType<typeof AvatarStyle>;
@@ -2437,6 +2449,7 @@ export type TableColumnStyleType = StyleConfigType<typeof TableColumnStyle>;
 export type TableColumnLinkStyleType = StyleConfigType<
   typeof TableColumnLinkStyle
 >;
+export type TableColumnButtonStyleType = StyleConfigType<typeof TableColumnButtonStyle>;
 export type TableSummaryRowStyleType = StyleConfigType<typeof TableSummaryRowStyle>;
 export type FileStyleType = StyleConfigType<typeof FileStyle>;
 export type FileViewerStyleType = StyleConfigType<typeof FileViewerStyle>;