Add a placeholder property to input mock shape

Author: iria-carballo

src/common/components/mock-components/front-components/input-shape.tsx

@@ -41,8 +41,15 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { stroke, fill, textColor, strokeStyle, borderRadius, disabled } =
-    useShapeProps(otherProps, INPUT_SHAPE);
+  const {
+    stroke,
+    fill,
+    textColor,
+    strokeStyle,
+    borderRadius,
+    disabled,
+    isPlaceholder,
+  } = useShapeProps(otherProps, INPUT_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -72,7 +79,13 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE}
         lineHeight={INPUT_SHAPE.DEFAULT_LINE_HEIGHT}
-        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
+        fill={
+          disabled
+            ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR
+            : isPlaceholder
+              ? INPUT_SHAPE.DEFAULT_FILL_TEXT
+              : textColor
+        }
         align="left"
         ellipsis={true}
         wrap="none"

src/common/components/shapes/use-shape-props.hook.ts

@@ -22,6 +22,11 @@ export const useShapeProps = (
     [otherProps?.textColor]
   );
 
+  const isPlaceholder = useMemo(
+    () => otherProps?.isPlaceholder ?? true,
+    [otherProps?.isPlaceholder]
+  );
+
   const fontVariant = useMemo(
     () => otherProps?.fontVariant ?? defaultStyleShape.DEFAULT_FONT_VARIANT,
     [otherProps?.fontVariant]
@@ -93,5 +98,6 @@ export const useShapeProps = (
     textDecoration,
     textAlignment,
     disabled,
+    isPlaceholder,
   };
 };

src/core/model/index.ts

@@ -182,6 +182,7 @@ export interface OtherProps {
   selectedBackgroundColor?: string;
   textAlignment?: 'left' | 'center' | 'right';
   disabled?: boolean;
+  isPlaceholder?: boolean;
 }
 
 export const BASE_ICONS_URL = '/icons/';

src/pods/canvas/model/shape-other-props.utils.ts

@@ -15,6 +15,7 @@ export const generateDefaultOtherProps = (
         stroke: INPUT_SHAPE.DEFAULT_STROKE_COLOR,
         backgroundColor: INPUT_SHAPE.DEFAULT_FILL_BACKGROUND,
         textColor: INPUT_SHAPE.DEFAULT_FILL_TEXT,
+        isPlaceholder: true,
         strokeStyle: [],
         borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`,
         disabled: INPUT_SHAPE.DEFAULT_DISABLED,

src/pods/properties/components/placeholder/index.ts

@@ -0,0 +1 @@
+export * from './placeholder.component';

src/pods/properties/components/placeholder/placeholder.component.module.css

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+  padding: var(--space-xs) var(--space-md);
+  border-bottom: 1px solid var(--primary-300);
+}
+
+.container :first-child {
+  flex: 1;
+}
+
+.checkbox {
+  width: var(--space-md);
+  height: var(--space-md);
+  cursor: pointer;
+}

src/pods/properties/components/placeholder/placeholder.component.tsx

@@ -0,0 +1,23 @@
+import classes from './placeholder.component.module.css';
+
+interface Props {
+  label: string;
+  isPlaceholder: boolean;
+  onChange: (isPlaceholder: boolean) => void;
+}
+
+export const Placeholder: React.FC<Props> = props => {
+  const { label, isPlaceholder, onChange } = props;
+
+  return (
+    <div className={classes.container}>
+      <p>{label}</p>
+      <input
+        type="checkbox"
+        checked={isPlaceholder}
+        onChange={() => onChange(!isPlaceholder)}
+        className={classes.checkbox}
+      />
+    </div>
+  );
+};

src/pods/properties/properties.model.ts

@@ -19,6 +19,7 @@ export const multiSelectEnabledProperties: (keyof OtherProps)[] = [
   'selectedBackgroundColor',
   'textAlignment',
   'disabled',
+  'isPlaceholder',
 ];
 
 export type PropsValueTypes =

src/pods/properties/properties.pod.tsx

@@ -18,6 +18,7 @@ import { useMemo } from 'react';
 import { extractMultiplePropsInCommon } from './properties.business';
 import { ShowProp } from './components/show-prop';
 import { iconCollection } from './components/icon-selector/modal/icons';
+import { Placeholder } from './components/placeholder';
 
 export const PropertiesPod = () => {
   const { selectionInfo, fullDocument } = useCanvasContext();
@@ -191,6 +192,26 @@ export const PropertiesPod = () => {
             }
           />
         </ShowProp>
+        <ShowProp
+          singleSelection={isSingleSelection}
+          multipleSelectionPropsInCommon={multipleSelectionPropsInCommon}
+          propKey="isPlaceholder"
+          propValue={selectedShapeData?.otherProps?.isPlaceholder}
+        >
+          <Placeholder
+            label="Placeholder"
+            isPlaceholder={
+              selectedShapeData?.otherProps?.isPlaceholder ?? false
+            }
+            onChange={isPlaceholder =>
+              updateOtherPropsOnSelected(
+                'isPlaceholder',
+                isPlaceholder,
+                isMultipleSelection
+              )
+            }
+          />
+        </ShowProp>
         <ShowProp
           singleSelection={isSingleSelection}
           multipleSelectionPropsInCommon={multipleSelectionPropsInCommon}