@pega/dx-component-builder-sdk 25.1.16 → 26.1.11

package/src/tasks/create/templates/SDK-React/field/Date/index.tsx.mustache

@@ -1,7 +1,5 @@
 import { useEffect, useState } from 'react';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs, { Dayjs } from 'dayjs';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
@@ -9,6 +7,8 @@ import { format } from '@pega/react-sdk-components/lib/components/helpers/format
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -19,6 +19,12 @@ function getFormattedDate(date) {
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -29,14 +35,22 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const { getPConnect, label, required, disabled, value, validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
+  const { getPConnect, label, required, disabled, value, validatemessage, readOnly, testId, helperText, displayMode, hideLabel, showFieldMessage, messageConfig = {} } = props;
 
   const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(value) : null);
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
+
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   // Start with default dateFormatInfo
   const dateFormatInfo = dateFormatInfoDefault;
@@ -54,7 +68,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     const formattedDate = format(props.value, 'date', {
       format: dateFormatInfo.dateFormatString
     });
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -69,11 +83,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = date => {
     if (date && date.isValid()) {
@@ -84,7 +94,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DatePicker
           label={label}
           disabled={disabled}
@@ -100,13 +109,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
               error: status === 'error',
               helperText: helperTextToDisplay,
               size: 'small',
-              InputProps: { ...testProp }
+              InputProps: { ...testProps },
+              sx: getFieldSx(status)
             }
           }}
 <%={{ }}=%>     {{! revert delimiters for mustache }}
           onChange={handleChange}
         />
-      </LocalizationProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/field/DateTime/demo.stories.tsx.mustache

@@ -1,4 +1,8 @@
 import { useState } from 'react';
+
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -40,7 +44,11 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
     }
   };
 
-  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
+   return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
+    </LocalizationProvider>
+  );
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {

package/src/tasks/create/templates/SDK-React/field/DateTime/index.tsx.mustache

@@ -1,7 +1,5 @@
 import { useEffect, useState } from 'react';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs, { Dayjs } from 'dayjs';
 import DateFormatter from '@pega/react-sdk-components/lib/components/helpers/formatters/Date';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
@@ -9,11 +7,19 @@ import { format } from '@pega/react-sdk-components/lib/components/helpers/format
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -24,7 +30,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
+  const { getPConnect, label, required, disabled, value = '', validatemessage, readOnly, testId, helperText, displayMode, hideLabel, showFieldMessage, messageConfig = {} } = props;
 
   const environmentInfo = PCore.getEnvironmentInfo();
   const timezone = environmentInfo && environmentInfo.getTimeZone();
@@ -34,7 +40,15 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
+
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   // Start with default dateFormatInfo
   const dateFormatInfo = dateFormatInfoDefault;
@@ -52,7 +66,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     const formattedDateTime = format(props.value, 'datetime', {
       format: `${dateFormatInfo.dateFormatString} hh:mm a`
     });
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -67,14 +81,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     return <TextInput {...props} value={formattedDateTime} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = date => {
-    const timeZoneDateTime = dayjs.tz(date.format('YYYY-MM-DDTHH:mm:ss'), timezone);
+    const timeZoneDateTime = (dayjs as any).tz(date.format('YYYY-MM-DDTHH:mm:ss'), timezone);
     const changeValue = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';
     setDateValue(timeZoneDateTime);
     handleEvent(actions, 'changeNblur', propName, changeValue);
@@ -87,7 +97,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DateTimePicker
           // fullWidth
           // autoOk
@@ -109,12 +118,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
               error: status === 'error',
               helperText: helperTextToDisplay,
               size: 'small',
-              InputProps: { ...testProp }
+              InputProps: { ...testProps },
+              sx: getFieldSx(status)
             }
           }}
 <%={{ }}=%>     {{! revert delimiters for mustache }}
         />
-      </LocalizationProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/field/Decimal/index.tsx.mustache

