add button disabled styles

Author: iamfaran

client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx

@@ -48,6 +48,17 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
             : buttonStyle.border} !important;
         }
       }
+
+      /* Disabled state styling */
+      &:disabled,
+      &.ant-btn-disabled {
+        color: ${buttonStyle.disabledText || buttonStyle.text};
+        background: ${buttonStyle.disabledBackground || buttonStyle.background};
+        border-color: ${
+          buttonStyle.disabledBorder || buttonStyle.border
+        } !important;
+        cursor: not-allowed;
+      }
     }
   `;
 }

client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx

@@ -4,11 +4,10 @@ import {
   Button100,
   ButtonCompWrapper,
   buttonRefMethods,
+  ButtonStyleControl,
 } from "comps/comps/buttonComp/buttonCompConstants";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { ScannerEventHandlerControl } from "comps/controls/eventHandlerControl";
-import { styleControl } from "comps/controls/styleControl";
-import { DropdownStyle } from "comps/controls/styleControlConstants";
 import { withDefault } from "comps/generators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { CustomModal, Section, sectionNames } from "lowcoder-design";
@@ -127,7 +126,7 @@ const ScannerTmpComp = (function () {
     maskClosable: withDefault(BoolControl, true),
     onEvent: ScannerEventHandlerControl,
     disabled: BoolCodeControl,
-    style: styleControl(DropdownStyle, "style"),
+    style: ButtonStyleControl,
     viewRef: RefControl<HTMLElement>,
   };
   return new UICompBuilder(childrenMap, (props) => {

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

@@ -959,9 +959,39 @@ function replaceAndMergeMultipleStyles(
   return temp;
 }
 
+// Add disabled style constants
+const DISABLED_BACKGROUND = {
+  name: "disabledBackground",
+  label: trans("style.disabledBackground"),
+  color: SECOND_SURFACE_COLOR,
+} as const;
+
+const DISABLED_BORDER = {
+  name: "disabledBorder",
+  label: trans("style.disabledBorder"),
+  depName: "disabledBackground",
+  transformer: backgroundToBorder,
+} as const;
+
+const DISABLED_TEXT = {
+  name: "disabledText",
+  label: trans("style.disabledText"),
+  depName: "disabledBackground",
+  depType: DEP_TYPE.CONTRAST_TEXT,
+  transformer: contrastText,
+} as const;
+
+// Re-export for reuse in other components if needed
+export const DISABLED_STYLE_FIELDS = [
+  DISABLED_BACKGROUND,
+  DISABLED_BORDER,
+  DISABLED_TEXT,
+] as const;
+
 export const ButtonStyle = [
   getBackground('primary'),
   ...STYLING_FIELDS_SEQUENCE,
+  ...DISABLED_STYLE_FIELDS,
 ] as const;
 
 export const DropdownStyle = [

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -511,6 +511,9 @@ export const en = {
     "tabAccent": "Tab Accent",
     "checkedBackground": "Checked Background Color",
     "uncheckedBackground": "Unchecked Background Color",
+    "disabledBackground": "Disabled Background Color",
+    "disabledBorder": "Disabled Border Color",
+    "disabledText": "Disabled Text Color",
     "uncheckedBorder": "Unchecked Border Color",
     "indicatorBackground": "Indicator Background Color",
     "tableCellText": "Cell Text",