refactor(console): add animations for the submit form action bar (#2570)

packages/console/src/components/DetailsForm/index.module.scss

@@ -4,6 +4,11 @@
   flex-grow: 1;
   display: flex;
   flex-direction: column;
+  padding-bottom: _.unit(2);
+
+  &.withSubmitActionBar {
+    padding-bottom: 0;
+  }
 
   >:not(:first-child) {
     margin-top: _.unit(4);
@@ -15,9 +20,5 @@
     > :not(:first-child) {
       margin-top: _.unit(4);
     }
-
-    &:last-child {
-      margin-bottom: _.unit(6);
-    }
   }
 }

packages/console/src/components/DetailsForm/index.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import type { ReactNode } from 'react';
 
 import SubmitFormChangesActionBar from '../SubmitFormChangesActionBar';
@@ -13,7 +14,7 @@ type Props = {
 
 const DetailsForm = ({ isDirty, isSubmitting, onSubmit, onDiscard, children }: Props) => {
   return (
-    <form className={styles.container}>
+    <form className={classNames(styles.container, isDirty && styles.withSubmitActionBar)}>
       <div className={styles.fields}>{children}</div>
       <SubmitFormChangesActionBar
         isOpen={isDirty}

packages/console/src/components/SubmitFormChangesActionBar/index.module.scss

@@ -4,16 +4,34 @@
   position: sticky;
   bottom: 0;
   width: 100%;
-  height: 60px;
-  border: 1px solid var(--color-line-divider);
-  display: flex;
-  padding: _.unit(3) _.unit(8);
-  justify-content: flex-end;
-  background-color: var(--color-float);
-  box-shadow: var(--shadow-3);
-  border-radius: 12px 12px 0 0;
+  height: 0;
+  overflow: hidden;
+  transition: height 0.3s ease-out 0.1s;
 
-  > :not(:first-child) {
-    margin-left: _.unit(3);
+  .actionBar {
+    height: 60px;
+    border: 1px solid var(--color-line-divider);
+    display: flex;
+    padding: _.unit(3) _.unit(8);
+    justify-content: flex-end;
+    background-color: var(--color-float);
+    box-shadow: var(--shadow-3);
+    border-radius: 12px 12px 0 0;
+    transform: translateY(100%);
+    transition: transform 0.3s ease-out;
+
+    > button + button {
+      margin-left: _.unit(3);
+    }
+  }
+
+  &.active {
+    height: 60px;
+    overflow: visible;
+
+    .actionBar {
+      transform: translateY(0);
+      transition: transform 0.3s ease-in;
+    }
   }
 }

packages/console/src/components/SubmitFormChangesActionBar/index.tsx

@@ -1,3 +1,5 @@
+import classNames from 'classnames';
+
 import Button from '../Button';
 import * as styles from './index.module.scss';
 
@@ -8,13 +10,9 @@ type Props = {
   onDiscard: () => void;
 };
 
-const SubmitFormChangesActionBar = ({ isOpen, isSubmitting, onSubmit, onDiscard }: Props) => {
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <div className={styles.container}>
+const SubmitFormChangesActionBar = ({ isOpen, isSubmitting, onSubmit, onDiscard }: Props) => (
+  <div className={classNames(styles.container, isOpen && styles.active)}>
+    <div className={styles.actionBar}>
       <Button
         size="medium"
         title="general.discard"
@@ -31,7 +29,7 @@ const SubmitFormChangesActionBar = ({ isOpen, isSubmitting, onSubmit, onDiscard
         onClick={async () => onSubmit()}
       />
     </div>
-  );
-};
+  </div>
+);
 
 export default SubmitFormChangesActionBar;