add button disabled styles

iamfaran · iamfaran · commit 2e0ec4091b2c · 2025-06-26T17:25:28.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/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;
+      }
     }
   `;
 }
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/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) => {
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/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 = [
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/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",

Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,17 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {`
`48`	`48`	`: buttonStyle.border} !important;`
`49`	`49`	`}`
`50`	`50`	`}`
	`51`	`+`
	`52`	`+ /* Disabled state styling */`
	`53`	`+ &:disabled,`
	`54`	`+ &.ant-btn-disabled {`
	`55`	`+ color: ${buttonStyle.disabledText \|\| buttonStyle.text};`
	`56`	`+ background: ${buttonStyle.disabledBackground \|\| buttonStyle.background};`
	`57`	`+ border-color: ${`
	`58`	`+ buttonStyle.disabledBorder \|\| buttonStyle.border`
	`59`	`+ } !important;`
	`60`	`+ cursor: not-allowed;`
	`61`	`+ }`
`51`	`62`	`}`
`52`	`63`	`;
`53`	`64`	`}`