@instructure/ui-checkbox 11.7.5 → 11.7.6-snapshot-11

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.7.6-snapshot-11](https://github.com/instructure/instructure-ui/compare/v11.7.5...v11.7.6-snapshot-11) (2026-08-31)
+
+
+### Features
+
+* **many:** add margin prop to v2 FormFieldGroup, CheckboxGroup, RadioInputGroup, Checkbox, RadioInput, RangeInput, Text, and ToggleButton ([fea952f](https://github.com/instructure/instructure-ui/commit/fea952f22e553745c299eeba1a2700dbb3b9d296))
+
+
+
+
+
 ## [11.7.5](https://github.com/instructure/instructure-ui/compare/v11.7.4...v11.7.5) (2026-08-25)
 
 

package/es/Checkbox/v2/props.js

@@ -22,5 +22,5 @@
  * SOFTWARE.
  */
 
-const allowedProps = ['label', 'id', 'value', 'messages', 'defaultChecked', 'checked', 'onChange', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseOver', 'onMouseOut', 'disabled', 'readOnly', 'indeterminate', 'size', 'variant', 'inline', 'labelPlacement', 'isRequired', 'inputRef'];
+const allowedProps = ['label', 'id', 'value', 'messages', 'defaultChecked', 'checked', 'onChange', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseOver', 'onMouseOut', 'disabled', 'readOnly', 'indeterminate', 'size', 'variant', 'inline', 'labelPlacement', 'isRequired', 'margin', 'inputRef'];
 export { allowedProps };

package/es/Checkbox/v2/styles.js

@@ -22,6 +22,8 @@
  * SOFTWARE.
  */
 
+import { calcSpacingFromShorthand } from '@instructure/emotion';
+
 /**
  * ---
  * private: true
@@ -33,11 +35,12 @@
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props) => {
+const generateStyle = (componentTheme, props, sharedTokens) => {
   const {
     inline,
     size,
-    variant
+    variant,
+    margin
   } = props;
 
   // toggleFullWidth calculation based on Toggle facade width (1.625rem * 1.5) and the marginInlineEnd (0.75rem)
@@ -68,6 +71,11 @@ const generateStyle = (componentTheme, props) => {
       label: 'checkbox',
       position: 'relative',
       width: '100%',
+      // Resolves spacing tokens (or custom CSS values) into a margin shorthand.
+      margin: calcSpacingFromShorthand(margin, {
+        ...sharedTokens.spacing,
+        ...sharedTokens.legacy.spacing
+      }),
       ...(inline && {
         display: 'inline-block',
         verticalAlign: 'middle',

package/es/CheckboxGroup/v2/props.js

@@ -22,5 +22,5 @@
  * SOFTWARE.
  */
 
-const allowedProps = ['name', 'description', 'defaultValue', 'value', 'onChange', 'disabled', 'readOnly', 'messages', 'children', 'size', 'layout'];
+const allowedProps = ['name', 'description', 'defaultValue', 'value', 'onChange', 'disabled', 'readOnly', 'messages', 'children', 'size', 'layout', 'margin'];
 export { allowedProps };

package/lib/Checkbox/v2/props.js

@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['label', 'id', 'value', 'messages', 'defaultChecked', 'checked', 'onChange', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseOver', 'onMouseOut', 'disabled', 'readOnly', 'indeterminate', 'size', 'variant', 'inline', 'labelPlacement', 'isRequired', 'inputRef'];
+const allowedProps = exports.allowedProps = ['label', 'id', 'value', 'messages', 'defaultChecked', 'checked', 'onChange', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseOver', 'onMouseOut', 'disabled', 'readOnly', 'indeterminate', 'size', 'variant', 'inline', 'labelPlacement', 'isRequired', 'margin', 'inputRef'];

package/lib/Checkbox/v2/styles.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _emotion = require("@instructure/emotion");
 /*
  * The MIT License (MIT)
  *
@@ -39,11 +40,12 @@ exports.default = void 0;
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props) => {
+const generateStyle = (componentTheme, props, sharedTokens) => {
   const {
     inline,
     size,
-    variant
+    variant,
+    margin
   } = props;
 
   // toggleFullWidth calculation based on Toggle facade width (1.625rem * 1.5) and the marginInlineEnd (0.75rem)
@@ -74,6 +76,11 @@ const generateStyle = (componentTheme, props) => {
       label: 'checkbox',
       position: 'relative',
       width: '100%',
+      // Resolves spacing tokens (or custom CSS values) into a margin shorthand.
+      margin: (0, _emotion.calcSpacingFromShorthand)(margin, {
+        ...sharedTokens.spacing,
+        ...sharedTokens.legacy.spacing
+      }),
       ...(inline && {
         display: 'inline-block',
         verticalAlign: 'middle',

package/lib/CheckboxGroup/v2/props.js

@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['name', 'description', 'defaultValue', 'value', 'onChange', 'disabled', 'readOnly', 'messages', 'children', 'size', 'layout'];
+const allowedProps = exports.allowedProps = ['name', 'description', 'defaultValue', 'value', 'onChange', 'disabled', 'readOnly', 'messages', 'children', 'size', 'layout', 'margin'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-checkbox",
-  "version": "11.7.5",
+  "version": "11.7.6-snapshot-11",
   "description": " styled HTML input type='checkbox' component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,27 +16,27 @@
   "dependencies": {
     "@babel/runtime": "^7.29.7",
     "keycode": "^2",
-    "@instructure/console": "11.7.5",
-    "@instructure/emotion": "11.7.5",
-    "@instructure/shared-types": "11.7.5",
-    "@instructure/ui-dom-utils": "11.7.5",
-    "@instructure/ui-form-field": "11.7.5",
-    "@instructure/ui-icons": "11.7.5",
-    "@instructure/ui-react-utils": "11.7.5",
-    "@instructure/ui-svg-images": "11.7.5",
-    "@instructure/ui-themes": "11.7.5",
-    "@instructure/uid": "11.7.5",
-    "@instructure/ui-utils": "11.7.5",
-    "@instructure/ui-view": "11.7.5"
+    "@instructure/console": "11.7.6-snapshot-11",
+    "@instructure/shared-types": "11.7.6-snapshot-11",
+    "@instructure/emotion": "11.7.6-snapshot-11",
+    "@instructure/ui-dom-utils": "11.7.6-snapshot-11",
+    "@instructure/ui-form-field": "11.7.6-snapshot-11",
+    "@instructure/ui-icons": "11.7.6-snapshot-11",
+    "@instructure/ui-themes": "11.7.6-snapshot-11",
+    "@instructure/ui-utils": "11.7.6-snapshot-11",
+    "@instructure/ui-svg-images": "11.7.6-snapshot-11",
+    "@instructure/uid": "11.7.6-snapshot-11",
+    "@instructure/ui-view": "11.7.6-snapshot-11",
+    "@instructure/ui-react-utils": "11.7.6-snapshot-11"
   },
   "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.5",
-    "@instructure/ui-axe-check": "11.7.5",
-    "@instructure/ui-color-utils": "11.7.5"
+    "@instructure/ui-axe-check": "11.7.6-snapshot-11",
+    "@instructure/ui-babel-preset": "11.7.6-snapshot-11",
+    "@instructure/ui-color-utils": "11.7.6-snapshot-11"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Checkbox/v2/props.ts

@@ -24,7 +24,11 @@
 
 import type { FormMessage } from '@instructure/ui-form-field/latest'
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
-import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+  WithStyleProps,
+  ComponentStyle,
+  Spacing
+} from '@instructure/emotion'
 import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
@@ -71,6 +75,12 @@ type CheckboxOwnProps = {
   inline?: boolean
   labelPlacement?: 'top' | 'start' | 'end'
   isRequired?: boolean
+  /**
+   * 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
   /**
    * A function that provides a reference to the actual underlying input element
    */
@@ -116,6 +126,7 @@ const allowedProps: AllowedPropKeys = [
   'inline',
   'labelPlacement',
   'isRequired',
+  'margin',
   'inputRef'
 ]
 

package/src/Checkbox/v2/styles.ts

@@ -23,7 +23,8 @@
  */
 
 import type { CheckboxProps, CheckboxStyle } from './props'
-import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import { calcSpacingFromShorthand } from '@instructure/emotion'
 
 /**
  * ---
@@ -38,9 +39,10 @@ import type { NewComponentTypes } from '@instructure/ui-themes'
  */
 const generateStyle = (
   componentTheme: ReturnType<NewComponentTypes['Checkbox']>,
-  props: CheckboxProps
+  props: CheckboxProps,
+  sharedTokens: SharedTokens
 ): CheckboxStyle => {
-  const { inline, size, variant } = props
+  const { inline, size, variant, margin } = props
 
   // toggleFullWidth calculation based on Toggle facade width (1.625rem * 1.5) and the marginInlineEnd (0.75rem)
   const toggleFullWidth = `calc(1.625rem * 1.5 + 0.75rem)`
@@ -82,6 +84,11 @@ const generateStyle = (
       label: 'checkbox',
       position: 'relative',
       width: '100%',
+      // Resolves spacing tokens (or custom CSS values) into a margin shorthand.
+      margin: calcSpacingFromShorthand(margin, {
+        ...sharedTokens.spacing,
+        ...sharedTokens.legacy.spacing
+      }),
       ...(inline && {
         display: 'inline-block',
         verticalAlign: 'middle',

package/src/CheckboxGroup/v2/README.md

@@ -12,6 +12,7 @@ type: example
 ---
 <FormFieldGroup description={<ScreenReaderContent>CheckboxGroup examples</ScreenReaderContent>}>
   <CheckboxGroup name="sports"
+    margin="general.spaceMd 0"
     onChange={function (value) { console.log(value) }}
     defaultValue={['football', 'volleyball']}
     description="Select your favorite sports"

package/src/CheckboxGroup/v2/props.ts

@@ -26,6 +26,7 @@ import { type InputHTMLAttributes } from 'react'
 import type { FormMessage } from '@instructure/ui-form-field/latest'
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import type { Spacing } from '@instructure/emotion'
 
 import { Checkbox } from '../../Checkbox/v2/index.js'
 import type { CheckboxProps } from '../../Checkbox/v2/props'
@@ -44,6 +45,12 @@ type CheckboxGroupOwnProps = {
   messages?: FormMessage[]
   size?: 'small' | 'medium' | 'large'
   layout?: 'stacked' | 'columns' | 'inline'
+  /**
+   * 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
 }
 
 type PropKeys = keyof CheckboxGroupOwnProps
@@ -67,7 +74,8 @@ const allowedProps: AllowedPropKeys = [
   'messages',
   'children',
   'size',
-  'layout'
+  'layout',
+  'margin'
 ]
 
 type CheckboxGroupState = {