@instructure/ui-modal 11.7.4-snapshot-103 → 11.7.4-snapshot-106

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-103](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-103) (2026-07-14)
+## [11.7.4-snapshot-106](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-106) (2026-07-16)
 
 
 ### Bug Fixes
@@ -12,6 +12,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **ui-modal:** skip Modal.Body tab stop when it has focusable children ([25e4261](https://github.com/instructure/instructure-ui/commit/25e42617898fa6584da0b33eed589e2710875570))
 
 
+### Features
+
+* **many:** support current spacing tokens in the margin prop for v2 components ([1b47c5f](https://github.com/instructure/instructure-ui/commit/1b47c5f23eaa60b532cdfd53c39bd71f0cf51aaa))
+
+
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-modal",
-  "version": "11.7.4-snapshot-103",
+  "version": "11.7.4-snapshot-106",
   "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-103",
-    "@instructure/shared-types": "11.7.4-snapshot-103",
-    "@instructure/emotion": "11.7.4-snapshot-103",
-    "@instructure/ui-dialog": "11.7.4-snapshot-103",
-    "@instructure/ui-buttons": "11.7.4-snapshot-103",
-    "@instructure/ui-motion": "11.7.4-snapshot-103",
-    "@instructure/ui-portal": "11.7.4-snapshot-103",
-    "@instructure/ui-overlays": "11.7.4-snapshot-103",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-103",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-103",
-    "@instructure/ui-themes": "11.7.4-snapshot-103",
-    "@instructure/ui-view": "11.7.4-snapshot-103",
-    "@instructure/ui-utils": "11.7.4-snapshot-103"
+    "@instructure/console": "11.7.4-snapshot-106",
+    "@instructure/ui-buttons": "11.7.4-snapshot-106",
+    "@instructure/shared-types": "11.7.4-snapshot-106",
+    "@instructure/ui-dialog": "11.7.4-snapshot-106",
+    "@instructure/emotion": "11.7.4-snapshot-106",
+    "@instructure/ui-dom-utils": "11.7.4-snapshot-106",
+    "@instructure/ui-motion": "11.7.4-snapshot-106",
+    "@instructure/ui-portal": "11.7.4-snapshot-106",
+    "@instructure/ui-overlays": "11.7.4-snapshot-106",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-106",
+    "@instructure/ui-themes": "11.7.4-snapshot-106",
+    "@instructure/ui-utils": "11.7.4-snapshot-106",
+    "@instructure/ui-view": "11.7.4-snapshot-106"
   },
   "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-103",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-103",
-    "@instructure/ui-position": "11.7.4-snapshot-103"
+    "@instructure/ui-color-utils": "11.7.4-snapshot-106",
+    "@instructure/ui-position": "11.7.4-snapshot-106",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-106"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Modal/v2/README.md

@@ -65,7 +65,7 @@ const Example = () => {
           <Text lineHeight="double">{fpo}</Text>
         </Modal.Body>
         <Modal.Footer>
-          <Button onClick={handleButtonClick} margin="0 x-small 0 0">
+          <Button onClick={handleButtonClick} margin="0 general.spaceSm 0 0">
             Close
           </Button>
           <Button color="primary" type="submit">
@@ -130,13 +130,13 @@ const Example = () => {
           <Heading>This Modal is constrained to a parent</Heading>
         </Modal.Header>
         <Modal.Body>
-          <View as="p" margin="none none small">
+          <View as="p" margin="none none general.spaceMd">
             <Text>{fpo}</Text>
           </View>
           <ModalAutoCompleteExample renderLabel="Choose a state" />
         </Modal.Body>
         <Modal.Footer spacing="compact">
-          <Button onClick={handleButtonClick} margin="0 x-small 0 0">
+          <Button onClick={handleButtonClick} margin="0 general.spaceSm 0 0">
             Close
           </Button>
           <Button onClick={handleButtonClick} color="primary" type="submit">
@@ -146,7 +146,7 @@ const Example = () => {
       </Modal>
       <View
         background="primary-inverse"
-        margin="medium auto none"
+        margin="general.spaceXl auto none"
         display="block"
         width="25rem"
         height="25rem"
@@ -340,7 +340,7 @@ const Example = () => {
           <RadioInput label="auto" value="auto" />
         </RadioInputGroup>
       </FormFieldGroup>
-      <Button onClick={handleButtonClick} margin="medium 0 0">
+      <Button onClick={handleButtonClick} margin="general.spaceXl 0 0">
         {open ? 'Close' : 'Open'} the Modal
       </Button>
       <Modal
@@ -358,7 +358,7 @@ const Example = () => {
           <Flex>
             <Flex.Item shouldGrow shouldShrink>
               <Flex alignItems="center">
-                <Flex.Item margin="0 x-small 0 0">
+                <Flex.Item margin="0 general.spaceSm 0 0">
                   <HeartInstUIIcon size={'xl'} />
                 </Flex.Item>
                 <Flex.Item shouldGrow shouldShrink>
@@ -375,7 +375,7 @@ const Example = () => {
                 withBorder={false}
                 renderIcon={<PrinterInstUIIcon/>}
                 screenReaderLabel="Print This Image"
-                margin="0 x-small 0 0"
+                margin="0 general.spaceSm 0 0"
               />
               <IconButton
                 color="primary-inverse"
@@ -383,7 +383,7 @@ const Example = () => {
                 withBorder={false}
                 renderIcon={<DownloadInstUIIcon/>}
                 screenReaderLabel="Download This Image"
-                margin="0 x-small 0 0"
+                margin="0 general.spaceSm 0 0"
               />
               <IconButton
                 color="primary-inverse"
@@ -456,7 +456,7 @@ const Example = () => {
       </Button>
       <Button
         onClick={toggleViewport}
-        margin="0 0 0 small"
+        margin="0 0 0 general.spaceMd"
         id="toggleViewportButton"
       >
         Toggle viewport
@@ -485,12 +485,12 @@ const Example = () => {
           )}
         </Modal.Header>
         <Modal.Body>
-          <View as="p" margin="none none small">
+          <View as="p" margin="none none general.spaceMd">
             <Text>{fpo}</Text>
           </View>
         </Modal.Body>
         <Modal.Footer spacing={smallViewport ? 'compact' : 'default'}>
-          <Button onClick={toggleOpen} margin="0 x-small 0 0">
+          <Button onClick={toggleOpen} margin="0 general.spaceSm 0 0">
             Close
           </Button>
           <Button onClick={toggleOpen} color="primary" type="submit">
@@ -501,7 +501,7 @@ const Example = () => {
 
       <View
         background="primary-inverse"
-        margin="medium auto none"
+        margin="general.spaceXl auto none"
         display="block"
         width={smallViewport ? '20rem' : '50rem'}
         height="37.5rem"
@@ -579,7 +579,7 @@ class Example extends React.Component {
           </WrappedModalBody>
           <View
             as="div"
-            margin="small"
+            margin="general.spaceMd"
             padding="large"
             background="primary">
             <Heading level='h3'>This View child does not inherit the variant and overflow properties</Heading>