@instructure/ui-checkbox 11.7.3-snapshot-33 → 11.7.3-snapshot-38

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-33](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-33) (2026-05-07)
+## [11.7.3-snapshot-38](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-38) (2026-05-07)
 
 
 ### Bug Fixes

package/es/Checkbox/v1/CheckboxFacade/index.js

@@ -26,7 +26,7 @@ var _dec, _class;
 import { Component } from 'react';
 import { SVGIcon } from '@instructure/ui-svg-images';
 import { IconCheckMarkSolid } from '@instructure/ui-icons';
-import { withStyleLegacy as withStyle } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import { allowedProps } from "./props.js";

package/es/Checkbox/v1/ToggleFacade/index.js

@@ -25,7 +25,7 @@ var _dec, _class;
 
 import { Component } from 'react';
 import { IconCheckSolid, IconXSolid } from '@instructure/ui-icons';
-import { withStyleLegacy as withStyle } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import { allowedProps } from "./props.js";

package/es/Checkbox/v1/index.js

@@ -31,7 +31,7 @@ import { logError as error } from '@instructure/console';
 import { isActiveElement } from '@instructure/ui-dom-utils';
 import { omitProps, withDeterministicId } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view/v11_6';
-import { withStyleLegacy as withStyle } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { CheckboxFacade } from "./CheckboxFacade/index.js";
 import { ToggleFacade } from "./ToggleFacade/index.js";
 import generateStyle from "./styles.js";

package/es/Checkbox/v2/CheckboxFacade/index.js

@@ -25,7 +25,7 @@ var _dec, _class;
 
 import { Component } from 'react';
 import { CheckInstUIIcon, MinusInstUIIcon, renderIconWithProps } from '@instructure/ui-icons';
-import { withStyle } from '@instructure/emotion';
+import { withStyleNew } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import { allowedProps } from "./props.js";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
@@ -34,7 +34,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 parent: Checkbox
 ---
 **/
