Dashicon: refactor to TypeScript (#45924)

* Dashicon: refactor to TypeScript * chore: fix the type definision on the Dashicon component * chore: remove unuse typedef on the Dashicon component * chore: update the changelog on packages/components
WordPress · Dec 5, 2022 · cf1e1ec · cf1e1ec
1 parent 13b7155
commit cf1e1ec
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -34,6 +34,7 @@
 -   `LinkedButton`: remove unnecessary `span` tag ([#46063](https://github.com/WordPress/gutenberg/pull/46063))
 -   NumberControl: refactor styles/tests/stories to TypeScript, replace fireEvent with user-event ([#45990](https://github.com/WordPress/gutenberg/pull/45990)).
 -   `useBaseField`: Convert to TypeScript ([#45712](https://github.com/WordPress/gutenberg/pull/45712)).
+-  `Dashicon`: Convert to TypeScript ([#45924](https://github.com/WordPress/gutenberg/pull/45924)).
 
 ### Documentation
 

diff --git a/packages/components/src/dashicon/index.js → packages/components/src/dashicon/index.tsx b/packages/components/src/dashicon/index.js → packages/components/src/dashicon/index.tsx
@@ -5,14 +5,20 @@
  * @property {string}                    [className] Class name
  * @property {number}                    [size]      Size of the icon
  */
-/** @typedef {import('react').ComponentPropsWithoutRef<'span'> & OwnProps} Props */
 
 /**
- * @param {Props} props
- * @return {JSX.Element} Element
+ * Internal dependencies
  */
+import type { WordPressComponentProps } from '../ui/context';
+import type { DashiconProps } from './types';
 
-function Dashicon( { icon, className, size = 20, style = {}, ...extraProps } ) {
+function Dashicon( {
+	icon,
+	className,
+	size = 20,
+	style = {},
+	...extraProps
+}: WordPressComponentProps< DashiconProps, 'span', false > ) {
 	const iconClass = [
 		'dashicon',
 		'dashicons',

diff --git a/packages/components/src/dashicon/types.ts b/packages/components/src/dashicon/types.ts
@@ -1,3 +1,20 @@
+export type DashiconProps = {
+	/**
+	 * The icon name
+	 */
+	icon: IconKey;
+
+	/**
+	 * Class name
+	 */
+	className?: string;
+
+	/**
+	 * Size of the icon
+	 */
+	size?: number;
+};
+
 export type IconKey =
 	| 'admin-appearance'
 	| 'admin-collapse'