[#965] Replace modaldiv with dialog element + remove native border

elifesciences · Feb 2, 2024 · da22914 · da22914
1 parent 0c3707f
commit da22914
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/components/molecules/modal/modal.scss b/src/components/molecules/modal/modal.scss
@@ -14,7 +14,7 @@
 
 .modal-content {
   @include mixins.padding(36);
-
+  border: 0;
   background-color: #fff;
   border-radius: 3px;
   box-shadow: 0 0 20px rgb(0 0 0 / 22%);

diff --git a/src/components/molecules/modal/modal.tsx b/src/components/molecules/modal/modal.tsx
@@ -18,22 +18,22 @@ export const Modal = ({
   onModalClose,
   modalLayout,
 }: Props) => {
-  const contentRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDialogElement>(null);
 
   const clickDetectedOutsideOfModal = (event: MouseEvent<HTMLDivElement>) => contentRef.current && !contentRef.current.contains(event.target as Element);
 
   return (
     <>
       <div onClick={(event) => { if (onModalClose !== undefined && clickDetectedOutsideOfModal(event)) { onModalClose(); } }} className={`modal-container${open ? ' modal-content__show' : ''} `}>
-        <div ref={contentRef} className={`modal-content ${modalLayout ? ` modal-content__${modalLayout}` : ''}`}>
+        <dialog ref={contentRef} className={`modal-content ${modalLayout ? ` modal-content__${modalLayout}` : ''}`}>
           <div className="modal-content__block">
             <div className="modal-content__top">
               <h6 className="modal-content__title">{modalTitle}</h6>
               {onModalClose !== undefined ? (<button className="modal-content__close-button" onClick={onModalClose}>Close</button>) : ''}
             </div>
             {children !== undefined && open ? (<div className="modal-content__body">{children}</div>) : ''}
           </div>
-        </div>
+        </dialog>
       </div>
     </>
   );