@@ -6,6 +6,8 @@ import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -19,6 +21,12 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   decimalPrecision?: number;
   showGroupSeparators?: boolean;
   formatter?: string;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -35,7 +43,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     disabled,
     value = '',
     validatemessage,
-    status,
     /* onChange, onBlur, */
     readOnly,
     helperText,
@@ -46,7 +53,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     showGroupSeparators,
     testId,
     placeholder,
-    formatter
+    formatter,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const [values, setValues] = useState(value.toString());
@@ -54,7 +63,15 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
+
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   const theSymbols = getCurrencyCharacters(currencyISOCode);
   const theCurrDec = theSymbols.theDecimalIndicator;
@@ -81,16 +98,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
-  const testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function decimalOnBlur() {
     handleEvent(actions, 'changeNblur', propName, values);
@@ -125,7 +140,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         decimalScale={readOnly && formatter === 'Currency' ? undefined : decimalPrecision}
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
-        InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+        slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
+        sx={getFieldSx(status)}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
         customInput={TextField}
       />

package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/index.tsx.mustache

@@ -6,6 +6,8 @@ import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -17,6 +19,12 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
   currencyISOCode?: string;
   allowDecimals: boolean;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -33,7 +41,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     disabled,
     value = '',
     validatemessage,
-    status,
     /* onChange, onBlur, */
     readOnly,
     testId,
@@ -42,18 +49,26 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     hideLabel,
     currencyISOCode = 'USD',
     placeholder,
-    allowDecimals
+    allowDecimals,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
   const [values, setValues] = useState(value.toString());
 
-  const testProp = {
-    'data-test-id': testId
-  };
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
+
+  const testProps: any = { 'data-test-id': testId };
 
   useEffect(() => {
     setValues(value.toString());
@@ -78,7 +93,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   currencyProp = { prefix: theCurrSym, decimalSeparator: theCurrDec, thousandSeparator: theCurrSep };
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -115,7 +130,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         fixedDecimalScale={allowDecimals}
 		    {{! pick new delimiters for mustache }}
 	      {{=<% %>=}}
-        InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+        slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
+        sx={getFieldSx(status)}
 		    <%={{ }}=%>     {{! revert delimiters for mustache }}
         customInput={TextField}
       />

package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/index.tsx.mustache

@@ -6,6 +6,8 @@ import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -18,6 +20,12 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   currencyISOCode?: string;
   showGroupSeparators?: string;
   decimalPrecision?: number;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
@@ -32,7 +40,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     disabled,
     value = '',
     validatemessage,
-    status,
     // onChange,
     // onBlur,
     readOnly,
@@ -43,7 +50,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     hideLabel,
     placeholder,
     showGroupSeparators,
-    decimalPrecision
+    decimalPrecision,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const [values, setValues] = useState(value.toString());
@@ -51,7 +60,15 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
+
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
@@ -67,18 +84,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const theSymbols = getCurrencyCharacters(currencyISOCode);
   const theCurrDec = theSymbols.theDecimalIndicator;
@@ -116,7 +129,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         suffix='%'
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
-        InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+        slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
+        sx={getFieldSx(status)}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
         customInput={TextField}
       />

package/src/tasks/create/templates/SDK-React/field/Integer/index.tsx.mustache

@@ -4,11 +4,19 @@ import { TextField } from '@mui/material';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -26,20 +34,29 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     disabled,
     value = '',
     validatemessage,
-    status,
     readOnly,
     testId,
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
 
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
+
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   const [inputValue, setInputValue] = useState('');
 
@@ -48,22 +65,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
-  }
-
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (readOnly) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function intOnChange(event) {
     // console.log(`Integer intOnChange inValue: ${event.target.value}`);
@@ -104,7 +113,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         type='text'
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
-        inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
+        slotProps={{
+          htmlInput: { inputMode: 'numeric', pattern: '[0-9]*', ...testProps }
+        }}
+        sx={getFieldSx(status)}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
       />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>