make a seperate section for disabled

Author: iamfaran

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

@@ -21,6 +21,7 @@ import {
   ButtonCompWrapper,
   buttonRefMethods,
   ButtonStyleControl,
+  DisabledButtonStyleControl,
 } from "./buttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
 import { Tooltip } from "antd";
@@ -133,6 +134,7 @@ const childrenMap = {
   prefixIcon: IconControl,
   suffixIcon: IconControl,
   style: ButtonStyleControl,
+  disabledStyle: DisabledButtonStyleControl,
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   viewRef: RefControl<HTMLElement>,
   tooltip: StringControl
@@ -173,6 +175,7 @@ const ButtonPropertyView = React.memo((props: {
             {props.children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
           </Section>
           <Section name={sectionNames.style}>{props.children.style.getPropertyView()}</Section>
+          <Section name="Disabled">{props.children.disabledStyle.getPropertyView()}</Section>
         </>
       )}
     </>
@@ -212,6 +215,7 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
             <Button100
               ref={props.viewRef}
               $buttonStyle={props.style}
+              $disabledStyle={props.disabledStyle}
               loading={props.loading}
               disabled={
                 props.disabled ||

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

@@ -1,13 +1,13 @@
 import { default as Button } from "antd/es/button";
 import { styleControl } from "comps/controls/styleControl";
-import { ButtonStyleType, ButtonStyle } from "comps/controls/styleControlConstants";
+import { ButtonStyleType, ButtonStyle, DisabledButtonStyle } from "comps/controls/styleControlConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import styled, { css } from "styled-components";
 import { genActiveColor, genHoverColor } from "lowcoder-design";
 import { refMethods } from "comps/generators/withMethodExposing";
 import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils";
 
-export function getButtonStyle(buttonStyle: ButtonStyleType) {
+export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle?: any) {
   const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background);
   const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background);
   return css`
@@ -52,19 +52,22 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
       /* Disabled state styling */
       &:disabled,
       &.ant-btn-disabled {
-        color: ${buttonStyle.disabledText || buttonStyle.text};
-        background: ${buttonStyle.disabledBackground || buttonStyle.background};
+        color: ${disabledStyle?.disabledText || buttonStyle.text};
+        background: ${disabledStyle?.disabledBackground || buttonStyle.background};
         border-color: ${
-          buttonStyle.disabledBorder || buttonStyle.border
+          disabledStyle?.disabledBorder || buttonStyle.border
         } !important;
         cursor: not-allowed;
       }
     }
   `;
 }
 
-export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
-  ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)}
+export const Button100 = styled(Button)<{ 
+  $buttonStyle?: ButtonStyleType; 
+  $disabledStyle?: any;
+}>`
+  ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle, props.$disabledStyle)}
   width: 100%;
   height: auto;
   display: inline-flex;
@@ -116,6 +119,10 @@ function fixOldData(oldData: any) {
 const ButtonTmpStyleControl = styleControl(ButtonStyle, 'style');
 export const ButtonStyleControl = migrateOldData(ButtonTmpStyleControl, fixOldData);
 
+// Create disabled style control
+const DisabledButtonTmpStyleControl = styleControl(DisabledButtonStyle, 'disabledStyle');
+export const DisabledButtonStyleControl = migrateOldData(DisabledButtonTmpStyleControl, fixOldData);
+
 export const buttonRefMethods = refMethods<HTMLElement>([
   focusWithOptions,
   blurMethod,

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

@@ -991,6 +991,10 @@ export const DISABLED_STYLE_FIELDS = [
 export const ButtonStyle = [
   getBackground('primary'),
   ...STYLING_FIELDS_SEQUENCE,
+] as const;
+
+// Create separate disabled style control
+export const DisabledButtonStyle = [
   ...DISABLED_STYLE_FIELDS,
 ] as const;
 
@@ -1013,7 +1017,6 @@ export const ToggleButtonStyle = [
       ...style,
     };
   }),
-  ...DISABLED_STYLE_FIELDS,
 ] as const;
 
 export const TextStyle = [
@@ -2321,6 +2324,7 @@ export type InputFieldStyleType = StyleConfigType<typeof InputFieldStyle>;
 export type SignatureContainerStyleType = StyleConfigType<typeof SignatureContainerStyle>;
 export type ColorPickerStyleType = StyleConfigType<typeof ColorPickerStyle>;
 export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
+export type DisabledButtonStyleType = StyleConfigType<typeof DisabledButtonStyle>;
 export type ToggleButtonStyleType = StyleConfigType<typeof ToggleButtonStyle>;
 export type TextStyleType = StyleConfigType<typeof TextStyle>;
 export type TextContainerStyleType = StyleConfigType<typeof TextContainerStyle>;