Merge pull request #933 from MenamAfzal/feature/add-box-shadow-on-input

Feature/add box shadow on input

Author: raheeliftikhar5

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

@@ -16,7 +16,7 @@ import {
   withExposingConfigs,
 } from "comps/generators/withExposing";
 import styled, { css } from "styled-components";
-import { UICompBuilder } from "../../generators";
+import { UICompBuilder, withDefault } from "../../generators";
 import { FormDataPropertyView } from "../formComp/formDataConstants";
 import { jsonControl } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
@@ -58,7 +58,8 @@ import {
 
 
 
-const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
+const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
+box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
   ${(props) => css`
     ${getStyle(props.$style)}
     input {
@@ -75,7 +76,7 @@ const childrenMap = {
   ...textInputChildren,
   viewRef: RefControl<InputRef>,
   allowClear: BoolControl.DEFAULT_TRUE,
-  style: styleControl(InputFieldStyle),
+  style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
   labelStyle:styleControl(LabelStyle),
   prefixIcon: IconControl,
   suffixIcon: IconControl,
@@ -89,7 +90,7 @@ const childrenMap = {
   autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"),
   componentSize: dropdownControl(componentSize, "small"),
   valueInItems: booleanExposingStateControl("valueInItems"),
-  inputFieldStyle: styleControl(InputLikeStyle),
+  inputFieldStyle: withDefault(styleControl(InputLikeStyle),{borderWidth:'1px'}),
   animationStyle: styleControl(AnimationStyle),
 };
 

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

@@ -119,9 +119,11 @@ const getStyle = (style: InputLikeStyleType) => {
   `;
 };
 
-const InputNumber = styled(AntdInputNumber) <{
+const InputNumber = styled(AntdInputNumber)<{
   $style: InputLikeStyleType;
 }>`
+  box-shadow: ${(props) =>
+    `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
   width: 100%;
   ${(props) => props.$style && getStyle(props.$style)}
 `;

client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx

@@ -40,7 +40,9 @@ import { EditorContext } from "comps/editorState";
  * Input Comp
  */
 
-const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
+const InputStyle = styled(Input)<{$style: InputLikeStyleType}>`
+  box-shadow: ${(props) =>
+    `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 

client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx

@@ -43,9 +43,11 @@ import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 
-const PasswordStyle = styled(InputPassword) <{
+const PasswordStyle = styled(InputPassword)<{
   $style: InputLikeStyleType;
 }>`
+  box-shadow: ${(props) =>
+    `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 

client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx

@@ -38,9 +38,11 @@ import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 
-const TextAreaStyled = styled(TextArea) <{
+const TextAreaStyled = styled(TextArea)<{
   $style: InputLikeStyleType;
 }>`
+  box-shadow: ${(props) =>
+    `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 

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

@@ -46,7 +46,7 @@ function getStyle(style: any) {
 }
 
 const LabelViewWrapper = styled.div<{ $style: any, inputFieldStyle: any,$animationStyle:any }>`
-${(props) => {
+  ${(props) => {
     return (
       props.$style && {
         ...props.$style,
@@ -230,7 +230,7 @@ export const LabelControl = (function () {
                 ? `calc(100% - ${getLabelWidth(props.width, props.widthUnit)} - 8px)`
                 : "100%",
             height: props.position === "column" && !!props.text ? "calc(100% - 22px)" : "100%",
-            rotate:args?.inputFieldStyle?.rotation
+            rotate:args?.inputFieldStyle?.rotation,
           }}
         >
           {args.children}

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

@@ -1028,6 +1028,8 @@ export const SliderStyle = [
 
 export const InputLikeStyle = [
   getStaticBackground(SURFACE_COLOR),
+  BOXSHADOW,
+  BOXSHADOWCOLOR,
   ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'),
   ...ACCENT_VALIDATE,
 ] as const;
@@ -1126,7 +1128,7 @@ export const startButtonStyle = [
 
 export const LabelStyle = [
   ...replaceAndMergeMultipleStyles([...InputLikeStyle], "text", [LABEL]).filter(
-    (style) => style.name !== "radius" && style.name !== "background"&&style.name!=='rotation'
+    (style) => style.name !== "radius" && style.name !== "background" && style.name!=='rotation' && style.name !== "boxShadow"&&style.name!=='boxShadowColor'
   ),
 ];