From 8084e21d320c71c115eb4db35071ac20441006b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Tue, 5 Jul 2022 18:14:51 +0200 Subject: [PATCH 1/4] Swatch: Refactor component to TypeScript --- .../components/src/swatch/{index.js => index.tsx} | 3 ++- packages/components/src/swatch/types.ts | 11 +++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) rename packages/components/src/swatch/{index.js => index.tsx} (77%) create mode 100644 packages/components/src/swatch/types.ts diff --git a/packages/components/src/swatch/index.js b/packages/components/src/swatch/index.tsx similarity index 77% rename from packages/components/src/swatch/index.js rename to packages/components/src/swatch/index.tsx index 1d86ace0ec773..d5aa9003b3823 100644 --- a/packages/components/src/swatch/index.js +++ b/packages/components/src/swatch/index.tsx @@ -7,8 +7,9 @@ import { swatch } from '@wordpress/icons'; * Internal dependencies */ import Icon from '../icon'; +import type { SwatchProps } from './types'; -function Swatch( { fill } ) { +function Swatch( { fill }: SwatchProps ) { return fill ? ( ) : ( diff --git a/packages/components/src/swatch/types.ts b/packages/components/src/swatch/types.ts new file mode 100644 index 0000000000000..96db68094ad6f --- /dev/null +++ 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' ]; +}; From 80d943f4a918b1b29e7d6300d6c69ce02733f5b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Tue, 5 Jul 2022 18:20:55 +0200 Subject: [PATCH 2/4] Update CHANGELOG.md --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c0295cfd63bac..fdbb13cda8d69 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -12,6 +12,7 @@ - `TextHighlight`: Convert to TypeScript ([#41698](https://github.com/WordPress/gutenberg/pull/41698)). - `Scrollable`: Convert to TypeScript ([#42016](https://github.com/WordPress/gutenberg/pull/42016)). - `Spacer`: Complete TypeScript migration ([#42013](https://github.com/WordPress/gutenberg/pull/42013)). +- `Swatch`: Convert to TypeScript ([#42162](https://github.com/WordPress/gutenberg/pull/42162)). - `TreeSelect`: Refactor away from `_.repeat()` ([#42070](https://github.com/WordPress/gutenberg/pull/42070/)). - `FocalPointPicker` updated to satisfy `react/exhuastive-deps` eslint rule ([#41520](https://github.com/WordPress/gutenberg/pull/41520)). - `ColorPicker` updated to satisfy `react/exhuastive-deps` eslint rule ([#41294](https://github.com/WordPress/gutenberg/pull/41294)). From 9a1a25b5f5934a5362f9b011f6238d6b7fd4c626 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Fri, 8 Jul 2022 16:16:33 +0200 Subject: [PATCH 3/4] Update tsconfig.json --- packages/components/tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index cc5f7e3be2634..b58f29202efdd 100644 --- 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/**/*", From 434967fc2c5da0cd5863a0b45501f2b1519ff9d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Wed, 13 Jul 2022 21:20:14 +0200 Subject: [PATCH 4/4] Apply suggestions from code review Co-authored-by: Lena Morita --- packages/components/src/swatch/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/swatch/index.tsx b/packages/components/src/swatch/index.tsx index d5aa9003b3823..955fb3079fe4a 100644 --- a/packages/components/src/swatch/index.tsx +++ b/packages/components/src/swatch/index.tsx @@ -9,6 +9,8 @@ import { swatch } from '@wordpress/icons'; import Icon from '../icon'; import type { SwatchProps } from './types'; +// This component will be deprecated. Use `ColorIndicator` instead. +// TODO: Consolidate this component with `ColorIndicator`. function Swatch( { fill }: SwatchProps ) { return fill ? (