Migrate ToggleButton component from useStyles to useDefinition

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

packages/ui/src/components/ToggleButton/ToggleButton.tsx

@@ -14,33 +14,27 @@
  * limitations under the License.
  */
 
-import clsx from 'clsx';
 import { forwardRef, Ref } from 'react';
 import { ToggleButton as AriaToggleButton } from 'react-aria-components';
 import type { ToggleButtonProps } from './types';
-import { useStyles } from '../../hooks/useStyles';
+import { useDefinition } from '../../hooks/useDefinition';
 import { ToggleButtonDefinition } from './definition';
-import styles from './ToggleButton.module.css';
 
 /** @public */
 export const ToggleButton = forwardRef(
   (props: ToggleButtonProps, ref: Ref<HTMLButtonElement>) => {
-    const { classNames, dataAttributes, cleanedProps } = useStyles(
+    const { ownProps, restProps, dataAttributes } = useDefinition(
       ToggleButtonDefinition,
-      {
-        size: 'small',
-        ...props,
-      },
+      props,
     );
-
-    const { children, className, iconStart, iconEnd, ...rest } = cleanedProps;
+    const { classes, children, iconStart, iconEnd } = ownProps;
 
     return (
       <AriaToggleButton
-        className={clsx(classNames.root, styles[classNames.root], className)}
+        className={classes.root}
         ref={ref}
         {...dataAttributes}
-        {...rest}
+        {...restProps}
       >
         {renderProps => {
           // If children is a function, call it with render props; otherwise use children as-is
@@ -48,10 +42,7 @@ export const ToggleButton = forwardRef(
             typeof children === 'function' ? children(renderProps) : children;
 
           return (
-            <span
-              className={clsx(classNames.content, styles[classNames.content])}
-              data-slot="content"
-            >
+            <span className={classes.content} data-slot="content">
               {iconStart}
               {renderedChildren}
               {iconEnd}

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

@@ -14,18 +14,25 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { ToggleButtonOwnProps } from './types';
+import styles from './ToggleButton.module.css';
 
 /**
  * Component definition for ToggleButton
  * @public
  */
-export const ToggleButtonDefinition = {
+export const ToggleButtonDefinition = defineComponent<ToggleButtonOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-ToggleButton',
     content: 'bui-ToggleButtonContent',
   },
-  dataAttributes: {
-    size: ['small', 'medium'] as const,
+  propDefs: {
+    size: { dataAttribute: true, default: 'small' },
+    iconStart: {},
+    iconEnd: {},
+    children: {},
+    className: {},
   },
-} as const satisfies ComponentDefinition;
+});

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

@@ -18,13 +18,20 @@ import type { Breakpoint } from '../..';
 import type { ReactElement } from 'react';
 import type { ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
 
+/** @public */
+export type ToggleButtonOwnProps = {
+  size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
+  iconStart?: ReactElement;
+  iconEnd?: ReactElement;
+  children?: AriaToggleButtonProps['children'];
+  className?: string;
+};
+
 /**
  * Properties for {@link ToggleButton}
  *
  * @public
  */
-export interface ToggleButtonProps extends AriaToggleButtonProps {
-  size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
-  iconStart?: ReactElement;
-  iconEnd?: ReactElement;
-}
+export interface ToggleButtonProps
+  extends Omit<AriaToggleButtonProps, 'children' | 'className'>,
+    ToggleButtonOwnProps {}