Migrate FieldError component from useStyles to useDefinition

Signed-off-by: Johan Persson <johanopersson@gmail.com>

packages/ui/src/components/FieldError/FieldError.tsx

@@ -15,28 +15,18 @@
  */
 
 import { forwardRef } from 'react';
-import {
-  FieldError as AriaFieldError,
-  type FieldErrorProps,
-} from 'react-aria-components';
-import clsx from 'clsx';
-import styles from './FieldError.module.css';
-import { useStyles } from '../../hooks/useStyles';
+import { FieldError as AriaFieldError } from 'react-aria-components';
+import type { FieldErrorProps } from './types';
+import { useDefinition } from '../../hooks/useDefinition';
 import { FieldErrorDefinition } from './definition';
 
 /** @public */
 export const FieldError = forwardRef<HTMLDivElement, FieldErrorProps>(
   (props: FieldErrorProps, ref) => {
-    const { classNames, cleanedProps } = useStyles(FieldErrorDefinition, props);
-    const { className, ...rest } = cleanedProps;
+    const { ownProps, restProps } = useDefinition(FieldErrorDefinition, props);
+    const { classes } = ownProps;
 
-    return (
-      <AriaFieldError
-        className={clsx(classNames.root, styles[classNames.root], className)}
-        ref={ref}
-        {...rest}
-      />
-    );
+    return <AriaFieldError className={classes.root} ref={ref} {...restProps} />;
   },
 );
 

packages/ui/src/components/FieldError/definition.ts

@@ -14,14 +14,20 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { FieldErrorOwnProps } from './types';
+import styles from './FieldError.module.css';
 
 /**
  * Component definition for FieldError
  * @public
  */
-export const FieldErrorDefinition = {
+export const FieldErrorDefinition = defineComponent<FieldErrorOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-FieldError',
   },
-} as const satisfies ComponentDefinition;
+  propDefs: {
+    className: {},
+  },
+});

packages/ui/src/components/FieldError/index.ts

@@ -14,5 +14,6 @@
  * limitations under the License.
  */
 
-export * from './FieldError';
+export { FieldError } from './FieldError';
 export { FieldErrorDefinition } from './definition';
+export type { FieldErrorOwnProps, FieldErrorProps } from './types';

packages/ui/src/components/FieldError/types.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { FieldErrorProps as RAFieldErrorProps } from 'react-aria-components';
+
+/** @public */
+export type FieldErrorOwnProps = {
+  className?: string;
+};
+
+/** @public */
+export interface FieldErrorProps
+  extends Omit<RAFieldErrorProps, 'className'>,
+    FieldErrorOwnProps {}