@pega/dx-component-builder-sdk 0.25.5 → 0.25.7

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.css

@@ -7,12 +7,10 @@
   font-weight: bold;
   line-height: calc(0.5rem * 2.5);
   height: calc(0.5rem * 2.5);
-  padding: 0 0.5rem;
   text-transform: uppercase;
 }
 
 .psdk-case-summary-fields {
   padding: calc(2 * 0.5rem);
-  display: grid;
   grid-row-gap: calc(2 * 0.5rem);
 }

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import isDeepEqual from 'fast-deep-equal/react';
-import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField';
+import Grid2 from '@mui/material/Grid2';
+import TextField from '@mui/material/TextField';
 
 import { getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
@@ -34,7 +34,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
     if (field.config.value === null || field.config.value === '') {
       // Special handling for missing value
-      // eslint-disable-next-line sonarjs/no-small-switch
+
       switch (fieldTypeLower) {
         case 'caseoperator':
           return <Operator {...field.config} />;
@@ -43,11 +43,14 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         default:
           return (
             <TextField
+              variant='standard'
               value='---'
               label={field.config.label}
-              InputProps={{
-                readOnly: true,
-                disableUnderline: true
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true
+                }
               }}
             />
           );
@@ -61,11 +64,14 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'dropdown':
         return (
           <TextField
+            variant='standard'
             value={field.config.value}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -77,11 +83,14 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
         return (
           <TextField
+            variant='standard'
             value={fieldValue}
             label={fieldLabel}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -90,12 +99,15 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'status':
         return (
           <TextField
+            variant='standard'
             className='psdk-csf-status-style'
             value={field.config.value}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -105,13 +117,14 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         return (
           <a href={`tel:${displayPhone}`}>
             <TextField
+              variant='standard'
               value={field.config.value}
               label={field.config.label}
-              InputProps={{
-                readOnly: true,
-                inputProps: {
-                  style: { cursor: 'pointer' },
-                  disableUnderline: true
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true,
+                  inputProps: { style: { cursor: 'pointer' } }
                 }
               }}
             />
@@ -124,12 +137,15 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         return (
           <a href={`mailto:${displayEmail}`}>
             <TextField
+              variant='standard'
               value={field.config.value}
               label={field.config.label}
-              InputProps={{
-                readOnly: true,
-                disableUnderline: true,
-                inputProps: { style: { cursor: 'pointer' } }
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true,
+                  inputProps: { style: { cursor: 'pointer' } }
+                }
               }}
             />
           </a>
@@ -145,13 +161,16 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
         return (
           <TextField
+            variant='standard'
             value={format(field.config.value, field.type, {
               format: theFormat
             })}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -161,11 +180,14 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         const theCurrencyOptions = getCurrencyOptions(field.config?.currencyISOCode);
         return (
           <TextField
+            variant='standard'
             value={format(field.config.value, field.type, theCurrencyOptions)}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -175,11 +197,14 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'userreference':
         return (
           <TextField
+            variant='standard'
             value={format(field.config.value, field.type)}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -198,13 +223,13 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
   // Whenever theFieldsToRender changes, update theFieldsAsGridItems that's used during render
   useEffect(() => {
-    const arGridItems = theFieldsToRender.map((field: any) => {
+    const arGridItems = theFieldsToRender?.map((field: any) => {
       // display the field when either visibility property doesn't exist or is true(if exists)
       if (field.config.visibility === undefined || field.config.visibility === true) {
         return (
-          <Grid item xs={6} key={field.config.label}>
+          <Grid2 size={{ xs: 6 }} key={field.config.label}>
             {getFieldValue(field)}
-          </Grid>
+          </Grid2>
         );
       }
 
@@ -238,8 +263,8 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
   }
 
   return (
-    <Grid container className='psdk-case-summary-fields'>
+    <Grid2 container className='psdk-case-summary-fields'>
       {theFieldsAsGridItems}
-    </Grid>
+    </Grid2>
   );
 }

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/DetailsFields/DetailsFields.tsx

@@ -1,8 +1,7 @@
-/* eslint-disable react/no-array-index-key */
 import React, { createElement, isValidElement } from 'react';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import Grid2 from '@mui/material/Grid2';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
@@ -48,7 +47,7 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const { label } = thePConn.getConfigProps();
     const configObj = thePConn?.getReferencedView();
     configObj.config.readOnly = true;
-    configObj.config.displayMode = 'LABELS_LEFT';
+    configObj.config.displayMode = 'DISPLAY_ONLY';
     const propToUse = { ...thePConn.getInheritedProps() };
     configObj.config.label = theCompType === 'reference' ? propToUse?.label : label;
     fieldComponents.push({
@@ -62,11 +61,11 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const dispValue = field.label;
 
     return (
-      <Grid item xs={6} key={keyVal}>
+      <Grid2 size={{ xs: 6 }} key={keyVal}>
         <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
           {dispValue}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
@@ -74,7 +73,6 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const { type, value } = inField;
     let formattedVal = value;
 
-    // eslint-disable-next-line sonarjs/no-small-switch
     switch (type) {
       case 'date':
         formattedVal = format(value, type);
@@ -97,21 +95,21 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const formattedValue = formatItemValue(field);
 
     return (
-      <Grid item xs={6} key={keyVal}>
+      <Grid2 size={{ xs: 6 }} key={keyVal}>
         <Typography variant='body2' component='span' className={classes.fieldValue}>
           {formattedValue}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
   function getGridItem(field: any, keyVal: string) {
     return (
-      <Grid item xs={12} key={keyVal}>
+      <Grid2 size={{ xs: 12 }} key={keyVal}>
         <Typography variant='body2' component='span' className={classes.fieldValue}>
           {field?.value}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
@@ -122,16 +120,16 @@ export default function DetailsFields(props: DetailsFieldsProps) {
       }
       if (isValidElement(field?.value)) {
         return (
-          <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
+          <Grid2 container spacing={1} style={{ padding: '4px 0px' }} key={index}>
             {getGridItem(field, `${index}-item`)}
-          </Grid>
+          </Grid2>
         );
       }
       return (
-        <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
+        <Grid2 container spacing={1} style={{ padding: '4px 0px' }} key={index}>
           {getGridItemLabel(field, `${index}-label`)}
           {getGridItemValue(field, `${index}-value`)}
-        </Grid>
+        </Grid2>
       );
     });
     return gridItems;

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -1,8 +1,8 @@
-import { PropsWithChildren, useState } from 'react';
-import Grid from '@material-ui/core/Grid';
-import { makeStyles } from '@material-ui/core/styles';
-import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import { type PropsWithChildren, useState } from 'react';
+import Grid2 from '@mui/material/Grid2';
+import makeStyles from '@mui/styles/makeStyles';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
 // FieldGroupProps is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps
@@ -45,9 +45,9 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
   const [collapsed, setCollapsed] = useState(false);
 
   const descAndChildren = (
-    <Grid container>
+    <Grid2 container>
       <div className={classes.fullWidth}>{children}</div>
-    </Grid>
+    </Grid2>
   );
 
   const headerClickHandler = () => {
@@ -55,8 +55,8 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
   };
 
   return (
-    <Grid container spacing={4} justifyContent='space-between'>
-      <Grid item style={{ width: '100%' }}>
+    <Grid2 container spacing={4} justifyContent='space-between'>
+      <Grid2 style={{ width: '100%' }}>
         {name && (
           <div className={classes.fieldMargin}>
             {collapsible ? (
@@ -70,11 +70,10 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
           </div>
         )}
         {instructions && instructions !== 'none' && (
-          // eslint-disable-next-line react/no-danger
           <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
         )}
         {!collapsed && descAndChildren}
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/FieldGroupList/FieldGroupList.tsx

@@ -1,6 +1,6 @@
-import Grid from '@material-ui/core/Grid';
-import Divider from '@material-ui/core/Divider';
-import Link from '@material-ui/core/Link';
+import Grid2 from '@mui/material/Grid2';
+import Divider from '@mui/material/Divider';
+import Link from '@mui/material/Link';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
@@ -20,11 +20,11 @@ export default function FieldGroupList(props: FieldGroupListProps) {
   }
 
   return (
-    <Grid container spacing={4} justifyContent='space-between'>
-      <Grid item style={{ width: '100%' }}>
-        <Grid container spacing={1}>
+    <Grid2 container spacing={4} justifyContent='space-between'>
+      <Grid2 style={{ width: '100%' }}>
+        <Grid2 container spacing={1}>
           {props.items.map(item => (
-            <Grid item style={{ width: '100%' }}>
+            <Grid2 style={{ width: '100%' }}>
               <b>{item.name}</b>
               {props.onDelete && (
                 <button
@@ -44,15 +44,15 @@ export default function FieldGroupList(props: FieldGroupListProps) {
               <br />
               {props.onAdd && <Divider />}
               <br />
-            </Grid>
+            </Grid2>
           ))}
           {props.onAdd && (
-            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }}>
+            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }} underline='hover'>
               +Add
             </Link>
           )}
-        </Grid>
-      </Grid>
-    </Grid>
+        </Grid2>
+      </Grid2>
+    </Grid2>
   );
 }

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx

@@ -1,6 +1,6 @@
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import Grid2 from '@mui/material/Grid2';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
 // FieldValueList is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps
@@ -51,11 +51,11 @@ export default function FieldValueList(props: FieldValueListProps) {
 
   function getGridItemLabel() {
     return (
-      <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
+      <Grid2 size={{ xs: variant === 'stacked' ? 12 : 4 }} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
         <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
           {name}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
@@ -63,23 +63,22 @@ export default function FieldValueList(props: FieldValueListProps) {
     const formattedValue = formatItemValue(value);
 
     return (
-      <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
+      <Grid2 size={{ xs: variant === 'stacked' || !name ? 12 : 8 }} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
         {isHtml ? (
-          // eslint-disable-next-line react/no-danger
           <div dangerouslySetInnerHTML={{ __html: formattedValue }} />
         ) : (
           <Typography variant={variant === 'stacked' ? 'h6' : 'body2'} component='span' className={classes.fieldValue}>
             {formattedValue}
           </Typography>
         )}
-      </Grid>
+      </Grid2>
     );
   }
 
   return (
-    <Grid container spacing={4} justifyContent='space-between'>
-      {getGridItemLabel()}
+    <Grid2 container spacing={4} justifyContent='space-between'>
+      {name ? getGridItemLabel() : null}
       {getGridItemValue()}
-    </Grid>
+    </Grid2>
   );
 }

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/Operator/Operator.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import TextField from '@material-ui/core/TextField';
-import Popover from '@material-ui/core/Popover';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@mui/material/TextField';
+import Popover from '@mui/material/Popover';
+import Grid2 from '@mui/material/Grid2';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Operator is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps
@@ -112,7 +112,6 @@ export default function Operator(props: OperatorProps) {
           }
         ];
       } else {
-        // eslint-disable-next-line no-console
         console.log(
           `Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
         );
@@ -162,25 +161,25 @@ export default function Operator(props: OperatorProps) {
 
     // There are fields, so build the grid.
     return (
-      <Grid container className={classes.popover} spacing={1}>
-        <Grid item xs={12}>
+      <Grid2 container className={classes.popover} spacing={1}>
+        <Grid2 size={{ xs: 12 }}>
           <Typography variant='h6'>{caseOpName}</Typography>
-        </Grid>
+        </Grid2>
         {popoverFields.map(field => {
           return (
             <React.Fragment key={field.id}>
-              <Grid container item xs={12} spacing={1}>
-                <Grid item xs={6}>
+              <Grid2 container size={{ xs: 12 }} spacing={1}>
+                <Grid2 size={{ xs: 6 }}>
                   <Typography variant='caption'>{field.name}</Typography>
-                </Grid>
-                <Grid item xs={6}>
+                </Grid2>
+                <Grid2 size={{ xs: 6 }}>
                   <Typography variant='subtitle2'>{field.value}</Typography>
-                </Grid>
-              </Grid>
+                </Grid2>
+              </Grid2>
             </React.Fragment>
           );
         })}
-      </Grid>
+      </Grid2>
     );
   }
 
@@ -189,18 +188,20 @@ export default function Operator(props: OperatorProps) {
   return (
     <>
       <TextField
+        variant='standard'
         defaultValue={caseOpName}
         label={caseOpLabel}
         onClick={showOperatorDetails}
-        InputProps={{
-          readOnly: true,
-          disableUnderline: true,
-          inputProps: { style: { cursor: 'pointer' } }
+        slotProps={{
+          input: {
+            readOnly: true,
+            disableUnderline: true,
+            inputProps: { style: { cursor: 'pointer' } }
+          }
         }}
       />
       <br />
       {Utils.generateDateTime(caseTime, 'DateTime-Since')}
-
       <Popover
         id={popoverId}
         open={popoverOpen}
@@ -208,7 +209,9 @@ export default function Operator(props: OperatorProps) {
         onClose={handlePopoverClose}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
         transformOrigin={{ vertical: 'top', horizontal: 'center' }}
-        PaperProps={{ style: { maxWidth: '45ch' } }}
+        slotProps={{
+          paper: { style: { maxWidth: '45ch' } }
+        }}
       >
         {getPopoverGrid()}
       </Popover>

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/Pulse/Pulse.tsx

@@ -1,6 +1,6 @@
-import { PropsWithChildren } from 'react';
-import { Card, CardContent, CardHeader, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import type { PropsWithChildren } from 'react';
+import { Card, CardContent, CardHeader, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 // Pulse is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/RichTextEditor/RichTextEditor.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
-import { FormControl, FormHelperText, InputLabel, makeStyles } from '@material-ui/core';
-
+import { FormControl, FormHelperText, InputLabel, useTheme } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { useAfterInitialEffect, useConsolidatedRef, useUID } from '@pega/react-sdk-components/lib/hooks';
 
 const useStyles = makeStyles(theme => ({
@@ -30,6 +30,7 @@ interface RichTextEditorProps {
 }
 
 const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorProps, ref) {
+  const theme = useTheme();
   const classes = useStyles();
   const uid = useUID();
   const { id = uid, defaultValue, label, labelHidden, info, testId, placeholder, disabled, required, readOnly, error, onBlur, onChange } = props;
@@ -73,7 +74,7 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
 
   if (readOnly) {
     const value = defaultValue || '--';
-    // eslint-disable-next-line react/no-danger
+
     richTextComponent = <div key={id} id={id} className='readonly-richtext-editor' dangerouslySetInnerHTML={{ __html: value }} />;
   } else {
     richTextComponent = (
@@ -86,6 +87,34 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
         initialValue={defaultValue}
         disabled={disabled}
         init={{
+          skin: theme.palette.mode === 'dark' ? 'oxide-dark' : 'oxide',
+          // ...other TinyMCE config...
+          content_style: `
+            body {
+              font-family: ${theme.typography.fontFamily};
+              font-size: ${theme.typography.fontSize}px;
+              color: ${theme.palette.text.primary};
+              background: ${theme.palette.background.paper};
+            }
+            a { color: ${theme.palette.primary.main}; }
+            h1, h2, h3, h4, h5, h6 { color: ${theme.palette.text.primary}; font-family: ${theme.typography.fontFamily}; }
+            blockquote { color: ${theme.palette.text.secondary}; border-left: 4px solid ${theme.palette.primary.light}; padding-left: 8px; }
+            ul, ol { color: ${theme.palette.text.primary}; }
+            input, textarea, select {
+              background: ${theme.palette.background.paper};
+              color: ${theme.palette.text.primary};
+              border: 1px solid ${theme.palette.divider};
+              border-radius: 4px;
+              padding: 6px 10px;
+              font-size: 1em;
+              font-family: inherit;
+            }
+            .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+              color: ${theme.palette.text.secondary};
+              opacity: 0.7;
+            }
+            /* Add more styles as needed */
+          `,
           placeholder,
           menubar: false,
           statusbar: false,
@@ -94,7 +123,7 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
           autoresize_bottom_margin: 0,
           toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
           toolbar_location: 'bottom',
-          content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
+          // content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
           branding: false,
           paste_data_images: true,
           file_picker_types: 'image',
@@ -107,7 +136,7 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
   }
 
   return (
-    <FormControl data-test-id={testId} error={error} required={required}>
+    <FormControl variant='standard' data-test-id={testId} error={error} required={required}>
       {!labelHidden && (
         <InputLabel id='demo-simple-select-error-label' className={classes.fieldLabel}>
           {label}