Swatch: Convert component to TypeScript (#42162)

* Swatch: Refactor component to TypeScript * Update CHANGELOG.md * Update tsconfig.json * Apply suggestions from code review Co-authored-by: Lena Morita <lena@jaguchi.com> Co-authored-by: Lena Morita <lena@jaguchi.com>
WordPress · Aug 5, 2022 · d910ebe · d910ebe
1 parent 1933820
commit d910ebe
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -29,6 +29,7 @@
 -   `Flex`, `FlexItem`, `FlexBlock`: Convert to TypeScript ([#42537](https://github.com/WordPress/gutenberg/pull/42537)).
 -   `InputControl`: Fix incorrect `size` prop passing ([#42793](https://github.com/WordPress/gutenberg/pull/42793)).
 -   `Popover`: rewrite Storybook examples using controls [#42903](https://github.com/WordPress/gutenberg/pull/42903)).
+-   `Swatch`: Convert to TypeScript ([#42162](https://github.com/WordPress/gutenberg/pull/42162)).
 
 ## 19.16.0 (2022-07-27)
 

diff --git a/packages/components/src/swatch/index.js → packages/components/src/swatch/index.tsx b/packages/components/src/swatch/index.js → packages/components/src/swatch/index.tsx
@@ -7,8 +7,11 @@ import { swatch } from '@wordpress/icons';
  * Internal dependencies
  */
 import Icon from '../icon';
+import type { SwatchProps } from './types';
 
-function Swatch( { fill } ) {
+// This component will be deprecated. Use `ColorIndicator` instead.
+// TODO: Consolidate this component with `ColorIndicator`.
+function Swatch( { fill }: SwatchProps ) {
 	return fill ? (
 		<span className="components-swatch" style={ { background: fill } } />
 	) : (

diff --git a/packages/components/src/swatch/types.ts b/packages/components/src/swatch/types.ts
@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+
+export type SwatchProps = {
+	/**
+	 * The color to display in the swatch.
+	 */
+	fill?: CSSProperties[ 'background' ];
+};
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
@@ -85,6 +85,7 @@
 		"src/spacer/**/*",
 		"src/spinner/**/*",
 		"src/surface/**/*",
+		"src/swatch/**/*",
 		"src/text/**/*",
 		"src/text-control/**/*",
 		"src/text-highlight/**/*",