Fullscreen modal margin

packages/ui-dialog/src/Dialog/index.tsx

@@ -172,7 +172,7 @@ class Dialog extends Component<DialogProps> {
           role === 'dialog' && this.props.shouldContainFocus ? true : undefined
         }
         className={this.props.className} // TODO in V2 remove className, there is no usage of it.
-        style={{ borderRadius: 'inherit' }} // ensure the dialog inherits border radius from View
+        style={{ borderRadius: 'inherit', ...this.props.style }} // ensure the dialog inherits border radius from View
         ref={this.getRef}
       >
         {this.props.children}

packages/ui-dialog/src/Dialog/props.ts

@@ -41,6 +41,11 @@ type DialogOwnProps = {
    */
   as?: AsElementType
   display?: 'auto' | 'block' | 'inline-block'
+  /**
+   * Inline styles applied to the root element. Merged with the default
+   * `borderRadius: inherit` so consumers can override it.
+   */
+  style?: React.CSSProperties
   /**
    * The aria-label to read for screen reader. When specified, it will automatically set role="dialog".
    */
@@ -77,7 +82,8 @@ const allowedProps: AllowedPropKeys = [
   'shouldCloseOnDocumentClick',
   'shouldCloseOnEscape',
   'shouldFocusOnOpen',
-  'elementRef'
+  'elementRef',
+  'style'
 ]
 
 export type { DialogProps }

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

@@ -84,6 +84,7 @@ class Modal extends Component<ModalProps, ModalState> {
       transitioning: false,
       open: props.open ?? false,
       windowHeight: 99999,
+      windowWidth: 99999,
       bodyScrollAriaLabel: undefined
     }
   }
@@ -99,7 +100,7 @@ class Modal extends Component<ModalProps, ModalState> {
 
   componentDidMount() {
     this.props.makeStyles?.()
-    window.addEventListener('resize', this.updateHeight)
+    window.addEventListener('resize', this.updateSize)
   }
 
   componentDidUpdate(prevProps: ModalProps) {
@@ -110,11 +111,14 @@ class Modal extends Component<ModalProps, ModalState> {
   }
 
   componentWillUnmount() {
-    window.removeEventListener('resize', this.updateHeight)
+    window.removeEventListener('resize', this.updateSize)
   }
 
-  updateHeight = () => {
-    this.setState({ windowHeight: window.innerHeight })
+  updateSize = () => {
+    this.setState({
+      windowHeight: window.innerHeight,
+      windowWidth: window.innerWidth
+    })
   }
 
   get defaultFocusElement() {
@@ -213,13 +217,17 @@ class Modal extends Component<ModalProps, ModalState> {
       shouldCloseOnDocumentClick,
       shouldReturnFocus,
       liveRegion,
-      size,
       constrain,
       as,
+      size,
       styles
     } = this.props
 
     const isFullScreen = size === 'fullscreen'
+    const isSmallScreen = this.state.windowWidth < 480 // 30em at 16px base
+    const borderRadius =
+      isFullScreen && isSmallScreen ? '0' : (styles?.borderRadius as string) // fullscreen modals on small screens remove border radius so the modal fills edge-to-edge
+
     const dialog = (
       <Dialog
         {...passthroughProps(props)}
@@ -234,6 +242,7 @@ class Modal extends Component<ModalProps, ModalState> {
         liveRegion={liveRegion}
         onDismiss={onDismiss}
         css={styles?.modal}
+        style={{ borderRadius }}
         ref={this.contentRef}
         // aria-modal="true" see VO bug https://bugs.webkit.org/show_bug.cgi?id=174667
       >
@@ -242,13 +251,7 @@ class Modal extends Component<ModalProps, ModalState> {
     )
 
     return (
-      <Mask
-        placement={this.maskPlacement}
-        fullscreen={constrain === 'window'}
-        themeOverride={
-          isFullScreen ? { borderRadius: '0em', borderWidth: '0em' } : {}
-        }
-      >
+      <Mask placement={this.maskPlacement} fullscreen={constrain === 'window'}>
         {dialog}
       </Mask>
     )

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

@@ -184,13 +184,14 @@ type ModalProps = ModalOwnProps &
   OtherHTMLAttributes<ModalOwnProps>
 
 type ModalStyle = ComponentStyle<
-  'modal' | 'constrainContext' | 'joinedHeaderAndBody'
+  'modal' | 'constrainContext' | 'joinedHeaderAndBody' | 'borderRadius'
 >
 
 type ModalState = {
   transitioning: boolean
   open: boolean
   windowHeight: number
+  windowWidth: number
   /**
    * The `aria-label` on the Modal's body if it's scrollable.
    */

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

@@ -71,11 +71,14 @@ const generateStyle = (
     },
     fullscreen: {
       flex: 1,
-      width: '100%',
-      height: '100%',
-      boxShadow: 'none',
-      border: 'none',
-      borderRadius: 0
+      margin: componentTheme.fullScreenMargin,
+      '@media (max-width: 30em)': {
+        // small breakpoint = 480px
+        margin: 0,
+        boxShadow: 'none',
+        border: 'none',
+        borderRadius: 0
+      }
     }
   }
   const backgroundStyles =
@@ -123,7 +126,8 @@ const generateStyle = (
         overflowY: 'auto',
         maxHeight: '20rem'
       }
-    }
+    },
+    borderRadius: componentTheme.borderRadius
   }
 }