[fix] React modal style (navikt#1615)

* version bump

* added custom styling to react modal

* use prop 'style' to avoid breaking changes

* update modal story

Author: larseirikhansen

@navikt/core/react/src/modal/Modal.tsx

@@ -33,6 +33,10 @@ export interface ModalProps {
    * @default true
    */
   closeButton?: boolean;
+  /**
+   * Allows custom styling of ReactModal, in accordance with their typing
+   */
+  style?: ReactModal.Styles;
   /**
    * Callback for setting parent element modal will attach to
    */
@@ -72,6 +76,7 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
       "aria-labelledby": ariaLabelledBy,
       "aria-modal": ariaModal,
       "aria-label": contentLabel,
+      style,
       ...rest
     },
     ref
@@ -91,6 +96,7 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
     return (
       <ReactModal
         {...rest}
+        style={style}
         isOpen={open}
         ref={mergedRef}
         className={cl("navds-modal", className)}

@navikt/core/react/src/modal/modal.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { BodyLong, Button, Heading, Modal } from "../..";
+import { BodyLong, Button, Heading } from "../..";
+import Modal from "./Modal";
 
 export default {
   title: "ds-react/Modal",
@@ -13,16 +14,23 @@ export const Default = (props) => {
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
-    Modal.setAppElement("#root");
+    Modal.setAppElement?.("#root");
   }, []);
 
   return (
     <>
-      <Button onClick={() => setOpen(true)}>Open</Button>
+      <Button onClick={() => setOpen(true)}>Open Modal</Button>
+      <p>
+        We can also custom style the modal by passing in a react-modal style
+        object. Here the backdrop is red.
+      </p>
       <Modal
         open={open}
         onClose={() => setOpen(false)}
         aria-labelledby="header123"
+        style={{
+          overlay: { backgroundColor: "#ff0000aa" },
+        }}
         {...props}
       >
         <Modal.Content>
@@ -43,62 +51,3 @@ Default.args = {
   shouldCloseOnOverlayClick: true,
   closeButton: true,
 };
-
-export const Open = () => {
-  const [open, setOpen] = useState(null);
-
-  useEffect(() => {
-    Modal.setAppElement("#root");
-  }, []);
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Open</Button>
-      <Modal
-        open={open ?? true}
-        onClose={() => setOpen(false)}
-        aria-labelledby="header123"
-      >
-        <Modal.Content>
-          <Heading spacing id="header123" level="1" size="large">
-            Header
-          </Heading>
-          <Heading spacing level="2" size="medium">
-            Header
-          </Heading>
-          <BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
-        </Modal.Content>
-      </Modal>
-    </>
-  );
-};
-
-export const CloseButton = () => {
-  const [open, setOpen] = useState(true);
-
-  useEffect(() => {
-    Modal.setAppElement("#root");
-  }, []);
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Open</Button>
-      <Modal
-        open={open}
-        onClose={() => setOpen(false)}
-        aria-labelledby="header123"
-        closeButton={false}
-      >
-        <Modal.Content>
-          <Heading spacing id="header123" level="1" size="large">
-            Header
-          </Heading>
-          <Heading spacing level="2" size="medium">
-            Header
-          </Heading>
-          <BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
-        </Modal.Content>
-      </Modal>
-    </>
-  );
-};

yarn.lock

@@ -3222,7 +3222,7 @@ __metadata:
   resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
   dependencies:
     "@navikt/ds-icons": ^0.8.20
-    "@navikt/ds-react": ^0.19.25
+    "@navikt/ds-react": ^0.19.26
     "@popperjs/core": ^2.10.1
     "@types/node": ^17.0.35
     classnames: ^2.3.1
@@ -3238,7 +3238,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@^0.19.25, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@^0.19.26, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies: