diff --git a/packages/ui/src/components/FieldError/FieldError.tsx b/packages/ui/src/components/FieldError/FieldError.tsx index 0016486fe7..8331bd0385 100644 --- a/packages/ui/src/components/FieldError/FieldError.tsx +++ b/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( (props: FieldErrorProps, ref) => { - const { classNames, cleanedProps } = useStyles(FieldErrorDefinition, props); - const { className, ...rest } = cleanedProps; + const { ownProps, restProps } = useDefinition(FieldErrorDefinition, props); + const { classes } = ownProps; - return ( - - ); + return ; }, ); diff --git a/packages/ui/src/components/FieldError/definition.ts b/packages/ui/src/components/FieldError/definition.ts index d7174dfc99..1846c3396f 100644 --- a/packages/ui/src/components/FieldError/definition.ts +++ b/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()({ + styles, classNames: { root: 'bui-FieldError', }, -} as const satisfies ComponentDefinition; + propDefs: { + className: {}, + }, +}); diff --git a/packages/ui/src/components/FieldError/index.ts b/packages/ui/src/components/FieldError/index.ts index 1d3abf8398..8848020341 100644 --- a/packages/ui/src/components/FieldError/index.ts +++ b/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'; diff --git a/packages/ui/src/components/FieldError/types.ts b/packages/ui/src/components/FieldError/types.ts new file mode 100644 index 0000000000..835f9327ea --- /dev/null +++ b/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, + FieldErrorOwnProps {}