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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyBoolean/index.tsx

@@ -6,6 +6,8 @@ import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { insertInstruction, deleteInstruction, updateNewInstuctions } from '@pega/react-sdk-components/lib/components/helpers/instructions-utils';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFormControlSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMyBooleanWrapper from './styles';
 
@@ -30,6 +32,11 @@ interface PegaDxilMyBooleanProps extends Omit<PConnFieldProps, 'value'> {
   showImageDescription: string;
   renderMode: string;
   image: string;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
 }
 
 const useStyles = makeStyles(() => ({
@@ -61,7 +68,6 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
     testId,
     required,
     disabled,
-    status,
     helperText,
     validatemessage,
     displayMode,
@@ -82,18 +88,28 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
     imageSize,
     showImageDescription,
     renderMode,
-    image
+    image,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
     
   const readOnlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly;
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [theSelectedButton, setSelectedButton] = useState(value);
   const classes = useStyles();
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
   const thePConn = getPConnect();
   const actionsApi = thePConn.getActionsApi();
   const propName = (thePConn.getStateProps() as any).value;
 
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
+
   const [checked, setChecked] = useState<any>(false);
   useEffect(() => {
     // This update theSelectedButton which will update the UI to show the selected button correctly
@@ -114,11 +130,11 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
+    return <FieldValueList name={caption} value={value ? trueLabel : falseLabel} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />;
+    return <FieldValueList name={caption} value={value ? trueLabel : falseLabel} variant='stacked' />;
   }
 
   const handleChange = event => {
@@ -255,7 +271,7 @@ const handleCheckboxChange = (event, item) => {
 
   return (
     <StyledPegaDxilMyBooleanWrapper>
-      <FormControl variant='standard' required={required} error={status === 'error'}>
+      <FormControl variant='standard' required={required} error={status === 'error'} sx={getFormControlSx(status)}>
         {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}
         <FormGroup>{theCheckbox}</FormGroup>
         <FormHelperText>{helperTextToDisplay}</FormHelperText>

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyCurrency/index.tsx

@@ -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 StyledPegaDxilMyCurrencyWrapper from './styles';
 
@@ -17,6 +19,12 @@ interface PegaDxilMyCurrencyProps 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 PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     /* onChange, onBlur, */
     readOnly,
     testId,
@@ -42,18 +49,26 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
     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 PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
   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') {
@@ -113,7 +128,8 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
         {...currencyProp}
         decimalScale={allowDecimals !== false ? 2 : 0}
         fixedDecimalScale={allowDecimals}
-        InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+        slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
+        sx={getFieldSx(status)}
         customInput={TextField}
       />
     </StyledPegaDxilMyCurrencyWrapper>

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDate/demo.stories.tsx

@@ -1,5 +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 PegaDxilMyDate from './index';
@@ -41,7 +44,11 @@ export const BasePegaDxilMyDate: Story = args => {
     }
   };
 
-  return <PegaDxilMyDate {...props} {...args} />;
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <PegaDxilMyDate {...props} {...args} />
+    </LocalizationProvider>
+  );
 };
 
 BasePegaDxilMyDate.args = {

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDate/index.tsx

@@ -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 StyledPegaDxilMyDateWrapper from './styles';
 
@@ -19,6 +19,12 @@ function getFormattedDate(date) {
 
 interface PegaDxilMyDateProps 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 PegaDxilMyDate(props: PegaDxilMyDateProps) {
   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 PegaDxilMyDate(props: PegaDxilMyDateProps) {
     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 PegaDxilMyDate(props: PegaDxilMyDateProps) {
     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 PegaDxilMyDate(props: PegaDxilMyDateProps) {
 
   return (
     <StyledPegaDxilMyDateWrapper>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DatePicker
           label={label}
           disabled={disabled}
@@ -98,12 +107,12 @@ export default function PegaDxilMyDate(props: PegaDxilMyDateProps) {
               error: status === 'error',
               helperText: helperTextToDisplay,
               size: 'small',
-              InputProps: { ...testProp }
+              InputProps: { ...testProps },
+              sx: getFieldSx(status)
             }
           }}
           onChange={handleChange}
         />
-      </LocalizationProvider>
     </StyledPegaDxilMyDateWrapper>
   );
 }

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDateTime/demo.stories.tsx

@@ -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 PegaDxilMyDateTime from './index';
@@ -40,7 +44,11 @@ export const BasePegaDxilMyDateTime: Story = args => {
     }
   };
 
-  return <PegaDxilMyDateTime {...props} {...args} />;
+   return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <PegaDxilMyDateTime {...props} {...args} />
+    </LocalizationProvider>
+  );
 };
 
 BasePegaDxilMyDateTime.args = {

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDateTime/index.tsx

@@ -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 StyledPegaDxilMyDateTimeWrapper from './styles';
 
 interface PegaDxilMyDateTimeProps 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 PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
   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 PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
   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 PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
     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 PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
     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 PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
 
   return (
     <StyledPegaDxilMyDateTimeWrapper>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DateTimePicker
           // fullWidth
           // autoOk
@@ -107,11 +116,11 @@ export default function PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
               error: status === 'error',
               helperText: helperTextToDisplay,
               size: 'small',
-              InputProps: { ...testProp }
+              InputProps: { ...testProps },
+              sx: getFieldSx(status)
             }
           }}
         />
-      </LocalizationProvider>
     </StyledPegaDxilMyDateTimeWrapper>
   );
 }

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDecimal/index.tsx

@@ -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 StyledPegaDxilMyDecimalWrapper from './styles';
 
@@ -19,6 +21,12 @@ interface PegaDxilMyDecimalProps 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 PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     /* onChange, onBlur, */
     readOnly,
     helperText,
@@ -46,7 +53,9 @@ export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
     showGroupSeparators,
     testId,
     placeholder,
-    formatter
+    formatter,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const [values, setValues] = useState(value.toString());
@@ -54,7 +63,15 @@ export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
   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 PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
   }
 
   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);
