[Fix]: #1466 add disabled/placeholder style for components

lowcoder-org · raheeliftikhar5 · Jul 1, 2025 · Jun 26, 2025 · Jun 26, 2025 · Jun 26, 2025
commit b366ecbc8bc00efeb07736c9882b8d0077ed3e41
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
@@ -175,7 +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>
+          <Section name={trans("prop.disabledStyle")}>{props.children.disabledStyle.getPropertyView()}</Section>
         </>
       )}
     </>

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
@@ -155,7 +155,7 @@ const ToggleTmpComp = (function () {
           </>
           )}
 
-        <Section name="Disabled">{children.disabledStyle.getPropertyView()}</Section>
+        <Section name={trans("prop.disabledStyle")}>{children.disabledStyle.getPropertyView()}</Section>
       </>
     ))
     .setExposeMethodConfigs(buttonRefMethods)

diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -21,7 +21,7 @@ import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing";
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
 import { styleControl } from "comps/controls/styleControl";
-import {  AnimationStyle, ChildrenMultiSelectStyle, ChildrenMultiSelectStyleType, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
+import {  AnimationStyle, ChildrenMultiSelectStyle, ChildrenMultiSelectStyleType, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle, DisabledInputStyle, DisabledInputStyleType } from "comps/controls/styleControlConstants";
 import { withMethodExposing } from "../../generators/withMethodExposing";
 import {
   disabledPropertyView,
@@ -81,6 +81,7 @@ const commonChildren = {
   format: StringControl,
   inputFormat: withDefault(StringControl, DATE_FORMAT),
   disabled: BoolCodeControl,
+  disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'),
   onEvent: eventHandlerControl(EventOptions),
   showTime: BoolControl,
   use12Hours: BoolControl,
@@ -179,11 +180,13 @@ export type DateCompViewProps = Pick<
   | "viewRef"
   | "timeZone"
   | "pickerMode"
+  | "disabledStyle"
 > & {
   onFocus: () => void;
   onBlur: () => void;
   $style: DateTimeStyleType;
   $childrenInputFieldStyle: ChildrenMultiSelectStyleType;
+  $disabledStyle?: DisabledInputStyleType;
   disabledTime: () => ReturnType<typeof disabledTime>;
   suffixIcon: ReactNode;
   placeholder?: string | [string, string];
@@ -264,6 +267,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
         disabledTime={() => disabledTime(props.minTime, props.maxTime)}
         $style={props.inputFieldStyle}
         $childrenInputFieldStyle={props.childrenInputFieldStyle}
+        $disabledStyle={props.disabledStyle}
         disabled={props.disabled}
         {...datePickerProps(props)}
         hourStep={props.hourStep}
@@ -285,6 +289,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
         onBlur={() => props.onEvent("blur")}
         suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
         tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
+        disabledStyle={props.disabledStyle}
       />
     ),
     showValidationWhenEmpty: props.showValidationWhenEmpty,
@@ -366,6 +371,9 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
             <Section name={sectionNames.animationStyle} hasTooltip={true}>
               {children.animationStyle.getPropertyView()}
             </Section>
+            <Section name={trans("prop.disabledStyle")}>
+              {children.disabledStyle.getPropertyView()}
+            </Section>
           </>
         )}
       </>
@@ -457,6 +465,7 @@ let DateRangeTmpCmp = (function () {
         viewRef={props.viewRef}
         $style={props.inputFieldStyle}
         $childrenInputFieldStyle={props.childrenInputFieldStyle}
+        $disabledStyle={props.disabledStyle}
         disabled={props.disabled}
         {...datePickerProps(props)}
         start={tempStartValue?.isValid() ? tempStartValue : null}
@@ -482,6 +491,7 @@ let DateRangeTmpCmp = (function () {
         onBlur={() => props.onEvent("blur")}
         suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
         tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}      
+        disabledStyle={props.disabledStyle}
       />
     );
 
@@ -579,6 +589,9 @@ let DateRangeTmpCmp = (function () {
               <Section name={sectionNames.childrenInputFieldStyle}>
                 {children.childrenInputFieldStyle.getPropertyView()}
               </Section>
+              <Section name={trans("prop.disabledStyle")}>
+                {children.disabledStyle.getPropertyView()}
+              </Section>
             </>
           )}
 

diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
@@ -85,8 +85,23 @@ export const getStyle = (style: DateTimeStyleType) => {
         color: ${style.text};
 
         &::-webkit-input-placeholder {
-          color: ${style.text};
-          opacity: 0.25;
+          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;
         }
       }
 
@@ -132,6 +147,26 @@ export const getMobileStyle = (style: DateTimeStyleType) =>
     background-color: ${style.background};
     border-radius: ${style.radius};
     border-color: ${style.border};
+
+    &::-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;
+    }
   `;
 
 export const dateRefMethods = refMethods<CommonPickerMethods>([focusMethod, blurMethod]);

diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
@@ -5,7 +5,7 @@ import { useUIView } from "../../utils/useUIView";
 import { checkIsMobile } from "util/commonUtils";
 import React, { useContext } from "react";
 import styled from "styled-components";
-import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
+import type { ChildrenMultiSelectStyleType, DateTimeStyleType, DisabledInputStyleType } from "../../controls/styleControlConstants";
 import { EditorContext } from "../../editorState";
 import { default as DatePicker } from "antd/es/date-picker";
 import { hasIcon } from "comps/utils";
@@ -16,11 +16,28 @@ import { timeZoneOptions } from "./timeZone";
 
 const { RangePicker } = DatePicker;
 
-const RangePickerStyled = styled(RangePicker)<{$style: DateTimeStyleType}>`
+const RangePickerStyled = styled(RangePicker)<{$style: DateTimeStyleType; $disabledStyle?: DisabledInputStyleType}>`
   width: 100%;
   box-shadow: ${(props) =>
     `${props.$style.boxShadow} ${props.$style.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
+
+  &.ant-picker-disabled {
+    cursor: not-allowed;
+    color: ${(props) => props.$disabledStyle?.disabledText};
+    background: ${(props) => props.$disabledStyle?.disabledBackground};
+    border-color: ${(props) => props.$disabledStyle?.disabledBorder};
+
+    .ant-picker-input > input {
+      color: ${(props) => props.$disabledStyle?.disabledText};
+      background: ${(props) => props.$disabledStyle?.disabledBackground};
+    }
+    .ant-picker-suffix,
+    .ant-picker-clear,
+    .ant-picker-separator {
+      color: ${(props) => props.$disabledStyle?.disabledText};
+    }
+  }
 `;
 
 const StyledAntdSelect = styled(AntdSelect)`
@@ -46,6 +63,7 @@ export interface DateRangeUIViewProps extends DateCompViewProps {
   onPanelChange: (value: any, mode: [string, string]) => void;
   onClickDateRangeTimeZone:(value:any)=>void;
   tabIndex?: number;
+  $disabledStyle?: DisabledInputStyleType;
 }
 
 export const DateRangeUIView = (props: DateRangeUIViewProps) => {
@@ -98,6 +116,7 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
           </StyledDiv>
         )
       )}
+      $disabledStyle={props.$disabledStyle}
     />
   );
 };
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
@@ -5,7 +5,7 @@ import { useUIView } from "../../utils/useUIView";
 import { checkIsMobile } from "util/commonUtils";
 import React, { useContext } from "react";
 import styled from "styled-components";
