Migrate ToggleButtonGroup component from useStyles to useDefinition

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

packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -14,32 +14,27 @@
  * limitations under the License.
  */
 
-import clsx from 'clsx';
 import { forwardRef, Ref } from 'react';
 import { ToggleButtonGroup as AriaToggleButtonGroup } from 'react-aria-components';
 import type { ToggleButtonGroupProps } from './types';
-import { useStyles } from '../../hooks/useStyles';
+import { useDefinition } from '../../hooks/useDefinition';
 import { ToggleButtonGroupDefinition } from './definition';
-import styles from './ToggleButtonGroup.module.css';
 
 /** @public */
 export const ToggleButtonGroup = forwardRef(
   (props: ToggleButtonGroupProps, ref: Ref<HTMLDivElement>) => {
-    const { classNames, dataAttributes, cleanedProps } = useStyles(
+    const { ownProps, restProps, dataAttributes } = useDefinition(
       ToggleButtonGroupDefinition,
-      {
-        ...props,
-      },
+      props,
     );
-
-    const { className, children, ...rest } = cleanedProps;
+    const { classes, children } = ownProps;
 
     return (
       <AriaToggleButtonGroup
-        className={clsx(classNames.root, styles[classNames.root], className)}
+        className={classes.root}
         ref={ref}
         {...dataAttributes}
-        {...rest}
+        {...restProps}
       >
         {children}
       </AriaToggleButtonGroup>

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

@@ -14,17 +14,23 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { ToggleButtonGroupOwnProps } from './types';
+import styles from './ToggleButtonGroup.module.css';
 
 /**
  * Component definition for ToggleButtonGroup
  * @public
  */
-export const ToggleButtonGroupDefinition = {
-  classNames: {
-    root: 'bui-ToggleButtonGroup',
-  },
-  dataAttributes: {
-    orientation: ['horizontal', 'vertical'] as const,
-  },
-} as const satisfies ComponentDefinition;
+export const ToggleButtonGroupDefinition =
+  defineComponent<ToggleButtonGroupOwnProps>()({
+    styles,
+    classNames: {
+      root: 'bui-ToggleButtonGroup',
+    },
+    propDefs: {
+      orientation: { dataAttribute: true },
+      className: {},
+      children: {},
+    },
+  });

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

@@ -14,10 +14,20 @@
  * limitations under the License.
  */
 
+import type { ReactNode } from 'react';
 import type { ToggleButtonGroupProps as AriaToggleButtonGroupProps } from 'react-aria-components';
 
 /** @public */
-export interface ToggleButtonGroupProps
-  extends Omit<AriaToggleButtonGroupProps, 'orientation'> {
+export type ToggleButtonGroupOwnProps = {
   orientation?: NonNullable<AriaToggleButtonGroupProps['orientation']>;
-}
+  className?: string;
+  children?: ReactNode;
+};
+
+/** @public */
+export interface ToggleButtonGroupProps
+  extends Omit<
+      AriaToggleButtonGroupProps,
+      'orientation' | 'className' | 'children'
+    >,
+    ToggleButtonGroupOwnProps {}