diff --git a/packages/ui/src/components/FieldLabel/FieldLabel.tsx b/packages/ui/src/components/FieldLabel/FieldLabel.tsx index 3c685f9479..924ac29464 100644 --- a/packages/ui/src/components/FieldLabel/FieldLabel.tsx +++ b/packages/ui/src/components/FieldLabel/FieldLabel.tsx @@ -16,62 +16,32 @@ import { Label } from 'react-aria-components'; import { forwardRef } from 'react'; import type { FieldLabelProps } from './types'; -import { useStyles } from '../../hooks/useStyles'; +import { useDefinition } from '../../hooks/useDefinition'; import { FieldLabelDefinition } from './definition'; -import styles from './FieldLabel.module.css'; -import clsx from 'clsx'; /** @public */ export const FieldLabel = forwardRef( (props: FieldLabelProps, ref) => { - const { classNames, cleanedProps } = useStyles(FieldLabelDefinition, props); - const { - className, - label, - secondaryLabel, - description, - htmlFor, - id, - ...rest - } = cleanedProps; + const { ownProps, restProps } = useDefinition(FieldLabelDefinition, props); + const { classes, label, secondaryLabel, description, htmlFor, id } = + ownProps; if (!label) return null; return ( -
+
{label && ( -
); diff --git a/packages/ui/src/components/FieldLabel/definition.ts b/packages/ui/src/components/FieldLabel/definition.ts index d6833a9478..dc55c4f2af 100644 --- a/packages/ui/src/components/FieldLabel/definition.ts +++ b/packages/ui/src/components/FieldLabel/definition.ts @@ -14,17 +14,28 @@ * limitations under the License. */ -import type { ComponentDefinition } from '../../types'; +import { defineComponent } from '../../hooks/useDefinition'; +import type { FieldLabelOwnProps } from './types'; +import styles from './FieldLabel.module.css'; /** * Component definition for FieldLabel * @public */ -export const FieldLabelDefinition = { +export const FieldLabelDefinition = defineComponent()({ + styles, classNames: { root: 'bui-FieldLabelWrapper', label: 'bui-FieldLabel', secondaryLabel: 'bui-FieldSecondaryLabel', description: 'bui-FieldDescription', }, -} as const satisfies ComponentDefinition; + propDefs: { + label: {}, + secondaryLabel: {}, + description: {}, + htmlFor: {}, + id: {}, + className: {}, + }, +}); diff --git a/packages/ui/src/components/FieldLabel/types.ts b/packages/ui/src/components/FieldLabel/types.ts index 7f1d8a24b1..89cea5fae4 100644 --- a/packages/ui/src/components/FieldLabel/types.ts +++ b/packages/ui/src/components/FieldLabel/types.ts @@ -15,8 +15,7 @@ */ /** @public */ -export interface FieldLabelProps - extends Pick, 'className'> { +export type FieldLabelOwnProps = { /** * The label of the text field */ @@ -41,4 +40,9 @@ export interface FieldLabelProps * The id of the text field */ id?: string; -} + + className?: string; +}; + +/** @public */ +export interface FieldLabelProps extends FieldLabelOwnProps {}