@instructure/ui-checkbox 11.7.9-snapshot-5 → 11.7.10

package/CHANGELOG.md

@@ -3,12 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.9-snapshot-5](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-snapshot-5) (2026-10-13)
+## [11.7.10](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.10) (2026-10-14)
 
-**Note:** Version bump only for package @instructure/ui-checkbox
+### Bug Fixes
+
+* **many:** Stop wrapping form field controls in their label ([#2740](https://github.com/instructure/instructure-ui/issues/2740)) ([467269e](https://github.com/instructure/instructure-ui/commit/467269ea6d66c88ef9deb8bd14980730bbd645e8))
 
 
+## [11.7.9](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9) (2026-10-13)
+
+### Bug Fixes
 
+* **many:** Stop wrapping form field controls in their label ([#2740](https://github.com/instructure/instructure-ui/issues/2740)) ([467269e](https://github.com/instructure/instructure-ui/commit/467269ea6d66c88ef9deb8bd14980730bbd645e8))
 
 
 ## [11.7.8](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8) (2026-10-02)

package/es/CheckboxGroup/v2/index.js

@@ -1,4 +1,3 @@
-var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -25,7 +24,7 @@ var _dec, _class;
 
 import { Children, Component } from 'react';
 import { FormFieldGroup } from '@instructure/ui-form-field/latest';
-import { matchComponentTypes, safeCloneElement, pickProps, omitProps, withDeterministicId } from '@instructure/ui-react-utils';
+import { matchComponentTypes, safeCloneElement, pickProps, omitProps } from '@instructure/ui-react-utils';
 import { Checkbox } from '../../Checkbox/v2/index.js';
 import { allowedProps } from './props.js';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
@@ -34,7 +33,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 category: components
 ---
 **/
-let CheckboxGroup = (_dec = withDeterministicId(), _dec(_class = class CheckboxGroup extends Component {
+class CheckboxGroup extends Component {
   static displayName = 'CheckboxGroup';
   static componentId = 'CheckboxGroup';
   static allowedProps = allowedProps;
@@ -52,16 +51,11 @@ let CheckboxGroup = (_dec = withDeterministicId(), _dec(_class = class CheckboxG
         value: props.defaultValue || []
       };
     }
-    this._messagesId = props.deterministicId();
   }
-  _messagesId;
   ref = null;
   handleRef = el => {
     this.ref = el;
   };
-  get hasMessages() {
-    return this.props.messages && this.props.messages.length > 0;
-  }
   handleChange = e => {
     const newValue = this.value;
     if (this.props.disabled || this.props.readOnly) {
@@ -85,7 +79,7 @@ let CheckboxGroup = (_dec = withDeterministicId(), _dec(_class = class CheckboxG
   get value() {
     return typeof this.props.value === 'undefined' ? [...this.state.value] : [...this.props.value];
   }
-  renderChildren() {
+  renderChildren(describedBy) {
     const {
       children,
       name,
@@ -105,7 +99,7 @@ let CheckboxGroup = (_dec = withDeterministicId(), _dec(_class = class CheckboxG
           checked: this.value.indexOf(child.props.value) > -1,
           onChange: this.handleChange,
           width: child.props.width || 'auto',
-          'aria-describedby': this.hasMessages ? this._messagesId : undefined
+          'aria-describedby': describedBy
         });
       } else {
         return child;
@@ -119,12 +113,13 @@ let CheckboxGroup = (_dec = withDeterministicId(), _dec(_class = class CheckboxG
       description: this.props.description,
       rowSpacing: "small",
       vAlign: "top",
-      messagesId: this._messagesId,
       elementRef: this.handleRef,
       "data-cid": "CheckboxGroup",
-      children: this.renderChildren()
+      children: ({
+        describedBy
+      }) => this.renderChildren(describedBy)
     });
   }
-}) || _class);
+}
 export default CheckboxGroup;
 export { CheckboxGroup };

package/lib/CheckboxGroup/v2/index.js

@@ -10,7 +10,6 @@ var _uiReactUtils = require("@instructure/ui-react-utils");
 var _index = require("../../Checkbox/v2/index.js");
 var _props = require("./props.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -34,12 +33,13 @@ var _dec, _class;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 /**
 ---
 category: components
 ---
 **/
-let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec(_class = class CheckboxGroup extends _react.Component {
+class CheckboxGroup extends _react.Component {
   static displayName = 'CheckboxGroup';
   static componentId = 'CheckboxGroup';
   static allowedProps = _props.allowedProps;
@@ -57,16 +57,11 @@ let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _uiReactUtils.withDeterm
         value: props.defaultValue || []
       };
     }
-    this._messagesId = props.deterministicId();
   }
-  _messagesId;
   ref = null;
   handleRef = el => {
     this.ref = el;
   };
-  get hasMessages() {
-    return this.props.messages && this.props.messages.length > 0;
-  }
   handleChange = e => {
     const newValue = this.value;
     if (this.props.disabled || this.props.readOnly) {
@@ -90,7 +85,7 @@ let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _uiReactUtils.withDeterm
   get value() {
     return typeof this.props.value === 'undefined' ? [...this.state.value] : [...this.props.value];
   }
-  renderChildren() {
+  renderChildren(describedBy) {
     const {
       children,
       name,
@@ -110,7 +105,7 @@ let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _uiReactUtils.withDeterm
           checked: this.value.indexOf(child.props.value) > -1,
           onChange: this.handleChange,
           width: child.props.width || 'auto',
-          'aria-describedby': this.hasMessages ? this._messagesId : undefined
+          'aria-describedby': describedBy
         });
       } else {
         return child;
@@ -124,11 +119,13 @@ let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _uiReactUtils.withDeterm
       description: this.props.description,
       rowSpacing: "small",
       vAlign: "top",
-      messagesId: this._messagesId,
       elementRef: this.handleRef,
       "data-cid": "CheckboxGroup",
-      children: this.renderChildren()
+      children: ({
+        describedBy
+      }) => this.renderChildren(describedBy)
     });
   }
-}) || _class);
+}
+exports.CheckboxGroup = CheckboxGroup;
 var _default = exports.default = CheckboxGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-checkbox",
-  "version": "11.7.9-snapshot-5",
+  "version": "11.7.10",
   "description": " styled HTML input type='checkbox' component.",
   "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.9-snapshot-5",
-    "@instructure/emotion": "11.7.9-snapshot-5",
-    "@instructure/shared-types": "11.7.9-snapshot-5",
-    "@instructure/ui-dom-utils": "11.7.9-snapshot-5",
-    "@instructure/ui-form-field": "11.7.9-snapshot-5",
-    "@instructure/ui-icons": "11.7.9-snapshot-5",
-    "@instructure/ui-react-utils": "11.7.9-snapshot-5",
-    "@instructure/ui-svg-images": "11.7.9-snapshot-5",
-    "@instructure/ui-themes": "11.7.9-snapshot-5",
-    "@instructure/ui-utils": "11.7.9-snapshot-5",
-    "@instructure/ui-view": "11.7.9-snapshot-5",
-    "@instructure/uid": "11.7.9-snapshot-5",
+    "@instructure/console": "11.7.10",
+    "@instructure/emotion": "11.7.10",
+    "@instructure/shared-types": "11.7.10",
+    "@instructure/ui-dom-utils": "11.7.10",
+    "@instructure/ui-form-field": "11.7.10",
+    "@instructure/ui-icons": "11.7.10",
+    "@instructure/ui-react-utils": "11.7.10",
+    "@instructure/ui-svg-images": "11.7.10",
+    "@instructure/ui-themes": "11.7.10",
+    "@instructure/ui-utils": "11.7.10",
+    "@instructure/ui-view": "11.7.10",
+    "@instructure/uid": "11.7.10",
     "keycode": "^2"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "11.7.9-snapshot-5",
-    "@instructure/ui-babel-preset": "11.7.9-snapshot-5",
-    "@instructure/ui-color-utils": "11.7.9-snapshot-5",
+    "@instructure/ui-axe-check": "11.7.10",
+    "@instructure/ui-babel-preset": "11.7.10",
+    "@instructure/ui-color-utils": "11.7.10",
     "vitest": "^5.0.0"
   },
   "peerDependencies": {

package/src/CheckboxGroup/v2/index.tsx

@@ -29,8 +29,7 @@ import {
   matchComponentTypes,
   safeCloneElement,
   pickProps,
-  omitProps,
-  withDeterministicId
+  omitProps
 } from '@instructure/ui-react-utils'
 
 import { Checkbox } from '../../Checkbox/v2/index.js'
@@ -47,8 +46,6 @@ import type {
 category: components
 ---
 **/
-
-@withDeterministicId()
 class CheckboxGroup extends Component<CheckboxGroupProps, CheckboxGroupState> {
   static displayName = 'CheckboxGroup'
   static readonly componentId = 'CheckboxGroup'
@@ -70,20 +67,14 @@ class CheckboxGroup extends Component<CheckboxGroupProps, CheckboxGroupState> {
         value: props.defaultValue || []
       }
     }
-
-    this._messagesId = props.deterministicId!()
   }
-  private readonly _messagesId: string
+
   ref: Element | null = null
 
   handleRef = (el: Element | null) => {
     this.ref = el
   }
 
-  get hasMessages() {
-    return this.props.messages && this.props.messages.length > 0
-  }
-
   handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = this.value
 
@@ -113,7 +104,7 @@ class CheckboxGroup extends Component<CheckboxGroupProps, CheckboxGroupState> {
       : [...this.props.value]
   }
 
-  renderChildren() {
+  renderChildren(describedBy?: string) {
     const { children, name, size, disabled, readOnly } = this.props
 
     return Children.map(children, (child) => {
@@ -128,7 +119,7 @@ class CheckboxGroup extends Component<CheckboxGroupProps, CheckboxGroupState> {
           checked: this.value.indexOf(child.props.value!) > -1,
           onChange: this.handleChange,
           width: child.props.width || 'auto',
-          'aria-describedby': this.hasMessages ? this._messagesId : undefined
+          'aria-describedby': describedBy
         })
       } else {
         return child
@@ -144,11 +135,10 @@ class CheckboxGroup extends Component<CheckboxGroupProps, CheckboxGroupState> {
         description={this.props.description}
         rowSpacing="small"
         vAlign="top"
-        messagesId={this._messagesId}
         elementRef={this.handleRef}
         data-cid="CheckboxGroup"
       >
-        {this.renderChildren()}
+        {({ describedBy }) => this.renderChildren(describedBy)}
       </FormFieldGroup>
     )
   }

package/src/CheckboxGroup/v2/props.ts

@@ -25,7 +25,6 @@
 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'
@@ -61,8 +60,7 @@ type CheckboxGroupProps = CheckboxGroupOwnProps &
   OtherHTMLAttributes<
     CheckboxGroupOwnProps,
     InputHTMLAttributes<CheckboxGroupOwnProps & Element>
-  > &
-  WithDeterministicIdProps
+  >
 const allowedProps: AllowedPropKeys = [
   'name',
   'description',