@instructure/ui-modal 11.7.4-snapshot-108 → 11.7.4-snapshot-111

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-108](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-108) (2026-07-16)
+## [11.7.4-snapshot-111](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-111) (2026-07-16)
 
 
 ### Bug Fixes
@@ -15,6 +15,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Features
 
 * **many:** support current spacing tokens in the margin prop for v2 components ([1b47c5f](https://github.com/instructure/instructure-ui/commit/1b47c5f23eaa60b532cdfd53c39bd71f0cf51aaa))
+* **ui-modal:** on larger screens, inset the fullscreen modal from the viewport edge for a11y ([e36b2b5](https://github.com/instructure/instructure-ui/commit/e36b2b586ce24b38d77144f7118169f9249bad29))
 
 
 

package/es/Modal/v2/styles.js

@@ -34,12 +34,13 @@ import { boxShadowObjectsToCSSString } from '@instructure/ui-themes';
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props) => {
+const generateStyle = (componentTheme, props, sharedTokens) => {
   const {
     size,
     variant,
     overflow
   } = props;
+  const boxShadow = boxShadowObjectsToCSSString(componentTheme.boxShadow);
   const commonSizeStyleExceptForFullscreen = {
     maxWidth: '95%',
     maxHeight: '95%',
@@ -71,7 +72,17 @@ const generateStyle = (componentTheme, props) => {
       height: '100%',
       boxShadow: 'none',
       border: 'none',
-      borderRadius: 0
+      borderRadius: 0,
+      // On larger screens, inset the fullscreen modal from the viewport edge
+      // for a11y: the Mask flex-centers it, so `flex: 1` + `alignSelf: stretch`
+      // (auto height) gap it evenly via the margin; corners/shadow restored too.
+      [`@media screen and (min-width: ${sharedTokens.breakpoints.md})`]: {
+        margin: componentTheme.fullScreenMargin,
+        height: 'auto',
+        alignSelf: 'stretch',
+        borderRadius: componentTheme.borderRadius,
+        boxShadow
+      }
     }
   };
   const backgroundStyles = variant === 'inverse' ? {
@@ -92,7 +103,7 @@ const generateStyle = (componentTheme, props) => {
       flexDirection: 'column',
       position: 'relative',
       boxSizing: 'border-box',
-      boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow),
+      boxShadow,
       borderRadius: componentTheme.borderRadius,
       overflow: 'hidden',
       ...sizeStyles[size],

package/lib/Modal/v2/styles.js

@@ -40,12 +40,13 @@ var _uiThemes = require("@instructure/ui-themes");
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props) => {
+const generateStyle = (componentTheme, props, sharedTokens) => {
   const {
     size,
     variant,
     overflow
   } = props;
+  const boxShadow = (0, _uiThemes.boxShadowObjectsToCSSString)(componentTheme.boxShadow);
   const commonSizeStyleExceptForFullscreen = {
     maxWidth: '95%',
     maxHeight: '95%',
@@ -77,7 +78,17 @@ const generateStyle = (componentTheme, props) => {
       height: '100%',
       boxShadow: 'none',
       border: 'none',
-      borderRadius: 0
+      borderRadius: 0,
+      // On larger screens, inset the fullscreen modal from the viewport edge
+      // for a11y: the Mask flex-centers it, so `flex: 1` + `alignSelf: stretch`
+      // (auto height) gap it evenly via the margin; corners/shadow restored too.
+      [`@media screen and (min-width: ${sharedTokens.breakpoints.md})`]: {
+        margin: componentTheme.fullScreenMargin,
+        height: 'auto',
+        alignSelf: 'stretch',
+        borderRadius: componentTheme.borderRadius,
+        boxShadow
+      }
     }
   };
   const backgroundStyles = variant === 'inverse' ? {
@@ -98,7 +109,7 @@ const generateStyle = (componentTheme, props) => {
       flexDirection: 'column',
       position: 'relative',
       boxSizing: 'border-box',
-      boxShadow: (0, _uiThemes.boxShadowObjectsToCSSString)(componentTheme.boxShadow),
+      boxShadow,
       borderRadius: componentTheme.borderRadius,
       overflow: 'hidden',
       ...sizeStyles[size],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-modal",
-  "version": "11.7.4-snapshot-108",
+  "version": "11.7.4-snapshot-111",
   "description": "A component for displaying content in a dialog overlay",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,28 +15,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/console": "11.7.4-snapshot-108",
-    "@instructure/emotion": "11.7.4-snapshot-108",
-    "@instructure/shared-types": "11.7.4-snapshot-108",
-    "@instructure/ui-buttons": "11.7.4-snapshot-108",
-    "@instructure/ui-dialog": "11.7.4-snapshot-108",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-108",
-    "@instructure/ui-motion": "11.7.4-snapshot-108",
-    "@instructure/ui-portal": "11.7.4-snapshot-108",
-    "@instructure/ui-overlays": "11.7.4-snapshot-108",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-108",
-    "@instructure/ui-themes": "11.7.4-snapshot-108",
-    "@instructure/ui-view": "11.7.4-snapshot-108",
-    "@instructure/ui-utils": "11.7.4-snapshot-108"
+    "@instructure/console": "11.7.4-snapshot-111",
+    "@instructure/shared-types": "11.7.4-snapshot-111",
+    "@instructure/ui-dialog": "11.7.4-snapshot-111",
+    "@instructure/emotion": "11.7.4-snapshot-111",
+    "@instructure/ui-buttons": "11.7.4-snapshot-111",
+    "@instructure/ui-dom-utils": "11.7.4-snapshot-111",
+    "@instructure/ui-motion": "11.7.4-snapshot-111",
+    "@instructure/ui-overlays": "11.7.4-snapshot-111",
+    "@instructure/ui-portal": "11.7.4-snapshot-111",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-111",
+    "@instructure/ui-themes": "11.7.4-snapshot-111",
+    "@instructure/ui-utils": "11.7.4-snapshot-111",
+    "@instructure/ui-view": "11.7.4-snapshot-111"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^4.1.9",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-108",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-108",
-    "@instructure/ui-position": "11.7.4-snapshot-108"
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-111",
+    "@instructure/ui-position": "11.7.4-snapshot-111",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-111"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Modal/v2/README.md

@@ -148,8 +148,8 @@ const Example = () => {
         background="primary-inverse"
         margin="general.spaceXl auto none"
         display="block"
-        width="25rem"
-        height="25rem"
+        width="30rem"
+        height="30rem"
         borderWidth="large"
         id="constrainExample"
       ></View>
@@ -464,6 +464,9 @@ const Example = () => {
       <Modal
         open={open}
         size={smallViewport ? 'fullscreen' : 'small'}
+        // Simulate real small-screen behavior by themeOverride.
+        // On actual small screens this happens automatically, so no theme override is needed.
+        themeOverride={smallViewport ? { fullScreenMargin: '0', borderRadius: '0' } : undefined}
         onDismiss={(event) => {
           if (event.target.id !== 'toggleViewportButton') {
             setOpen(false)

package/src/Modal/v2/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import { boxShadowObjectsToCSSString } from '@instructure/ui-themes'
-import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
 import type { ModalProps, ModalStyle } from './props'
 
 /**
@@ -39,9 +39,11 @@ import type { ModalProps, ModalStyle } from './props'
  */
 const generateStyle = (
   componentTheme: ReturnType<NewComponentTypes['Modal']>,
-  props: ModalProps
+  props: ModalProps,
+  sharedTokens: SharedTokens
 ): ModalStyle => {
   const { size, variant, overflow } = props
+  const boxShadow = boxShadowObjectsToCSSString(componentTheme.boxShadow)
 
   const commonSizeStyleExceptForFullscreen = {
     maxWidth: '95%',
@@ -75,7 +77,17 @@ const generateStyle = (
       height: '100%',
       boxShadow: 'none',
       border: 'none',
-      borderRadius: 0
+      borderRadius: 0,
+      // On larger screens, inset the fullscreen modal from the viewport edge
+      // for a11y: the Mask flex-centers it, so `flex: 1` + `alignSelf: stretch`
+      // (auto height) gap it evenly via the margin; corners/shadow restored too.
+      [`@media screen and (min-width: ${sharedTokens.breakpoints.md})`]: {
+        margin: componentTheme.fullScreenMargin,
+        height: 'auto',
+        alignSelf: 'stretch',
+        borderRadius: componentTheme.borderRadius,
+        boxShadow
+      }
     }
   }
   const backgroundStyles =
@@ -100,7 +112,7 @@ const generateStyle = (
       flexDirection: 'column',
       position: 'relative',
       boxSizing: 'border-box',
-      boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow),
+      boxShadow,
       borderRadius: componentTheme.borderRadius,
       overflow: 'hidden',
       ...sizeStyles[size!],