Convert the ColorPalette component to TypeScript (#44632)

* Convert the ColorPalette component to TypeScript

    There are some ts-ignore statements
    that would be good to remove.

* Correct the PR number in the CHANGELOG

* Apply Marco's suggestion to remove ts-ignore comments

Destructure props int constants after the function
signature, not inside it.

* Replace complex type with ReactNode, thanks to Marco's suggestion

* Apply Marco's suggestions for TS verbatim

#44632 (review)

* Prevent an error from colors possibly being undefined

Types of property 'colors' are incompatible.
  Type 'Colors | undefined' is not assignable to type '(Color | MultipleColors)[]'.
    Type 'undefined' is not assignable to type '(Color | MultipleColors)[]'.

* Rename Color and MultipleColors to ColorObject and PaletteObject

* Alphabetize the imports again

* Remove another needless ts-ignore comment

* Revert "Prevent an error from colors possibly being undefined"

This reverts commit 7fe648e.

* Make colors allow undefined

* Make actions optional, which I forgot before

* Commit Marco's changes, including a named export

* Add default tags, thanks to Marco's idea

* Apply Marco's suggestion to remove ts-ignore

Add 'as CSSProperties'
to remove the need for ts-ignore

* Apply Marco's suggestions, creating UnforwardedColorProps

The jsx example might not be right.
Also, I added a description for the component
in the JS DocBlock, as there wasn't one in README.md.
But maybe that's not right.

* Fix a linting error, remove needless className

* Commit Marco's suggestion: Update packages/components/src/color-palette/stories/index.tsx

Co-authored-by: Marco Ciampini <[email protected]>

* Commit Marco's suggestion: Update packages/components/src/color-palette/types.ts

Co-authored-by: Marco Ciampini <[email protected]>

* Rename test/index.js to test/indes.tsx, mv snapshot

* Add types to test/index.tsx

* Renamce styles.js to styles.ts

* Commit Marco's suggestion: Update packages/components/src/color-palette/types.ts

Co-authored-by: Marco Ciampini <[email protected]>

* Revert "Add types to test/index.tsx"

This reverts commit 06f7c4e.

* Paste Marco's description verbatim

#44632 (review)

* Copy props verbatim from types.ts into README.md

* Update the JSDoc description to be the same as the README.md description

The usage example was already the same
as in the README.md

* Remove extra entry for Tooltip

I think I added this
when merging in trunk and resolving the conflicts.

* Move the CHANGELOG entry up, to Unreleased

* Move Usage section to the top of the README. remove experimental props from README

* Commit Marco's suggestion: Update packages/components/src/color-palette/README.md

Co-authored-by: Marco Ciampini <[email protected]>

* Remove the example of the full props

* Change the props format to match CONTRIBUTING.md

https://github.com/WordPress/gutenberg/blob/a42805e157f6c6933f4ef7cabcfc87fa3af81aea/packages/components/CONTRIBUTING.md#readme-example

* Commit Marco's suggestion: Update packages/components/src/color-palette/stories/index.tsx

Co-authored-by: Marco Ciampini <[email protected]>

* Commit Marco's suggestion: Update packages/components/src/color-palette/types.ts

Co-authored-by: Marco Ciampini <[email protected]>

* Commit Marco's suggestion: Update packages/components/src/color-palette/types.ts

Co-authored-by: Marco Ciampini <[email protected]>

* Commit Marco's suggestion: Update packages/components/src/color-palette/types.ts

Co-authored-by: Marco Ciampini <[email protected]>

Co-authored-by: Marco Ciampini <[email protected]>

packages/components/CHANGELOG.md

@@ -32,6 +32,7 @@
 ### Internal
 
 -   `NavigationMenu` updated to ignore `react/exhaustive-deps` eslint rule ([#44090](https://github.com/WordPress/gutenberg/pull/44090)).
+-   `ColorPalette`: Convert to TypeScript ([#44632](https://github.com/WordPress/gutenberg/pull/44632)).
 
 ## 21.0.0 (2022-09-13)
 

packages/components/src/border-control/types.ts

@@ -16,7 +16,7 @@ export type Border = {
 
 export type Color = {
 	name: string;
-	color: CSSProperties[ 'color' ];
+	color: NonNullable< CSSProperties[ 'color' ] >;
 };
 
 export type ColorOrigin = {

packages/components/src/circular-option-picker/index.js

@@ -16,13 +16,14 @@ import Button from '../button';
 import Dropdown from '../dropdown';
 import Tooltip from '../tooltip';
 
-function Option( {
-	className,
-	isSelected,
-	selectedIconProps,
-	tooltipText,
-	...additionalProps
-} ) {
+function Option( props ) {
+	const {
+		className,
+		isSelected,
+		selectedIconProps,
+		tooltipText,
+		...additionalProps
+	} = props;
 	const optionButton = (
 		<Button
 			isPressed={ isSelected }
@@ -52,12 +53,8 @@ function Option( {
 	);
 }
 
-function DropdownLinkAction( {
-	buttonProps,
-	className,
-	dropdownProps,
-	linkText,
-} ) {
+function DropdownLinkAction( props ) {
+	const { buttonProps, className, dropdownProps, linkText } = props;
 	return (
 		<Dropdown
 			className={ classnames(
@@ -80,7 +77,8 @@ function DropdownLinkAction( {
 	);
 }
 
-function ButtonAction( { className, children, ...additionalProps } ) {
+function ButtonAction( props ) {
+	const { className, children, ...additionalProps } = props;
 	return (
 		<Button
 			className={ classnames(
@@ -95,12 +93,8 @@ function ButtonAction( { className, children, ...additionalProps } ) {
 	);
 }
 
-export default function CircularOptionPicker( {
-	actions,
-	className,
-	options,
-	children,
-} ) {
+export default function CircularOptionPicker( props ) {
+	const { actions, className, options, children } = props;
 	return (
 		<div
 			className={ classnames(

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

@@ -1,54 +1,6 @@
 # ColorPalette
 
-## Props
-
-The component accepts the following props.
-
-{ colors, disableCustomColors = false, value, onChange, className, clearable = true }
-
-### colors
-
-Array with the colors to be shown.
-
--   Type: `Array`
--   Required: Yes
-
-### disableCustomColors
-
-Whether to allow custom color or not.
-
--   Type: `Boolean`
--   Required: No
--   Default: false
-
-### value
-
-currently active value
-
--   Type: `String`
--   Required: No
-
-### onChange
-
-Callback called when a color is selected.
-
--   Type: `Function`
--   Required: Yes
-
-### className
-
-classes to be applied to the container.
-
--   Type: `String`
--   Required: No
-
-### clearable
-
-Whether the palette should have a clearing button or not.
-
--   Type: `Boolean`
--   Required: No
--   Default: true
+`ColorPalette` allows the user to pick a color from a list of pre-defined color entries.
 
 ## Usage
 
@@ -79,3 +31,53 @@ If you're using this component outside the editor, you can
 for the `ColorPalette`'s color swatches, by rendering your `ColorPalette` with a
 `Popover.Slot` further up the element tree and within a
 `SlotFillProvider` overall.
+
+## Props
+
+The component accepts the following props.
+
+### `colors`: `( PaletteObject | ColorObject )[]`
+
+Array with the colors to be shown. When displaying multiple color palettes to choose from, the format of the array changes from an array of colors objects, to an array of color palettes.
+
+-   Required: No
+-   Default: `[]`
+
+### `disableCustomColors`: `boolean`
+
+Whether to allow the user to pick a custom color on top of the predefined choices (defined via the `colors` prop).
+
+-   Required: No
+-   Default: `false`
+
+### `enableAlpha`: `boolean`
+
+Whether the color picker should display the alpha channel both in the bottom inputs as well as in the color picker itself.
+
+-   Required: No
+-   Default: `false`
+
+### `value`: `string`
+
+currently active value
+
+-   Required: No
+
+### `onChange`: `OnColorChange`
+
+Callback called when a color is selected.
+
+-   Required: Yes
+
+### `className`: `string`
+
+classes to be applied to the container.
+
+-   Required: No
+
+### `clearable`: `boolean`
+
+Whether the palette should have a clearing button.
+
+-   Required: No
+-   Default: `true`