Migrate RadioGroup component from useStyles to useDefinition

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

packages/ui/src/components/RadioGroup/RadioGroup.tsx

@@ -19,30 +19,28 @@ import {
   RadioGroup as AriaRadioGroup,
   Radio as AriaRadio,
 } from 'react-aria-components';
-import clsx from 'clsx';
 import { FieldLabel } from '../FieldLabel';
 import { FieldError } from '../FieldError';
-import { useStyles } from '../../hooks/useStyles';
-import { RadioGroupDefinition } from './definition';
-import styles from './RadioGroup.module.css';
+import { useDefinition } from '../../hooks/useDefinition';
+import { RadioGroupDefinition, RadioDefinition } from './definition';
 
 import type { RadioGroupProps, RadioProps } from './types';
 
 /** @public */
 export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
   (props, ref) => {
-    const { classNames, cleanedProps } = useStyles(RadioGroupDefinition, props);
+    const { ownProps, restProps } = useDefinition(RadioGroupDefinition, props);
     const {
-      className,
+      classes,
       label,
       secondaryLabel,
       description,
       isRequired,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
       children,
-      ...rest
-    } = cleanedProps;
+    } = ownProps;
+
+    const ariaLabel = restProps['aria-label'];
+    const ariaLabelledBy = restProps['aria-labelledby'];
 
     useEffect(() => {
       if (!label && !ariaLabel && !ariaLabelledBy) {
@@ -57,21 +55,13 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
       secondaryLabel || (isRequired ? 'Required' : null);
 
     return (
-      <AriaRadioGroup
-        className={clsx(classNames.root, styles[classNames.root], className)}
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledBy}
-        {...rest}
-        ref={ref}
-      >
+      <AriaRadioGroup className={classes.root} {...restProps} ref={ref}>
         <FieldLabel
           label={label}
           secondaryLabel={secondaryLabelText}
           description={description}
         />
-        <div className={clsx(classNames.content, styles[classNames.content])}>
-          {children}
-        </div>
+        <div className={classes.content}>{children}</div>
         <FieldError />
       </AriaRadioGroup>
     );
@@ -82,16 +72,10 @@ RadioGroup.displayName = 'RadioGroup';
 
 /** @public */
 export const Radio = forwardRef<HTMLLabelElement, RadioProps>((props, ref) => {
-  const { className, ...rest } = props;
-
-  const { classNames } = useStyles(RadioGroupDefinition);
+  const { ownProps, restProps } = useDefinition(RadioDefinition, props);
 
   return (
-    <AriaRadio
-      className={clsx(classNames.radio, styles[classNames.radio], className)}
-      {...rest}
-      ref={ref}
-    />
+    <AriaRadio className={ownProps.classes.root} {...restProps} ref={ref} />
   );
 });
 

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

@@ -14,16 +14,40 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { RadioGroupOwnProps, RadioOwnProps } from './types';
+import styles from './RadioGroup.module.css';
 
 /**
  * Component definition for RadioGroup
  * @public
  */
-export const RadioGroupDefinition = {
+export const RadioGroupDefinition = defineComponent<RadioGroupOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-RadioGroup',
     content: 'bui-RadioGroupContent',
-    radio: 'bui-Radio',
   },
-} as const satisfies ComponentDefinition;
+  propDefs: {
+    children: {},
+    className: {},
+    label: {},
+    secondaryLabel: {},
+    description: {},
+    isRequired: {},
+  },
+});
+
+/**
+ * Component definition for Radio
+ * @public
+ */
+export const RadioDefinition = defineComponent<RadioOwnProps>()({
+  styles,
+  classNames: {
+    root: 'bui-Radio',
+  },
+  propDefs: {
+    className: {},
+  },
+});

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

@@ -16,4 +16,4 @@
 
 export * from './RadioGroup';
 export * from './types';
-export { RadioGroupDefinition } from './definition';
+export { RadioGroupDefinition, RadioDefinition } from './definition';

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

@@ -22,11 +22,26 @@ import type { FieldLabelProps } from '../FieldLabel/types';
 import { ReactNode } from 'react';
 
 /** @public */
-export interface RadioGroupProps
-  extends Omit<AriaRadioGroupProps, 'children'>,
-    Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
+export type RadioGroupOwnProps = {
   children?: ReactNode;
-}
+  className?: string;
+  label?: FieldLabelProps['label'];
+  secondaryLabel?: FieldLabelProps['secondaryLabel'];
+  description?: FieldLabelProps['description'];
+  isRequired?: AriaRadioGroupProps['isRequired'];
+};
 
 /** @public */
-export interface RadioProps extends AriaRadioProps {}
+export interface RadioGroupProps
+  extends RadioGroupOwnProps,
+    Omit<AriaRadioGroupProps, 'children' | keyof RadioGroupOwnProps> {}
+
+/** @public */
+export type RadioOwnProps = {
+  className?: string;
+};
+
+/** @public */
+export interface RadioProps
+  extends RadioOwnProps,
+    Omit<AriaRadioProps, keyof RadioOwnProps> {}