feat(GlobalCarousel/Jumpers/EditInfo):

- remove body's overflow

- close jumper when saving

- change Description's label to 'Notes'

components/system/components/GlobalCarousel/jumpers/EditInfo.js

@@ -2,10 +2,8 @@ import * as React from "react";
 import * as Styles from "~/common/styles";
 import * as System from "~/components/system";
 import * as Jumper from "~/components/system/components/fragments/Jumper";
-import * as SVG from "~/common/svg";
 import * as Actions from "~/common/actions";
 import * as Events from "~/common/custom-events";
-import * as Constants from "~/common/constants";
 import * as MobileJumper from "~/components/system/components/fragments/MobileJumper";
 
 import { css } from "@emotion/react";
@@ -22,6 +20,16 @@ const STYLES_EDIT_INFO_INPUT = (theme) => css`
   color: ${theme.semantic.textBlack};
 `;
 
+const STYLES_EDIT_INFO_NOTES_INPUT = (theme) => css`
+  width: 100%;
+  max-width: unset;
+  box-shadow: 0 0 0 1px ${theme.semantic.borderGrayLight4} inset;
+  border-radius: 12px;
+  background-color: transparent;
+  color: ${theme.semantic.textBlack};
+  min-height: 120px;
+`;
+
 const STYLES_EDIT_INFO_FOOTER = (theme) => css`
   display: flex;
   position: absolute;
@@ -35,9 +43,8 @@ const STYLES_EDIT_INFO_FOOTER = (theme) => css`
 
 const STYLES_EDIT_INFO_FORM = css`
   flex-grow: 1;
-  flex-basis: 0;
   overflow-y: auto;
-  padding-bottom: 40;
+  height: 270px;
 `;
 
 function UpdateFileForm({ file, isMobile, onClose }) {
@@ -46,19 +53,20 @@ function UpdateFileForm({ file, isMobile, onClose }) {
   const { getFieldProps, getFormProps, isSubmitting } = useForm({
     initialValues: {
       title: file?.name || "",
-      description: file?.body || "",
+      notes: file?.body || "",
     },
-    onSubmit: async ({ title, description }) => {
+    onSubmit: async ({ title, notes }) => {
       const response = await Actions.updateFile({
         id: file.id,
         name: title,
-        body: description,
+        body: notes,
       });
+      onClose();
       Events.hasError(response);
     },
   });
 
-  //NOTE(amine): scroll to the bottom of the form every time the description's textarea resizes
+  //NOTE(amine): scroll to the bottom of the form every time the notes' textarea resizes
   const scrollToFormBottom = () => {
     const form = formRef.current;
     if (!form) return;
@@ -85,13 +93,13 @@ function UpdateFileForm({ file, isMobile, onClose }) {
           </div>
           <div>
             <System.H6 as="label" color="textGray">
-              Description
+              Notes
             </System.H6>
             <System.Textarea
-              css={STYLES_EDIT_INFO_INPUT}
+              css={STYLES_EDIT_INFO_NOTES_INPUT}
               style={{ marginTop: 6 }}
               maxLength="2000"
-              {...getFieldProps("description", { onChange: scrollToFormBottom })}
+              {...getFieldProps("notes", { onChange: scrollToFormBottom })}
             />
           </div>
         </JumperItem>

vendor/react-textarea-autosize.js

@@ -1,7 +1,6 @@
 import * as React from "react";
 
 import calculateNodeHeight, { purgeCache } from "~/vendor/calculate-node-height";
-import { FocusRing } from "~/components/core/FocusRing";
 import { css } from "@emotion/react";
 
 const noop = () => {};
@@ -53,14 +52,12 @@ export default class TextareaAutosize extends React.Component {
     }
 
     return (
-      <FocusRing>
-        <textarea
-          {...props}
-          css={[STYLES_TEXTAREA, css]}
-          onChange={this._onChange}
-          ref={this._onRef}
-        />
-      </FocusRing>
+      <textarea
+        {...props}
+        css={[STYLES_TEXTAREA, css]}
+        onChange={this._onChange}
+        ref={this._onRef}
+      />
     );
   }