@instructure/ui-form-field 11.7.3-snapshot-4 → 11.7.3-snapshot-7

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-4](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-4) (2026-04-28)
+## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
 
 **Note:** Version bump only for package @instructure/ui-form-field
 

package/es/FormFieldGroup/v2/styles.js

@@ -27,9 +27,8 @@
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} _componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (_componentTheme, props) => {

package/es/FormFieldMessage/v2/styles.js

@@ -27,10 +27,10 @@
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @return The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, params, sharedTokens) => {
   const variant = params.variant;

package/es/FormFieldMessages/v2/styles.js

@@ -27,7 +27,7 @@
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} _componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */

package/lib/FormFieldGroup/v2/styles.js

@@ -33,9 +33,8 @@ exports.default = void 0;
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} _componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (_componentTheme, props) => {

package/lib/FormFieldMessage/v2/styles.js

@@ -33,10 +33,10 @@ exports.default = void 0;
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @return The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, params, sharedTokens) => {
   const variant = params.variant;

package/lib/FormFieldMessages/v2/styles.js

@@ -33,7 +33,7 @@ exports.default = void 0;
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} _componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "11.7.3-snapshot-4",
+  "version": "11.7.3-snapshot-7",
   "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.27.6",
-    "@instructure/emotion": "11.7.3-snapshot-4",
-    "@instructure/console": "11.7.3-snapshot-4",
-    "@instructure/shared-types": "11.7.3-snapshot-4",
-    "@instructure/ui-a11y-content": "11.7.3-snapshot-4",
-    "@instructure/ui-a11y-utils": "11.7.3-snapshot-4",
-    "@instructure/ui-grid": "11.7.3-snapshot-4",
-    "@instructure/ui-react-utils": "11.7.3-snapshot-4",
-    "@instructure/ui-utils": "11.7.3-snapshot-4",
-    "@instructure/ui-icons": "11.7.3-snapshot-4",
-    "@instructure/uid": "11.7.3-snapshot-4"
+    "@instructure/console": "11.7.3-snapshot-7",
+    "@instructure/emotion": "11.7.3-snapshot-7",
+    "@instructure/ui-a11y-content": "11.7.3-snapshot-7",
+    "@instructure/shared-types": "11.7.3-snapshot-7",
+    "@instructure/ui-a11y-utils": "11.7.3-snapshot-7",
+    "@instructure/ui-grid": "11.7.3-snapshot-7",
+    "@instructure/ui-icons": "11.7.3-snapshot-7",
+    "@instructure/ui-themes": "11.7.3-snapshot-7",
+    "@instructure/uid": "11.7.3-snapshot-7",
+    "@instructure/ui-react-utils": "11.7.3-snapshot-7",
+    "@instructure/ui-utils": "11.7.3-snapshot-7"
   },
   "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-4",
-    "@instructure/ui-babel-preset": "11.7.3-snapshot-4",
-    "@instructure/ui-themes": "11.7.3-snapshot-4"
+    "@instructure/ui-axe-check": "11.7.3-snapshot-7",
+    "@instructure/ui-babel-preset": "11.7.3-snapshot-7"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/FormFieldGroup/v2/props.ts

