Support adding classes to Modal overlay and content (#232)

* Support adding classes to Modal overlay and content

* move class to the end

* Improve comments

Author: miafan23

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

package-lock.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": "./",

package.json

@@ -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: `fixed top bottom left right bg-darken50 ${themeOverlay}`,
     style: {
       display: 'grid',
       overflowY: 'auto',
@@ -122,7 +126,7 @@ export default function Modal({
     onOpenAutoFocus?: (e) => void;
   } = {
     className: classnames(
-      `relative ${marginClass} ${widthClass} bg-white round`,
+      `relative ${marginClass} ${widthClass} bg-white round ${themeContent}`,
       { 'px36 py36': padding === 'large' }
     )
   };
@@ -223,6 +227,16 @@ Modal.propTypes = {
    * z-index of the modal
    */
   zIndex: PropTypes.number,
+  /**
+   * Additional CSS classes to apply to the overlay,
+   * along with existing classes `fixed top bottom left right bg-darken50`
+   */
+  themeOverlay: PropTypes.string,
+  /**
+   * Additional CSS classes to apply to the content,
+   * along with existing classes `relative bg-white round`
+   */
+  themeContent: PropTypes.string,
   /**
    * The modal's primary action. If this is provided, an encouraging
    * button will be rendered at the bottom of the modal.