@instructure/ui-radio-input 11.7.5 → 11.7.6-snapshot-11

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 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)
+
+
+### Bug Fixes
+
+* **many:** generate deterministic ids with React useId ([83aa25a](https://github.com/instructure/instructure-ui/commit/83aa25aebd41720fd09beac025dbf961e1f413c2))
+
+
+### 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)
 
 **Note:** Version bump only for package @instructure/ui-radio-input

package/es/RadioInput/v2/index.js

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { useState, useRef, useImperativeHandle, forwardRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useImperativeHandle, forwardRef, useCallback } from 'react';
 import { passthroughProps, useDeterministicId } from '@instructure/ui-react-utils';
 import { isActiveElement } from '@instructure/ui-dom-utils';
 import { useStyleNew } from '@instructure/emotion';
@@ -41,6 +41,7 @@ const RadioInput = /*#__PURE__*/forwardRef((props, ref) => {
     inline = false,
     context = 'success',
     readOnly = false,
+    margin,
     id: idProp,
     label,
     value,
@@ -60,12 +61,8 @@ const RadioInput = /*#__PURE__*/forwardRef((props, ref) => {
   const containerRef = useRef(null);
   const inputElementRef = useRef(null);
 
-  // Deterministic ID generation
-  const [deterministicId, setDeterministicId] = useState();
-  const getId = useDeterministicId('RadioInput');
-  useEffect(() => {
-    setDeterministicId(getId());
-  }, []);
+  // SSR-safe deterministic ID generation (stable across server/client render)
+  const deterministicId = useDeterministicId('RadioInput')();
   const id = idProp || deterministicId;
 
   // Computed checked value
@@ -82,7 +79,8 @@ const RadioInput = /*#__PURE__*/forwardRef((props, ref) => {
       hovered,
       readOnly,
       size,
-      variant
+      variant,
+      margin
     },
     componentId: 'RadioInput',
     displayName: 'RadioInput'

package/es/RadioInput/v2/props.js

@@ -22,5 +22,5 @@
  * SOFTWARE.
  */
 
-const allowedProps = ['label', 'value', 'id', 'name', 'checked', 'disabled', 'readOnly', 'variant', 'size', 'context', 'inline', 'onClick', 'onChange', 'inputRef'];
+const allowedProps = ['label', 'value', 'id', 'name', 'checked', 'disabled', 'readOnly', 'variant', 'size', 'context', 'inline', 'margin', 'onClick', 'onChange', 'inputRef'];
 export { allowedProps };

package/es/RadioInput/v2/styles.js

@@ -23,7 +23,7 @@
  */
 
 import { boxShadowObjectsToCSSString } from '@instructure/ui-themes';
-import { calcFocusOutlineStyles } from '@instructure/emotion';
+import { calcFocusOutlineStyles, calcSpacingFromShorthand } from '@instructure/emotion';
 /**
  * ---
  * private: true
@@ -42,7 +42,8 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
     size,
     readOnly,
     variant,
-    context
+    context,
+    margin
   } = params;
 
   // 4*2 states: base, hover, disabled, readonly X none/selected
@@ -237,6 +238,11 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
       display: 'flex',
       alignItems: 'flex-start',
       width: inline ? 'auto' : '100%',
+      // Resolves spacing tokens (or custom CSS values) into a margin shorthand.
+      margin: calcSpacingFromShorthand(margin, {
+        ...sharedTokens.spacing,
+        ...sharedTokens.legacy.spacing
+      }),
       ...(inline && {
         display: 'inline-flex',
         verticalAlign: 'middle'

package/es/RadioInputGroup/v2/props.js

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

package/lib/RadioInput/v2/index.js

@@ -49,6 +49,7 @@ const RadioInput = exports.RadioInput = /*#__PURE__*/(0, _react.forwardRef)((pro
     inline = false,
     context = 'success',
     readOnly = false,
+    margin,
     id: idProp,
     label,
     value,
@@ -68,12 +69,8 @@ const RadioInput = exports.RadioInput = /*#__PURE__*/(0, _react.forwardRef)((pro
   const containerRef = (0, _react.useRef)(null);
   const inputElementRef = (0, _react.useRef)(null);
 
-  // Deterministic ID generation
-  const [deterministicId, setDeterministicId] = (0, _react.useState)();
-  const getId = (0, _useDeterministicId.useDeterministicId)('RadioInput');
-  (0, _react.useEffect)(() => {
-    setDeterministicId(getId());
-  }, []);
+  // SSR-safe deterministic ID generation (stable across server/client render)
+  const deterministicId = (0, _useDeterministicId.useDeterministicId)('RadioInput')();
   const id = idProp || deterministicId;
 
   // Computed checked value
@@ -90,7 +87,8 @@ const RadioInput = exports.RadioInput = /*#__PURE__*/(0, _react.forwardRef)((pro
       hovered,
       readOnly,
       size,
-      variant
+      variant,
+      margin
     },
     componentId: 'RadioInput',
     displayName: 'RadioInput'

package/lib/RadioInput/v2/props.js

@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['label', 'value', 'id', 'name', 'checked', 'disabled', 'readOnly', 'variant', 'size', 'context', 'inline', 'onClick', 'onChange', 'inputRef'];
+const allowedProps = exports.allowedProps = ['label', 'value', 'id', 'name', 'checked', 'disabled', 'readOnly', 'variant', 'size', 'context', 'inline', 'margin', 'onClick', 'onChange', 'inputRef'];

package/lib/RadioInput/v2/styles.js

@@ -48,7 +48,8 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
     size,
     readOnly,
     variant,
-    context
+    context,
+    margin
   } = params;
 
   // 4*2 states: base, hover, disabled, readonly X none/selected
@@ -243,6 +244,11 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
       display: 'flex',
       alignItems: 'flex-start',
       width: inline ? 'auto' : '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-flex',
         verticalAlign: 'middle'

package/lib/RadioInputGroup/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', 'variant', 'size', 'layout', 'isRequired'];
+const allowedProps = exports.allowedProps = ['name', 'description', 'defaultValue', 'value', 'onChange', 'disabled', 'readOnly', 'messages', 'children', 'variant', 'size', 'layout', 'isRequired', 'margin'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-radio-input",
-  "version": "11.7.5",
+  "version": "11.7.6-snapshot-11",
   "description": "A styled HTML input type='radio' element",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,22 +15,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/emotion": "11.7.5",
-    "@instructure/shared-types": "11.7.5",
-    "@instructure/ui-a11y-utils": "11.7.5",
-    "@instructure/ui-form-field": "11.7.5",
-    "@instructure/ui-dom-utils": "11.7.5",
-    "@instructure/ui-react-utils": "11.7.5",
-    "@instructure/ui-themes": "11.7.5"
+    "@instructure/emotion": "11.7.6-snapshot-11",
+    "@instructure/ui-a11y-utils": "11.7.6-snapshot-11",
+    "@instructure/ui-form-field": "11.7.6-snapshot-11",
+    "@instructure/ui-dom-utils": "11.7.6-snapshot-11",
+    "@instructure/shared-types": "11.7.6-snapshot-11",
+    "@instructure/ui-react-utils": "11.7.6-snapshot-11",
+    "@instructure/ui-themes": "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-color-utils": "11.7.5",
-    "@instructure/ui-axe-check": "11.7.5"
+    "@instructure/ui-babel-preset": "11.7.6-snapshot-11",
+    "@instructure/ui-color-utils": "11.7.6-snapshot-11",
+    "@instructure/ui-axe-check": "11.7.6-snapshot-11"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/RadioInput/v2/index.tsx

@@ -28,7 +28,6 @@ import {
   useImperativeHandle,
   forwardRef,
   useCallback,
-  useEffect,
   type RefObject
 } from 'react'
 
@@ -58,6 +57,7 @@ const RadioInput = forwardRef<RadioInputHandle, RadioInputProps>(
       inline = false,
       context = 'success',
       readOnly = false,
+      margin,
       id: idProp,
       label,
       value,
@@ -77,12 +77,8 @@ const RadioInput = forwardRef<RadioInputHandle, RadioInputProps>(
     const containerRef = useRef<HTMLDivElement | null>(null)
     const inputElementRef = useRef<HTMLInputElement | null>(null)
 
-    // Deterministic ID generation
-    const [deterministicId, setDeterministicId] = useState<string | undefined>()
-    const getId = useDeterministicId('RadioInput')
-    useEffect(() => {
-      setDeterministicId(getId())
-    }, [])
+    // SSR-safe deterministic ID generation (stable across server/client render)
+    const deterministicId = useDeterministicId('RadioInput')()
     const id = idProp || deterministicId
 
     // Computed checked value
@@ -100,7 +96,8 @@ const RadioInput = forwardRef<RadioInputHandle, RadioInputProps>(
         hovered,
         readOnly,
         size,
-        variant
+        variant,
+        margin
       },
       componentId: 'RadioInput',
       displayName: 'RadioInput'

package/src/RadioInput/v2/props.ts

@@ -25,7 +25,11 @@
 import React from 'react'
 import type { InputHTMLAttributes } from 'react'
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
-import type { ComponentStyle, NewThemeOverrideProp } from '@instructure/emotion'
+import type {
+  ComponentStyle,
+  NewThemeOverrideProp,
+  Spacing
+} from '@instructure/emotion'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import type { NewComponentTypes } from '@instructure/ui-themes'
 
@@ -77,6 +81,12 @@ type RadioInputOwnProps = {
    * Sets the `display:inline-flex` in CSS
    */
   inline?: 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
   onClick?: (event: React.MouseEvent<HTMLInputElement>) => void
   /**
    * Callback fired when the input fires a change event.
@@ -118,6 +128,7 @@ const allowedProps: AllowedPropKeys = [
   'size',
   'context',
   'inline',
+  'margin',
   'onClick',
   'onChange',
   'inputRef'

package/src/RadioInput/v2/styles.ts

@@ -25,7 +25,10 @@
 import type { RadioInputProps, RadioInputStyle } from './props'
 import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
 import { boxShadowObjectsToCSSString } from '@instructure/ui-themes'
-import { calcFocusOutlineStyles } from '@instructure/emotion'
+import {
+  calcFocusOutlineStyles,
+  calcSpacingFromShorthand
+} from '@instructure/emotion'
 
 type StyleParams = {
   disabled: RadioInputProps['disabled']
@@ -35,6 +38,7 @@ type StyleParams = {
   readOnly: RadioInputProps['readOnly']
   size: RadioInputProps['size']
   variant: RadioInputProps['variant']
+  margin: RadioInputProps['margin']
 }
 
 /**
@@ -52,7 +56,16 @@ const generateStyle = (
   params: StyleParams,
   sharedTokens: SharedTokens
 ): RadioInputStyle => {
-  const { disabled, inline, hovered, size, readOnly, variant, context } = params
+  const {
+    disabled,
+    inline,
+    hovered,
+    size,
+    readOnly,
+    variant,
+    context,
+    margin
+  } = params
 
   // 4*2 states: base, hover, disabled, readonly X none/selected
   const insetSizes = {
@@ -272,6 +285,11 @@ const generateStyle = (
       display: 'flex',
       alignItems: 'flex-start',
       width: inline ? 'auto' : '100%',
+      // Resolves spacing tokens (or custom CSS values) into a margin shorthand.
+      margin: calcSpacingFromShorthand(margin, {
+        ...sharedTokens.spacing,
+        ...sharedTokens.legacy.spacing
+      }),
       ...(inline && {
         display: 'inline-flex',
         verticalAlign: 'middle'

package/src/RadioInputGroup/v2/README.md

@@ -25,7 +25,7 @@ function Example () {
     console.log(value)
   }
   return (
-    <RadioInputGroup onChange={handleChange} name="example1" defaultValue="foo" description="Select something">
+    <RadioInputGroup onChange={handleChange} name="example1" defaultValue="foo" description="Select something" margin="general.spaceMd 0">
       {inputs.map(input => <RadioInput key={input.value} value={input.value} label={input.label} />)}
     </RadioInputGroup>
   )

package/src/RadioInputGroup/v2/props.ts

@@ -27,6 +27,7 @@ import React 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'
 
 type RadioInputGroupOwnProps = {
   /**
@@ -88,6 +89,13 @@ type RadioInputGroupOwnProps = {
    * Setting this to `true` adds and asterisk after the description (group label). It does not cause any behavioural change.
    */
   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
 }
 
 type PropKeys = keyof RadioInputGroupOwnProps
@@ -115,7 +123,8 @@ const allowedProps: AllowedPropKeys = [
   'variant',
   'size',
   'layout',
-  'isRequired'
+  'isRequired',
+  'margin'
 ]
 
 export type { RadioInputGroupProps, RadioInputGroupState }