refactor(ui): update Button to use defineComponent

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

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

@@ -14,21 +14,30 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import styles from './Button.module.css';
 
 /**
  * Component definition for Button
  * @public
  */
-export const ButtonDefinition = {
+export const ButtonDefinition = defineComponent({
+  styles,
   classNames: {
     root: 'bui-Button',
     content: 'bui-ButtonContent',
     spinner: 'bui-ButtonSpinner',
   },
-  dataAttributes: {
-    size: ['small', 'medium', 'large'] as const,
-    variant: ['primary', 'secondary', 'tertiary'] as const,
-    loading: [true, false] as const,
+  surface: 'leaf',
+  propDefs: {
+    size: { dataAttribute: true, default: 'small' },
+    variant: { dataAttribute: true, default: 'primary' },
+    loading: { dataAttribute: true },
+    iconStart: {},
+    iconEnd: {},
+    onSurface: {},
+    children: {},
+    className: {},
+    style: {},
   },
-} as const satisfies ComponentDefinition;
+});

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

@@ -14,27 +14,33 @@
  * limitations under the License.
  */
 
-import { Breakpoint } from '../..';
-import { ReactElement, ReactNode } from 'react';
-import { ButtonProps as RAButtonProps } from 'react-aria-components';
-import { Responsive, Surface } from '../../types';
+import type { ReactElement, ReactNode, CSSProperties } from 'react';
+import type { ButtonProps as RAButtonProps } from 'react-aria-components';
+import type { Responsive, Surface } from '../../types';
+
+/**
+ * Button's own properties (excluding inherited React Aria props)
+ *
+ * @public
+ */
+export type ButtonOwnProps = {
+  size?: Responsive<'small' | 'medium' | 'large'>;
+  variant?: Responsive<'primary' | 'secondary' | 'tertiary'>;
+  iconStart?: ReactElement;
+  iconEnd?: ReactElement;
+  loading?: boolean;
+  /** Surface the button is placed on. Defaults to context surface if available */
+  onSurface?: Responsive<Surface>;
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+};
 
 /**
  * Properties for {@link Button}
  *
  * @public
  */
-export interface ButtonProps extends RAButtonProps {
-  size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
-  variant?:
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | Partial<Record<Breakpoint, 'primary' | 'secondary' | 'tertiary'>>;
-  iconStart?: ReactElement;
-  iconEnd?: ReactElement;
-  children?: ReactNode;
-  loading?: boolean;
-  /** Surface the button is placed on. Defaults to context surface if available */
-  onSurface?: Responsive<Surface>;
-}
+export interface ButtonProps
+  extends Omit<RAButtonProps, 'children' | 'className' | 'style'>,
+    ButtonOwnProps {}