-let CheckboxFacade = (_dec = withStyle(generateStyle, 'Checkbox'), _dec(_class = class CheckboxFacade extends Component {
+let CheckboxFacade = (_dec = withStyleNew(generateStyle, 'Checkbox'), _dec(_class = class CheckboxFacade extends Component {
   static displayName = "CheckboxFacade";
   static componentId = 'CheckboxFacade';
   static allowedProps = allowedProps;

package/es/Checkbox/v2/ToggleFacade/index.js

@@ -25,7 +25,7 @@ var _dec, _class;
 
 import { Component } from 'react';
 import { CheckInstUIIcon, XInstUIIcon, renderIconWithProps } from '@instructure/ui-icons';
-import { withStyle } from '@instructure/emotion';
+import { withStyleNew } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import { allowedProps } from "./props.js";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
@@ -34,7 +34,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 parent: Checkbox
 ---
 **/
-let ToggleFacade = (_dec = withStyle(generateStyle, 'Toggle'), _dec(_class = class ToggleFacade extends Component {
+let ToggleFacade = (_dec = withStyleNew(generateStyle, 'Toggle'), _dec(_class = class ToggleFacade extends Component {
   static displayName = "ToggleFacade";
   static componentId = 'ToggleFacade';
   static allowedProps = allowedProps;

package/es/Checkbox/v2/index.js

@@ -31,7 +31,7 @@ import { logError as error } from '@instructure/console';
 import { isActiveElement } from '@instructure/ui-dom-utils';
 import { omitProps, withDeterministicId } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view/latest';
-import { withStyle } from '@instructure/emotion';
+import { withStyleNew } from '@instructure/emotion';
 import { CheckboxFacade } from "./CheckboxFacade/index.js";
 import { ToggleFacade } from "./ToggleFacade/index.js";
 import generateStyle from "./styles.js";
@@ -43,7 +43,7 @@ category: components
 tags: toggle, switch
 ---
 **/
-let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = class Checkbox extends Component {
+let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle), _dec(_class = _dec2(_class = class Checkbox extends Component {
   static displayName = "Checkbox";
   static componentId = 'Checkbox';
   static allowedProps = allowedProps;

package/lib/Checkbox/v1/CheckboxFacade/index.js

@@ -42,7 +42,7 @@ var _dec, _class;
 parent: Checkbox
 ---
 **/
-let CheckboxFacade = exports.CheckboxFacade = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class CheckboxFacade extends _react.Component {
+let CheckboxFacade = exports.CheckboxFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class CheckboxFacade extends _react.Component {
   static displayName = "CheckboxFacade";
   static componentId = 'CheckboxFacade';
   static allowedProps = _props.allowedProps;

package/lib/Checkbox/v1/ToggleFacade/index.js

@@ -42,7 +42,7 @@ var _dec, _class;
 parent: Checkbox
 ---
 **/
-let ToggleFacade = exports.ToggleFacade = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class ToggleFacade extends _react.Component {
+let ToggleFacade = exports.ToggleFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class ToggleFacade extends _react.Component {
   static displayName = "ToggleFacade";
   static componentId = 'ToggleFacade';
   static allowedProps = _props.allowedProps;

package/lib/Checkbox/v1/index.js

@@ -64,7 +64,7 @@ category: components
 tags: toggle, switch
 ---
 **/
-let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class Checkbox extends _react.Component {
+let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class Checkbox extends _react.Component {
   static displayName = "Checkbox";
   static componentId = 'Checkbox';
   static allowedProps = _props.allowedProps;

package/lib/Checkbox/v2/CheckboxFacade/index.js

@@ -40,7 +40,7 @@ var _dec, _class;
 parent: Checkbox
 ---
 **/
-let CheckboxFacade = exports.CheckboxFacade = (_dec = (0, _emotion.withStyle)(_styles.default, 'Checkbox'), _dec(_class = class CheckboxFacade extends _react.Component {
+let CheckboxFacade = exports.CheckboxFacade = (_dec = (0, _emotion.withStyleNew)(_styles.default, 'Checkbox'), _dec(_class = class CheckboxFacade extends _react.Component {
   static displayName = "CheckboxFacade";
   static componentId = 'CheckboxFacade';
   static allowedProps = _props.allowedProps;

package/lib/Checkbox/v2/ToggleFacade/index.js

@@ -40,7 +40,7 @@ var _dec, _class;
 parent: Checkbox
 ---
 **/
-let ToggleFacade = exports.ToggleFacade = (_dec = (0, _emotion.withStyle)(_styles.default, 'Toggle'), _dec(_class = class ToggleFacade extends _react.Component {
+let ToggleFacade = exports.ToggleFacade = (_dec = (0, _emotion.withStyleNew)(_styles.default, 'Toggle'), _dec(_class = class ToggleFacade extends _react.Component {
   static displayName = "ToggleFacade";
   static componentId = 'ToggleFacade';
   static allowedProps = _props.allowedProps;

package/lib/Checkbox/v2/index.js

@@ -63,7 +63,7 @@ category: components
 tags: toggle, switch
 ---
 **/
-let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = class Checkbox extends _react.Component {
+let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = _dec2(_class = class Checkbox extends _react.Component {
   static displayName = "Checkbox";
   static componentId = 'Checkbox';
   static allowedProps = _props.allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-checkbox",
-  "version": "11.7.3-snapshot-33",
+  "version": "11.7.3-snapshot-38",
   "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.2",
     "keycode": "^2",
-    "@instructure/console": "11.7.3-snapshot-33",
-    "@instructure/emotion": "11.7.3-snapshot-33",
-    "@instructure/ui-dom-utils": "11.7.3-snapshot-33",
-    "@instructure/ui-form-field": "11.7.3-snapshot-33",
-    "@instructure/shared-types": "11.7.3-snapshot-33",
-    "@instructure/ui-icons": "11.7.3-snapshot-33",
-    "@instructure/ui-react-utils": "11.7.3-snapshot-33",
-    "@instructure/ui-svg-images": "11.7.3-snapshot-33",
-    "@instructure/ui-themes": "11.7.3-snapshot-33",
-    "@instructure/ui-utils": "11.7.3-snapshot-33",
-    "@instructure/uid": "11.7.3-snapshot-33",
-    "@instructure/ui-view": "11.7.3-snapshot-33"
+    "@instructure/console": "11.7.3-snapshot-38",
+    "@instructure/emotion": "11.7.3-snapshot-38",
+    "@instructure/shared-types": "11.7.3-snapshot-38",
+    "@instructure/ui-dom-utils": "11.7.3-snapshot-38",
+    "@instructure/ui-form-field": "11.7.3-snapshot-38",
+    "@instructure/ui-icons": "11.7.3-snapshot-38",
+    "@instructure/ui-react-utils": "11.7.3-snapshot-38",
+    "@instructure/ui-svg-images": "11.7.3-snapshot-38",
+    "@instructure/ui-utils": "11.7.3-snapshot-38",
+    "@instructure/ui-themes": "11.7.3-snapshot-38",
+    "@instructure/ui-view": "11.7.3-snapshot-38",
+    "@instructure/uid": "11.7.3-snapshot-38"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.7.3-snapshot-33",
-    "@instructure/ui-babel-preset": "11.7.3-snapshot-33",
-    "@instructure/ui-color-utils": "11.7.3-snapshot-33"
+    "@instructure/ui-axe-check": "11.7.3-snapshot-38",
+    "@instructure/ui-babel-preset": "11.7.3-snapshot-38",
+    "@instructure/ui-color-utils": "11.7.3-snapshot-38"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Checkbox/v1/CheckboxFacade/index.tsx

@@ -27,7 +27,7 @@ import { Component } from 'react'
 import { SVGIcon } from '@instructure/ui-svg-images'
 import { IconCheckMarkSolid } from '@instructure/ui-icons'
 
-import { withStyleLegacy as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Checkbox/v1/README.md

@@ -162,6 +162,20 @@ type: example
 />
 ```
 
+### Required Fields
+
+Whenever a `Checkbox` is required, you must include a note explaining what the asterisk means — typically "Fields marked with an asterisk (\*) are required."
+
+```js
+---
+type: example
+---
+<FormFieldGroup description="Terms" rowSpacing="small" layout="stacked">
+  <Text>Fields marked with an asterisk <span aria-hidden="true">(*)</span> are required.</Text>
+  <Checkbox label="I agree to the terms and conditions" value="terms" isRequired />
+</FormFieldGroup>
+```
+
 ### Guidelines
 
 ```js

package/src/Checkbox/v1/ToggleFacade/index.tsx

@@ -26,7 +26,7 @@ import { Component } from 'react'
 
 import { IconCheckSolid, IconXSolid } from '@instructure/ui-icons'
 
-import { withStyleLegacy as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Checkbox/v1/index.tsx

@@ -32,7 +32,7 @@ import { isActiveElement } from '@instructure/ui-dom-utils'
 import { omitProps, withDeterministicId } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view/v11_6'
 
-import { withStyleLegacy as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import { CheckboxFacade } from './CheckboxFacade'
 import { ToggleFacade } from './ToggleFacade'

package/src/Checkbox/v2/CheckboxFacade/index.tsx

@@ -30,7 +30,7 @@ import {
   renderIconWithProps
 } from '@instructure/ui-icons'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleNew } from '@instructure/emotion'
 
 import generateStyle from './styles'
 
@@ -42,7 +42,7 @@ import type { CheckboxFacadeProps } from './props'
 parent: Checkbox
 ---
 **/
-@withStyle(generateStyle, 'Checkbox')
+@withStyleNew(generateStyle, 'Checkbox')
 class CheckboxFacade extends Component<CheckboxFacadeProps> {
   static readonly componentId = 'CheckboxFacade'
 

package/src/Checkbox/v2/README.md

@@ -166,6 +166,20 @@ type: example
 
 The underlying `<input>` has a `data-checked` attribute (`"true"`, `"false"`, or `"mixed"` when indeterminate) that can be queried from the DOM to read the current state.
 
+### Required Fields
+
+Whenever a `Checkbox` is required, you must include a note explaining what the asterisk means — typically "Fields marked with an asterisk (\*) are required."
+
+```js
+---
+type: example
+---
+<FormFieldGroup description="Terms" rowSpacing="small" layout="stacked">
+  <Text>Fields marked with an asterisk <span aria-hidden="true">(*)</span> are required.</Text>
+  <Checkbox label="I agree to the terms and conditions" value="terms" isRequired />
+</FormFieldGroup>
+```
+
 ### Guidelines
 
 ```js

package/src/Checkbox/v2/ToggleFacade/index.tsx

@@ -30,7 +30,7 @@ import {
   renderIconWithProps
 } from '@instructure/ui-icons'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleNew } from '@instructure/emotion'
 
 import generateStyle from './styles'
 
@@ -42,7 +42,7 @@ import type { ToggleFacadeProps } from './props'
 parent: Checkbox
 ---
 **/
-@withStyle(generateStyle, 'Toggle')
+@withStyleNew(generateStyle, 'Toggle')
 class ToggleFacade extends Component<ToggleFacadeProps> {
   static readonly componentId = 'ToggleFacade'
 

package/src/Checkbox/v2/index.tsx

@@ -32,7 +32,7 @@ import { isActiveElement } from '@instructure/ui-dom-utils'
 import { omitProps, withDeterministicId } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view/latest'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleNew } from '@instructure/emotion'
 
 import { CheckboxFacade } from './CheckboxFacade'
 import { ToggleFacade } from './ToggleFacade'
@@ -50,7 +50,7 @@ tags: toggle, switch
 **/
 
 @withDeterministicId()
-@withStyle(generateStyle)
+@withStyleNew(generateStyle)
 class Checkbox extends Component<CheckboxProps, CheckboxState> {
   static readonly componentId = 'Checkbox'