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]>
WordPress · Mamaduka · Nov 10, 2022 · Sep 19, 2022 · Oct 18, 2022 · Oct 20, 2022
commit a69ad93cf5afd9d85b9e18b77a064261ede1ead9
@@ -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)
 

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

@@ -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(

@@ -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`