chore: redesign dropdown in theme settings (Issue #144) (#456)

epam · Jan 5, 2024 · 419858c · 419858c
1 parent 761f004
commit 419858c
Show file tree

Hide file tree

Showing 9 changed files with 507 additions and 635 deletions.
diff --git a/src/components/Chat/ShareModal.tsx b/src/components/Chat/ShareModal.tsx
@@ -75,7 +75,7 @@ export default function ShareModal({ entity, isOpen, onClose, type }: Props) {
       onClose={onClose}
     >
       <div className="flex flex-col justify-between gap-2">
-        <h4 className=" max-h-[50px] text-base font-semibold">
+        <h4 className="max-h-[50px] text-base font-semibold">
           <Tooltip tooltip={entity.name.trim()}>
             <span
               className="line-clamp-2 break-words"

diff --git a/src/components/Common/ConfirmDialog.tsx b/src/components/Common/ConfirmDialog.tsx
@@ -1,14 +1,7 @@
-import {
-  FloatingFocusManager,
-  FloatingOverlay,
-  FloatingPortal,
-  useDismiss,
-  useFloating,
-  useInteractions,
-  useRole,
-} from '@floating-ui/react';
 import { useId, useRef } from 'react';
 
+import Modal from '@/src/components/Common/Modal';
+
 interface Props {
   isOpen: boolean;
   heading: string;
@@ -26,76 +19,53 @@ export const ConfirmDialog = ({
   isOpen,
   onClose,
 }: Props) => {
-  const { refs, context } = useFloating({
-    open: isOpen,
-    onOpenChange: onClose,
-  });
   const confirmLabelRef = useRef<HTMLButtonElement>(null);
 
-  const role = useRole(context);
-  const dismiss = useDismiss(context, { outsidePressEvent: 'mousedown' });
-
-  const { getFloatingProps } = useInteractions([role, dismiss]);
-
   const headingId = useId();
   const descriptionId = useId();
 
   return (
-    <FloatingPortal id="theme-main">
-      {isOpen && (
-        <FloatingOverlay
-          lockScroll
-          className="z-50 flex items-center justify-center bg-blackout p-3"
-          data-floating-overlay
-        >
-          <FloatingFocusManager
-            context={context}
-            initialFocus={confirmLabelRef}
+    <Modal
+      portalId="theme-main"
+      isOpen={isOpen}
+      onClose={() => onClose(false)}
+      dataQa="confirmation-dialog"
+      containerClassName="z-50 flex min-w-[90%] flex-col items-center gap-4 p-6 text-center md:min-w-[300px] md:max-w-[500px]"
+      dismissProps={{ outsidePressEvent: 'mousedown' }}
+      hideClose
+    >
+      <div className="flex flex-col gap-2">
+        <h2 id={headingId} className="text-base font-semibold">
+          {heading}
+        </h2>
+        {description && (
+          <p id={descriptionId} data-qa="confirm-message">
+            {description}
+          </p>
+        )}
+      </div>
+      <div className="flex items-center gap-3">
+        {cancelLabel && (
+          <button
+            className="button button-secondary"
+            onClick={() => {
+              onClose(false);
+            }}
+            data-qa="cancel-dialog"
           >
-            <div
-              className="z-50 flex min-w-[90%] flex-col items-center gap-4 rounded bg-layer-3 p-6 text-center md:min-w-[300px] md:max-w-[500px]"
-              ref={refs.setFloating}
-              aria-labelledby={headingId}
-              aria-describedby={descriptionId}
-              {...getFloatingProps()}
-              data-qa="confirmation-dialog"
-            >
-              <div className="flex flex-col gap-2">
-                <h2 id={headingId} className="text-base font-semibold">
-                  {heading}
-                </h2>
-                {description && (
-                  <p id={descriptionId} data-qa="confirm-message">
-                    {description}
-                  </p>
-                )}
-              </div>
-              <div className="flex items-center gap-3">
-                {cancelLabel && (
-                  <button
-                    className="button button-secondary"
-                    onClick={() => {
-                      onClose(false);
-                    }}
-                    data-qa="cancel-dialog"
-                  >
-                    {cancelLabel}
-                  </button>
-                )}
-                <button
-                  ref={confirmLabelRef}
-                  autoFocus
-                  className="button button-primary"
-                  onClick={() => onClose(true)}
-                  data-qa="confirm"
-                >
-                  {confirmLabel}
-                </button>
-              </div>
-            </div>
-          </FloatingFocusManager>
-        </FloatingOverlay>
-      )}
-    </FloatingPortal>
+            {cancelLabel}
+          </button>
+        )}
+        <button
+          ref={confirmLabelRef}
+          autoFocus
+          className="button button-primary"
+          onClick={() => onClose(true)}
+          data-qa="confirm"
+        >
+          {confirmLabel}
+        </button>
+      </div>
+    </Modal>
   );
 };
diff --git a/src/components/Common/Modal.tsx b/src/components/Common/Modal.tsx
@@ -32,7 +32,6 @@ interface Props extends FormHTMLAttributes<HTMLFormElement> {
   hideClose?: boolean;
   onKeyDownOverlay?: KeyboardEventHandler<HTMLDivElement>;
   dismissProps?: UseDismissProps;
-  applyRole?: boolean;
 }
 
 export default function Modal({
@@ -49,17 +48,14 @@ export default function Modal({
   hideClose = false,
   onKeyDownOverlay,
   dismissProps,
-  applyRole = false,
 }: Props) {
   const { refs, context } = useFloating({
     open: isOpen,
     onOpenChange: onClose,
   });
   const role = useRole(context);
   const dismiss = useDismiss(context, dismissProps);
-  const { getFloatingProps } = useInteractions(
-    applyRole ? [role, dismiss] : [dismiss],
-  );
+  const { getFloatingProps } = useInteractions([role, dismiss]);
 
   const handleClose = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
@@ -85,6 +81,7 @@ export default function Modal({
         >
           <FloatingFocusManager context={context} initialFocus={initialFocus}>
             <form
+              onSubmit={(e) => e.preventDefault()}
               noValidate={noValidate}
               className={classNames(
                 'relative max-h-full rounded bg-layer-3 text-left',