fixed color picker input styles

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx

@@ -1,7 +1,7 @@
 import { Section, sectionNames } from "lowcoder-design";
 import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl";
-import { ColorPickerStyle, ColorPickerStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, ColorPickerStyle, ColorPickerStyleType, DisabledInputStyle, DisabledInputStyleType, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
 import { NameConfig } from "comps/generators/withExposing";
 import styled, { css } from "styled-components";
 import { UICompBuilder, withDefault } from "../../generators";
@@ -16,18 +16,22 @@ import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerCon
 import { jsonObjectExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { ArrayOrJSONObjectControl } from "comps/controls/codeControl";
-import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
 
-export function getStyle(style: ColorPickerStyleType) {
+export function getStyle(style: InputLikeStyleType) {
   return css`
     border-radius: ${style.radius};
     &:not(.ant-input-disabled, .ant-input-affix-wrapper-disabled),
-    input {
+    .ant-color-picker-trigger {
+      color: ${style.text};
+      font-weight: ${style.textWeight};
+      font-family: ${style.fontFamily};
+      font-style:${style.fontStyle};
+      text-transform:${style.textTransform};
+      text-decoration:${style.textDecoration};
       background-color: ${style.background};
-      color:${style.text};
-      font-weight:${style.textWeight};
-      font-family:${style.fontFamily};
       border-color: ${style.border};
+      padding: ${style.padding};
+      margin: ${style.margin};
       &:focus,
       &.ant-input-affix-wrapper-focused {
         border-color: ${style.accent};
@@ -38,15 +42,31 @@ export function getStyle(style: ColorPickerStyleType) {
       .ant-input-clear-icon svg:hover {
         opacity: 0.65;
       }
+      .ant-color-picker-trigger-text {
+        font-size: ${style.textSize};
+      }
     }
   `;
 }
 
-const ColorPickerWrapper = styled(ColorPicker) <{ $style: ColorPickerStyleType }>`
-  width: 100%;
+const ColorPickerWrapper = styled(ColorPicker) <{
+  $style: InputLikeStyleType;
+  $disabledStyle?: DisabledInputStyleType;
+}>`
   display: flex;
   justify-content: flex-start;
+  box-shadow: ${(props) =>
+    `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
+  
+  /* Disabled state styling */
+  &:disabled,
+  &.ant-input-disabled {
+    color: ${(props) => props.$disabledStyle?.disabledText};
+    background: ${(props) => props.$disabledStyle?.disabledBackground};
+    border-color: ${(props) => props.$disabledStyle?.disabledBorder};
+    cursor: not-allowed;
+  }
 `;
 
 const colorPickerTriggerOption = [
@@ -61,20 +81,25 @@ export const colorPickerEvent = eventHandlerControl([
 const childrenMap = {
   ...textInputChildren,
   value: stringExposingStateControl('value', '#3377ff'),
-  style: styleControl(ColorPickerStyle , 'style'),
   color: jsonObjectExposingStateControl('color', {}),
   trigger: dropdownControl(colorPickerTriggerOption, 'click'),
   disabledAlpha: BoolControl,
   showPresets: BoolControl,
   onEvent: colorPickerEvent,
   presets: withDefault(ArrayOrJSONObjectControl, JSON.stringify(presets, null, 2)),
+  style: styleControl(InputFieldStyle, 'style'), 
+  labelStyle:styleControl(LabelStyle, 'labelStyle'), 
+  inputFieldStyle: styleControl(InputLikeStyle, 'inputFieldStyle'),
+  animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+  disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'),
 };
 
 export const ColorPickerComp = new UICompBuilder(childrenMap, (props) => {
   return props.label({
     children: (
       <ColorPickerWrapper
-        $style={props.style}
+        $style={props.inputFieldStyle}
+        $disabledStyle={props.disabledStyle}
         value={props?.value?.value}
         disabledAlpha={props.disabledAlpha}
         showText={value => value.toHexString().toUpperCase()}
@@ -94,6 +119,9 @@ export const ColorPickerComp = new UICompBuilder(childrenMap, (props) => {
       />
     ),
     style: props.style,
+    labelStyle: props.labelStyle,
+    inputFieldStyle:props.inputFieldStyle,
+    animationStyle:props.animationStyle,
   });
 })
   .setPropertyViewFn((children) => {
@@ -121,6 +149,10 @@ export const ColorPickerComp = new UICompBuilder(childrenMap, (props) => {
         <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
 
         <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={trans("prop.disabledStyle")}>{children.disabledStyle.getPropertyView()}</Section>
+        <Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
       </>
     );
   })

client/packages/lowcoder/src/constants/themeConstants.ts

@@ -219,6 +219,7 @@ export const defaultTheme: ThemeDetail = {
     dateRange: input,
     time: input,
     timeRange: input,
+    colorPicker: input,
     rangeSlider: slider,
     segmentedControl,
     select: select,