Refactor Button component to TypeScript

packages/components/src/border-box-control/border-box-control-linked-button/component.tsx

@@ -27,7 +27,7 @@ const BorderBoxControlLinkedButton = (
 		<Tooltip text={ label }>
 			<View className={ className }>
 				<Button
-					{ ...buttonProps }
+					{ ...( buttonProps as Parameters< typeof Button >[ 0 ] ) }
 					isSmall
 					icon={ isLinked ? link : linkOff }
 					iconSize={ 24 }

packages/components/src/border-control/border-control-dropdown/component.tsx

@@ -166,7 +166,7 @@ const BorderControlDropdown = (
 			onClick={ onToggle }
 			variant="tertiary"
 			aria-label={ toggleAriaLabel }
-			position={ dropdownPosition }
+			tooltipPosition={ dropdownPosition }
 			label={ __( 'Border color and style picker' ) }
 			showTooltip={ true }
 		>

packages/components/src/button/deprecated.js → packages/components/src/button/deprecated.tsx

@@ -1,4 +1,8 @@
-// @ts-nocheck
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -8,9 +12,23 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Button from '../button';
+import Button from '.';
+import type { ButtonProps, DeprecatedIconButtonProps, TagName } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
-function IconButton( { labelPosition, size, tooltip, label, ...props }, ref ) {
+function UnforwardedIconButton(
+	{
+		label,
+		labelPosition,
+		size,
+		tooltip,
+		...props
+	}: WordPressComponentProps<
+		ButtonProps & DeprecatedIconButtonProps,
+		TagName
+	>,
+	ref: ForwardedRef< any >
+) {
 	deprecated( 'wp.components.IconButton', {
 		since: '5.4',
 		alternative: 'wp.components.Button',
@@ -29,4 +47,4 @@ function IconButton( { labelPosition, size, tooltip, label, ...props }, ref ) {
 	);
 }
 
-export default forwardRef( IconButton );
+export default forwardRef( UnforwardedIconButton );

packages/components/src/button/index.js → packages/components/src/button/index.tsx

@@ -1,8 +1,8 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+import type { ForwardedRef, HTMLProps, MouseEvent, ReactElement } from 'react';
 
 /**
  * WordPress dependencies
@@ -17,8 +17,18 @@ import { useInstanceId } from '@wordpress/compose';
 import Tooltip from '../tooltip';
 import Icon from '../icon';
 import { VisuallyHidden } from '../visually-hidden';
-
-const disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ];
+import type { WordPressComponentProps } from '../ui/context';
+import type {
+	ButtonProps,
+	DeprecatedButtonProps,
+	DisabledEvent,
+	TagName,
+} from './types';
+
+const disabledEventsOnDisabledButton: DisabledEvent[] = [
+	'onMouseDown',
+	'onClick',
+];
 
 function useDeprecatedProps( {
 	isDefault,
@@ -28,7 +38,7 @@ function useDeprecatedProps( {
 	isLink,
 	variant,
 	...otherProps
-} ) {
+}: WordPressComponentProps< ButtonProps & DeprecatedButtonProps, TagName > ) {
 	let computedVariant = variant;
 
 	if ( isPrimary ) {
@@ -63,7 +73,10 @@ function useDeprecatedProps( {
 	};
 }
 
-export function Button( props, ref ) {
+export function UnforwardedButton(
+	props: WordPressComponentProps< ButtonProps, TagName >,
+	ref: ForwardedRef< any >
+) {
 	const {
 		href,
 		target,
@@ -93,10 +106,12 @@ export function Button( props, ref ) {
 	);
 
 	const hasChildren =
-		children?.[ 0 ] &&
-		children[ 0 ] !== null &&
-		// Tooltip should not considered as a child
-		children?.[ 0 ]?.props?.className !== 'components-tooltip';
+		( 'string' === typeof children && !! children ) ||
+		( Array.isArray( children ) &&
+			children?.[ 0 ] &&
+			children[ 0 ] !== null &&
+			// Tooltip should not considered as a child
+			children?.[ 0 ]?.props?.className !== 'components-tooltip' );
 
 	const classes = classnames( 'components-button', className, {
 		'is-secondary': variant === 'secondary',
@@ -113,7 +128,7 @@ export function Button( props, ref ) {
 
 	const trulyDisabled = disabled && ! isFocusable;
 	const Tag = href !== undefined && ! trulyDisabled ? 'a' : 'button';
-	const tagProps =
+	const tagProps: HTMLProps< TagName > =
 		Tag === 'a'
 			? { href, target }
 			: {
@@ -128,9 +143,11 @@ export function Button( props, ref ) {
 		tagProps[ 'aria-disabled' ] = true;
 
 		for ( const disabledEvent of disabledEventsOnDisabledButton ) {
-			additionalProps[ disabledEvent ] = ( event ) => {
-				event.stopPropagation();
-				event.preventDefault();
+			additionalProps[ disabledEvent ] = ( event: MouseEvent ) => {
+				if ( event ) {
+					event.stopPropagation();
+					event.preventDefault();
+				}
 			};
 		}
 	}
@@ -145,24 +162,26 @@ export function Button( props, ref ) {
 			// There's a label and...
 			( !! label &&
 				// The children are empty and...
-				! children?.length &&
+				! ( children as string | ReactElement[] )?.length &&
 				// The tooltip is not explicitly disabled.
 				false !== showTooltip ) );
 
-	const descriptionId = describedBy ? instanceId : null;
+	const descriptionId = describedBy ? instanceId : undefined;
 
 	const describedById =
 		additionalProps[ 'aria-describedby' ] || descriptionId;
 
-	const element = (
-		<Tag
-			{ ...tagProps }
-			{ ...additionalProps }
-			className={ classes }
-			aria-label={ additionalProps[ 'aria-label' ] || label }
-			aria-describedby={ describedById }
-			ref={ ref }
-		>
+	const elementProps = {
+		...tagProps,
+		...additionalProps,
+		className: classes,
+		'aria-label': additionalProps[ 'aria-label' ] || label,
+		'aria-describedby': describedById,
+		ref,
+	};
+
+	const elementChildren = (
+		<>
 			{ icon && iconPosition === 'left' && (
 				<Icon icon={ icon } size={ iconSize } />
 			) }
@@ -171,9 +190,30 @@ export function Button( props, ref ) {
 				<Icon icon={ icon } size={ iconSize } />
 			) }
 			{ children }
-		</Tag>
+		</>
 	);
 
+	const element =
+		Tag === 'a' ? (
+			<a
+				{ ...( elementProps as WordPressComponentProps<
+					ButtonProps,
+					'a'
+				> ) }
+			>
+				{ elementChildren }
+			</a>
+		) : (
+			<button
+				{ ...( elementProps as WordPressComponentProps<
+					ButtonProps,
+					'button'
+				> ) }
+			>
+				{ elementChildren }
+			</button>
+		);
+
 	if ( ! shouldShowTooltip ) {
 		return (
 			<>
@@ -190,7 +230,12 @@ export function Button( props, ref ) {
 	return (
 		<>
 			<Tooltip
-				text={ children?.length && describedBy ? describedBy : label }
+				text={
+					( children as string | ReactElement[] )?.length &&
+					describedBy
+						? describedBy
+						: label
+				}
 				shortcut={ shortcut }
 				position={ tooltipPosition }
 			>
@@ -205,4 +250,5 @@ export function Button( props, ref ) {
 	);
 }
 
-export default forwardRef( Button );
+export const Button = forwardRef( UnforwardedButton );
+export default Button;

packages/components/src/button/stories/index.js → packages/components/src/button/stories/index.tsx

@@ -1,3 +1,9 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ReactNode } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -13,9 +19,9 @@ import {
  * Internal dependencies
  */
 import './style.css';
-import Button from '../';
+import Button from '..';
 
-export default {
+const meta: ComponentMeta< typeof Button > = {
 	title: 'Components/Button',
 	component: Button,
 	argTypes: {
@@ -118,54 +124,57 @@ export default {
 		docs: { source: { state: 'open' } },
 	},
 };
+export default meta;
 
-function Template( { children, ...props } ) {
-	return <Button { ...props }>{ children }</Button>;
-}
+const Template: ComponentStory< typeof Button > = ( props ) => {
+	return <Button { ...props }></Button>;
+};
 
-export const Default = Template.bind( {} );
+export const Default: ComponentStory< typeof Button > = Template.bind( {} );
 Default.args = {
 	children: 'Code is poetry',
 };
 
-export const Primary = Template.bind( {} );
+export const Primary: ComponentStory< typeof Button > = Template.bind( {} );
 Primary.args = {
 	...Default.args,
 	variant: 'primary',
 };
 
-export const Secondary = Template.bind( {} );
+export const Secondary: ComponentStory< typeof Button > = Template.bind( {} );
 Secondary.args = {
 	...Default.args,
 	variant: 'secondary',
 };
 
-export const Tertiary = Template.bind( {} );
+export const Tertiary: ComponentStory< typeof Button > = Template.bind( {} );
 Tertiary.args = {
 	...Default.args,
 	variant: 'tertiary',
 };
 
-export const Link = Template.bind( {} );
+export const Link: ComponentStory< typeof Button > = Template.bind( {} );
 Link.args = {
 	...Default.args,
 	variant: 'link',
 };
 
-export const IsDestructive = Template.bind( {} );
+export const IsDestructive: ComponentStory< typeof Button > = Template.bind(
+	{}
+);
 IsDestructive.args = {
 	...Default.args,
 	isDestructive: true,
 };
 
-export const Icon = Template.bind( {} );
+export const Icon: ComponentStory< typeof Button > = Template.bind( {} );
 Icon.args = {
 	label: 'Code is poetry',
 	icon: 'wordpress',
 };
 
-export const groupedIcons = () => {
-	const GroupContainer = ( { children } ) => (
+export const GroupedIcons: ComponentStory< typeof Button > = () => {
+	const GroupContainer = ( { children }: { children: ReactNode } ) => (
 		<div style={ { display: 'inline-flex' } }>{ children }</div>
 	);
 

packages/components/src/button/test/index.js → packages/components/src/button/test/index.tsx

@@ -12,8 +12,8 @@ import { plusCircle } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import Button from '../';
-import { Tooltip } from '../../';
+import Button from '..';
+import Tooltip from '../../tooltip';
 
 jest.mock( '../../icon', () => () => <div data-testid="test-icon" /> );
 
@@ -139,16 +139,6 @@ describe( 'Button', () => {
 			expect( screen.getByRole( 'button' ) ).toHaveClass( 'gutenberg' );
 		} );
 
-		it( 'should render an additional WordPress prop of value awesome', () => {
-			render( <Button WordPress="awesome" /> );
-
-			expect( console ).toHaveErrored();
-			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
-				'wordpress',
-				'awesome'
-			);
-		} );
-
 		it( 'should render an icon button', () => {
 			render( <Button icon={ plusCircle } /> );
 			const button = screen.getByRole( 'button' );
@@ -360,28 +350,33 @@ describe( 'Button', () => {
 
 	describe( 'deprecated props', () => {
 		it( 'should not break when the legacy isPrimary prop is passed', () => {
+			// @ts-expect-error
 			render( <Button isPrimary /> );
 			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-primary' );
 		} );
 
 		it( 'should not break when the legacy isSecondary prop is passed', () => {
+			// @ts-expect-error
 			render( <Button isSecondary /> );
 			expect( screen.getByRole( 'button' ) ).toHaveClass(
 				'is-secondary'
 			);
 		} );
 
 		it( 'should not break when the legacy isTertiary prop is passed', () => {
+			// @ts-expect-error
 			render( <Button isTertiary /> );
 			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-tertiary' );
 		} );
 
 		it( 'should not break when the legacy isLink prop is passed', () => {
+			// @ts-expect-error
 			render( <Button isLink /> );
 			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-link' );
 		} );
 
 		it( 'should warn when the isDefault prop is passed', () => {
+			// @ts-expect-error
 			render( <Button isDefault /> );
 			expect( screen.getByRole( 'button' ) ).toHaveClass(
 				'is-secondary'