diff --git a/packages/ui/src/components/RadioGroup/RadioGroup.tsx b/packages/ui/src/components/RadioGroup/RadioGroup.tsx index de6cc3793b..f84f71849a 100644 --- a/packages/ui/src/components/RadioGroup/RadioGroup.tsx +++ b/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( (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( secondaryLabel || (isRequired ? 'Required' : null); return ( - + -
- {children} -
+
{children}
); @@ -82,16 +72,10 @@ RadioGroup.displayName = 'RadioGroup'; /** @public */ export const Radio = forwardRef((props, ref) => { - const { className, ...rest } = props; - - const { classNames } = useStyles(RadioGroupDefinition); + const { ownProps, restProps } = useDefinition(RadioDefinition, props); return ( - + ); }); diff --git a/packages/ui/src/components/RadioGroup/definition.ts b/packages/ui/src/components/RadioGroup/definition.ts index 254d1641ad..7ee5c368e5 100644 --- a/packages/ui/src/components/RadioGroup/definition.ts +++ b/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()({ + 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()({ + styles, + classNames: { + root: 'bui-Radio', + }, + propDefs: { + className: {}, + }, +}); diff --git a/packages/ui/src/components/RadioGroup/index.ts b/packages/ui/src/components/RadioGroup/index.ts index fe7ae6a65c..5cee2ee552 100644 --- a/packages/ui/src/components/RadioGroup/index.ts +++ b/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'; diff --git a/packages/ui/src/components/RadioGroup/types.ts b/packages/ui/src/components/RadioGroup/types.ts index 8e2148401f..a0011f3759 100644 --- a/packages/ui/src/components/RadioGroup/types.ts +++ b/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, - Omit { +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 {} + +/** @public */ +export type RadioOwnProps = { + className?: string; +}; + +/** @public */ +export interface RadioProps + extends RadioOwnProps, + Omit {}