Tshepo/f/drawer

shesha-reactjs/src/designer-components/drawer/drawer.tsx

@@ -27,6 +27,7 @@ interface IShaDrawer {
   placement?: 'top' | 'right' | 'bottom' | 'left';
   width?: string | number;
   readOnly?: boolean;
+  background?: CSSProperties;
 }
 
 interface IShaDrawerState {
@@ -54,6 +55,7 @@ const ShaDrawer: FC<IShaDrawer> = (props) => {
     headerStyle,
     footerStyle,
     showFooter,
+    background,
   } = props;
   const allData = useAvailableConstantsData();
   const [state, setState] = useState<IShaDrawerState>();
@@ -138,6 +140,7 @@ const ShaDrawer: FC<IShaDrawer> = (props) => {
       </Fragment>
     );
   }
+
   return (
     <Drawer
       open={state?.open}
@@ -147,7 +150,8 @@ const ShaDrawer: FC<IShaDrawer> = (props) => {
       styles={{
         header: { display: showHeader ? 'block' : 'none', ...headerStyle },
         footer: { display: showFooter ? 'block' : 'none', ...footerStyle },
-        body: style,
+        body: background,
+        content: style,
       }}
       title={label}
       size="large"

shesha-reactjs/src/designer-components/drawer/index.tsx

@@ -114,7 +114,6 @@ const DrawerComponent: IToolboxComponent<IDrawerProps> = {
       ...shadowStyles,
       ...stylingBoxAsCSS,
       ...borderStyles,
-      ...backgroundStyles,
       ...jsStyle,
     });
 
@@ -132,6 +131,7 @@ const DrawerComponent: IToolboxComponent<IDrawerProps> = {
 
     return (
       <ShaDrawer
+        background={backgroundStyles}
         style={additionalStyles}
         headerStyle={additionalHeaderStyles}
         footerStyle={additionalFooterStyles}