ColorIndicator: Convert component to TypeScript (#41587)

* ColorIndicator: Convert component to TypeScript

* Update CHANGELOG.md

* Apply suggestions from code review

Co-authored-by: Lena Morita <lena@jaguchi.com>

* Clearify colorValue in readme file

* Remove unused exclude from story

* Add forwardref

* Update CHANGELOG.md

* Remove export

* Update CHANGELOG.md

Co-authored-by: Lena Morita <lena@jaguchi.com>

packages/components/CHANGELOG.md

@@ -6,10 +6,15 @@
 
 -   `ColorPicker`: Remove horizontal scrollbar when using HSL or RGB color input types. ([#41646](https://github.com/WordPress/gutenberg/pull/41646))
 
+### Enhancements
+
+-   Wrapped `ColorIndicator` in a `forwardRef` call ([#41587](https://github.com/WordPress/gutenberg/pull/41587)).
+
 ### Internal
 
 -   `Spinner`: Convert to TypeScript and update storybook ([#41540](https://github.com/WordPress/gutenberg/pull/41540/)).
 -   `InputControl`: Add tests and update to use `@testing-library/user-event` ([#41421](https://github.com/WordPress/gutenberg/pull/41421)).
+-   `ColorIndicator`: Convert to TypeScript ([#41587](https://github.com/WordPress/gutenberg/pull/41587)).
 -   `AlignmentMatrixControl`: Refactor away from `_.flattenDeep()` in utils ([#41814](https://github.com/WordPress/gutenberg/pull/41814/)).
 
 ## 19.13.0 (2022-06-15)
@@ -42,7 +47,6 @@
 -   `InputControl` updated to satisfy `react/exhuastive-deps` eslint rule ([#41601](https://github.com/WordPress/gutenberg/pull/41601))
 -   `Modal`: updated to satisfy `react/exhuastive-deps` eslint rule ([#41610](https://github.com/WordPress/gutenberg/pull/41610))
 
-
 ### Experimental
 
 -   `Navigation`: improve unit tests by using `@testing-library/user-event` and modern `@testing-library` assertions; add unit test for controlled component ([#41668](https://github.com/WordPress/gutenberg/pull/41668)).

packages/components/src/color-indicator/README.md

@@ -1,6 +1,6 @@
 # ColorIndicator
 
-ColorIndicator is a React component that renders a specific color in a squared box. It's often used to summarize a collection of used colors in a child component.
+ColorIndicator is a React component that renders a specific color in a circle. It's often used to summarize a collection of used colors in a child component.
 
 ### Single component
 
@@ -22,16 +22,14 @@ const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;
 
 The component accepts the following props:
 
-### colorValue
+### `className`: `string`
 
-The color of the indicator. Any value from the [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) property is supported.
+Extra classes for the used `<span>` element. By default only `component-color-indicator` is added.
 
--   Type: `string`
--   Required: Yes
+-   Required: No
 
-### className
+### `colorValue`: `CSSProperties[ 'background' ]`
 
-Extra classes for the used `<span>` element. By default only `component-color-indicator` is added.
+The color of the indicator. Any value from the CSS [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) property is supported.
 
--   Type: `string`
--   Required: No
+-   Required: Yes

packages/components/src/color-indicator/index.tsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../ui/context';
+import type { ColorIndicatorProps } from './types';
+
+function UnforwardedColorIndicator(
+	props: WordPressComponentProps< ColorIndicatorProps, 'span', false >,
+	forwardedRef: ForwardedRef< HTMLSpanElement >
+) {
+	const { className, colorValue, ...additionalProps } = props;
+
+	return (
+		<span
+			className={ classnames( 'component-color-indicator', className ) }
+			style={ { background: colorValue } }
+			ref={ forwardedRef }
+			{ ...additionalProps }
+		/>
+	);
+}
+
+/**
+ * ColorIndicator is a React component that renders a specific color in a
+ * circle. It's often used to summarize a collection of used colors in a child
+ * component.
+ *
+ * ```jsx
+ * import { ColorIndicator } from '@wordpress/components';
+ *
+ * const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;
+ * ```
+ */
+export const ColorIndicator = forwardRef( UnforwardedColorIndicator );
+
+export default ColorIndicator;

packages/components/src/color-indicator/stories/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ColorIndicator from '..';
+
+const meta: ComponentMeta< typeof ColorIndicator > = {
+	component: ColorIndicator,
+	title: 'Components/ColorIndicator',
+	argTypes: {
+		colorValue: {
+			control: { type: 'color' },
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ColorIndicator > = ( { ...args } ) => (
+	<ColorIndicator { ...args } />
+);
+
+export const Default: ComponentStory< typeof ColorIndicator > = Template.bind(
+	{}
+);
+Default.args = {
+	colorValue: '#0073aa',
+};

packages/components/src/color-indicator/test/__snapshots__/index.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorIndicator matches the snapshot 1`] = `
+<div>
+  <span
+    aria-label="sample label"
+    class="component-color-indicator"
+    style="background: rgb(255, 255, 255);"
+  />
+</div>
+`;

packages/components/src/color-indicator/test/index.js → packages/components/src/color-indicator/test/index.tsx

@@ -1,19 +1,19 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
-import ColorIndicator from '../';
+import ColorIndicator from '..';
 
 describe( 'ColorIndicator', () => {
 	it( 'matches the snapshot', () => {
-		const wrapper = shallow(
+		const { container } = render(
 			<ColorIndicator aria-label="sample label" colorValue="#fff" />
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

packages/components/src/color-indicator/types.ts

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+
+export type ColorIndicatorProps = {
+	/**
+	 * The color of the indicator. Any value from the CSS `background` property
+	 * is supported.
+	 */
+	colorValue: CSSProperties[ 'background' ];
+};