-import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
+import type { ChildrenMultiSelectStyleType, DateTimeStyleType, DisabledInputStyleType } from "../../controls/styleControlConstants";
 import { EditorContext } from "../../editorState";
 import { default as DatePicker } from "antd/es/date-picker";
 import type { DatePickerProps } from "antd/es/date-picker";
@@ -15,10 +15,28 @@ import { timeZoneOptions } from "./timeZone";
 import { default as AntdSelect } from "antd/es/select";
 import { omit } from "lodash";
 
-const DatePickerStyled = styled(DatePicker<Dayjs>)<{ $style: DateTimeStyleType }>`
+const DatePickerStyled = styled(DatePicker<Dayjs>)<{ $style: DateTimeStyleType; $disabledStyle?: DisabledInputStyleType; }>`
   width: 100%;
   box-shadow: ${props=>`${props.$style.boxShadow} ${props.$style.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
+
+  /* Disabled state styling */
+  &.ant-picker-disabled {
+    cursor: not-allowed;
+    color: ${(props) => props.$disabledStyle?.disabledText};
+    background: ${(props) => props.$disabledStyle?.disabledBackground};
+    border-color: ${(props) => props.$disabledStyle?.disabledBorder};
+
+    .ant-picker-input > input {
+      color: ${(props) => props.$disabledStyle?.disabledText};
+      background: ${(props) => props.$disabledStyle?.disabledBackground};
+    }
+    .ant-picker-suffix,
+    .ant-picker-clear,
+    .ant-picker-separator {
+      color: ${(props) => props.$disabledStyle?.disabledText};
+    }
+  }
 `;
 
 const StyledDiv = styled.div`
@@ -40,6 +58,7 @@ export interface DataUIViewProps extends DateCompViewProps {
   onPanelChange: () => void;
   onClickDateTimeZone:(value:any)=>void;
   tabIndex?: number;
+  $disabledStyle?: DisabledInputStyleType;
 }
 
 const DateMobileUIView = React.lazy(() =>
@@ -54,6 +73,7 @@ export const DateUIView = (props: DataUIViewProps) => {
     <DateMobileUIView {...props} />,
     <DatePickerStyled
       {...omit(props, "format", "inputFormat", "pickerMode", "$childrenInputFieldStyle")}
+      $disabledStyle={props.$disabledStyle}
       multiple={false}
       format={props.inputFormat}
       ref={props.viewRef as any}

diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -360,7 +360,7 @@ let ButtonTmpComp = (function () {
             <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
             </Section>
-            <Section name="Disabled">
+            <Section name={trans("prop.disabledStyle")}>
               {children.disabledStyle.getPropertyView()}
             </Section>
           </>

diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -506,9 +506,9 @@ let NumberInputTmpComp = (function () {
           <Section name={sectionNames.inputFieldStyle}>
             {children.inputFieldStyle.getPropertyView()}
           </Section>
-          <Section name={"Disabled Style"}>
-            {children.disabledStyle.getPropertyView()}
-          </Section>
+                      <Section name={trans("prop.disabledStyle")}>
+              {children.disabledStyle.getPropertyView()}
+            </Section>
           <Section name={sectionNames.animationStyle} hasTooltip={true}>
             {children.animationStyle.getPropertyView()}
           </Section>

diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
@@ -65,11 +65,6 @@ const getStyle = (style: SliderStyleType, vertical: boolean, disabledStyle?: Dis
       .ant-slider-track {
         background-color: ${disabledStyle?.disabledFill || lightenColor(style.fill, 0.3)} !important;
       }
-      .ant-slider-handle {
-        background-color: ${disabledStyle?.disabledThumb || lightenColor(style.thumb, 0.25)} !important;
-        border-color: ${disabledStyle?.disabledThumbBorder || lightenColor(style.thumbBorder, 0.25)} !important;
-        cursor: not-allowed !important;
-      }
       ${vertical && css`
         width: auto;	
         min-height: calc(300px - ${style.margin});
@@ -157,7 +152,7 @@ const LayoutSection = memo(({ children }: { children: RecordConstructorToComp<ty
       <Section name={sectionNames.inputFieldStyle}>
         {children.inputFieldStyle.getPropertyView()}
       </Section>
-      <Section name={"Disabled Slider Style"}>
+      <Section name={trans("prop.disabledStyle")}>
         {children.disabledSliderStyle.getPropertyView()}
       </Section>
       <Section name={sectionNames.animationStyle} hasTooltip={true}>

diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
@@ -5,7 +5,7 @@ import { stringExposingStateControl, numberExposingStateControl } from "comps/co
 import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { StepOptionControl } from "comps/controls/optionsControl";
 import { styleControl } from "comps/controls/styleControl";
-import { StepsStyle, StepsStyleType, heightCalculator, widthCalculator, marginCalculator, AnimationStyle, AnimationStyleType } from "comps/controls/styleControlConstants";
+import { StepsStyle, StepsStyleType, heightCalculator, widthCalculator, marginCalculator, AnimationStyle, AnimationStyleType, DisabledStepStyle, DisabledStepStyleType } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
@@ -98,11 +98,12 @@ const StepsChildrenMap = {
   animationStyle: styleControl(AnimationStyle ,'animationStyle' ),
   showScrollBars: withDefault(BoolControl, false),
   minHorizontalWidth: withDefault(RadiusControl, ''),
+  disabledStyle: styleControl(DisabledStepStyle, 'disabledStyle'),
 };
 
 let StepControlBasicComp = (function () {
   return new UICompBuilder(StepsChildrenMap, (props) => {
-    const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>`
+    const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType, $disabledStyle: DisabledStepStyleType }>`
     ${props=>props.$animationStyle}
       height: 100%;
       overflow-y: scroll;
@@ -124,6 +125,30 @@ let StepControlBasicComp = (function () {
       border: ${props.style.borderWidth} solid ${props.style.border};
       border-radius: ${props.style.radius};
       ${getBackgroundStyle(props.style)}
+      /* Disabled step styles */
+      .ant-steps-item-disabled {
+        .ant-steps-item-icon {
+          background: ${(props) => props.$disabledStyle?.disabledBackground};
+          border-color: ${(props) => props.$disabledStyle?.disabledBorder};
+
+          /* When using icon as dot */
+          .ant-steps-icon-dot {
+            background: ${(props) => props.$disabledStyle?.disabledBackground};
+          }
+
+          /* Default icon or custom icon */
+          .ant-steps-icon,
+          > * {
+            color: ${(props) => props.$disabledStyle?.disabledText};
+          }
+        }
+
+        .ant-steps-item-title,
+        .ant-steps-item-subtitle,
+        .ant-steps-item-description {
+          color: ${(props) => props.$disabledStyle?.disabledText};
+        }
+      }
       .ant-steps-item { padding-top: 5px !important; }
       .ant-steps.ant-steps-label-vertical.ant-steps-small .ant-steps-item-icon { margin-top: 17px !important; }
       .ant-steps.ant-steps-label-vertical.ant-steps-default .ant-steps-item-icon { margin-top: 12px !important; }
@@ -172,7 +197,7 @@ let StepControlBasicComp = (function () {
               }
             }}
           >
-          <StyledWrapper style={props.style} $animationStyle={props.animationStyle}>
+          <StyledWrapper style={props.style} $animationStyle={props.animationStyle} $disabledStyle={props.disabledStyle}>
           <ScrollBar
             style={{
               height: props.autoHeight ? "auto" : "100%",
@@ -281,6 +306,9 @@ let StepControlBasicComp = (function () {
           <Section name={sectionNames.animationStyle} hasTooltip={true}>
             {children.animationStyle.getPropertyView()}
           </Section>
+          <Section name={trans("prop.disabledStyle")}>
+            {children.disabledStyle.getPropertyView()}
+          </Section>
           </>
         )}
       </>

diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -128,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.disabledStyle.getPropertyView()}</Section>
+            <Section name={trans("prop.disabledStyle")}>{children.disabledStyle.getPropertyView()}</Section>
             <Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
           </>
         )}

diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -135,7 +135,7 @@ let PasswordTmpComp = (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={trans("prop.disabledStyle")}>{children.disabledInputStyle.getPropertyView()}</Section>
               <Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
             </>
           )}
-Original file line number
+Diff line change
@@ Expand Up / @@ -155,7 +155,7 @@ const ToggleTmpComp = (function () { @@
               </>
               )}
-            <Section name="Disabled">{children.disabledStyle.getPropertyView()}</Section>
+            <Section name={trans("prop.disabledStyle")}>{children.disabledStyle.getPropertyView()}</Section>
           </>
         ))
         .setExposeMethodConfigs(buttonRefMethods)
@@ Expand Down @@