Add modal footer and fix height with overflow (#1455)

utils/gear-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gear-js/ui",
-  "version": "0.5.19",
+  "version": "0.5.20",
   "description": "React UI components used across Gear applications",
   "author": "Gear Technologies",
   "license": "GPL-3.0",

utils/gear-ui/src/components/Modal/Modal.module.scss

@@ -2,6 +2,39 @@
 @use '../../assets/styles/mixins' as *;
 @use '../../assets/styles/headings' as *;
 
+@mixin customScroll {
+  // TODO: temp solution specifically for modal,
+  // take a closer look to simplebar-react
+  overflow-y: auto;
+
+  // firefox
+  scrollbar-width: thin;
+  scrollbar-color: #fff rgba(#fff, 0.1);
+
+  // chrome
+  &::-webkit-scrollbar {
+    width: 19px;
+  }
+
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    border-style: solid;
+    border-color: transparent;
+  }
+
+  &::-webkit-scrollbar-track {
+    border-width: 12px 9px;
+    background-color: rgba(#fff, 0.1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-width: 12px 8px;
+    background-color: #fff;
+    border-radius: 1px;
+  }
+}
+
 .overlay {
   position: fixed;
   top: 0;
@@ -33,7 +66,6 @@
 .header {
   // border on .header and .body instead of .modal,
   // cuz otherwise .modal should have overflow: hidden
-  // and we can't cuz modal can have tooltip inside
   display: flex;
   justify-content: space-between;
   padding: 17px 32px 22px;
@@ -45,10 +77,18 @@
 }
 
 .body {
+  @include customScroll;
   padding: 32px;
   background-color: #29292b;
   border-left: $borderModal;
   border-right: $borderModal;
+}
+
+.footer {
+  padding: 24px 32px;
+  background-color: #222225;
+  border-left: $borderModal;
+  border-right: $borderModal;
   border-bottom: $borderModal;
   border-radius: 0 0 $borderRadiusMedium $borderRadiusMedium;
 }

utils/gear-ui/src/components/Modal/Modal.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { ReactNode, useEffect, useState, MouseEvent } from 'react';
+import { ReactNode, useEffect, useState, MouseEvent, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { Button } from '../Button/Button';
 import { ReactComponent as xSVG } from './images/x.svg';
@@ -9,12 +9,34 @@ type Props = {
   heading: string;
   close: () => void;
   children?: ReactNode;
+  footer?: ReactNode;
   className?: string;
   size?: 'normal' | 'large';
 };
 
-const Modal = ({ heading, close, children, className, size = 'normal' }: Props) => {
+function useHeight() {
+  const [height, setHeight] = useState(0);
+
+  const ref = useCallback((node: HTMLDivElement | null) => {
+    if (node) setHeight(node.getBoundingClientRect().height);
+  }, []);
+
+  return [height, ref] as const;
+}
+
+function useMaxHeight() {
+  const [headerHeight, headerRef] = useHeight();
+  const [footerHeight, footerRef] = useHeight();
+
+  const padding = 32;
+  const bodyStyle = { maxHeight: `calc(100vh - ${headerHeight + footerHeight + 2 * padding}px)` };
+
+  return { bodyStyle, headerRef, footerRef };
+}
+
+const Modal = ({ heading, close, children, footer, className, size = 'normal' }: Props) => {
   const [root, setRoot] = useState<HTMLDivElement>();
+  const { bodyStyle, headerRef, footerRef } = useMaxHeight();
 
   const modalClassName = clsx(styles.modal, styles[size]);
   const bodyClassName = clsx(styles.body, className);
@@ -37,15 +59,22 @@ const Modal = ({ heading, close, children, className, size = 'normal' }: Props)
   const component = (
     <div className={styles.overlay} onClick={handleOverlayClick} data-testid="overlay">
       <div className={modalClassName} data-testid="modal">
-        <header className={styles.header}>
+        <header className={styles.header} ref={headerRef}>
           <h3 className={styles.heading}>{heading}</h3>
           <Button icon={xSVG} color="transparent" onClick={close} />
         </header>
+
         {children && (
-          <div className={bodyClassName} data-testid="body">
+          <div className={bodyClassName} data-testid="body" style={bodyStyle}>
             {children}
           </div>
         )}
+
+        {footer && (
+          <footer className={styles.footer} ref={footerRef}>
+            {footer}
+          </footer>
+        )}
       </div>
     </div>
   );