@@ -123,7 +138,8 @@ export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
         decimalSeparator={theCurrDec}
         thousandSeparator={showGroupSeparators ? theCurrSep : ''}
         decimalScale={readOnly && formatter === 'Currency' ? undefined : decimalPrecision}
-        InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+        slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
+        sx={getFieldSx(status)}
         customInput={TextField}
       />
     </StyledPegaDxilMyDecimalWrapper>

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyEmail/index.tsx

@@ -5,11 +5,19 @@ import MailOutlineIcon from '@mui/icons-material/MailOutline';
 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 StyledPegaDxilMyEmailWrapper from './styles';
 
 interface PegaDxilMyEmailProps 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
@@ -27,20 +35,28 @@ export default function PegaDxilMyEmail(props: PegaDxilMyEmailProps) {
     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('');
 
@@ -49,22 +65,14 @@ export default function PegaDxilMyEmail(props: PegaDxilMyEmailProps) {
   }, [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 handleChange(event) {
     // update internal value
@@ -91,14 +99,17 @@ export default function PegaDxilMyEmail(props: PegaDxilMyEmailProps) {
         label={label}
         value={inputValue}
         type='email'
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position='start'>
-              <MailOutlineIcon />
-            </InputAdornment>
-          ),
-          inputProps: { ...testProp }
+        slotProps={{
+          input: {
+            startAdornment: (
+              <InputAdornment position='start'>
+                <MailOutlineIcon />
+              </InputAdornment>
+            ),
+            inputProps: { ...testProps }
+          }
         }}
+        sx={getFieldSx(status)}
       />
     </StyledPegaDxilMyEmailWrapper>
   );

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyIconButtonURL/index.tsx

@@ -99,7 +99,7 @@ export default function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlPr
           console.log(error);
         });
     }
-  }, [PConnect, countryCode, showTable]);
+  }, [countryCode, showTable]);
 
   // when DISPLAY_ONLY, in this example we will just show the URL.
   if (displayMode === 'DISPLAY_ONLY') {
@@ -116,7 +116,7 @@ export default function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlPr
     <StyledPegaDxilMyIconButtonUrlWrapper>
       <div style={{ display: 'flex', alignItems: 'center' }} data-testid={testId}>
         <ArrowForwardIcon />
-        <TextContent displayAs='body' content={localLabel} />
+        <TextContent displayAs='Paragraph' content={localLabel} />
         <Tooltip title={PConnect.getLocalizedValue('Click to show/hide state list', '', '')}>
           <IconButton onClick={showHideTable} style={{ padding: '0 0.25rem' }}>
             <FormatListNumberedIcon />