@@ -24,7 +24,6 @@
 
 import type {
   AsElementType,
-  FormFieldGroupTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
@@ -73,7 +72,7 @@ type PropKeys = keyof FormFieldGroupOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type FormFieldGroupProps = FormFieldGroupOwnProps &
-  WithStyleProps<FormFieldGroupTheme, FormFieldGroupStyle> &
+  WithStyleProps<null, FormFieldGroupStyle> &
   OtherHTMLAttributes<FormFieldGroupOwnProps> &
   // Adding other props that can be passed to FormFieldLayout,
   // excluding the ones we set manually

package/src/FormFieldGroup/v2/styles.ts

@@ -29,14 +29,12 @@ import type { FormFieldGroupProps, FormFieldGroupStyle } from './props'
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} _componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-  _componentTheme: {},
+  _componentTheme: never,
   props: FormFieldGroupProps
 ): FormFieldGroupStyle => {
   const { disabled } = props

package/src/FormFieldLayout/v2/props.ts

@@ -28,11 +28,12 @@ import type {
 } from '@instructure/shared-types'
 import type {
   ComponentStyle,
-  Spacing,
-  ThemeOverrideValue
+  NewThemeOverrideProp,
+  Spacing
 } from '@instructure/emotion'
 import type { FormMessage } from '../../utils/v1/FormPropTypes'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type FormFieldLayoutOwnProps = {
   label: React.ReactNode
@@ -111,9 +112,9 @@ type PropKeys = keyof FormFieldLayoutOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type FormFieldLayoutProps = FormFieldLayoutOwnProps & {
-  themeOverride?: ThemeOverrideValue
-} & OtherHTMLAttributes<FormFieldLayoutOwnProps> &
+type FormFieldLayoutProps = FormFieldLayoutOwnProps &
+  NewThemeOverrideProp<ReturnType<NewComponentTypes['FormFieldLayout']>> &
+  OtherHTMLAttributes<FormFieldLayoutOwnProps> &
   WithDeterministicIdProps
 
 type FormFieldLayoutStyle = ComponentStyle<

package/src/FormFieldMessage/v2/props.ts

@@ -22,11 +22,12 @@
  * SOFTWARE.
  */
 
-import type { ComponentStyle, ThemeOverrideValue } from '@instructure/emotion'
+import type { ComponentStyle, NewThemeOverrideProp } from '@instructure/emotion'
 import type {
   FormMessageType,
   FormMessageChild
 } from '../../utils/v1/FormPropTypes'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type FormFieldMessageOwnProps = {
   variant?: FormMessageType
@@ -37,9 +38,8 @@ type PropKeys = keyof FormFieldMessageOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type FormFieldMessageProps = FormFieldMessageOwnProps & {
-  themeOverride?: ThemeOverrideValue
-}
+type FormFieldMessageProps = FormFieldMessageOwnProps &
+  NewThemeOverrideProp<ReturnType<NewComponentTypes['FormFieldMessage']>>
 
 type FormFieldMessageStyle = ComponentStyle<'formFieldMessage' | 'icon'>
 const allowedProps: AllowedPropKeys = ['variant', 'children']

package/src/FormFieldMessage/v2/styles.ts

@@ -35,10 +35,10 @@ type StyleParams = {
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @return The final style object, which will be used in the component
  */
 const generateStyle = (
   componentTheme: ReturnType<NewComponentTypes['FormFieldMessage']>,

package/src/FormFieldMessages/v2/props.ts

@@ -22,10 +22,7 @@
  * SOFTWARE.
  */
 
-import type {
-  FormFieldMessagesTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { FormMessage } from '../../utils/v1/FormPropTypes'
 
@@ -49,7 +46,7 @@ type PropKeys = keyof FormFieldMessagesOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type FormFieldMessagesProps = FormFieldMessagesOwnProps &
-  WithStyleProps<FormFieldMessagesTheme, FormFieldMessagesStyle> &
+  WithStyleProps<null, FormFieldMessagesStyle> &
   OtherHTMLAttributes<FormFieldMessagesOwnProps>
 
 type FormFieldMessagesStyle = ComponentStyle<'formFieldMessages' | 'message'>

package/src/FormFieldMessages/v2/styles.ts

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-import type { FormFieldMessagesTheme } from '@instructure/shared-types'
 import type { FormFieldMessagesProps, FormFieldMessagesStyle } from './props'
 
 /**
@@ -30,12 +29,12 @@ import type { FormFieldMessagesProps, FormFieldMessagesStyle } from './props'
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} _componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  _componentTheme: FormFieldMessagesTheme,
+  _componentTheme: never,
   props: FormFieldMessagesProps
 ): FormFieldMessagesStyle => {
   return {