@instructure/ui-table 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-table:** fix caption for table to be responsive to sorting ([aac2b17](https://github.com/instructure/instructure-ui/commit/aac2b1790f970a1e8e2d959723eb0e4248105dd2))
 
 
+### 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-table",
-  "version": "11.7.4-snapshot-103",
+  "version": "11.7.4-snapshot-105",
   "description": "A styled HTML table component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,25 +15,25 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/console": "11.7.4-snapshot-103",
-    "@instructure/emotion": "11.7.4-snapshot-103",
-    "@instructure/shared-types": "11.7.4-snapshot-103",
-    "@instructure/ui-a11y-content": "11.7.4-snapshot-103",
-    "@instructure/ui-icons": "11.7.4-snapshot-103",
-    "@instructure/ui-simple-select": "11.7.4-snapshot-103",
-    "@instructure/ui-themes": "11.7.4-snapshot-103",
-    "@instructure/ui-react-utils": "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-105",
+    "@instructure/emotion": "11.7.4-snapshot-105",
+    "@instructure/shared-types": "11.7.4-snapshot-105",
+    "@instructure/ui-a11y-content": "11.7.4-snapshot-105",
+    "@instructure/ui-icons": "11.7.4-snapshot-105",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-105",
+    "@instructure/ui-simple-select": "11.7.4-snapshot-105",
+    "@instructure/ui-themes": "11.7.4-snapshot-105",
+    "@instructure/ui-utils": "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",
     "@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-axe-check": "11.7.4-snapshot-105",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-105",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-105"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Table/v2/README.md

@@ -29,7 +29,7 @@ const Example = () => {
 
   const renderOptions = () => (
     <Flex alignItems="start">
-      <Flex.Item margin="small">
+      <Flex.Item margin="general.spaceMd">
         <RadioInputGroup
           name="layout"
           description="layout"
@@ -41,7 +41,7 @@ const Example = () => {
           <RadioInput label="stacked" value="stacked" />
         </RadioInputGroup>
       </Flex.Item>
-      <Flex.Item margin="small">
+      <Flex.Item margin="general.spaceMd">
         <Checkbox
           label="hover"
           checked={hover}
@@ -312,7 +312,7 @@ const SortableTable = ({ caption, headers, rows }) => {
                   }
                   name={`columnTextAlign_${headerId}`}
                   value={textAlign}
-                  margin="0 0 small"
+                  margin="0 0 general.spaceMd"
                   size="small"
                   onChange={(e, value) =>
                     handleColTextAlignChange(headerId, value)
@@ -346,7 +346,7 @@ const SortableTable = ({ caption, headers, rows }) => {
       {(props) => (
         <div>
           {props.layout !== 'stacked' && (
-            <View display="block" margin="0 0 medium">
+            <View display="block" margin="0 0 general.spaceXl">
               {renderOptions()}
             </View>
           )}
@@ -618,7 +618,7 @@ const PaginatedTable = ({
           variant="compact"
           labelNext="Next Page"
           labelPrev="Previous Page"
-          margin="large"
+          margin="general.space2xl"
         >
           {Array.from(Array(pageCount), (item, index) => (
             <Pagination.Page
@@ -792,7 +792,7 @@ const Example = () => {
 
   const renderOptions = () => (
     <Flex alignItems="start">
-      <Flex.Item margin="small">
+      <Flex.Item margin="general.spaceMd">
         <RadioInputGroup
           name="layout2"
           description="layout2"
@@ -804,7 +804,7 @@ const Example = () => {
           <RadioInput label="stacked" value="stacked" />
         </RadioInputGroup>
       </Flex.Item>
-      <Flex.Item margin="small">
+      <Flex.Item margin="general.spaceMd">
         <Checkbox
           label="hover"
           checked={hover}
@@ -902,7 +902,7 @@ const Example = () => {
 
   const renderOptions = () => (
     <Flex alignItems="start">
-      <Flex.Item margin="small">
+      <Flex.Item margin="general.spaceMd">
         <RadioInputGroup
           name="Layout"
           description="Layout"
@@ -913,7 +913,7 @@ const Example = () => {
           <RadioInput label="fixed" value="fixed" />
         </RadioInputGroup>
       </Flex.Item>
-      <Flex.Item margin="small">
+      <Flex.Item margin="general.spaceMd">
         <Checkbox
           label="hover"
           checked={hover}
@@ -1045,7 +1045,7 @@ const Example = () => {
 
   const renderOptions = () => (
     <Flex alignItems="start">
-      <Flex.Item margin="small">
+      <Flex.Item margin="general.spaceMd">
         <RadioInputGroup
           name="customStackedLayout"
           description="Layout"
@@ -1057,7 +1057,7 @@ const Example = () => {
           <RadioInput label="stacked" value="stacked" />
         </RadioInputGroup>
       </Flex.Item>
-      <Flex.Item margin="small">
+      <Flex.Item margin="general.spaceMd">
         <Checkbox
           label="hover"
           checked={hover}

package/src/Table/v2/props.ts

@@ -47,9 +47,9 @@ type TableOwnProps = {
    */
   caption: TableCaption
   /**
-   * 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
   /**