From 04c79e958f58a1539f977fdfd6d41df44816e403 Mon Sep 17 00:00:00 2001
From: Mengying Fan <mengying.fan@mapbox.com>
Date: Mon, 9 Dec 2024 13:41:11 +0200
Subject: [PATCH] Support adding classes to Modal overlay and content

---
 CHANGELOG.md                   |  4 ++++
 package-lock.json              |  4 ++--
 package.json                   |  2 +-
 src/components/modal/modal.tsx | 16 ++++++++++++++--
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3e127d8..6033c26 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 ## Changelog
 
+## 2.16.0
+
+- [feature] Support adding classes to Modal overlay and content
+
 ## 2.15.0
 
 - [feature] support configuring z-index for Popover component
diff --git a/package-lock.json b/package-lock.json
index 770061a..8acc1e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@mapbox/mr-ui",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@mapbox/mr-ui",
-      "version": "2.15.0",
+      "version": "2.16.0",
       "license": "BSD-2-Clause",
       "dependencies": {
         "@mapbox/mbx-assembly": "^1.6.0",
diff --git a/package.json b/package.json
index 57b8784..1d0f79e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mapbox/mr-ui",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "description": "UI components for Mapbox projects",
   "main": "index.js",
   "homepage": "./",
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 653d2a4..8c3e037 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -15,6 +15,8 @@ interface Props {
   padding?: 'large' | 'none';
   margin?: 'large' | 'default';
   zIndex?: number | string;
+  themeOverlay?: string;
+  themeContent?: string;
   onExit?: () => void;
   exitOnUnderlayClicked?: boolean;
   allowEventBubbling?: boolean;
@@ -61,6 +63,8 @@ export default function Modal({
   primaryAction,
   secondaryAction,
   tertiaryAction,
+  themeOverlay = '',
+  themeContent = '',
   onExit
 }: Props): ReactElement {
   const renderActions = (): ReactElement => {
@@ -96,7 +100,7 @@ export default function Modal({
     style: CSSProperties;
     'data-testid': string;
   } = {
-    className: 'fixed top bottom left right bg-darken50',
+    className: `${themeOverlay} fixed top bottom left right bg-darken50`,
     style: {
       display: 'grid',
       overflowY: 'auto',
@@ -122,7 +126,7 @@ export default function Modal({
     onOpenAutoFocus?: (e) => void;
   } = {
     className: classnames(
-      `relative ${marginClass} ${widthClass} bg-white round`,
+      `${themeContent} relative ${marginClass} ${widthClass} bg-white round`,
       { 'px36 py36': padding === 'large' }
     )
   };
@@ -223,6 +227,14 @@ Modal.propTypes = {
    * z-index of the modal
    */
   zIndex: PropTypes.number,
+  /**
+   * CSS classes to apply to the overlay. This is the dark background that covers the rest of the page.
+   */
+  themeOverlay: PropTypes.string,
+  /**
+   * CSS classes to apply to the content. This is the white box that contains the modal content.
+   */
+  themeContent: PropTypes.string,
   /**
    * The modal's primary action. If this is provided, an encouraging
    * button will be rendered at the bottom of the modal.