[Feat]: #1466 Add disabled/placeholder styles for the main components

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={trans("prop.disabledStyle")}>{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, 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) {
+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`
@@ -48,12 +48,23 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
             : buttonStyle.border} !important;
         }
       }
+
+      /* Disabled state styling */
+      &:disabled,
+      &.ant-btn-disabled {
+        color: ${disabledStyle.disabledText};
+        background: ${disabledStyle.disabledBackground};
+        cursor: not-allowed;
+      }
     }
   `;
 }
 
-export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
-  ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)}
+export const Button100 = styled(Button)<{ 
+  $buttonStyle?: ButtonStyleType; 
+  $disabledStyle?: DisabledButtonStyleType;
+}>`
+  ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle, props.$disabledStyle)}
   width: 100%;
   height: auto;
   display: inline-flex;
@@ -73,13 +84,15 @@ export const ButtonCompWrapper = styled.div<{ $disabled: boolean }>`
 
   // The button component is disabled but can respond to drag & select events
   ${(props) =>
-    props.$disabled &&
-    `
-    cursor: not-allowed;
-    button:disabled {
-      pointer-events: none;
-    }
-  `};
+    props.$disabled
+      ? `
+        cursor: not-allowed;
+        button:disabled {
+          pointer-events: none;
+        }
+      `
+      : ""
+  }
 `;
 
 /**
@@ -103,6 +116,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/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/comps/buttonComp/toggleButtonComp.tsx

@@ -12,7 +12,7 @@ import { trans } from "i18n";
 import styled from "styled-components";
 import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
-import { Button100, ButtonCompWrapper, buttonRefMethods } from "./buttonCompConstants";
+import { Button100, ButtonCompWrapper, buttonRefMethods, DisabledButtonStyleControl } from "./buttonCompConstants";
 import { IconControl } from "comps/controls/iconControl";
 import { AlignWithStretchControl, LeftRightControl } from "comps/controls/dropdownControl";
 import { booleanExposingStateControl } from "comps/controls/codeStateControl";
@@ -63,6 +63,7 @@ const ToggleTmpComp = (function () {
     iconPosition: LeftRightControl,
     alignment: AlignWithStretchControl,
     style: styleControl(ToggleButtonStyle , 'style'),
+    disabledStyle: DisabledButtonStyleControl,
     animationStyle: styleControl(AnimationStyle , 'animationStyle'),
     showBorder: withDefault(BoolControl, true),
     viewRef: RefControl<HTMLElement>,
@@ -84,6 +85,7 @@ const ToggleTmpComp = (function () {
           <Button100
             ref={props.viewRef}
             $buttonStyle={props.style}
+            $disabledStyle={props.disabledStyle}
             loading={props.loading}
             disabled={props.disabled}
             onClick={() => {
@@ -153,6 +155,7 @@ const ToggleTmpComp = (function () {
           </>
           )}
 
+        <Section name={trans("prop.disabledStyle")}>{children.disabledStyle.getPropertyView()}</Section>
       </>
     ))
     .setExposeMethodConfigs(buttonRefMethods)

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>
             </>
           )}
 

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]);

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}
     />
   );
 };