From 01d95ad276112d1b5fe9e68d413d394a0531c862 Mon Sep 17 00:00:00 2001
From: Benjamin Perez <benjamin@bexsoft.net>
Date: Tue, 10 Dec 2024 22:25:22 -0600
Subject: [PATCH] Added modal custom padding property

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
---
 src/components/Button/Button.stories.tsx     |  7 ++-----
 src/components/ModalBox/ModalBox.stories.tsx | 11 +++++++++++
 src/components/ModalBox/ModalBox.styles.ts   |  8 ++++++--
 src/components/ModalBox/ModalBox.types.ts    |  3 ++-
 src/components/ModalBox/index.tsx            |  4 +++-
 5 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index c0ebdc80a..9ba7da725 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -38,11 +38,8 @@ const Template: StoryFn<ButtonProps> = (args) => (
       Content
     </Button>{" "}
     -- CHILDREN BUTTON
-    <Button
-      id={"random_btn2"}
-      label={"Content"}
-      variant={args.variant}
-    /> -- LABEL BUTTON
+    <Button id={"random_btn2"} label={"Content"} variant={args.variant} /> --
+    LABEL BUTTON
     <Button id={"random_btn1"} icon={<TestIcon />} variant={args.variant}>
       Content
     </Button>{" "}
diff --git a/src/components/ModalBox/ModalBox.stories.tsx b/src/components/ModalBox/ModalBox.stories.tsx
index 6086e2250..129b08452 100644
--- a/src/components/ModalBox/ModalBox.stories.tsx
+++ b/src/components/ModalBox/ModalBox.stories.tsx
@@ -37,6 +37,7 @@ const Template: StoryFn<ModalBoxProps> = ({
   widthLimit,
   customMaxWidth,
   backgroundOverlay,
+  customContentPadding,
 }) => {
   const [openModal, setOpenModal] = useState<boolean>(false);
 
@@ -62,6 +63,7 @@ const Template: StoryFn<ModalBoxProps> = ({
           titleIcon={titleIcon}
           widthLimit={widthLimit}
           customMaxWidth={customMaxWidth}
+          customContentPadding={customContentPadding}
         >
           <h1>Inside my Computer</h1>
           <p>
@@ -127,6 +129,15 @@ NoOverlayBG.args = {
   backgroundOverlay: false,
 };
 
+export const CustomPadding = Template.bind({});
+
+CustomPadding.args = {
+  title: "Test Title",
+  titleIcon: <TestIcon />,
+  backgroundOverlay: false,
+  customContentPadding: 0,
+};
+
 export const CustomMaxWidth = Template.bind({});
 
 CustomMaxWidth.args = {
diff --git a/src/components/ModalBox/ModalBox.styles.ts b/src/components/ModalBox/ModalBox.styles.ts
index c4b496036..93ecd799a 100644
--- a/src/components/ModalBox/ModalBox.styles.ts
+++ b/src/components/ModalBox/ModalBox.styles.ts
@@ -18,7 +18,11 @@ import { css, Theme } from "@emotion/react";
 
 import { CssProperties } from "../../../styled-system/types";
 
-export const modalContainer = (theme: Theme, width: CssProperties["width"]) =>
+export const modalContainer = (
+  theme: Theme,
+  width: CssProperties["width"],
+  padding: CssProperties["padding"],
+) =>
   css({
     fontFamily: "'Geist', sans-serif",
     color: theme.colors["Color/Neutral/Text/colorTextLabel"],
@@ -31,7 +35,7 @@ export const modalContainer = (theme: Theme, width: CssProperties["width"]) =>
     boxSizing: "border-box",
     "& .dialogContent": {
       boxSizing: "border-box",
-      padding: 24,
+      padding: padding,
       maxHeight: "calc(100vh - 150px)",
       overflowY: "auto",
     },
diff --git a/src/components/ModalBox/ModalBox.types.ts b/src/components/ModalBox/ModalBox.types.ts
index adb2da060..c700119df 100644
--- a/src/components/ModalBox/ModalBox.types.ts
+++ b/src/components/ModalBox/ModalBox.types.ts
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React from "react";
+import React, { CSSProperties } from "react";
 
 import { OverrideTheme } from "../../global/global.types";
 
@@ -27,5 +27,6 @@ export interface ModalBoxProps {
   titleIcon?: React.ReactNode;
   backgroundOverlay?: boolean;
   customMaxWidth?: number | string;
+  customContentPadding?: CSSProperties["padding"];
   sx?: OverrideTheme;
 }
diff --git a/src/components/ModalBox/index.tsx b/src/components/ModalBox/index.tsx
index d7ee68bb7..52a147a43 100644
--- a/src/components/ModalBox/index.tsx
+++ b/src/components/ModalBox/index.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import { FC, useEffect, useState } from "react";
+import { FC } from "react";
 import { createPortal } from "react-dom";
 import { useTheme } from "@emotion/react";
 
@@ -33,6 +33,7 @@ const ModalBox: FC<ModalBoxProps> = ({
   titleIcon,
   backgroundOverlay = true,
   customMaxWidth = 750,
+  customContentPadding = 24,
   sx,
 }) => {
   const theme = useTheme();
@@ -41,6 +42,7 @@ const ModalBox: FC<ModalBoxProps> = ({
   const containerStyles = modalContainer(
     theme,
     widthLimit ? customMaxWidth : "100%",
+    customContentPadding,
   );
   const titleStyles = modalTitleBar(theme);