@instructure/ui-form-field 11.7.4-snapshot-3 → 11.7.4-snapshot-5

package/CHANGELOG.md

@@ -3,9 +3,50 @@
 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-3](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-3) (2026-05-12)
+## [11.7.4-snapshot-5](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-5) (2026-05-12)
 
-**Note:** Version bump only for package @instructure/ui-form-field
+
+### Bug Fixes
+
+* **ui-form-field:** disable child inputs when FormFieldGroup is disabled ([7fada35](https://github.com/instructure/instructure-ui/commit/7fada35327a9e53c387efb6cfbfc75a0759756ec))
+
+
+### Features
+
+* **many:** remove deprecated v2 items ([d5c1198](https://github.com/instructure/instructure-ui/commit/d5c1198820342f674c99bd7ef016ab2094d62a89))
+
+
+### BREAKING CHANGES
+
+* **many:** Removed FormFieldLabel component
+
+Removed _content prop from DrawerLayout.Tray and DrawerLayout.Content
+
+Removed _link prop from Link
+
+Removed _node prop from Menu.Item
+
+Removed _root prop from Pagination, TreeBrowser
+
+Removed _select prop from SimpleSelect and TimeSelect
+
+Removed _ref prop from TruncateText
+
+Removed _element prop from View
+
+Removed color="ai" from Heading
+
+Removed variant="inline-small" and variant="standalone-small" from Link
+
+Removed title prop from Tag
+
+Removed focusRingBorderRadius prop from View
+
+Removed hideActionsUserSeparator prop from TopNavBar.Layout
+
+Removed handleFocusOutlineColor, handleFocusOutlineWidth, handleShadowColor from RangeInput
+
+INSTUI-5025
 
 
 

package/README.md

@@ -12,7 +12,6 @@ The `ui-form-field` package contains the following:
 
 - [FormField](FormField)
 - [FormFieldGroup](FormFieldGroup)
-- [FormFieldLabel](FormFieldLabel)
 - [FormFieldLayout](FormFieldLayout)
 - [FormFieldMessage](FormFieldMessage)
 - [FormFieldMessages](FormFieldMessages)

package/es/FormFieldGroup/v2/index.js

@@ -23,9 +23,9 @@ var _dec, _class;
  * SOFTWARE.
  */
 
-import { Component, Children } from 'react';
+import { Component, Children, isValidElement } from 'react';
 import { Grid } from '@instructure/ui-grid/latest';
-import { pickProps, omitProps } from '@instructure/ui-react-utils';
+import { pickProps, omitProps, safeCloneElement } from '@instructure/ui-react-utils';
 import { withStyleNew } from '@instructure/emotion';
 import { allowedProps as formFieldLayoutAllowedProps } from "../../FormFieldLayout/v2/props.js";
 import { FormFieldLayout } from "../../FormFieldLayout/v2/index.js";
@@ -71,11 +71,19 @@ let FormFieldGroup = (_dec = withStyleNew(generateStyle), _dec(_class = class Fo
     }) >= 0;
   }
   renderColumns() {
+    const {
+      disabled
+    } = this.props;
     return Children.map(this.props.children, (child, index) => {
-      return child ? _jsx(Grid.Col, {
-        width: child.props && child.props.width ? 'auto' : undefined,
-        children: child
-      }, index) : null;
+      if (!child) return null;
+      const el = child;
+      const renderedChild = disabled && /*#__PURE__*/isValidElement(el) ? safeCloneElement(el, {
+        disabled: true
+      }) : child;
+      return _jsx(Grid.Col, {
+        width: el.props && el.props.width ? 'auto' : undefined,
+        children: renderedChild
+      }, index);
     });
   }
   renderChildren() {

package/es/exports/b.js

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 export { FormField } from "../FormField/v2/index.js";
-export { FormFieldLabel } from "../FormFieldLabel/v2/index.js";
 export { FormFieldMessage } from "../FormFieldMessage/v2/index.js";
 export { FormFieldMessages } from "../FormFieldMessages/v2/index.js";
 export { FormFieldLayout } from "../FormFieldLayout/v2/index.js";

package/lib/FormFieldGroup/v2/index.js

@@ -9,6 +9,7 @@ var _react = require("react");
 var _latest = require("@instructure/ui-grid/latest");
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 var _emotion = require("@instructure/emotion");
 var _props = require("../../FormFieldLayout/v2/props");
 var _v = require("../../FormFieldLayout/v2");
@@ -78,11 +79,19 @@ let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyleNew)
     }) >= 0;
   }
   renderColumns() {
+    const {
+      disabled
+    } = this.props;
     return _react.Children.map(this.props.children, (child, index) => {
-      return child ? (0, _jsxRuntime.jsx)(_latest.Grid.Col, {
-        width: child.props && child.props.width ? 'auto' : undefined,
-        children: child
-      }, index) : null;
+      if (!child) return null;
+      const el = child;
+      const renderedChild = disabled && /*#__PURE__*/(0, _react.isValidElement)(el) ? (0, _safeCloneElement.safeCloneElement)(el, {
+        disabled: true
+      }) : child;
+      return (0, _jsxRuntime.jsx)(_latest.Grid.Col, {
+        width: el.props && el.props.width ? 'auto' : undefined,
+        children: renderedChild
+      }, index);
     });
   }
   renderChildren() {

package/lib/exports/b.js

@@ -12,36 +12,29 @@ Object.defineProperty(exports, "FormField", {
 Object.defineProperty(exports, "FormFieldGroup", {
   enumerable: true,
   get: function () {
-    return _v6.FormFieldGroup;
-  }
-});
-Object.defineProperty(exports, "FormFieldLabel", {
-  enumerable: true,
-  get: function () {
-    return _v2.FormFieldLabel;
+    return _v5.FormFieldGroup;
   }
 });
 Object.defineProperty(exports, "FormFieldLayout", {
   enumerable: true,
   get: function () {
-    return _v5.FormFieldLayout;
+    return _v4.FormFieldLayout;
   }
 });
 Object.defineProperty(exports, "FormFieldMessage", {
   enumerable: true,
   get: function () {
-    return _v3.FormFieldMessage;
+    return _v2.FormFieldMessage;
   }
 });
 Object.defineProperty(exports, "FormFieldMessages", {
   enumerable: true,
   get: function () {
-    return _v4.FormFieldMessages;
+    return _v3.FormFieldMessages;
   }
 });
 var _v = require("../FormField/v2");
-var _v2 = require("../FormFieldLabel/v2");
-var _v3 = require("../FormFieldMessage/v2");
-var _v4 = require("../FormFieldMessages/v2");
-var _v5 = require("../FormFieldLayout/v2");
-var _v6 = require("../FormFieldGroup/v2");
+var _v2 = require("../FormFieldMessage/v2");
+var _v3 = require("../FormFieldMessages/v2");
+var _v4 = require("../FormFieldLayout/v2");
+var _v5 = require("../FormFieldGroup/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "11.7.4-snapshot-3",
+  "version": "11.7.4-snapshot-5",
   "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.2",
-    "@instructure/console": "11.7.4-snapshot-3",
-    "@instructure/emotion": "11.7.4-snapshot-3",
-    "@instructure/shared-types": "11.7.4-snapshot-3",
-    "@instructure/ui-a11y-content": "11.7.4-snapshot-3",
-    "@instructure/ui-a11y-utils": "11.7.4-snapshot-3",
-    "@instructure/ui-grid": "11.7.4-snapshot-3",
-    "@instructure/ui-icons": "11.7.4-snapshot-3",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-3",
-    "@instructure/ui-themes": "11.7.4-snapshot-3",
-    "@instructure/uid": "11.7.4-snapshot-3",
-    "@instructure/ui-utils": "11.7.4-snapshot-3"
+    "@instructure/console": "11.7.4-snapshot-5",
+    "@instructure/shared-types": "11.7.4-snapshot-5",
+    "@instructure/emotion": "11.7.4-snapshot-5",
+    "@instructure/ui-a11y-content": "11.7.4-snapshot-5",
+    "@instructure/ui-a11y-utils": "11.7.4-snapshot-5",
+    "@instructure/ui-themes": "11.7.4-snapshot-5",
+    "@instructure/ui-grid": "11.7.4-snapshot-5",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-5",
+    "@instructure/ui-utils": "11.7.4-snapshot-5",
+    "@instructure/uid": "11.7.4-snapshot-5",
+    "@instructure/ui-icons": "11.7.4-snapshot-5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.7.4-snapshot-3",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-3"
+    "@instructure/ui-axe-check": "11.7.4-snapshot-5",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-5"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/FormFieldGroup/v2/index.tsx

@@ -22,10 +22,20 @@
  * SOFTWARE.
  */
 
-import { Component, Children, ReactElement, AriaAttributes } from 'react'
+import {
+  Component,
+  Children,
+  ReactElement,
+  AriaAttributes,
+  isValidElement
+} from 'react'
 
 import { Grid } from '@instructure/ui-grid/latest'
-import { pickProps, omitProps } from '@instructure/ui-react-utils'
+import {
+  pickProps,
+  omitProps,
+  safeCloneElement
+} from '@instructure/ui-react-utils'
 import { withStyleNew } from '@instructure/emotion'
 
 import { allowedProps as formFieldLayoutAllowedProps } from '../../FormFieldLayout/v2/props'
@@ -86,20 +96,22 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
   }
 
   renderColumns() {
+    const { disabled } = this.props
     return Children.map(this.props.children, (child, index) => {
-      return child ? (
+      if (!child) return null
+      const el = child as ReactElement<any>
+      const renderedChild =
+        disabled && isValidElement(el)
+          ? safeCloneElement(el, { disabled: true })
+          : child
+      return (
         <Grid.Col
-          width={
-            (child as ReactElement).props &&
-            (child as ReactElement<any>).props.width
-              ? 'auto'
-              : undefined
-          }
+          width={el.props && el.props.width ? 'auto' : undefined}
           key={index}
         >
-          {child}
+          {renderedChild}
         </Grid.Col>
-      ) : null
+      )
     })
   }
 

package/src/FormFieldGroup/v2/props.ts

@@ -48,7 +48,8 @@ type FormFieldGroupOwnProps = {
    */
   messagesId?: string
   /**
-   * Whether the field group is disabled. When true, error and success messages will be hidden.
+   * Whether the field group is disabled. When true, the disabled prop is propagated to all
+   * child components, error and success messages will be hidden.
    */
   disabled?: boolean
   /**

package/src/exports/b.ts

@@ -23,7 +23,6 @@
  */
 
 export { FormField } from '../FormField/v2'
-export { FormFieldLabel } from '../FormFieldLabel/v2'
 export { FormFieldMessage } from '../FormFieldMessage/v2'
 export { FormFieldMessages } from '../FormFieldMessages/v2'
 export { FormFieldLayout } from '../FormFieldLayout/v2'
@@ -35,7 +34,6 @@ export type {
   FormMessageChild
 } from '../utils/v1/FormPropTypes'
 export type { FormFieldOwnProps, FormFieldProps } from '../FormField/v2/props'
-export type { FormFieldLabelProps } from '../FormFieldLabel/v2/props'
 export type { FormFieldMessageProps } from '../FormFieldMessage/v2/props'
 export type { FormFieldMessagesProps } from '../FormFieldMessages/v2/props'
 export type { FormFieldLayoutProps } from '../FormFieldLayout/v2/props'