@bloom-housing/ui-components 7.0.1 → 7.0.2-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.2-alpha.1](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@7.0.2-alpha.0...@bloom-housing/ui-components@7.0.2-alpha.1) (2022-11-03)
+
+
+### Bug Fixes
+
+* allow for more space for modals on mobile ([#3153](https://github.com/bloom-housing/bloom/issues/3153)) ([7e41703](https://github.com/bloom-housing/bloom/commit/7e41703ad8571eb160f4eaf53f40f9055f7639a3))
+
+
+
+
+
+## [7.0.2-alpha.0](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@7.0.1...@bloom-housing/ui-components@7.0.2-alpha.0) (2022-10-31)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [7.0.1](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@7.0.1-alpha.4...@bloom-housing/ui-components@7.0.1) (2022-10-26)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "7.0.1",
+  "version": "7.0.2-alpha.1",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -78,7 +78,6 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
     "@mapbox/mapbox-sdk": "^0.13.0",
-    "@types/body-scroll-lock": "^2.6.1",
     "@types/jwt-decode": "^2.2.1",
     "@types/markdown-to-jsx": "^6.11.2",
     "@types/mdx": "^2.0.1",
@@ -92,7 +91,6 @@
     "ag-grid-react": "^26.0.0",
     "aria-autocomplete": "^1.4.0",
     "axios": "0.21.2",
-    "body-scroll-lock": "^3.1.5",
     "dayjs": "^1.10.7",
     "jwt-decode": "^2.2.0",
     "markdown-to-jsx": "^6.11.4",
@@ -106,6 +104,7 @@
     "react-focus-lock": "^2.5.2",
     "react-map-gl": "^6.1.16",
     "react-media": "^1.10.0",
+    "react-remove-scroll": "2.5.4",
     "react-tabs": "^3.2.2",
     "react-text-mask": "^5.4.3",
     "react-transition-group": "^4.4.1",
@@ -113,5 +112,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "7270b08eb2f57009bcbcef624ae2aa68c92f91f9"
+  "gitHead": "a2533b31708dc867b12492818815bb1e3b1599a7"
 }

package/src/blocks/ImageCard.tsx

@@ -4,7 +4,7 @@ import { ApplicationStatus } from "../notifications/ApplicationStatus"
 import "./ImageCard.scss"
 import { Tag } from "../text/Tag"
 import { ApplicationStatusType } from "../global/ApplicationStatusType"
-import { AppearanceStyleType } from "../global/AppearanceTypes"
+import { AppearanceSizeType, AppearanceStyleType } from "../global/AppearanceTypes"
 import { Icon, IconFillColors, UniversalIconType } from "../icons/Icon"
 import { Modal } from "../overlays/Modal"
 import { Button } from "../actions/Button"
@@ -185,7 +185,7 @@ const ImageCard = (props: ImageCardProps) => {
           headerClassNames="sr-only"
           closeIconColor={IconFillColors.white}
           actions={[
-            <Button onClick={() => setShowModal(!showModal)}>
+            <Button onClick={() => setShowModal(!showModal)} size={AppearanceSizeType.small}>
               {props.modalCloseLabel || "Close"}
             </Button>,
           ]}

package/src/global/vendor/ag_grid.scss

@@ -111,14 +111,11 @@
 
   .ag-body-horizontal-scroll {
     border-bottom: 1px solid var(--bloom-color-gray-500);
-    border-radius: var(--bloom-rounded-md);
   }
 
   .ag-root-wrapper {
     @apply border-b-0;
     @apply rounded-t-md;
-    @apply rounded-b-md;
-    overflow: visible;
   }
 
   .ag-layout-auto-height {

package/src/headers/PageHeader.scss

@@ -42,6 +42,7 @@
 
 .page-header__breadcrumbs {
   margin-bottom: 10px;
+  margin-top: calc(-1 * var(--bloom-s4));
 }
 
 .page-header__title {

package/src/overlays/Modal.scss

@@ -4,15 +4,19 @@
   --title-font-size: var(--bloom-font-size-base-alt);
   --title-font-family: var(--bloom-font-sans);
   --content-font-color: var(--bloom-color-gray-700);
-  --content-padding-block: var(--bloom-s5) var(--bloom-s8);
+  --content-padding-block: var(--bloom-s6);
   --max-width: var(--bloom-width-5xl);
   --desktop-min-width: var(--bloom-width-lg);
   --footer-background-color: var(--bloom-color-primary-lighter);
   --border-radius: var(--bloom-rounded);
+  --mobile-border-radius: 0;
   --background-color: var(--bloom-color-white);
   --modal-shadow: var(--bloom-shadow-md);
   --modal-border: var(--bloom-border-1) solid var(--bloom-color-gray-400);
   --footer-justify: normal;
+  --footer-height: 170px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
 
   position: relative;
   max-width: var(--max-width);
@@ -20,11 +24,21 @@
   margin: auto;
   border: var(--modal-border);
   background-color: var(--background-color);
-  border-radius: var(--border-radius);
   box-shadow: var(--modal-shadow);
+  width: 100vw;
+  border-radius: var(--mobile-border-radius);
 
-  @media (min-width: $screen-md) {
+  @media (min-width: $screen-sm) {
+    border-radius: var(--border-radius);
     min-width: var(--desktop-min-width);
+    width: auto;
+  }
+
+  max-height: 100vh;
+  max-width: 100vw;
+  @media (min-width: $screen-md) {
+    max-height: calc(100vh - var(--bloom-s6));
+    max-width: calc(100vw - var(--bloom-s6));
   }
 }
 
@@ -35,6 +49,7 @@
 .modal__title {
   padding-block: var(--bloom-s6) var(--bloom-s3);
   padding-inline: var(--bloom-s6) var(--bloom-s12);
+  padding-bottom: var(--bloom-s6);
   color: var(--title-color);
   font-size: var(--title-font-size);
   font-family: var(--title-font-family);
@@ -43,6 +58,7 @@
 .modal__inner {
   padding-block: var(--content-padding-block);
   padding-inline: var(--bloom-s6);
+  padding-top: 0;
 
   &:last-of-type {
     border-bottom-right-radius: var(--border-radius);
@@ -50,7 +66,13 @@
   }
 
   &.is-scrollable {
-    max-height: calc(100vh - 200px);
+    max-height: calc(100vh - var(--footer-height));
+    max-width: 100vw;
+    @media (min-width: $screen-md) {
+      max-height: calc(100vh - (var(--footer-height) + var(--bloom-s6)));
+      max-width: calc(100vw - var(--bloom-s6));
+      margin-bottom: auto;
+    }
     overflow-y: auto;
   }
 
@@ -60,14 +82,14 @@
 }
 
 .modal__footer {
-  padding-block: var(--bloom-s4);
-  padding-inline: var(--bloom-s6);
+  padding: var(--bloom-s6);
   border-bottom-right-radius: var(--border-radius);
   border-bottom-left-radius: var(--border-radius);
   background-color: var(--footer-background-color);
 
   display: flex;
   flex-direction: row-reverse;
+  flex-wrap: wrap;
   gap: var(--bloom-s5);
   justify-content: var(--footer-justify);
   align-items: center;

package/src/overlays/Modal.tsx

@@ -64,18 +64,6 @@ export const Modal = (props: ModalProps) => {
       role={props.role ? props.role : "dialog"}
     >
       <div className={modalClassNames.join(" ")}>
-        <ModalHeader
-          title={props.title}
-          uniqueId={uniqueIdRef.current}
-          className={props.headerClassNames}
-        />
-
-        <section className={innerClassNames.join(" ")}>
-          {typeof props.children === "string" ? <p>{props.children}</p> : props.children}
-        </section>
-
-        {props.actions && <ModalFooter actions={props.actions} />}
-
         {!props.hideCloseIcon && (
           <button
             className={closeClassNames.join(" ")}
@@ -90,6 +78,17 @@ export const Modal = (props: ModalProps) => {
             />
           </button>
         )}
+        <ModalHeader
+          title={props.title}
+          uniqueId={uniqueIdRef.current}
+          className={props.headerClassNames}
+        />
+
+        <section className={innerClassNames.join(" ")}>
+          {typeof props.children === "string" ? <p>{props.children}</p> : props.children}
+        </section>
+
+        {props.actions && <ModalFooter actions={props.actions} />}
       </div>
     </Overlay>
   )

package/src/overlays/Overlay.tsx

@@ -3,7 +3,7 @@ import "./Overlay.scss"
 import useKeyPress from "../helpers/useKeyPress"
 import { createPortal } from "react-dom"
 import FocusLock from "react-focus-lock"
-import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock"
+import { RemoveScroll } from "react-remove-scroll"
 import { CSSTransition } from "react-transition-group"
 
 export type OverlayProps = {
@@ -70,18 +70,6 @@ export const Overlay = (props: OverlayProps) => {
     }
   }, [elForPortal, overlayRoot])
 
-  // disable body scrolling when the overlay is open
-  useEffect(() => {
-    if (props.scrollable) return
-    if (!(overlayRoot && elForPortal)) return
-
-    props.open ? disableBodyScroll(elForPortal) : enableBodyScroll(elForPortal)
-
-    return () => {
-      enableBodyScroll(elForPortal)
-    }
-  }, [elForPortal, overlayRoot, props.open])
-
   return (
     elForPortal &&
     createPortal(
@@ -92,7 +80,9 @@ export const Overlay = (props: OverlayProps) => {
         mountOnEnter
         unmountOnExit
       >
-        <OverlayInner {...props}>{props.children}</OverlayInner>
+        <RemoveScroll>
+          <OverlayInner {...props}>{props.children}</OverlayInner>
+        </RemoveScroll>
       </CSSTransition>,
       elForPortal
     )

package/src/page_components/sign-in/ResendConfirmationModal.tsx

@@ -6,6 +6,7 @@ import {
   Form,
   Field,
   emailRegex,
+  AppearanceSizeType,
 } from "@bloom-housing/ui-components"
 import React, { useEffect, useMemo } from "react"
 import { useForm } from "react-hook-form"
@@ -67,6 +68,7 @@ const ResendConfirmationModal = ({
           styleType={AppearanceStyleType.primary}
           onClick={() => onFormSubmit()}
           loading={loading}
+          size={AppearanceSizeType.small}
         >
           {t("authentication.createAccount.resendTheEmail")}
         </Button>,
@@ -77,6 +79,7 @@ const ResendConfirmationModal = ({
             onClose()
             window.scrollTo(0, 0)
           }}
+          size={AppearanceSizeType.small}
         >
           {t("t.cancel")}
         </Button>,

package/src/tables/AgTable.tsx

@@ -207,8 +207,12 @@ const AgTable = ({
 
   return (
     <div className={`ag-theme-alpine ag-theme-bloom ${className || ""}`}>
-      <div className="flex justify-between flex-col md:flex-row">
-        <div className={`flex flex-wrap ${showSearch ? "mb-5" : "hidden"}`}>
+      <div
+        className={`flex justify-between flex-col md:flex-row ${
+          showSearch || headerContent ? "mb-4" : ""
+        }`}
+      >
+        <div className={`flex flex-wrap ${!showSearch && "hidden"}`}>
           <div className="md:mr-5 w-full md:w-56">
             <Field
               dataTestId="ag-search-input"
@@ -227,7 +231,6 @@ const AgTable = ({
             )}
           </div>
         </div>
-
         {headerContent}
       </div>
       <div className="applications-table">

package/tailwind.config.js

@@ -18,6 +18,7 @@ module.exports = {
       sm: "var(--bloom-font-size-sm)",
       tiny: "var(--bloom-font-size-tiny)",
       base: "var(--bloom-font-size-base)",
+      "base-alt": "var(--bloom-font-size-base-alt)",
       lg: "var(--bloom-font-size-lg)",
       xl: "var(--bloom-font-size-xl)",
       "2xl": "var(--bloom-font-size-2xl)",