[Fix]: #1466 add disabled styles for the components / refactor

lowcoder-org · raheeliftikhar5 · Jul 1, 2025 · Jun 26, 2025 · Jun 26, 2025 · Jun 26, 2025
commit 54cc9b92ebfa807bf04a897ef66c31706ab4351f
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/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, DisabledButtonStyle } from "comps/controls/styleControlConstants";
+import { ButtonStyleType, ButtonStyle, DisabledButtonStyle, DisabledButtonStyleType } 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, disabledStyle?: any) {
+export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle: DisabledButtonStyleType = {} as any) {
   const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background);
   const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background);
   return css`
@@ -52,8 +52,8 @@ export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle?: any
       /* Disabled state styling */
       &:disabled,
       &.ant-btn-disabled {
-        color: ${disabledStyle?.disabledText || buttonStyle.text};
-        background: ${disabledStyle?.disabledBackground || buttonStyle.background};
+        color: ${disabledStyle.disabledText};
+        background: ${disabledStyle.disabledBackground};
         cursor: not-allowed;
       }
     }
@@ -62,7 +62,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle?: any
 
 export const Button100 = styled(Button)<{ 
   $buttonStyle?: ButtonStyleType; 
-  $disabledStyle?: any;
+  $disabledStyle?: DisabledButtonStyleType;
 }>`
   ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle, props.$disabledStyle)}
   width: 100%;

diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -28,7 +28,7 @@ import {
 } from "../../generators/withExposing";
 import { IForm } from "../formComp/formDataConstants";
 import { SimpleNameComp } from "../simpleNameComp";
