@instructure/ui-tabs 11.7.4-snapshot-103 → 11.7.4-snapshot-105

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-105](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-105) (2026-07-15)
 
 
 ### Bug Fixes
@@ -11,6 +11,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **ui-tabs:** fix focusring to make it more distinct ([c2e4eb0](https://github.com/instructure/instructure-ui/commit/c2e4eb09c90f6e71d5a61599de8cd5d3ac41019f))
 
 
+### 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-tabs",
-  "version": "11.7.4-snapshot-103",
+  "version": "11.7.4-snapshot-105",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,28 +16,28 @@
   "dependencies": {
     "@babel/runtime": "^7.29.7",
     "keycode": "^2",
-    "@instructure/console": "11.7.4-snapshot-103",
-    "@instructure/debounce": "11.7.4-snapshot-103",
-    "@instructure/emotion": "11.7.4-snapshot-103",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-103",
-    "@instructure/shared-types": "11.7.4-snapshot-103",
-    "@instructure/ui-focusable": "11.7.4-snapshot-103",
-    "@instructure/ui-motion": "11.7.4-snapshot-103",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-103",
-    "@instructure/ui-utils": "11.7.4-snapshot-103",
-    "@instructure/ui-i18n": "11.7.4-snapshot-103",
-    "@instructure/ui-view": "11.7.4-snapshot-103",
-    "@instructure/ui-themes": "11.7.4-snapshot-103",
-    "@instructure/uid": "11.7.4-snapshot-103"
+    "@instructure/emotion": "11.7.4-snapshot-105",
+    "@instructure/console": "11.7.4-snapshot-105",
+    "@instructure/shared-types": "11.7.4-snapshot-105",
+    "@instructure/ui-dom-utils": "11.7.4-snapshot-105",
+    "@instructure/debounce": "11.7.4-snapshot-105",
+    "@instructure/ui-i18n": "11.7.4-snapshot-105",
+    "@instructure/ui-focusable": "11.7.4-snapshot-105",
+    "@instructure/ui-motion": "11.7.4-snapshot-105",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-105",
+    "@instructure/ui-utils": "11.7.4-snapshot-105",
+    "@instructure/ui-view": "11.7.4-snapshot-105",
+    "@instructure/uid": "11.7.4-snapshot-105",
+    "@instructure/ui-themes": "11.7.4-snapshot-105"
   },
   "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-color-utils": "11.7.4-snapshot-103",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-103"
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-105",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-105",
+    "@instructure/ui-axe-check": "11.7.4-snapshot-105"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Tabs/v2/README.md

@@ -17,7 +17,7 @@ const Example = () => {
 
   return (
     <Tabs
-      margin="large auto"
+      margin="general.space2xl auto"
       padding="medium"
       onRequestTabChange={handleTabChange}
     >
@@ -139,7 +139,7 @@ const Example = () => {
 
   return (
     <Tabs
-      margin="large auto"
+      margin="general.space2xl auto"
       padding="medium"
       onRequestTabChange={handleTabChange}
       tabOverflow="scroll"
@@ -249,7 +249,7 @@ const Example = () => {
 
   return (
     <>
-      <View display="block" margin="none none medium">
+      <View display="block" margin="none none general.spaceXl">
         <RadioInputGroup
           name="tabsHeightOptions"
           defaultValue="fixHeight: 100%"
@@ -271,7 +271,7 @@ const Example = () => {
 
       <View {...containerProps}>
         <Tabs
-          margin="large auto"
+          margin="general.space2xl auto"
           padding="medium"
           onRequestTabChange={handleTabChange}
           {...heightOptions[heightOption]}
@@ -345,7 +345,7 @@ const Outlet = () => {
 
   return (
     <div>
-      <Heading level="h1" as="h1" margin="0 0 x-small">
+      <Heading level="h1" as="h1" margin="0 0 general.spaceSm">
         {show ? 'Hello Developer' : 'Simulating network call...'}
       </Heading>
       {show ? (
@@ -373,7 +373,7 @@ const Example = () => {
 
   return (
     <Tabs
-      margin="large auto"
+      margin="general.space2xl auto"
       padding="medium"
       onRequestTabChange={handleTabChange}
     >
@@ -439,7 +439,7 @@ const Example = () => {
 
   return (
     <Tabs
-      margin="large auto"
+      margin="general.space2xl auto"
       padding="medium"
       onRequestTabChange={handleTabChange}
     >
@@ -504,7 +504,7 @@ const Example = () => {
 
   return (
     <Tabs
-      margin="large auto"
+      margin="general.space2xl auto"
       padding="medium"
       onRequestTabChange={handleTabChange}
     >

package/src/Tabs/v2/props.ts

@@ -56,9 +56,9 @@ type TabsOwnProps = {
   minHeight?: string | number
   fixHeight?: string | 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
   /**