@instructure/ui-form-field 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
@@ -11,6 +11,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
+### Features
+
+* **many:** add a way for consumers to pass their own component theme definition so they can build their own components with InstUI ([ce01c3e](https://github.com/instructure/instructure-ui/commit/ce01c3eedc46aa2588f4c8309a6eabf4461aaec7))
+
+
 
 
 

package/es/FormFieldGroup/v1/index.js

@@ -27,7 +27,7 @@ import "core-js/modules/es.array.includes.js";
 import { Component, Children } from 'react';
 import { Grid } from '@instructure/ui-grid/v11_6';
 import { pickProps, omitProps } from '@instructure/ui-react-utils';
-import { withStyleLegacy as withStyle } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { allowedProps as FormFieldLayoutAllowedProps } from "../../FormFieldLayout/v1/props.js";
 import { FormFieldLayout } from "../../FormFieldLayout/v1/index.js";
 import generateStyle from "./styles.js";

package/es/FormFieldGroup/v2/index.js

@@ -27,7 +27,7 @@ import "core-js/modules/es.array.includes.js";
 import { Component, Children } from 'react';
 import { Grid } from '@instructure/ui-grid/latest';
 import { pickProps, omitProps } from '@instructure/ui-react-utils';
-import { withStyle } from '@instructure/emotion';
+import { withStyleNew } from '@instructure/emotion';
 import { allowedProps as formFieldLayoutAllowedProps } from "../../FormFieldLayout/v2/props.js";
 import { FormFieldLayout } from "../../FormFieldLayout/v2/index.js";
 import generateStyle from "./styles.js";
@@ -38,7 +38,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 category: components
 ---
 **/
-let FormFieldGroup = (_dec = withStyle(generateStyle), _dec(_class = class FormFieldGroup extends Component {
+let FormFieldGroup = (_dec = withStyleNew(generateStyle), _dec(_class = class FormFieldGroup extends Component {
   static displayName = "FormFieldGroup";
   static componentId = 'FormFieldGroup';
   static allowedProps = allowedProps;

package/es/FormFieldLabel/v1/index.js

@@ -25,7 +25,7 @@ var _dec, _class;
 
 import { Component } from 'react';
 import { omitProps, getElementType } from '@instructure/ui-react-utils';
-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/FormFieldLabel/v2/index.js

@@ -25,7 +25,7 @@ var _dec, _class;
 
 import { Component } from 'react';
 import { omitProps, getElementType } from '@instructure/ui-react-utils';
-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/FormFieldLayout/v1/index.js

@@ -26,7 +26,7 @@ var _dec, _dec2, _class;
 import { Component } from 'react';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { omitProps, getElementType, withDeterministicId } from '@instructure/ui-react-utils';
-import { withStyleLegacy as withStyle } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { FormFieldMessages } from "../../FormFieldMessages/v1/index.js";
 import generateStyle from "./styles.js";
 import { allowedProps } from "./props.js";

package/es/FormFieldLayout/v2/index.js

@@ -25,7 +25,7 @@
 import { forwardRef, useEffect, useState, useCallback } from 'react';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { omitProps, useDeterministicId } from '@instructure/ui-react-utils';
-import { useStyle } from '@instructure/emotion';
+import { useStyleNew } from '@instructure/emotion';
 import { FormFieldMessages } from "../../FormFieldMessages/v2/index.js";
 import generateStyle from "./styles.js";
 import { allowedProps } from "./props.js";
@@ -85,7 +85,7 @@ const FormFieldLayout = /*#__PURE__*/forwardRef((props, ref) => {
   const invalid = !!filteredMessages?.find(m => m.type === 'error' || m.type === 'newError');
 
   // Styles
-  const styles = useStyle({
+  const styles = useStyleNew({
     generateStyle,
     themeOverride,
     params: {

package/es/FormFieldMessage/v1/index.js

@@ -26,7 +26,7 @@ var _dec, _class;
 import { Component } from 'react';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { IconWarningSolid } 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/FormFieldMessage/v2/index.js

@@ -25,7 +25,7 @@
 import { forwardRef } from 'react';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { AlertCircleInstUIIcon, CheckCircle2InstUIIcon } from '@instructure/ui-icons';
-import { useStyle } from '@instructure/emotion';
+import { useStyleNew } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
@@ -48,7 +48,7 @@ const FormFieldMessage = /*#__PURE__*/forwardRef(({
   children,
   themeOverride
 }, ref) => {
-  const styles = useStyle({
+  const styles = useStyleNew({
     generateStyle,
     themeOverride,
     params: {

package/es/FormFieldMessages/v1/index.js

@@ -25,7 +25,7 @@ var _dec, _class;
 
 import { Component } from 'react';
 import { omitProps } from '@instructure/ui-react-utils';
-import { withStyleLegacy as withStyle } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { FormFieldMessage } from "../../FormFieldMessage/v1/index.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";

package/es/FormFieldMessages/v2/index.js

@@ -25,7 +25,7 @@ var _dec, _class;
 
 import { Component } from 'react';
 import { omitProps } from '@instructure/ui-react-utils';
-import { withStyle } from '@instructure/emotion';
+import { withStyleNew } from '@instructure/emotion';
 import { FormFieldMessage } from "../../FormFieldMessage/v2/index.js";
 import generateStyle from "./styles.js";
 import { allowedProps } from "./props.js";
@@ -48,7 +48,7 @@ type: example
 ]} />
 ```
 **/
-let FormFieldMessages = (_dec = withStyle(generateStyle), _dec(_class = class FormFieldMessages extends Component {
+let FormFieldMessages = (_dec = withStyleNew(generateStyle), _dec(_class = class FormFieldMessages extends Component {
   static displayName = "FormFieldMessages";
   static componentId = 'FormFieldMessages';
   static allowedProps = allowedProps;

package/lib/FormFieldGroup/v1/index.js

@@ -46,7 +46,7 @@ var _dec, _class;
 category: components
 ---
 **/
-let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class FormFieldGroup extends _react.Component {
+let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class FormFieldGroup extends _react.Component {
   static displayName = "FormFieldGroup";
   static componentId = 'FormFieldGroup';
   static allowedProps = _props2.allowedProps;

package/lib/FormFieldGroup/v2/index.js

@@ -45,7 +45,7 @@ var _dec, _class;
 category: components
 ---
 **/
-let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = class FormFieldGroup extends _react.Component {
+let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = class FormFieldGroup extends _react.Component {
   static displayName = "FormFieldGroup";
   static componentId = 'FormFieldGroup';
   static allowedProps = _props2.allowedProps;

package/lib/FormFieldLabel/v1/index.js

@@ -55,7 +55,7 @@ type: example
  @deprecated since version 10. This is an internal component that will be
  removed in the future
 **/
-let FormFieldLabel = exports.FormFieldLabel = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class FormFieldLabel extends _react.Component {
+let FormFieldLabel = exports.FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class FormFieldLabel extends _react.Component {
   static displayName = "FormFieldLabel";
   static componentId = 'FormFieldLabel';
   static allowedProps = _props.allowedProps;

package/lib/FormFieldLabel/v2/index.js

@@ -55,7 +55,7 @@ type: example
  @deprecated since version 10. This is an internal component that will be
  removed in the future
 **/
-let FormFieldLabel = exports.FormFieldLabel = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class FormFieldLabel extends _react.Component {
+let FormFieldLabel = exports.FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class FormFieldLabel extends _react.Component {
   static displayName = "FormFieldLabel";
   static componentId = 'FormFieldLabel';
   static allowedProps = _props.allowedProps;

package/lib/FormFieldLayout/v1/index.js

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

package/lib/FormFieldLayout/v2/index.js

@@ -100,7 +100,7 @@ const FormFieldLayout = exports.FormFieldLayout = /*#__PURE__*/(0, _react.forwar
   const invalid = !!filteredMessages?.find(m => m.type === 'error' || m.type === 'newError');
 
   // Styles
-  const styles = (0, _emotion.useStyle)({
+  const styles = (0, _emotion.useStyleNew)({
     generateStyle: _styles.default,
     themeOverride,
     params: {

package/lib/FormFieldMessage/v1/index.js

@@ -52,7 +52,7 @@ type: example
 <FormFieldMessage variant="error">Invalid value</FormFieldMessage>
 ```
 **/
-let FormFieldMessage = exports.FormFieldMessage = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class FormFieldMessage extends _react.Component {
+let FormFieldMessage = exports.FormFieldMessage = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class FormFieldMessage extends _react.Component {
   static displayName = "FormFieldMessage";
   static componentId = 'FormFieldMessage';
   static allowedProps = _props.allowedProps;

package/lib/FormFieldMessage/v2/index.js

@@ -55,7 +55,7 @@ const FormFieldMessage = exports.FormFieldMessage = /*#__PURE__*/(0, _react.forw
   children,
   themeOverride
 }, ref) => {
-  const styles = (0, _emotion.useStyle)({
+  const styles = (0, _emotion.useStyleNew)({
     generateStyle: _styles.default,
     themeOverride,
     params: {

package/lib/FormFieldMessages/v1/index.js

@@ -55,7 +55,7 @@ type: example
 ]} />
 ```
 **/
-let FormFieldMessages = exports.FormFieldMessages = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class FormFieldMessages extends _react.Component {
+let FormFieldMessages = exports.FormFieldMessages = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class FormFieldMessages extends _react.Component {
   static displayName = "FormFieldMessages";
   static componentId = 'FormFieldMessages';
   static allowedProps = _props.allowedProps;

package/lib/FormFieldMessages/v2/index.js

@@ -54,7 +54,7 @@ type: example
 ]} />
 ```
 **/
-let FormFieldMessages = exports.FormFieldMessages = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = class FormFieldMessages extends _react.Component {
+let FormFieldMessages = exports.FormFieldMessages = (_dec = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = class FormFieldMessages extends _react.Component {
   static displayName = "FormFieldMessages";
   static componentId = 'FormFieldMessages';
   static allowedProps = _props.allowedProps;

package/package.json

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

package/src/FormFieldGroup/v1/README.md

@@ -100,6 +100,26 @@ type: example
   </FormFieldGroup>
 ```
 
+### Required Fields
+
+Whenever a `FormFieldGroup` contains required fields, you must include a note explaining what the asterisk means — typically "Fields marked with an asterisk (\*) are required."
+
+```js
+---
+type: example
+---
+<FormFieldGroup
+  description="Contact Information"
+  rowSpacing="small"
+  layout="stacked"
+>
+  <Text>Fields marked with an asterisk <span aria-hidden="true">(*)</span> are required.</Text>
+  <TextInput renderLabel="Full Name" isRequired />
+  <TextInput renderLabel="Email Address" isRequired />
+  <TextInput renderLabel="Phone Number" />
+</FormFieldGroup>
+```
+
 ### Guidelines
 
 ```js

package/src/FormFieldGroup/v1/index.tsx

@@ -26,7 +26,7 @@ import { Component, Children, ReactElement, AriaAttributes } from 'react'
 
 import { Grid } from '@instructure/ui-grid/v11_6'
 import { pickProps, omitProps } from '@instructure/ui-react-utils'
-import { withStyleLegacy as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import { allowedProps as FormFieldLayoutAllowedProps } from '../../FormFieldLayout/v1/props'
 

package/src/FormFieldGroup/v2/README.md

@@ -100,6 +100,26 @@ type: example
   </FormFieldGroup>
 ```
 
+### Required Fields
+
+Whenever a `FormFieldGroup` contains required fields, you must include a note explaining what the asterisk means — typically "Fields marked with an asterisk (\*) are required."
+
+```js
+---
+type: example
+---
+<FormFieldGroup
+  description="Contact Information"
+  rowSpacing="small"
+  layout="stacked"
+>
+  <Text>Fields marked with an asterisk <span aria-hidden="true">(*)</span> are required.</Text>
+  <TextInput renderLabel="Full Name" isRequired />
+  <TextInput renderLabel="Email Address" isRequired />
+  <TextInput renderLabel="Phone Number" />
+</FormFieldGroup>
+```
+
 ### Guidelines
 
 ```js

package/src/FormFieldGroup/v2/index.tsx

@@ -26,7 +26,7 @@ import { Component, Children, ReactElement, AriaAttributes } from 'react'
 
 import { Grid } from '@instructure/ui-grid/latest'
 import { pickProps, omitProps } from '@instructure/ui-react-utils'
-import { withStyle } from '@instructure/emotion'
+import { withStyleNew } from '@instructure/emotion'
 
 import { allowedProps as formFieldLayoutAllowedProps } from '../../FormFieldLayout/v2/props'
 
@@ -42,7 +42,7 @@ import type { FormFieldGroupProps } from './props'
 category: components
 ---
 **/
-@withStyle(generateStyle)
+@withStyleNew(generateStyle)
 class FormFieldGroup extends Component<FormFieldGroupProps> {
   static readonly componentId = 'FormFieldGroup'
 

package/src/FormFieldLabel/v1/index.tsx

@@ -25,7 +25,7 @@
 import { Component } from 'react'
 
 import { omitProps, getElementType } from '@instructure/ui-react-utils'
-import { withStyleLegacy as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/FormFieldLabel/v2/index.tsx

@@ -25,7 +25,7 @@
 import { Component } from 'react'
 
 import { omitProps, getElementType } from '@instructure/ui-react-utils'
-import { withStyleLegacy as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/FormFieldLayout/v1/index.tsx

@@ -30,7 +30,7 @@ import {
   withDeterministicId
 } from '@instructure/ui-react-utils'
 
-import { withStyleLegacy as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 import { FormFieldMessages } from '../../FormFieldMessages/v1'
 import generateStyle from './styles'
 import { allowedProps, FormFieldStyleProps } from './props'

package/src/FormFieldLayout/v2/index.tsx

@@ -26,7 +26,7 @@ import { forwardRef, useEffect, useState, useCallback } from 'react'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 import { omitProps, useDeterministicId } from '@instructure/ui-react-utils'
 
-import { useStyle } from '@instructure/emotion'
+import { useStyleNew } from '@instructure/emotion'
 import { FormFieldMessages } from '../../FormFieldMessages/v2'
 import generateStyle from './styles'
 import { allowedProps } from './props'
@@ -108,7 +108,7 @@ const FormFieldLayout = forwardRef<Element, FormFieldLayoutProps>(
     )
 
     // Styles
-    const styles = useStyle({
+    const styles = useStyleNew({
       generateStyle,
       themeOverride,
       params: {

package/src/FormFieldMessage/v1/index.tsx

@@ -28,7 +28,7 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 
 import { IconWarningSolid } 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/FormFieldMessage/v2/index.tsx

@@ -31,7 +31,7 @@ import {
   CheckCircle2InstUIIcon
 } from '@instructure/ui-icons'
 
-import { useStyle } from '@instructure/emotion'
+import { useStyleNew } from '@instructure/emotion'
 import generateStyle from './styles'
 
 import type { FormFieldMessageProps } from './props'
@@ -53,7 +53,7 @@ type: example
 **/
 const FormFieldMessage = forwardRef<HTMLSpanElement, FormFieldMessageProps>(
   ({ variant = 'hint', children, themeOverride }, ref) => {
-    const styles = useStyle({
+    const styles = useStyleNew({
       generateStyle,
       themeOverride,
       params: {

package/src/FormFieldMessages/v1/index.tsx

@@ -26,7 +26,7 @@ import { Component } from 'react'
 
 import { omitProps } from '@instructure/ui-react-utils'
 
-import { withStyleLegacy as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import { FormFieldMessage } from '../../FormFieldMessage/v1'
 

package/src/FormFieldMessages/v2/index.tsx

@@ -26,7 +26,7 @@ import { Component } from 'react'
 
 import { omitProps } from '@instructure/ui-react-utils'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleNew } from '@instructure/emotion'
 
 import { FormFieldMessage } from '../../FormFieldMessage/v2'
 
@@ -53,7 +53,7 @@ type: example
 ]} />
 ```
 **/
-@withStyle(generateStyle)
+@withStyleNew(generateStyle)
 class FormFieldMessages extends Component<FormFieldMessagesProps> {
   static readonly componentId = 'FormFieldMessages'