fix(ui-modal): make Modal's header non-sticky with small window height

Closes: INSTUI-4391

Author: ToMESSKa

packages/ui-modal/src/Modal/ModalHeader/props.ts

@@ -36,6 +36,7 @@ type ModalHeaderOwnProps = {
   children?: React.ReactNode
   variant?: 'default' | 'inverse'
   spacing?: 'default' | 'compact'
+  smallViewPort?: boolean
 }
 
 type ModalHeaderStyleProps = {
@@ -55,7 +56,8 @@ type ModalHeaderStyle = ComponentStyle<'modalHeader'>
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.node,
   variant: PropTypes.oneOf(['default', 'inverse']),
-  spacing: PropTypes.oneOf(['default', 'compact'])
+  spacing: PropTypes.oneOf(['default', 'compact']),
+  smallViewPort: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = ['children', 'variant', 'spacing']

packages/ui-modal/src/Modal/ModalHeader/styles.ts

@@ -44,7 +44,7 @@ const generateStyle = (
   props: ModalHeaderProps,
   state: ModalHeaderStyleProps
 ): ModalHeaderStyle => {
-  const { variant, spacing } = props
+  const { variant, spacing, smallViewPort } = props
   const { withCloseButton } = state
 
   const sizeVariants = {
@@ -83,6 +83,7 @@ const generateStyle = (
       borderBottomWidth: '0.0625rem',
       borderBottomStyle: 'solid',
       borderBottomColor: componentTheme.borderColor,
+      ...(smallViewPort ? { position: 'relative' } : {}),
       ...sizeVariants[spacing!],
       ...inverseStyle
     }

packages/ui-modal/src/Modal/README.md

@@ -1180,6 +1180,7 @@ type: embed
     <Figure.Item>When a user closes a modal, focus must return to a logical place within the page. This is usually the element that triggered opening the modal</Figure.Item>
     <Figure.Item>Modals should be able to be closed by clicking away, esc key and/or a close button</Figure.Item>
     <Figure.Item>We recommend that modals begin with a heading (typically H2)</Figure.Item>
+    <Figure.Item>The Modal's header currently becomes non-sticky when the window height is too small, improving navigation of the Modal.Body, e.g., at higher zoom levels</Figure.Item>
   </Figure>
 </Guidelines>
 ```

packages/ui-modal/src/Modal/index.tsx

@@ -28,6 +28,7 @@ import { Children, Component, isValidElement, ReactElement } from 'react'
 import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils'
 import { createChainedFunction } from '@instructure/ui-utils'
 import { testable } from '@instructure/ui-testable'
+import { canUseDOM } from '@instructure/ui-dom-utils'
 
 import { Transition } from '@instructure/ui-motion'
 import { Portal } from '@instructure/ui-portal'
@@ -86,7 +87,8 @@ class Modal extends Component<ModalProps, ModalState> {
 
     this.state = {
       transitioning: false,
-      open: props.open ?? false
+      open: props.open ?? false,
+      windowHeight: 99999
     }
   }
 
@@ -101,6 +103,7 @@ class Modal extends Component<ModalProps, ModalState> {
 
   componentDidMount() {
     this.props.makeStyles?.()
+    window.addEventListener('resize', this.updateHeight)
   }
 
   componentDidUpdate(prevProps: ModalProps) {
@@ -110,6 +113,14 @@ class Modal extends Component<ModalProps, ModalState> {
     this.props.makeStyles?.()
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateHeight)
+  }
+
+  updateHeight = () => {
+    this.setState({ windowHeight: window.innerHeight })
+  }
+
   get defaultFocusElement() {
     return this.props.defaultFocusElement
   }
@@ -146,21 +157,84 @@ class Modal extends Component<ModalProps, ModalState> {
     }
   }
 
+  getWindowHeightInRem = (): number => {
+    if (!canUseDOM) {
+      return Infinity
+    }
+    const rootFontSize = parseFloat(
+      getComputedStyle(document.documentElement)?.fontSize || '16'
+    )
+    if (isNaN(rootFontSize) || rootFontSize <= 0) {
+      return Infinity
+    }
+    return window.innerHeight / rootFontSize
+  }
+
   renderChildren() {
     const { children, variant, overflow } = this.props
 
+    // header should be non-sticky for small viewport height (ca. 320px)
+    if (this.getWindowHeightInRem() <= 20) {
+      return this.renderForSmallViewportHeight()
+    }
+
     return Children.map(children as ReactElement, (child) => {
       if (!child) return // ignore null, falsy children
+      return this.cloneChildWithProps(child, variant, overflow)
+    })
+  }
+
+  renderForSmallViewportHeight() {
+    const { children, variant, overflow, styles } = this.props
 
+    const headerAndBody: React.ReactNode[] = []
+
+    const childrenArray = Children.toArray(children)
+
+    // Separate header and body elements
+    const filteredChildren = childrenArray.filter((child) => {
       if (isValidElement(child)) {
-        return safeCloneElement(child, {
-          variant: variant,
-          overflow: (child?.props as { overflow: string })?.overflow || overflow
-        })
-      } else {
-        return child
+        if (child.type === Modal.Header || child.type === Modal.Body) {
+          if (child.type === Modal.Header) {
+            const headerWithProp = safeCloneElement(child, {
+              smallViewPort: true
+            })
+            headerAndBody.push(headerWithProp)
+          } else {
+            headerAndBody.push(child)
+          }
+          return false
+        }
       }
+      return true
     })
+
+    // Adds the <div> to the beginning of the filteredChildren array
+    if (headerAndBody.length > 0) {
+      filteredChildren.unshift(
+        <div css={styles?.joinedHeaderAndBody}>{headerAndBody}</div>
+      )
+    }
+
+    return Children.map(filteredChildren as ReactElement[], (child) => {
+      if (!child) return // ignore null, falsy children
+      return this.cloneChildWithProps(child, variant, overflow)
+    })
+  }
+
+  cloneChildWithProps(
+    child: React.ReactNode,
+    variant: string | undefined,
+    overflow: string | undefined
+  ) {
+    if (isValidElement(child)) {
+      return safeCloneElement(child, {
+        variant: variant,
+        overflow: (child?.props as { overflow: string })?.overflow || overflow
+      })
+    } else {
+      return child
+    }
   }
 
   renderDialog(

packages/ui-modal/src/Modal/props.ts

@@ -189,11 +189,14 @@ type ModalProps = ModalOwnProps &
   WithStyleProps<ModalTheme, ModalStyle> &
   OtherHTMLAttributes<ModalOwnProps>
 
-type ModalStyle = ComponentStyle<'modal' | 'constrainContext'>
+type ModalStyle = ComponentStyle<
+  'modal' | 'constrainContext' | 'joinedHeaderAndBody'
+>
 
 type ModalState = {
   transitioning: boolean
   open: boolean
+  windowHeight: number
 }
 
 const propTypes: PropValidators<PropKeys> = {

packages/ui-modal/src/Modal/styles.ts

@@ -108,6 +108,10 @@ const generateStyle = (
       position: 'relative',
       width: '100%',
       height: '100%'
+    },
+    joinedHeaderAndBody: {
+      borderRadius: componentTheme.borderRadius,
+      overflowY: 'scroll'
     }
   }
 }