@instructure/ui-form-field 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-form-field

package/es/FormFieldGroup/v2/props.js

@@ -22,5 +22,5 @@
  * SOFTWARE.
  */
 
-const allowedProps = ['description', 'as', 'messages', 'messagesId', 'disabled', 'readOnly', 'children', 'layout', 'rowSpacing', 'colSpacing', 'vAlign', 'startAt', 'elementRef'];
+const allowedProps = ['description', 'as', 'messages', 'messagesId', 'disabled', 'readOnly', 'children', 'layout', 'rowSpacing', 'colSpacing', 'vAlign', 'startAt', 'margin', 'elementRef'];
 export { allowedProps };

package/es/FormFieldLayout/v2/index.js

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { forwardRef, useEffect, useState, useCallback } from 'react';
+import { forwardRef, useCallback } from 'react';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { omitProps, useDeterministicId } from '@instructure/ui-react-utils';
 import { useStyleNew } from '@instructure/emotion';
@@ -59,16 +59,12 @@ const FormFieldLayout = /*#__PURE__*/forwardRef((props, ref) => {
     ...rest
   } = props;
 
-  // Deterministic ID generation
-  const [deterministicId, setDeterministicId] = useState();
-  const getId = useDeterministicId('FormFieldLayout');
-  useEffect(() => {
-    setDeterministicId(getId());
-  }, []);
+  // SSR-safe deterministic ID generation (stable across server/client render)
+  const deterministicId = useDeterministicId('FormFieldLayout')();
   const messagesId = messagesIdProp || deterministicId;
   // Give the label an id so controls can reference only the label text via
   // `aria-labelledby`, keeping messages out of the accessible name.
-  const labelId = labelIdProp || (deterministicId ? `${deterministicId}-Label` : undefined);
+  const labelId = labelIdProp || `${deterministicId}-Label`;
 
   // Filter out error and success messages when disabled or readOnly
   const filteredMessages = disabled || readOnly ? messages?.filter(msg => msg.type !== 'error' && msg.type !== 'newError' && msg.type !== 'success') : messages;

package/lib/FormFieldGroup/v2/props.js

@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['description', 'as', 'messages', 'messagesId', 'disabled', 'readOnly', 'children', 'layout', 'rowSpacing', 'colSpacing', 'vAlign', 'startAt', 'elementRef'];
+const allowedProps = exports.allowedProps = ['description', 'as', 'messages', 'messagesId', 'disabled', 'readOnly', 'children', 'layout', 'rowSpacing', 'colSpacing', 'vAlign', 'startAt', 'margin', 'elementRef'];

package/lib/FormFieldLayout/v2/index.js

@@ -74,16 +74,12 @@ const FormFieldLayout = exports.FormFieldLayout = /*#__PURE__*/(0, _react.forwar
     ...rest
   } = props;
 
-  // Deterministic ID generation
-  const [deterministicId, setDeterministicId] = (0, _react.useState)();
-  const getId = (0, _useDeterministicId.useDeterministicId)('FormFieldLayout');
-  (0, _react.useEffect)(() => {
-    setDeterministicId(getId());
-  }, []);
+  // SSR-safe deterministic ID generation (stable across server/client render)
+  const deterministicId = (0, _useDeterministicId.useDeterministicId)('FormFieldLayout')();
   const messagesId = messagesIdProp || deterministicId;
   // Give the label an id so controls can reference only the label text via
   // `aria-labelledby`, keeping messages out of the accessible name.
-  const labelId = labelIdProp || (deterministicId ? `${deterministicId}-Label` : undefined);
+  const labelId = labelIdProp || `${deterministicId}-Label`;
 
   // Filter out error and success messages when disabled or readOnly
   const filteredMessages = disabled || readOnly ? messages?.filter(msg => msg.type !== 'error' && msg.type !== 'newError' && msg.type !== 'success') : messages;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "11.7.5",
+  "version": "11.7.6-snapshot-11",
   "description": "Form layout components.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,24 +15,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/console": "11.7.5",
-    "@instructure/emotion": "11.7.5",
-    "@instructure/ui-a11y-content": "11.7.5",
-    "@instructure/ui-a11y-utils": "11.7.5",
-    "@instructure/shared-types": "11.7.5",
-    "@instructure/ui-grid": "11.7.5",
-    "@instructure/ui-icons": "11.7.5",
-    "@instructure/ui-react-utils": "11.7.5",
-    "@instructure/ui-themes": "11.7.5",
-    "@instructure/uid": "11.7.5",
-    "@instructure/ui-utils": "11.7.5"
+    "@instructure/console": "11.7.6-snapshot-11",
+    "@instructure/emotion": "11.7.6-snapshot-11",
+    "@instructure/ui-a11y-content": "11.7.6-snapshot-11",
+    "@instructure/shared-types": "11.7.6-snapshot-11",
+    "@instructure/ui-a11y-utils": "11.7.6-snapshot-11",
+    "@instructure/ui-grid": "11.7.6-snapshot-11",
+    "@instructure/ui-themes": "11.7.6-snapshot-11",
+    "@instructure/ui-utils": "11.7.6-snapshot-11",
+    "@instructure/uid": "11.7.6-snapshot-11",
+    "@instructure/ui-react-utils": "11.7.6-snapshot-11",
+    "@instructure/ui-icons": "11.7.6-snapshot-11"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "vitest": "^4.1.9",
-    "@instructure/ui-axe-check": "11.7.5",
-    "@instructure/ui-babel-preset": "11.7.5"
+    "@instructure/ui-axe-check": "11.7.6-snapshot-11",
+    "@instructure/ui-babel-preset": "11.7.6-snapshot-11"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/FormFieldGroup/v2/README.md

@@ -17,6 +17,7 @@ type: example
     rowSpacing="small"
     layout="inline"
     vAlign="middle"
+    margin="general.spaceMd 0"
   >
     <TextInput renderLabel="Favorite Breakfast Eatery"
       messages={[

package/src/FormFieldGroup/v2/props.ts

@@ -26,7 +26,11 @@ import type {
   AsElementType,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
-import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+  WithStyleProps,
+  ComponentStyle,
+  Spacing
+} from '@instructure/emotion'
 import type { FormFieldLayoutOwnProps } from '../../FormFieldLayout/v2/props'
 import type { FormMessage } from '../../utils/v1/FormPropTypes'
 
@@ -62,6 +66,12 @@ type FormFieldGroupOwnProps = {
   colSpacing?: 'none' | 'small' | 'medium' | 'large'
   vAlign?: 'top' | 'middle' | 'bottom'
   startAt?: 'small' | 'medium' | 'large' | 'x-large' | null
+  /**
+   * 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
   /**
    * provides a reference to the underlying html root element
    */
@@ -96,6 +106,7 @@ const allowedProps: AllowedPropKeys = [
   'colSpacing',
   'vAlign',
   'startAt',
+  'margin',
   'elementRef'
 ]
 

package/src/FormFieldLayout/v2/index.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { forwardRef, useEffect, useState, useCallback } from 'react'
+import { forwardRef, useCallback } from 'react'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 import { omitProps, useDeterministicId } from '@instructure/ui-react-utils'
 
@@ -62,18 +62,13 @@ const FormFieldLayout = forwardRef<Element, FormFieldLayoutProps>(
       ...rest
     } = props
 
-    // Deterministic ID generation
-    const [deterministicId, setDeterministicId] = useState<string | undefined>()
-    const getId = useDeterministicId('FormFieldLayout')
-    useEffect(() => {
-      setDeterministicId(getId())
-    }, [])
+    // SSR-safe deterministic ID generation (stable across server/client render)
+    const deterministicId = useDeterministicId('FormFieldLayout')()
 
     const messagesId = messagesIdProp || deterministicId
     // Give the label an id so controls can reference only the label text via
     // `aria-labelledby`, keeping messages out of the accessible name.
-    const labelId =
-      labelIdProp || (deterministicId ? `${deterministicId}-Label` : undefined)
+    const labelId = labelIdProp || `${deterministicId}-Label`
 
     // Filter out error and success messages when disabled or readOnly
     const filteredMessages =