[Feat]: #1867 add styles for the button column

Author: iamfaran

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()}
       </>
     ))

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

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>;