🪟 🎨 Add close button to modal component (#7322)

airbytehq · Jun 20, 2023 · f7c5a16 · f7c5a16
1 parent e43ec21
commit f7c5a16
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 10 deletions.
diff --git a/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.module.scss b/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.module.scss
@@ -7,7 +7,7 @@
 .content {
   width: 585px;
   font-size: variables.$font-size-lg;
-  padding: 25px;
+  padding: variables.$spacing-xl;
   white-space: pre-line;
   overflow: auto;
 }

diff --git a/airbyte-webapp/src/components/ui/Modal/Modal.module.scss b/airbyte-webapp/src/components/ui/Modal/Modal.module.scss
@@ -38,6 +38,8 @@
 
 .card {
   position: relative;
+  background: colors.$white;
+  border-radius: variables.$border-radius-lg;
   max-width: calc(100vw - #{variables.$width-size-menu} - #{variables.$spacing-lg} * 2);
   display: flex;
   flex-direction: column;
@@ -64,4 +66,24 @@
     width: calc(100vw - #{variables.$spacing-xl} * 2);
     height: calc(100vh - #{variables.$spacing-xl} * 2);
   }
+
+  &__header {
+    border-bottom: variables.$border-thin solid colors.$grey-100;
+  }
+
+  &__closeButton {
+    background-color: transparent;
+    border: none;
+    padding: variables.$spacing-xl;
+    cursor: pointer;
+    color: colors.$dark-blue;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__content {
+    position: relative;
+    flex-grow: 1;
+  }
 }
diff --git a/airbyte-webapp/src/components/ui/Modal/Modal.tsx b/airbyte-webapp/src/components/ui/Modal/Modal.tsx
@@ -1,9 +1,13 @@
 import { Dialog } from "@headlessui/react";
 import classNames from "classnames";
 import React, { useState } from "react";
+import { useIntl } from "react-intl";
 
 import styles from "./Modal.module.scss";
-import { Card } from "../Card";
+import { Box } from "../Box";
+import { FlexContainer } from "../Flex";
+import { Heading } from "../Heading";
+import { Icon } from "../Icon";
 import { Overlay } from "../Overlay";
 
 export interface ModalProps {
@@ -36,6 +40,7 @@ export const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
   wrapIn,
 }) => {
   const [isOpen, setIsOpen] = useState(true);
+  const { formatMessage } = useIntl();
 
   const onModalClose = () => {
     setIsOpen(false);
@@ -56,9 +61,25 @@ export const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
           {cardless ? (
             children
           ) : (
-            <Card title={title} className={classNames(styles.card, size ? cardStyleBySize[size] : undefined)}>
-              {children}
-            </Card>
+            <div className={classNames(styles.card, size ? cardStyleBySize[size] : undefined)}>
+              <div className={styles.card__header}>
+                <FlexContainer alignItems="stretch" justifyContent="space-between">
+                  <Box p="xl">
+                    <Heading as="h2" size="sm">
+                      {title}
+                    </Heading>
+                  </Box>
+                  <button
+                    className={styles.card__closeButton}
+                    onClick={onModalClose}
+                    aria-label={formatMessage({ id: "modal.closeButtonLabel" })}
+                  >
+                    <Icon type="cross" />
+                  </button>
+                </FlexContainer>
+              </div>
+              <div className={styles.card__content}>{children}</div>
+            </div>
           )}
         </Dialog.Panel>
       </Wrapper>

diff --git a/airbyte-webapp/src/hooks/services/Modal/ModalService.test.tsx b/airbyte-webapp/src/hooks/services/Modal/ModalService.test.tsx
@@ -2,9 +2,9 @@ import { render, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { useEffectOnce } from "react-use";
 
-import { useMockIntersectionObserver } from "test-utils/testutils";
+import { TestWrapper, useMockIntersectionObserver } from "test-utils/testutils";
 
-import { ModalServiceProvider, useModalService } from "./ModalService";
+import { useModalService } from "./ModalService";
 import { ModalResult } from "./types";
 
 const TestComponent: React.FC<{ onModalResult?: (result: ModalResult<unknown>) => void }> = ({ onModalResult }) => {
@@ -32,9 +32,9 @@ const TestComponent: React.FC<{ onModalResult?: (result: ModalResult<unknown>) =
 
 const renderModal = (resultCallback?: (reason: unknown) => void) => {
   return render(
-    <ModalServiceProvider>
+    <TestWrapper>
       <TestComponent onModalResult={resultCallback} />
-    </ModalServiceProvider>
+    </TestWrapper>
   );
 };
 

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -973,5 +973,7 @@
   "jobHistory.copyLinkToJob": "Copy link to job",
   "jobHistory.copyLinkToJob.success": "Link copied to clipboard",
   "jobHistory.viewLogs": "View logs",
-  "jobHistory.downloadLogs": "Download logs"
+  "jobHistory.downloadLogs": "Download logs",
+
+  "modal.closeButtonLabel": "Close dialog"
 }