Simplify the Button and IconButton code

Author: connor-baer

packages/circuit-ui/components/Button/Button.tsx

@@ -24,7 +24,7 @@ import { deprecate } from '../../util/logger.js';
 
 import classes from './Button.module.css';
 import {
-  createButtonComponent,
+  BaseButton,
   legacyButtonSizeMap,
   type SharedButtonProps,
 } from './base.js';
@@ -59,43 +59,49 @@ export type ButtonProps = SharedButtonProps & {
  * The Button component enables the user to perform an action or navigate
  * to a different screen.
  */
-export const Button = createButtonComponent<ButtonProps>(
-  'Button',
-  ({ className, size: legacySize = 'm', stretch, variant, ...props }) => {
-    const size = legacyButtonSizeMap[legacySize] || legacySize;
+export function Button({
+  className,
+  size: legacySize = 'm',
+  stretch,
+  variant,
+  ...props
+}: ButtonProps) {
+  const size = legacyButtonSizeMap[legacySize] || legacySize;
 
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      process.env.NODE_ENV !== 'test' &&
-      props.icon &&
-      props.navigationIcon
-    ) {
-      throw new CircuitError(
-        'Button',
-        'The leading and trailing icons cannot be used at the same time. Remove either the `icon` or the `navigationIcon` prop.',
-      );
-    }
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    process.env.NODE_ENV !== 'test' &&
+    props.icon &&
+    props.navigationIcon
+  ) {
+    throw new CircuitError(
+      'Button',
+      'The leading and trailing icons cannot be used at the same time. Remove either the `icon` or the `navigationIcon` prop.',
+    );
+  }
 
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      legacyButtonSizeMap[legacySize]
-    ) {
-      deprecate(
-        'Button',
-        `The \`${legacySize}\` size has been deprecated. Use the \`${legacyButtonSizeMap[legacySize]}\` size instead.`,
-      );
-    }
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    legacyButtonSizeMap[legacySize]
+  ) {
+    deprecate(
+      'Button',
+      `The \`${legacySize}\` size has been deprecated. Use the \`${legacyButtonSizeMap[legacySize]}\` size instead.`,
+    );
+  }
 
-    return {
-      className: clsx(
+  return (
+    <BaseButton
+      componentName="Button"
+      className={clsx(
         className,
         classes[size],
         stretch && classes.stretch,
         variant === 'tertiary' && classes.tertiary,
-      ),
-      variant,
-      size,
-      ...props,
-    };
-  },
-);
+      )}
+      variant={variant}
+      size={size}
+      {...props}
+    />
+  );
+}

packages/circuit-ui/components/Button/IconButton.tsx

@@ -22,7 +22,7 @@ import { CircuitError } from '../../util/errors.js';
 import { deprecate } from '../../util/logger.js';
 
 import {
-  createButtonComponent,
+  BaseButton,
   legacyButtonSizeMap,
   type SharedButtonProps,
 } from './base.js';
@@ -47,31 +47,35 @@ export type IconButtonProps = SharedButtonProps & {
  * The IconButton component enables the user to perform an action or navigate
  * to a different screen.
  */
-export const IconButton = createButtonComponent<IconButtonProps>(
-  'IconButton',
-  ({ className, size: legacySize = 'm', ...props }) => {
-    const size = legacyButtonSizeMap[legacySize] || legacySize;
+export function IconButton({
+  className,
+  size: legacySize = 'm',
+  ...props
+}: IconButtonProps) {
+  const size = legacyButtonSizeMap[legacySize] || legacySize;
 
-    if (process.env.NODE_ENV !== 'production' && !props.icon) {
-      throw new CircuitError('IconButton', 'The `icon` prop is missing.');
-    }
+  if (process.env.NODE_ENV !== 'production' && !props.icon) {
+    throw new CircuitError('IconButton', 'The `icon` prop is missing.');
+  }
 
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      legacyButtonSizeMap[legacySize]
-    ) {
-      deprecate(
-        'IconButton',
-        `The \`${legacySize}\` size has been deprecated. Use the \`${legacyButtonSizeMap[legacySize]}\` size instead.`,
-      );
-    }
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    legacyButtonSizeMap[legacySize]
+  ) {
+    deprecate(
+      'IconButton',
+      `The \`${legacySize}\` size has been deprecated. Use the \`${legacyButtonSizeMap[legacySize]}\` size instead.`,
+    );
+  }
 
-    return {
-      className: clsx(classes.base, classes[size], className),
-      size,
-      title: props.children,
-      'aria-label': props.children,
-      ...props,
-    };
-  },
-);
+  return (
+    <BaseButton
+      componentName="IconButton"
+      className={clsx(classes.base, classes[size], className)}
+      size={size}
+      title={props.children}
+      aria-label={props.children}
+      {...props}
+    />
+  );
+}

packages/circuit-ui/components/Button/base.spec.tsx

@@ -18,12 +18,15 @@ import { createRef } from 'react';
 
 import { render, axe, userEvent, screen } from '../../util/test-utils.js';
 
-import { createButtonComponent, type SharedButtonProps } from './base.js';
-
-const Button = createButtonComponent<SharedButtonProps>(
-  'TestButton',
-  (props) => ({ ...props, children: 'Button', size: 'm' }),
-);
+import { BaseButton, type SharedButtonProps } from './base.js';
+
+function Button({ size, ...props }: SharedButtonProps) {
+  return (
+    <BaseButton componentName="TestButton" size="m" {...props}>
+      Button
+    </BaseButton>
+  );
+}
 
 describe('Button', () => {
   it('should merge a custom class name with the default ones', () => {