chore: add code for paragraph-text morphing

app/client/src/widgets/wds/WDSBaseInputWidget/config/contentConfig.ts

@@ -1,5 +1,6 @@
 import { ValidationTypes } from "constants/WidgetValidation";
 
+import { isReadOnlyUpdateHook } from "../helpers";
 import type { BaseInputWidgetProps } from "../widget/types";
 
 export const propertyPaneContentConfig = [
@@ -121,6 +122,8 @@ export const propertyPaneContentConfig = [
         isJSConvertible: true,
         isBindProperty: true,
         isTriggerProperty: false,
+        dependencies: ["type", "inputType"],
+        updateHook: isReadOnlyUpdateHook,
         validation: { type: ValidationTypes.BOOLEAN },
       },
       {

app/client/src/widgets/wds/WDSBaseInputWidget/helpers.ts

@@ -0,0 +1,35 @@
+import type { WidgetProps } from "widgets/BaseWidget";
+import type { PropertyUpdates } from "WidgetProvider/constants";
+
+import type { InputType } from "./types";
+import { INPUT_TYPE_TO_WIDGET_TYPE_MAP } from "./constants";
+
+export function isReadOnlyUpdateHook(
+  props: WidgetProps,
+  propertyName: string,
+  propertyValue: boolean,
+) {
+  const updates: PropertyUpdates[] = [
+    {
+      propertyPath: propertyName,
+      propertyValue: propertyValue,
+    },
+  ];
+
+  // if user is marking readOnly as true and if the input type is not INPUT_CURRENCY_WIDGET or INPUT_PHONE_WIDGET,
+  // then we update the type to WDS_KEY_VALUE_WIDGET, else we update the type based on the input type
+  if (
+    !["WDS_CURRENCY_INPUT_WIDGET", "WDS_PHONE_INPUT_WIDGET"].includes(
+      props.type,
+    )
+  ) {
+    updates.push({
+      propertyPath: "type",
+      propertyValue: propertyValue
+        ? "WDS_KEY_VALUE_WIDGET"
+        : INPUT_TYPE_TO_WIDGET_TYPE_MAP[props.inputType as InputType],
+    });
+  }
+
+  return updates;
+}

app/client/src/widgets/wds/WDSBaseInputWidget/index.ts

@@ -1,5 +1,8 @@
 import { WDSBaseInputWidget } from "./widget";
 
 export { WDSBaseInputWidget };
+
+export * from "./types";
+export * from "./constants";
 export type { BaseInputWidgetProps } from "./widget/types";
 export type { BaseInputComponentProps } from "./component/types";

app/client/src/widgets/wds/WDSBaseInputWidget/types.ts

@@ -0,0 +1,3 @@
+import type { INPUT_TYPES } from "./constants";
+
+export type InputType = (typeof INPUT_TYPES)[keyof typeof INPUT_TYPES];

app/client/src/widgets/wds/WDSEmailInputWidget/widget/index.tsx

@@ -1,7 +1,7 @@
 import { WDSInputWidget } from "widgets/wds/WDSInputWidget";
 import { EmailInputIcon, EmailInputThumbnail } from "appsmith-icons";
 import { WIDGET_TAGS } from "constants/WidgetConstants";
-import { INPUT_TYPES } from "widgets/wds/WDSInputWidget/constants";
+import { INPUT_TYPES } from "widgets/wds/WDSBaseInputWidget";
 import type { WidgetBaseConfiguration } from "WidgetProvider/constants";
 
 class WDSEmailInputWidget extends WDSInputWidget {

app/client/src/widgets/wds/WDSInputWidget/component/index.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import { isNil } from "lodash";
 import { TextInput } from "@appsmith/wds";
 import { Icon, TextArea } from "@appsmith/wds";
+import { useDebouncedValue } from "@mantine/hooks";
+import { INPUT_TYPES } from "widgets/wds/WDSBaseInputWidget";
 
-import { INPUT_TYPES } from "../constants";
 import type { InputComponentProps } from "./types";
-import { useDebouncedValue } from "@mantine/hooks";
 
 const DEBOUNCE_TIME = 300;
 

app/client/src/widgets/wds/WDSInputWidget/component/types.ts

@@ -1,9 +1,7 @@
 import type { IconProps } from "@appsmith/wds";
-import type { BaseInputComponentProps } from "../../WDSBaseInputWidget";
-
-import type { INPUT_TYPES } from "../constants";
+import type { InputType } from "widgets/wds/WDSBaseInputWidget/types";
 
-export type InputType = (typeof INPUT_TYPES)[keyof typeof INPUT_TYPES];
+import type { BaseInputComponentProps } from "../../WDSBaseInputWidget";
 
 export interface InputComponentProps extends BaseInputComponentProps {
   inputType: InputType;

app/client/src/widgets/wds/WDSInputWidget/widget/helper.ts

@@ -8,11 +8,14 @@ import {
   INPUT_INVALID_TYPE_ERROR,
   INPUT_TEXT_MAX_CHAR_ERROR,
 } from "ee/constants/messages";
-import type { InputType } from "../component/types";
+import type { InputType } from "widgets/wds/WDSBaseInputWidget";
 import type { WidgetProps } from "widgets/BaseWidget";
 
 import type { InputWidgetProps, Validation } from "./types";
-import { INPUT_TYPE_TO_WIDGET_TYPE_MAP, INPUT_TYPES } from "../constants";
+import {
+  INPUT_TYPE_TO_WIDGET_TYPE_MAP,
+  INPUT_TYPES,
+} from "widgets/wds/WDSBaseInputWidget";
 import type { PropertyUpdates } from "WidgetProvider/constants";
 import { getDefaultISDCode } from "widgets/wds/WDSPhoneInputWidget/constants";
 import { getDefaultCurrency } from "widgets/wds/WDSCurrencyInputWidget/constants";

app/client/src/widgets/wds/WDSInputWidget/widget/index.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { isNumber, merge, toString } from "lodash";
 import * as config from "../config";
 import InputComponent from "../component";
-import { INPUT_TYPES } from "../constants";
 import type { InputWidgetProps } from "./types";
 import { mergeWidgetConfig } from "utils/helpers";
 import { parseText, validateInput } from "./helper";
@@ -14,6 +13,7 @@ import type { DerivedPropertiesMap } from "WidgetProvider/factory";
 import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
 import type { KeyDownEvent } from "widgets/wds/WDSBaseInputWidget/component/types";
 import type { WidgetBaseConfiguration } from "WidgetProvider/constants";
+import { INPUT_TYPES } from "widgets/wds/WDSBaseInputWidget/constants";
 
 class WDSInputWidget extends WDSBaseInputWidget<InputWidgetProps, WidgetState> {
   static type = "WDS_INPUT_WIDGET";

app/client/src/widgets/wds/WDSMultilineInputWidget/widget/index.tsx

@@ -1,8 +1,8 @@
 import { WIDGET_TAGS } from "constants/WidgetConstants";
 import { WDSInputWidget } from "widgets/wds/WDSInputWidget";
-import { MultilineInputIcon, MultilineInputThumbnail } from "appsmith-icons";
-import { INPUT_TYPES } from "widgets/wds/WDSInputWidget/constants";
 import type { WidgetBaseConfiguration } from "WidgetProvider/constants";
+import { INPUT_TYPES } from "widgets/wds/WDSBaseInputWidget/constants";
+import { MultilineInputIcon, MultilineInputThumbnail } from "appsmith-icons";
 
 class WDSMultilineInputWidget extends WDSInputWidget {
   static type = "WDS_MULTILINE_INPUT_WIDGET";

app/client/src/widgets/wds/WDSNumberInputWidget/widget/index.tsx

@@ -1,8 +1,8 @@
 import { WIDGET_TAGS } from "constants/WidgetConstants";
 import { WDSInputWidget } from "widgets/wds/WDSInputWidget";
 import { NumberInputIcon, NumberInputThumbnail } from "appsmith-icons";
-import { INPUT_TYPES } from "widgets/wds/WDSInputWidget/constants";
 import type { WidgetBaseConfiguration } from "WidgetProvider/constants";
+import { INPUT_TYPES } from "widgets/wds/WDSBaseInputWidget/constants";
 
 class WDSNumberInputWidget extends WDSInputWidget {
   static type = "WDS_NUMBER_INPUT_WIDGET";

app/client/src/widgets/wds/WDSParagraphWidget/config/defaultsConfig.ts

@@ -11,6 +11,7 @@ export const defaultsConfig = {
   fontSize: "body",
   textAlign: "left",
   textColor: "neutral",
+  fontStyle: "",
   widgetName: "Paragraph",
   shouldTruncate: false,
   version: 1,

app/client/src/widgets/wds/WDSParagraphWidget/config/propertyPaneConfig/styleConfig.ts

@@ -1,6 +1,8 @@
 import { TYPOGRAPHY_VARIANTS } from "@appsmith/wds-theming";
 import { ValidationTypes } from "constants/WidgetValidation";
 
+import { fontSizeUpdateHook } from "../../helpers";
+
 export const propertyPaneStyleConfig = [
   {
     sectionName: "General",
@@ -32,7 +34,7 @@ export const propertyPaneStyleConfig = [
         isJSConvertible: true,
         isBindProperty: true,
         isTriggerProperty: false,
-        isReusable: true,
+        updateHook: fontSizeUpdateHook,
         validation: {
           type: ValidationTypes.TEXT,
           params: {

app/client/src/widgets/wds/WDSParagraphWidget/constants.ts

@@ -0,0 +1,6 @@
+export const FONT_SIZE_TO_WIDGET_TYPE_MAP = {
+  body: "WDS_PARAGRAPH_WIDGET",
+  subtitle: "WDS_HEADING_WIDGET",
+  title: "WDS_HEADING_WIDGET",
+  heading: "WDS_HEADING_WIDGET",
+};

app/client/src/widgets/wds/WDSParagraphWidget/helpers.ts

@@ -0,0 +1,27 @@
+import type { PropertyUpdates } from "WidgetProvider/constants";
+import type { WidgetProps } from "widgets/BaseWidget";
+
+import { FONT_SIZE_TO_WIDGET_TYPE_MAP } from "./constants";
+
+export function fontSizeUpdateHook(
+  props: WidgetProps,
+  propertyName: string,
+  propertyValue: string,
+) {
+  const updates: PropertyUpdates[] = [
+    {
+      propertyPath: propertyName,
+      propertyValue: propertyValue,
+    },
+  ];
+
+  updates.push({
+    propertyPath: "type",
+    propertyValue:
+      FONT_SIZE_TO_WIDGET_TYPE_MAP[
+        propertyValue as keyof typeof FONT_SIZE_TO_WIDGET_TYPE_MAP
+      ],
+  });
+
+  return updates;
+}

app/client/src/widgets/wds/WDSPasswordInputWidget/widget/index.tsx

@@ -1,8 +1,8 @@
 import { WIDGET_TAGS } from "constants/WidgetConstants";
 import { WDSInputWidget } from "widgets/wds/WDSInputWidget";
-import { PasswordInputIcon, PasswordInputThumbnail } from "appsmith-icons";
-import { INPUT_TYPES } from "widgets/wds/WDSInputWidget/constants";
+import { INPUT_TYPES } from "widgets/wds/WDSBaseInputWidget/constants";
 import type { WidgetBaseConfiguration } from "WidgetProvider/constants";
+import { PasswordInputIcon, PasswordInputThumbnail } from "appsmith-icons";
 
 class WDSPasswordInputWidget extends WDSInputWidget {
   static type = "WDS_PASSWORD_INPUT_WIDGET";

app/client/src/widgets/wds/WDSPhoneInputWidget/index.ts

@@ -1 +1,2 @@
+export * from "./constants";
 export { WDSPhoneInputWidget } from "./widget";