Migrate FieldLabel component from useStyles to useDefinition

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

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<HTMLDivElement, FieldLabelProps>(
   (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 (
-      <div
-        className={clsx(classNames.root, styles[classNames.root], className)}
-        {...rest}
-        ref={ref}
-      >
+      <div className={classes.root} {...restProps} ref={ref}>
         {label && (
-          <Label
-            className={clsx(classNames.label, styles[classNames.label])}
-            htmlFor={htmlFor}
-            id={id}
-          >
+          <Label className={classes.label} htmlFor={htmlFor} id={id}>
             {label}
             {secondaryLabel && (
-              <span
-                aria-hidden="true"
-                className={clsx(
-                  classNames.secondaryLabel,
-                  styles[classNames.secondaryLabel],
-                )}
-              >
+              <span aria-hidden="true" className={classes.secondaryLabel}>
                 ({secondaryLabel})
               </span>
             )}
           </Label>
         )}
         {description && (
-          <div
-            className={clsx(
-              classNames.description,
-              styles[classNames.description],
-            )}
-          >
-            {description}
-          </div>
+          <div className={classes.description}>{description}</div>
         )}
       </div>
     );

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<FieldLabelOwnProps>()({
+  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: {},
+  },
+});

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

@@ -15,8 +15,7 @@
  */
 
 /** @public */
-export interface FieldLabelProps
-  extends Pick<React.HTMLAttributes<HTMLDivElement>, '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 {}