@instructure/ui-alerts 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
@@ -11,6 +11,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **ui-motion,ui-alerts:** capture child DOM via elementRef in Transition to avoid React 'ref is not a prop' warning ([aaa4a58](https://github.com/instructure/instructure-ui/commit/aaa4a58c4fd8f0d678972a4dea6f2d7c3faaed46))
 
 
+### 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-alerts",
-  "version": "11.7.4-snapshot-103",
+  "version": "11.7.4-snapshot-106",
   "description": "An alert component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,26 +16,26 @@
   "dependencies": {
     "@babel/runtime": "^7.29.7",
     "keycode": "^2",
-    "@instructure/emotion": "11.7.4-snapshot-103",
-    "@instructure/console": "11.7.4-snapshot-103",
-    "@instructure/ui-buttons": "11.7.4-snapshot-103",
-    "@instructure/ui-a11y-content": "11.7.4-snapshot-103",
-    "@instructure/shared-types": "11.7.4-snapshot-103",
-    "@instructure/ui-icons": "11.7.4-snapshot-103",
-    "@instructure/ui-motion": "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/console": "11.7.4-snapshot-106",
+    "@instructure/emotion": "11.7.4-snapshot-106",
+    "@instructure/shared-types": "11.7.4-snapshot-106",
+    "@instructure/ui-a11y-content": "11.7.4-snapshot-106",
+    "@instructure/ui-buttons": "11.7.4-snapshot-106",
+    "@instructure/ui-icons": "11.7.4-snapshot-106",
+    "@instructure/ui-motion": "11.7.4-snapshot-106",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-106",
+    "@instructure/ui-themes": "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-axe-check": "11.7.4-snapshot-103",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-103",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-103",
-    "@instructure/ui-scripts": "11.7.4-snapshot-103"
+    "@instructure/ui-axe-check": "11.7.4-snapshot-106",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-106",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-106",
+    "@instructure/ui-scripts": "11.7.4-snapshot-106"
   },
   "peerDependencies": {
     "react": ">=18 <=19",

package/src/Alert/v2/README.md

@@ -24,7 +24,7 @@ type: example
   <Alert
     variant="success"
     renderCloseButtonLabel="Close"
-    margin="small"
+    margin="general.spaceMd"
     transition="none"
     variantScreenReaderLabel="Success, "
   >
@@ -33,7 +33,7 @@ type: example
   <Alert
     variant="info"
     renderCloseButtonLabel="Close"
-    margin="small"
+    margin="general.spaceMd"
     variantScreenReaderLabel="Information, "
   >
     Sample info text. I will fade out if you close me.
@@ -41,7 +41,7 @@ type: example
   <Alert
     variant="error"
     renderCloseButtonLabel="Close"
-    margin="small"
+    margin="general.spaceMd"
     variantScreenReaderLabel="Error, "
   >
     Sample error text that continues for a while
@@ -51,7 +51,7 @@ type: example
   </Alert>
   <Alert
     variant="warning"
-    margin="small"
+    margin="general.spaceMd"
     variantScreenReaderLabel="Warning, "
   >
     Sample warning text. This alert is not dismissible and cannot be closed.
@@ -67,7 +67,7 @@ type: example
 ---
 <Alert
   variant="info"
-  margin="small"
+  margin="general.spaceMd"
   timeout={5000}
   variantScreenReaderLabel="Information, "
 >
@@ -119,14 +119,14 @@ const Example = () => {
       <Button onClick={addAlert}>Add Alert</Button>
       {alerts.map((alert) => {
         return (
-          <View key={alert.key} display="block" margin="small 0">
+          <View key={alert.key} display="block" margin="general.spaceMd 0">
             <Alert
               variant={alert.variant}
               renderCloseButtonLabel="Close"
               onDismiss={() => closeAlert(alert.key)}
               liveRegion={() => document.getElementById('flash-messages')}
               liveRegionPoliteness={alert.politeness}
-              margin="small 0"
+              margin="general.spaceMd 0"
             >
               This is {alert.politeness === 'polite' ? 'a' : 'an'}{' '}
               {alert.politeness} {alert.variant} alert
@@ -164,7 +164,7 @@ const Example = () => {
   return (
     <div>
       <Button onClick={changeMessage}>Change Message</Button>
-      <Button onClick={clearMessage} margin="0 0 0 small">
+      <Button onClick={clearMessage} margin="0 0 0 general.spaceMd">
         Clear Message
       </Button>
       <Alert
@@ -194,13 +194,13 @@ type: example
     padding="small medium"
     borderWidth="small"
     borderRadius="small"
-    margin="x-small 0"
+    margin="general.spaceSm 0"
   >
     {lorem.paragraph()}
   </View>
   <Alert
     variant="info"
-    margin="x-small 0"
+    margin="general.spaceSm 0"
     renderCloseButtonLabel="Close"
     hasShadow={false}
   >
@@ -212,7 +212,7 @@ type: example
     padding="small medium"
     borderWidth="small"
     borderRadius="small"
-    margin="x-small 0"
+    margin="general.spaceSm 0"
   >
     {lorem.paragraph()}
   </View>

package/src/Alert/v2/props.ts

@@ -79,9 +79,9 @@ type AlertOwnProps = {
    */
   timeout?: number
   /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   * Valid values are `0`, `none`, `auto`, and Spacing token values,
+   * see https://instructure.design/layout-spacing. Apply these values via
+   * familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
    */
   margin?: Spacing
   /**