-import { Button100, ButtonStyleControl } from "./videobuttonCompConstants";
+import { Button100, ButtonStyleControl, DisabledButtonStyleControl } from "./videobuttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import {
@@ -195,6 +195,7 @@ const childrenMap = {
   aspectRatio: withDefault(StringControl, "1 / 1"),
   onEvent: ButtonEventHandlerControl,
   disabled: BoolCodeControl,
+  disabledStyle: DisabledButtonStyleControl,
   loading: BoolCodeControl,
   form: SelectFormControl,
   sourceMode: dropdownControl(ModeOptions, "standard"),
@@ -267,6 +268,7 @@ let ButtonTmpComp = (function () {
               <Tooltip title={props.tooltip}>
                 <Button100
                   ref={props.viewRef}
+                  $disabledStyle={props.disabledStyle}
                   $buttonStyle={props.style}
                   loading={props.loading}
                   style={
@@ -358,6 +360,9 @@ let ButtonTmpComp = (function () {
             <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
             </Section>
+            <Section name="Disabled">
+              {children.disabledStyle.getPropertyView()}
+            </Section>
           </>
         )}
       </>

diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx
@@ -1,5 +1,5 @@
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
-import { ButtonStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { ButtonStyle, DisabledButtonStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
 import { refMethods } from "@lowcoder-ee/comps/generators/withMethodExposing";
 import { blurMethod, clickMethod, focusWithOptions } from "@lowcoder-ee/comps/utils/methodUtils";
@@ -8,7 +8,7 @@ import { genActiveColor, genHoverColor } from "components/colorSelect/colorUtils
 import styled, { css } from "styled-components";
 // import { genActiveColor, genHoverColor } from "lowcoder-design";
 
-export function getButtonStyle(buttonStyle: any) {
+export function getButtonStyle(buttonStyle: any, disabledStyle: any) {
   const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background);
   const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background);
   return css`
@@ -42,13 +42,20 @@ export function getButtonStyle(buttonStyle: any) {
             ? activeColor
             : buttonStyle.border};
         }
+
+      }
+      &:disabled,
+      &.ant-btn-disabled {
+        color: ${disabledStyle.disabledText};
+        background: ${disabledStyle.disabledBackground};
+        cursor: not-allowed;
       }
     }
   `;
 }
 
-export const Button100 = styled(Button)<{ $buttonStyle?: any }>`
-  ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)}
+export const Button100 = styled(Button)<{ $buttonStyle?: any; $disabledStyle?: any }>`
+  ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle, props.$disabledStyle)}
   width: 100%;
   height: auto;
   display: inline-flex;
@@ -98,6 +105,12 @@ export const ButtonStyleControl = migrateOldData(
   fixOldData
 );
 
+export const DisabledButtonTmpStyleControl = styleControl(DisabledButtonStyle);
+export const DisabledButtonStyleControl = migrateOldData(
+  DisabledButtonTmpStyleControl,
+  fixOldData
+);
+
 export const buttonRefMethods = refMethods([
   focusWithOptions,
   blurMethod,

diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -74,11 +74,7 @@ const getStyle = (style: InputLikeStyleType) => {
       &:hover {
         border-color: ${style.accent};
       }
-
-      &::-webkit-input-placeholder {
-        color: ${style.text};
-        opacity: 0.4;
-      }
+
       .ant-input-number {	
         margin: 0;	
 
@@ -92,6 +88,26 @@ const getStyle = (style: InputLikeStyleType) => {
         font-weight:${style.textWeight} !important;
         font-size:${style.textSize} !important;
         font-style:${style.fontStyle} !important;
+
+        &::-webkit-input-placeholder {
+          color: ${style.placeholder};
+          opacity: 1;
+        }
+
+        &::-moz-placeholder {
+          color: ${style.placeholder};
+          opacity: 1;
+        }
+
+        &:-ms-input-placeholder {
+          color: ${style.placeholder};
+          opacity: 1;
+        }
+
+        &::placeholder {
+          color: ${style.placeholder};
+          opacity: 1;
+        }
       }
 
       .ant-input-number-handler-wrap {
@@ -131,13 +147,14 @@ const InputNumber = styled(AntdInputNumber)<{
   /* Disabled state styling */
   &:disabled,
   &.ant-input-number-disabled {
-    color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
-    background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
+    color: ${(props) => props.$disabledStyle?.disabledText};
+    background: ${(props) => props.$disabledStyle?.disabledBackground};
+    border-color: ${(props) => props.$disabledStyle?.disabledBorder};
     cursor: not-allowed;
 
     .ant-input-number-input {
-      color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
-      background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
+      color: ${(props) => props.$disabledStyle?.disabledText};
+      background: ${(props) => props.$disabledStyle?.disabledBackground};
     }
 
   }
@@ -280,7 +297,7 @@ const childrenMap = {
   animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   prefixIcon: IconControl,
   inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
-  disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
+  disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'),
   // validation
   required: BoolControl,
   showValidationWhenEmpty: BoolControl,
@@ -397,7 +414,7 @@ const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) =
       stringMode={true}
       precision={props.precision}
       $style={props.inputFieldStyle}
-      $disabledStyle={props.disabledInputStyle}
+      $disabledStyle={props.disabledStyle}
       prefix={hasIcon(props.prefixIcon) ? props.prefixIcon : props.prefixText.value}
       tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
       onPressEnter={() => {
@@ -489,8 +506,8 @@ let NumberInputTmpComp = (function () {
           <Section name={sectionNames.inputFieldStyle}>
             {children.inputFieldStyle.getPropertyView()}
           </Section>
-          <Section name={"Disabled Input Style"}>
-            {children.disabledInputStyle.getPropertyView()}
+          <Section name={"Disabled Style"}>
+            {children.disabledStyle.getPropertyView()}
           </Section>
           <Section name={sectionNames.animationStyle} hasTooltip={true}>
             {children.animationStyle.getPropertyView()}

diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -53,8 +53,9 @@ const InputStyle = styled(Input)<{
   /* Disabled state styling */
   &:disabled,
   &.ant-input-disabled {
-    color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
-    background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
+    color: ${(props) => props.$disabledStyle?.disabledText};
+    background: ${(props) => props.$disabledStyle?.disabledBackground};
+    border-color: ${(props) => props.$disabledStyle?.disabledBorder};
     cursor: not-allowed;
   }
 `;
@@ -70,7 +71,7 @@ const childrenMap = {
   suffixIcon: IconControl,
   inputFieldStyle: styleControl(InputLikeStyle, 'inputFieldStyle'),
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
-  disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
+  disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'),
   tabIndex: NumberControl,
 };
 
@@ -85,7 +86,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
         showCount={props.showCount}
         allowClear={props.allowClear}
         $style={props.inputFieldStyle}
-        $disabledStyle={props.disabledInputStyle}
+        $disabledStyle={props.disabledStyle}
         prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
         suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
         tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
@@ -127,7 +128,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
             <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
             <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
             <Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
-            <Section name={"Disabled Input Style"}>{children.disabledInputStyle.getPropertyView()}</Section>
+            <Section name={"Disabled Input Style"}>{children.disabledStyle.getPropertyView()}</Section>
             <Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
           </>
         )}

diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -50,8 +50,9 @@ const TextAreaStyled = styled(TextArea)<{
   /* Disabled state styling */
   &:disabled,
   &.ant-input-disabled {
-    color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
-    background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
+    color: ${(props) => props.$disabledStyle?.disabledText};
+    background: ${(props) => props.$disabledStyle?.disabledBackground};
+    border-color: ${(props) => props.$disabledStyle?.disabledBorder};
     cursor: not-allowed;
   }
 `;
@@ -91,7 +92,7 @@ let TextAreaTmpComp = (function () {
     textAreaScrollBar: withDefault(BoolControl, false),
     inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
     animationStyle: styleControl(AnimationStyle, 'animationStyle'),
-    disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
+    disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'),
     tabIndex: NumberControl
   };
   return new UICompBuilder(childrenMap, (props) => {
@@ -108,7 +109,7 @@ let TextAreaTmpComp = (function () {
             allowClear={props.allowClear}
             style={{ height: "100% !important", resize: "vertical" }}
             $style={props.inputFieldStyle}
-            $disabledStyle={props.disabledInputStyle}
+            $disabledStyle={props.disabledStyle}
             tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
           />
         </Wrapper>
@@ -152,7 +153,7 @@ let TextAreaTmpComp = (function () {
             <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
             <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
             <Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
-            <Section name={"Disabled Input Style"}>{children.disabledInputStyle.getPropertyView()}</Section>
+            <Section name={"Disabled Style"}>{children.disabledStyle.getPropertyView()}</Section>
             <Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
           </>
         )}

diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -978,37 +978,29 @@ const DISABLED_TEXT = {
   label: trans("style.disabledText"),
   depName: "disabledBackground",
   depType: DEP_TYPE.CONTRAST_TEXT,
-  transformer: contrastText,
+  transformer: (color: string) => lightenColor(color, 0.8),
+} as const;
+
+
+export const DISABLED_BORDER = {
+  name: "disabledBorder",
+  label: trans("style.disabledBorder"),
+  color: SECOND_SURFACE_COLOR,
 } as const;
 
-// Re-export for reuse in other components if needed
 export const DISABLED_STYLE_FIELDS = [
   DISABLED_BACKGROUND,
   DISABLED_TEXT,
+  DISABLED_BORDER,
 ] as const;
 
-// Add disabled style constants specifically for text input components
-const DISABLED_INPUT_BACKGROUND = {
-  name: "disabledBackground",
-  label: trans("style.disabledBackground"),
-  color: SECOND_SURFACE_COLOR,
-} as const;
+// Helper to quickly create a component-specific disabled style list by
+// extending the two generic disabled tokens above.
+export const withDisabled = <Extra extends readonly SingleColorConfig[] = []>(
+  extra: Extra = [] as unknown as Extra,
+) => [...DISABLED_STYLE_FIELDS, ...extra] as const;
 
 
-const DISABLED_INPUT_TEXT = {
-  name: "disabledText",
-  label: trans("style.disabledText"),
-  depName: "disabledInputBackground",
-  depType: DEP_TYPE.CONTRAST_TEXT,
-  transformer: contrastText,
-} as const;
-
-// Re-export for reuse in textInput components
-export const DISABLED_INPUT_STYLE_FIELDS = [
-  DISABLED_INPUT_BACKGROUND,
-  DISABLED_INPUT_TEXT,
-] as const;
-
 // Add disabled style constants specifically for slider components
 const DISABLED_SLIDER_FILL = {
   name: "disabledFill",
@@ -1052,9 +1044,11 @@ export const ButtonStyle = [
 ] as const;
 
 // Create separate disabled style control
-export const DisabledButtonStyle = [
-  ...DISABLED_STYLE_FIELDS,
-] as const;
+export const DisabledButtonStyle = withDisabled();
+
+
+// For input components 
+export const DisabledInputStyle = withDisabled();
 
 export const DropdownStyle = [
   getBackground(),
@@ -1330,10 +1324,6 @@ export const InputLikeStyle = [
   ...ACCENT_VALIDATE,
 ] as const;
 
-// Create separate disabled style control for text inputs
-export const DisabledInputStyle = [
-  ...DISABLED_INPUT_STYLE_FIELDS,
-] as const;
 
 // added by Mousheng