From 89731bdc41880faf1aa0e1259b6058803203c42c Mon Sep 17 00:00:00 2001
From: Treycos <19551067+Treycos@users.noreply.github.com>
Date: Tue, 27 Aug 2024 06:41:10 +0200
Subject: [PATCH] Convert IconButton to Typescript

(cherry picked from commit f033799d7a257b0554c877b4ae6dcc129ccd7fe1)

Closes #10364
---
 frontend/src/Components/Link/IconButton.js  | 59 ---------------------
 frontend/src/Components/Link/IconButton.tsx | 41 ++++++++++++++
 2 files changed, 41 insertions(+), 59 deletions(-)
 delete mode 100644 frontend/src/Components/Link/IconButton.js
 create mode 100644 frontend/src/Components/Link/IconButton.tsx

diff --git a/frontend/src/Components/Link/IconButton.js b/frontend/src/Components/Link/IconButton.js
deleted file mode 100644
index fffbe13e0..000000000
--- a/frontend/src/Components/Link/IconButton.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import Icon from 'Components/Icon';
-import translate from 'Utilities/String/translate';
-import Link from './Link';
-import styles from './IconButton.css';
-
-function IconButton(props) {
-  const {
-    className,
-    iconClassName,
-    name,
-    kind,
-    size,
-    isSpinning,
-    isDisabled,
-    ...otherProps
-  } = props;
-
-  return (
-    <Link
-      className={classNames(
-        className,
-        isDisabled && styles.isDisabled
-      )}
-      aria-label={translate('TableOptionsButton')}
-      isDisabled={isDisabled}
-      {...otherProps}
-    >
-      <Icon
-        className={iconClassName}
-        name={name}
-        kind={kind}
-        size={size}
-        isSpinning={isSpinning}
-      />
-    </Link>
-  );
-}
-
-IconButton.propTypes = {
-  ...Link.propTypes,
-  className: PropTypes.string.isRequired,
-  iconClassName: PropTypes.string,
-  kind: PropTypes.string,
-  name: PropTypes.object.isRequired,
-  size: PropTypes.number,
-  title: PropTypes.string,
-  isSpinning: PropTypes.bool,
-  isDisabled: PropTypes.bool
-};
-
-IconButton.defaultProps = {
-  className: styles.button,
-  size: 12
-};
-
-export default IconButton;
diff --git a/frontend/src/Components/Link/IconButton.tsx b/frontend/src/Components/Link/IconButton.tsx
new file mode 100644
index 000000000..b6951c00c
--- /dev/null
+++ b/frontend/src/Components/Link/IconButton.tsx
@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import React from 'react';
+import Icon, { IconProps } from 'Components/Icon';
+import translate from 'Utilities/String/translate';
+import Link, { LinkProps } from './Link';
+import styles from './IconButton.css';
+
+export interface IconButtonProps
+  extends Omit<LinkProps, 'name' | 'kind'>,
+    Pick<IconProps, 'name' | 'kind' | 'size' | 'isSpinning'> {
+  iconClassName?: IconProps['className'];
+}
+
+export default function IconButton({
+  className = styles.button,
+  iconClassName,
+  name,
+  kind,
+  size = 12,
+  isSpinning,
+  ...otherProps
+}: IconButtonProps) {
+  return (
+    <Link
+      className={classNames(
+        className,
+        otherProps.isDisabled && styles.isDisabled
+      )}
+      aria-label={translate('TableOptionsButton')}
+      {...otherProps}
+    >
+      <Icon
+        className={iconClassName}
+        name={name}
+        kind={kind}
+        size={size}
+        isSpinning={isSpinning}
+      />
+    </Link>
+  );
+}