@instructure/ui-heading 11.7.4-snapshot-102 → 11.7.4-snapshot-105

package/CHANGELOG.md

@@ -3,12 +3,13 @@
 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-102](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-102) (2026-07-14)
+## [11.7.4-snapshot-105](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-105) (2026-07-15)
 
 
 ### Features
 
 * **many:** remove deprecated v2 items ([eaf8876](https://github.com/instructure/instructure-ui/commit/eaf88767c9beb95c4e09ee5705c387dfd79e4cb7))
+* **many:** support current spacing tokens in the margin prop for v2 components ([1b47c5f](https://github.com/instructure/instructure-ui/commit/1b47c5f23eaa60b532cdfd53c39bd71f0cf51aaa))
 
 
 ### BREAKING CHANGES

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-heading",
-  "version": "11.7.4-snapshot-102",
+  "version": "11.7.4-snapshot-105",
   "description": "A component for creating typographic headings",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,20 +15,20 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/emotion": "11.7.4-snapshot-102",
-    "@instructure/ui-icons": "11.7.4-snapshot-102",
-    "@instructure/shared-types": "11.7.4-snapshot-102",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-102",
-    "@instructure/console": "11.7.4-snapshot-102",
-    "@instructure/ui-view": "11.7.4-snapshot-102",
-    "@instructure/ui-themes": "11.7.4-snapshot-102"
+    "@instructure/console": "11.7.4-snapshot-105",
+    "@instructure/emotion": "11.7.4-snapshot-105",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-105",
+    "@instructure/ui-icons": "11.7.4-snapshot-105",
+    "@instructure/shared-types": "11.7.4-snapshot-105",
+    "@instructure/ui-themes": "11.7.4-snapshot-105",
+    "@instructure/ui-view": "11.7.4-snapshot-105"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "vitest": "^4.1.9",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-102",
-    "@instructure/ui-axe-check": "11.7.4-snapshot-102"
+    "@instructure/ui-axe-check": "11.7.4-snapshot-105",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-105"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Heading/v2/README.md

@@ -13,7 +13,7 @@ Variant covers almost all use cases for headings on pages. Their name reflects t
 type: embed
 ---
 <Alert variant="info">
-  <List margin="0 0 medium">
+  <List margin="0 0 general.spaceXl">
     <List.Item>For legacy reasons, each <code>variant</code> has a default <code>level</code> set. This is not the recommended way and will be removed in a later major release. Please always specify the <code>level</code>!</List.Item>
     <List.Item>When <code>variant</code> is set the <code>as</code> prop is ignored</List.Item>
     <List.Item>A11Y GUIDELINE: There can be only one <code>h1</code> tag in a page</List.Item>
@@ -71,7 +71,7 @@ The `variant` and `level` props sets its appearance in this order.
 type: example
 ---
 <div>
-  <Heading level="h1" as="h3" margin="0 0 x-small">This renders as <code>&lt;h3&gt;</code></Heading>
+  <Heading level="h1" as="h3" margin="0 0 general.spaceSm">This renders as <code>&lt;h3&gt;</code></Heading>
 </div>
 ```
 
@@ -123,7 +123,7 @@ add either `top` or `bottom` borders to your heading.
 type: example
 ---
 <div>
-  <Heading margin="0 0 medium" border="bottom">I have a bottom border</Heading>
+  <Heading margin="0 0 general.spaceXl" border="bottom">I have a bottom border</Heading>
   <Heading border="top">I have a top border</Heading>
 </div>
 ```

package/src/Heading/v2/props.ts

@@ -75,9 +75,9 @@ type HeadingOwnProps = {
    */
   as?: AsElementType
   /**
-   * 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
   /**