Merge branch 'main' into light-theme

Arize-ai · Oct 23, 2023 · ea16d58 · ea16d58
2 parents ce71031 + c4c0ee6
commit ea16d58
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.17.5",
+  "version": "0.17.6-1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

diff --git a/src/dialog/Dialog.tsx b/src/dialog/Dialog.tsx
@@ -38,6 +38,31 @@ const dialogCSS = css`
       }
     }
   }
+
+  &.ac-dialog--modal {
+    display: flex;
+    flex-direction: column;
+
+    &.ac-dialog--small {
+      width: 500px;
+    }
+    &.ac-dialog--medium {
+      width: 700px;
+    }
+    &.ac-dialog--large {
+      width: 900px;
+    }
+    &.ac-dialog--extraLarge {
+      width: 1600px;
+      max-width: calc(100vw - var(--ac-global-dimension-static-size-1700));
+    }
+    &.ac-dialog--fullscreen {
+      width: calc(100vw - var(--ac-global-dimension-static-size-1700));
+      @media (min-width: var(--ac-global-dimension-static-breakpoint-medium)) {
+        width: calc(100vw - var(--ac-global-dimension-static-size-3400));
+      }
+    }
+  }
 `;
 const sizeMap: Record<NonNullable<DialogProps['size']>, string> = {
   S: 'small',

diff --git a/src/overlays/Modal.tsx b/src/overlays/Modal.tsx
@@ -10,21 +10,29 @@ import { Underlay } from './Underlay';
 
 const modalWrapperCSS = css`
   box-sizing: border-box;
-  height: 100vh;
   z-index: 2;
   transition: visibility 0ms linear 130ms;
   display: flex;
   position: fixed;
   pointer-events: none;
   &.ac-modal-wrapper--slideOver {
+    height: 100vh;
     top: 0;
     right: 0;
     bottom: 0;
   }
+
+  &.ac-modal-wrapper--modal {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
 `;
 
 const exitTransitionAnimationTime = '0.1s';
 const enterTransitionAnimationTime = '0.2s';
+const enterTransitionDelayAnimationTime = '0.2s';
+
 const modalCSS = css`
   background-color: ${theme.components.modal.backgroundColor};
   pointer-events: auto;
@@ -49,6 +57,29 @@ const modalCSS = css`
       transform: translateX(0);
     }
   }
+
+  &.ac-modal--modal {
+    border: 1px solid var(--ac-global-color-gray-500);
+    border-radius: var(--ac-global-rounding-medium);
+    box-shadow: -10px 0px 30px 10px rgba(0, 0, 0, 0.1);
+    /* Start offset by the animation distance */
+    transform: translateY(20px);
+    /* Exit animations */
+    transition: opacity ${exitTransitionAnimationTime}
+        cubic-bezier(0.5, 0, 1, 1),
+      transform ${exitTransitionAnimationTime} cubic-bezier(0, 0, 0.4, 1);
+
+    &.is-open {
+      /* Entry animations */
+      transition: transform ${enterTransitionAnimationTime}
+          cubic-bezier(0, 0, 0.4, 1) ${enterTransitionDelayAnimationTime},
+        opacity ${enterTransitionAnimationTime} cubic-bezier(0, 0, 0.4, 1)
+          ${enterTransitionDelayAnimationTime};
+      opacity: 0.9999;
+      visibility: visible;
+      transform: translateY(0);
+    }
+  }
 `;
 interface ModalWrapperProps extends HTMLAttributes<HTMLElement> {
   children: ReactNode;
@@ -98,7 +129,7 @@ const ModalWrapper = forwardRef<HTMLDivElement>(function(
 });
 
 function Modal(props: ModalProps, ref: DOMRef<HTMLElement>) {
-  const { children, onClose, type, ...otherProps } = props;
+  const { children, onClose, type = 'modal', ...otherProps } = props;
   const domRef = useDOMRef(ref);
 
   const { overlayProps, underlayProps } = useOverlay(props, domRef);

diff --git a/stories/Modal.stories.tsx b/stories/Modal.stories.tsx
@@ -1,7 +1,17 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { withDesign } from 'storybook-addon-designs';
-import { Provider, Modal, ModalProps, Text, Button } from '../src';
+import { css } from '@emotion/react';
+import {
+  Provider,
+  Card,
+  Text,
+  Modal,
+  ModalProps,
+  DialogContainer,
+  Dialog,
+  Button,
+} from '../src';
 
 const meta: Meta = {
   title: 'Modal',
@@ -20,16 +30,95 @@ const meta: Meta = {
 
 export default meta;
 
+const content = (
+  <div
+    css={css`
+      flex: 1 1 auto;
+      overflow-y: scroll;
+    `}
+    data-testid="scroll-container"
+  >
+    <div data-testid="scroll-content">
+      <Text>I'm a Modal</Text>
+    </div>
+  </div>
+);
+
 const Template: Story<ModalProps> = args => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isSmallOpen, setIsSmallOpen] = React.useState(false);
+  const [isMediumOpen, setIsMediumOpen] = React.useState(false);
+  const [isLargeOpen, setIsLargeOpen] = React.useState(false);
+  const [isXLargeOpen, setIsXLargelOpen] = React.useState(false);
+  const [isFullscreenOpen, setIsFullscreenOpen] = React.useState(false);
+
   return (
     <Provider>
-      <Button variant="primary" onClick={() => setIsOpen(true)}>
-        Open
+      <Button variant="primary" onClick={() => setIsSmallOpen(true)}>
+        (Default) Small Modal
+      </Button>
+      <DialogContainer
+        type="modal"
+        isDismissable
+        onDismiss={() => setIsSmallOpen(false)}
+      >
+        {isSmallOpen && <Dialog title="Example Modal">{content}</Dialog>}
+      </DialogContainer>
+      <Button variant="primary" onClick={() => setIsMediumOpen(true)}>
+        Medium Modal
+      </Button>
+      <DialogContainer
+        type="modal"
+        isDismissable
+        onDismiss={() => setIsMediumOpen(false)}
+      >
+        {isMediumOpen && (
+          <Dialog size="M" title="Example Medium Modal">
+            {content}
+          </Dialog>
+        )}
+      </DialogContainer>
+      <Button variant="primary" onClick={() => setIsLargeOpen(true)}>
+        Large Modal
+      </Button>
+      <DialogContainer
+        type="modal"
+        isDismissable
+        onDismiss={() => setIsLargeOpen(false)}
+      >
+        {isLargeOpen && (
+          <Dialog size="L" title="Example Large Modal">
+            {content}
+          </Dialog>
+        )}
+      </DialogContainer>
+      <Button variant="primary" onClick={() => setIsXLargelOpen(true)}>
+        XLarge Modal
+      </Button>
+      <DialogContainer
+        type="modal"
+        isDismissable
+        onDismiss={() => setIsXLargelOpen(false)}
+      >
+        {isXLargeOpen && (
+          <Dialog size="XL" title="Example X-Large Modal">
+            {content}
+          </Dialog>
+        )}
+      </DialogContainer>
+      <Button variant="primary" onClick={() => setIsFullscreenOpen(true)}>
+        Fullscreen Modal
       </Button>
-      <Modal isOpen={isOpen}>
-        <Text>hello</Text>
-      </Modal>
+      <DialogContainer
+        type="modal"
+        isDismissable
+        onDismiss={() => setIsFullscreenOpen(false)}
+      >
+        {isFullscreenOpen && (
+          <Dialog size="fullscreen" title="Example FullScreen Modal">
+            {content}
+          </Dialog>
+        )}
+      </DialogContainer>
     </Provider>
   );
 };