Disclosure triangle and Fullpage modal transitions (#39780)

* css animation on disclosure triangle

* Full page modal using mantine transition

* removing comment

frontend/src/metabase/components/DisclosureTriangle/DisclosureTriangle.jsx

 /* eslint-disable react/prop-types */
-import { Motion, spring, presets } from "react-motion";
-
 import { Icon } from "metabase/ui";
 
 const DisclosureTriangle = ({ open, className }) => (
-  <Motion
-    defaultStyle={{ deg: 0 }}
+  <Icon
+    className={className}
+    name="expand_arrow"
     style={{
-      deg: open ? spring(0, presets.gentle) : spring(-90, presets.gentle),
+      transition: "transform 300ms ease-out",
+      transform: `rotate(${open ? 0 : -90}deg)`,
     }}
-  >
-    {motionStyle => (
-      <Icon
-        className={className}
-        name="expand_arrow"
-        style={{
-          transform: `rotate(${motionStyle.deg}deg)`,
-        }}
-      />
-    )}
-  </Motion>
+  />
 );
 
 export default DisclosureTriangle;

frontend/src/metabase/components/Modal/FullPageModal.tsx

 import { Component } from "react";
-import { Motion, spring } from "react-motion";
 
 import { MaybeOnClickOutsideWrapper } from "metabase/components/Modal/MaybeOnClickOutsideWrapper";
 import type { BaseModalProps } from "metabase/components/Modal/utils";
 import { getModalContent } from "metabase/components/Modal/utils";
 import SandboxedPortal from "metabase/components/SandboxedPortal";
 import { getScrollX, getScrollY } from "metabase/lib/dom";
+import { Transition } from "metabase/ui";
 
 export type FullPageModalProps = BaseModalProps & {
   isOpen: boolean;
@@ -17,6 +17,12 @@ type FullPageModalState = {
   isOpen: boolean;
 };
 
+const slideIn = {
+  in: { opacity: 1, top: 0 },
+  out: { opacity: 0, top: 20 },
+  common: { transformOrigin: "top" },
+  transitionProperty: "top, opacity",
+};
 export class FullPageModal extends Component<
   FullPageModalProps,
   FullPageModalState
@@ -28,7 +34,7 @@ export class FullPageModal extends Component<
   constructor(props: FullPageModalProps) {
     super(props);
     this.state = {
-      isOpen: true,
+      isOpen: false,
     };
 
     this._modalElement = document.createElement("div");
@@ -52,6 +58,9 @@ export class FullPageModal extends Component<
 
   componentDidMount() {
     this.setTopOfModalToBottomOfNav();
+    this.setState({
+      isOpen: true,
+    });
   }
 
   componentDidUpdate() {
@@ -78,15 +87,8 @@ export class FullPageModal extends Component<
   render() {
     const open = this.state.isOpen;
     return (
-      <Motion
-        defaultStyle={{ opacity: 0, top: 20 }}
-        style={
-          open
-            ? { opacity: spring(1), top: spring(0) }
-            : { opacity: spring(0), top: spring(20) }
-        }
-      >
-        {motionStyle => (
+      <Transition mounted={open} transition={slideIn} duration={300}>
+        {styles => (
           <SandboxedPortal container={this._modalElement}>
             <div className="Modal--full">
               {/* Using an OnClickOutsideWrapper is weird since this modal
@@ -97,10 +99,7 @@ export class FullPageModal extends Component<
                 handleDismissal={this.handleDismissal}
                 closeOnClickOutside={this.props.closeOnClickOutside}
               >
-                <div
-                  className="full-height relative scroll-y"
-                  style={motionStyle}
-                >
+                <div className="full-height relative scroll-y" style={styles}>
                   {getModalContent({
                     ...this.props,
                     fullPageModal: true,
@@ -112,7 +111,7 @@ export class FullPageModal extends Component<
             </div>
           </SandboxedPortal>
         )}
-      </Motion>
+      </Transition>
     );
   }
 }