fix(Modal): Change solution for setting width and fixed clicking on t…

…op or bottom closing the Modal (#1171) Co-authored-by: Michael Marszalek <[email protected]>
digdir · Dec 1, 2023 · 22fbc6b · 22fbc6b
1 parent 21dcf2a
commit 22fbc6b
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 31 deletions.
diff --git a/packages/react/src/components/Modal/Modal.mdx b/packages/react/src/components/Modal/Modal.mdx
@@ -34,6 +34,14 @@ Vi bruker native `autoFocus` på `Textfield` for å fokusere inputen i skjemaet.
 
 <Canvas of={ModalStories.ModalWithForm} />
 
+## Med egendefinert bredde
+
+Bruk max-width for å sette egendefinert maks bredde på modalen. Default er 650px.
+
+<Canvas of={ModalStories.ModalWithMaxWidth} />
+
 ### `Modal.Header`
 
 <ArgTypes of={Modal.Header} />
+
+
diff --git a/packages/react/src/components/Modal/Modal.module.css b/packages/react/src/components/Modal/Modal.module.css
@@ -1,7 +1,7 @@
 .modal {
-  min-width: 650px;
-  max-width: min(650px, calc(100% - 6px - 2em));
-  padding: var(--fds-spacing-6) 0;
+  padding: 0;
+  width: 100%;
+  max-width: 650px;
   border: none;
   border-radius: var(--fds-border_radius-medium);
   box-shadow: var(--fds-shadow-xlarge);

diff --git a/packages/react/src/components/Modal/Modal.stories.tsx b/packages/react/src/components/Modal/Modal.stories.tsx
@@ -132,3 +132,46 @@ export const ModalWithForm: StoryFn<typeof Modal> = () => {
     </>
   );
 };
+
+export const ModalWithMaxWidth: StoryFn<typeof Modal> = () => {
+  const modalRef = useRef<HTMLDialogElement>(null);
+  const [input, setInput] = useState('');
+
+  return (
+    <>
+      <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
+      <Modal
+        ref={modalRef}
+        onClose={() => setInput('')}
+        style={{ maxWidth: '1200px' }}
+      >
+        <Modal.Header>Modal med skjema</Modal.Header>
+        <Modal.Content>
+          <Textfield
+            label='Navn'
+            placeholder='Ola Nordmann'
+            value={input}
+            autoFocus
+            onChange={(e) => setInput(e.target.value)}
+          />
+        </Modal.Content>
+        <Modal.Footer>
+          <Button
+            onClick={() => {
+              window.alert(`Du har sendt inn skjema med navn: ${input}`);
+              modalRef.current?.close();
+            }}
+          >
+            Send inn skjema
+          </Button>
+          <Button
+            variant='secondary'
+            onClick={() => modalRef.current?.close()}
+          >
+            Avbryt
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};
diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
@@ -26,12 +26,6 @@ export type ModalProps = {
    * @default undefined
    */
   onClose?: () => void;
-  /**
-   * The width of the modal.
-   * Will go to full width below the specified width.
-   * @default '650px'
-   */
-  /* width?: string; */
   /**
    * Called before the modal is closed when using the close button, `closeOnBackdropClick` or `ESCAPE`.
    * If the function returns `false` the modal will not close.
@@ -42,23 +36,12 @@ export type ModalProps = {
 export const ModalContext = createContext<ModalContextProps | null>(null);
 
 export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
-  (
-    {
-      onInteractOutside,
-      onClose,
-      /* width = '650px', */
-      onBeforeClose,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
+  ({ onInteractOutside, onClose, onBeforeClose, children, ...props }, ref) => {
     const modalRef = useRef<HTMLDialogElement>(null);
     const mergedRefs = useMergeRefs([modalRef, ref]);
     const { context } = useFloating();
     useScrollLock(modalRef, classes.lockScroll);
     const open = useModalState(modalRef);
-    /* const belowWidth = useMediaQuery(`(max-width: ${width})`); */
 
     useEffect(() => {
       const currentModalRef = modalRef.current;
@@ -122,13 +105,6 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
           ref={mergedRefs}
           {...props}
           className={cn(classes.modal, props.className)}
-          style={{
-            /* minWidth: belowWidth ? '100%' : width,
-            maxWidth: belowWidth
-              ? '100%'
-              : `min(${width}, calc(100% - 6px - 2em))`, */
-            ...props.style,
-          }}
           onCancel={onCancel}
         >
           {open && (

diff --git a/packages/react/src/components/Modal/ModalFooter/ModalFooter.module.css b/packages/react/src/components/Modal/ModalFooter/ModalFooter.module.css
@@ -2,6 +2,8 @@
   display: flex;
   align-items: center;
   gap: var(--fds-spacing-4);
-  padding: var(--fds-spacing-3) var(--fds-spacing-6);
-  padding-bottom: 0;
+  padding-top: var(--fds-spacing-3);
+  padding-bottom: var(--fds-spacing-6);
+  padding-left: var(--fds-spacing-6);
+  padding-right: var(--fds-spacing-6);
 }
diff --git a/packages/react/src/components/Modal/ModalHeader/ModalHeader.module.css b/packages/react/src/components/Modal/ModalHeader/ModalHeader.module.css
@@ -2,7 +2,7 @@
   display: flex;
   justify-content: space-between;
   flex-direction: column;
-  padding-top: 0;
+  padding-top: var(--fds-spacing-6);
   padding-bottom: var(--fds-spacing-2);
   padding-left: var(--fds-spacing-6);
   padding-right: var(--fds-spacing-18);