@wordpress/components 19.17.0 → 20.0.0

package/src/card/card-body/{component.js → component.tsx}

@@ -1,16 +1,21 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { Scrollable } from '../../scrollable';
 import { View } from '../../view';
 import { useCardBody } from './hook';
+import type { BodyProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                       forwardedRef
- */
-function CardBody( props, forwardedRef ) {
+function UnconnectedCardBody(
+	props: WordPressComponentProps< BodyProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const { isScrollable, ...otherProps } = useCardBody( props );
 
 	if ( isScrollable ) {
@@ -24,7 +29,6 @@ function CardBody( props, forwardedRef ) {
  * `CardBody` renders an optional content area for a `Card`.
  * Multiple `CardBody` components can be used within `Card` if needed.
  *
- * @example
  * ```jsx
  * import { Card, CardBody } from `@wordpress/components`;
  *
@@ -35,6 +39,6 @@ function CardBody( props, forwardedRef ) {
  * </Card>
  * ```
  */
-const ConnectedCardBody = contextConnect( CardBody, 'CardBody' );
+export const CardBody = contextConnect( UnconnectedCardBody, 'CardBody' );
 
-export default ConnectedCardBody;
+export default CardBody;

package/src/card/card-body/{hook.js → hook.ts}

@@ -6,14 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { BodyProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props
- */
-export function useCardBody( props ) {
+export function useCardBody(
+	props: WordPressComponentProps< BodyProps, 'div' >
+) {
 	const {
 		className,
 		isScrollable = false,

package/src/card/card-divider/{component.js → component.tsx}

@@ -1,15 +1,19 @@
 /**
- * Internal dependencies
+ * External dependencies
  */
-import { contextConnect } from '../../ui/context';
-import { Divider } from '../../divider';
-import { useCardDivider } from './hook';
+import type { ForwardedRef } from 'react';
 
 /**
- * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props
- * @param {import('react').ForwardedRef<any>}                                                                     forwardedRef
+ * Internal dependencies
  */
-function CardDivider( props, forwardedRef ) {
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import { Divider, DividerProps } from '../../divider';
+import { useCardDivider } from './hook';
+
+function UnconnectedCardDivider(
+	props: WordPressComponentProps< DividerProps, 'hr', false >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const dividerProps = useCardDivider( props );
 
 	return <Divider { ...dividerProps } ref={ forwardedRef } />;
@@ -19,7 +23,6 @@ function CardDivider( props, forwardedRef ) {
  * `CardDivider` renders an optional divider within a `Card`.
  * It is typically used to divide multiple `CardBody` components from each other.
  *
- * @example
  * ```jsx
  * import { Card, CardBody, CardDivider } from `@wordpress/components`;
  *
@@ -30,6 +33,9 @@ function CardDivider( props, forwardedRef ) {
  * </Card>
  * ```
  */
-const ConnectedCardDivider = contextConnect( CardDivider, 'CardDivider' );
+export const CardDivider = contextConnect(
+	UnconnectedCardDivider,
+	'CardDivider'
+);
 
-export default ConnectedCardDivider;
+export default CardDivider;

package/src/card/card-divider/{hook.js → hook.ts}

@@ -6,14 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { DividerProps } from '../../divider';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props
- */
-export function useCardDivider( props ) {
+export function useCardDivider(
+	props: WordPressComponentProps< DividerProps, 'hr', false >
+) {
 	const { className, ...otherProps } = useContextSystem(
 		props,
 		'CardDivider'

package/src/card/card-footer/{component.js → component.tsx}

@@ -1,15 +1,20 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { Flex } from '../../flex';
 import { useCardFooter } from './hook';
+import type { FooterProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                         forwardedRef
- */
-function CardFooter( props, forwardedRef ) {
+function UnconnectedCardFooter(
+	props: WordPressComponentProps< FooterProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const footerProps = useCardFooter( props );
 
 	return <Flex { ...footerProps } ref={ forwardedRef } />;
@@ -18,7 +23,6 @@ function CardFooter( props, forwardedRef ) {
 /**
  * `CardFooter` renders an optional footer within a `Card`.
  *
- * @example
  * ```jsx
  * import { Card, CardBody, CardFooter } from `@wordpress/components`;
  *
@@ -28,6 +32,6 @@ function CardFooter( props, forwardedRef ) {
  * </Card>
  * ```
  */
-const ConnectedCardFooter = contextConnect( CardFooter, 'CardFooter' );
+export const CardFooter = contextConnect( UnconnectedCardFooter, 'CardFooter' );
 
-export default ConnectedCardFooter;
+export default CardFooter;

package/src/card/card-footer/{hook.js → hook.ts}

@@ -6,14 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { FooterProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props
- */
-export function useCardFooter( props ) {
+export function useCardFooter(
+	props: WordPressComponentProps< FooterProps, 'div' >
+) {
 	const {
 		className,
 		justify,

package/src/card/card-header/{component.js → component.tsx}

@@ -1,15 +1,20 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { Flex } from '../../flex';
 import { useCardHeader } from './hook';
+import type { HeaderProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                         forwardedRef
- */
-function CardHeader( props, forwardedRef ) {
+function UnconnectedCardHeader(
+	props: WordPressComponentProps< HeaderProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const headerProps = useCardHeader( props );
 
 	return <Flex { ...headerProps } ref={ forwardedRef } />;
@@ -18,7 +23,6 @@ function CardHeader( props, forwardedRef ) {
 /**
  * `CardHeader` renders an optional header within a `Card`.
  *
- * @example
  * ```jsx
  * import { Card, CardBody, CardHeader } from `@wordpress/components`;
  *
@@ -28,6 +32,6 @@ function CardHeader( props, forwardedRef ) {
  * </Card>
  * ```
  */
-const ConnectedCardHeader = contextConnect( CardHeader, 'CardHeader' );
+export const CardHeader = contextConnect( UnconnectedCardHeader, 'CardHeader' );
 
-export default ConnectedCardHeader;
+export default CardHeader;

package/src/card/card-header/{hook.js → hook.ts}

@@ -6,14 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { HeaderProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props
- */
-export function useCardHeader( props ) {
+export function useCardHeader(
+	props: WordPressComponentProps< HeaderProps, 'div' >
+) {
 	const {
 		className,
 		isBorderless = false,

package/src/card/card-media/{component.js → component.tsx}

@@ -1,15 +1,20 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { View } from '../../view';
 import { useCardMedia } from './hook';
+import type { MediaProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                                  forwardedRef
- */
-function CardMedia( props, forwardedRef ) {
+function UnconnectedCardMedia(
+	props: WordPressComponentProps< MediaProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const cardMediaProps = useCardMedia( props );
 
 	return <View { ...cardMediaProps } ref={ forwardedRef } />;
@@ -32,6 +37,6 @@ function CardMedia( props, forwardedRef ) {
  * );
  * ```
  */
-const ConnectedCardMedia = contextConnect( CardMedia, 'CardMedia' );
+export const CardMedia = contextConnect( UnconnectedCardMedia, 'CardMedia' );
 
-export default ConnectedCardMedia;
+export default CardMedia;

package/src/card/card-media/{hook.js → hook.ts}

@@ -6,14 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { MediaProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props
- */
-export function useCardMedia( props ) {
+export function useCardMedia(
+	props: WordPressComponentProps< MediaProps, 'div' >
+) {
 	const { className, ...otherProps } = useContextSystem( props, 'CardMedia' );
 
 	const cx = useCx();

package/src/card/stories/index.tsx

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import {
+	Card,
+	CardHeader,
+	CardBody,
+	CardDivider,
+	CardMedia,
+	CardFooter,
+} from '..';
+import { Text } from '../../text';
+import { Heading } from '../../heading';
+import Button from '../../button';
+
+const meta: ComponentMeta< typeof Card > = {
+	component: Card,
+	title: 'Components/Card',
+	subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
+	argTypes: {
+		as: {
+			control: { type: null },
+		},
+		children: {
+			control: { type: null },
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+
+export default meta;
+
+const Template: ComponentStory< typeof Card > = ( args ) => {
+	return (
+		<div style={ { maxWidth: '280px' } }>
+			<Card { ...args }>
+				<CardHeader>
+					<Heading>CardHeader</Heading>
+				</CardHeader>
+				<CardBody>
+					<Text>CardBody</Text>
+				</CardBody>
+				<CardBody>
+					<Text>CardBody (before CardDivider)</Text>
+				</CardBody>
+				<CardDivider />
+				<CardBody>
+					<Text>CardBody (after CardDivider)</Text>
+				</CardBody>
+				<CardMedia>
+					<img
+						alt="Card Media"
+						src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
+					/>
+				</CardMedia>
+				<CardFooter>
+					<Text>CardFooter</Text>
+					<Button variant="secondary">Action Button</Button>
+				</CardFooter>
+			</Card>
+		</div>
+	);
+};
+
+export const Default: ComponentStory< typeof Card > = Template.bind( {} );

package/src/card/test/{index.js → index.tsx}

@@ -56,9 +56,9 @@ describe( 'Card', () => {
 			const { container: containerSquared } = render(
 				<Card isRounded={ false }>Code is Poetry</Card>
 			);
-			expect( containerRounded.firstChild ).toMatchStyleDiffSnapshot(
-				containerSquared.firstChild
-			);
+			expect(
+				containerRounded.firstElementChild
+			).toMatchStyleDiffSnapshot( containerSquared.firstElementChild );
 		} );
 
 		it( 'should show a box shadow when the elevation prop is greater than 0', () => {

package/src/card/types.ts

@@ -74,6 +74,13 @@ export type BodyProps = BaseSubComponentProps & {
 	isScrollable?: boolean;
 };
 
+export type MediaProps = {
+	/**
+	 * The children elements.
+	 */
+	children: React.ReactNode;
+};
+
 type MarginalSubComponentProps = BaseSubComponentProps & {
 	/**
 	 * Renders without a border.
@@ -86,5 +93,5 @@ type MarginalSubComponentProps = BaseSubComponentProps & {
 export type HeaderProps = MarginalSubComponentProps;
 
 export type FooterProps = MarginalSubComponentProps & {
-	justify: CSSProperties[ 'justifyContent' ];
+	justify?: CSSProperties[ 'justifyContent' ];
 };

package/src/color-list-picker/index.js

@@ -2,13 +2,16 @@
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { swatch } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import Button from '../button';
 import ColorPalette from '../color-palette';
-import Swatch from '../swatch';
+import ColorIndicator from '../color-indicator';
+import Icon from '../icon';
+import { HStack } from '../h-stack';
 
 function ColorOption( {
 	label,
@@ -23,10 +26,19 @@ function ColorOption( {
 		<>
 			<Button
 				className="components-color-list-picker__swatch-button"
-				icon={ <Swatch fill={ value } /> }
 				onClick={ () => setIsOpen( ( prev ) => ! prev ) }
 			>
-				{ label }
+				<HStack justify="flex-start" spacing={ 2 }>
+					{ value ? (
+						<ColorIndicator
+							colorValue={ value }
+							className="components-color-list-picker__swatch-color"
+						/>
+					) : (
+						<Icon icon={ swatch } />
+					) }
+					<span>{ label }</span>
+				</HStack>
 			</Button>
 			{ isOpen && (
 				<ColorPalette

package/src/color-list-picker/style.scss

@@ -6,3 +6,14 @@
 .components-color-list-picker__color-picker {
 	margin: $grid-unit-10 0;
 }
+
+.components-color-list-picker__swatch-button {
+	// Used to simulate styles as a .button.has-icon (which this component can't
+	// opt into, because it has to show more than a simple SVG as the "icon")
+	padding: 6px;
+}
+
+.components-color-list-picker__swatch-color {
+	// Match the 24px size of the `swatch` icon (used when no color is set)
+	margin: 2px;
+}

package/src/color-palette/index.js

@@ -2,7 +2,6 @@
 /**
  * External dependencies
  */
-import { map } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
@@ -35,15 +34,16 @@ function SinglePalette( {
 	actions,
 } ) {
 	const colorOptions = useMemo( () => {
-		return map( colors, ( { color, name } ) => {
+		return colors.map( ( { color, name }, index ) => {
 			const colordColor = colord( color );
+			const isSelected = value === color;
 
 			return (
 				<CircularOptionPicker.Option
-					key={ color }
-					isSelected={ value === color }
+					key={ `${ color }-${ index }` }
+					isSelected={ isSelected }
 					selectedIconProps={
-						value === color
+						isSelected
 							? {
 									fill:
 										colordColor.contrast() >
@@ -60,7 +60,7 @@ function SinglePalette( {
 					}
 					style={ { backgroundColor: color, color } }
 					onClick={
-						value === color ? clearColor : () => onChange( color )
+						isSelected ? clearColor : () => onChange( color )
 					}
 					aria-label={
 						name
@@ -112,19 +112,35 @@ function MultiplePalettes( {
 	);
 }
 
-export function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
+export function CustomColorPickerDropdown( {
+	isRenderedInSidebar,
+	popoverProps: receivedPopoverProps,
+	...props
+} ) {
+	const popoverProps = useMemo(
+		() => ( {
+			__unstableShift: true,
+			...( isRenderedInSidebar
+				? {
+						// When in the sidebar: open to the left (stacking),
+						// leaving the same gap as the parent popover.
+						placement: 'left-start',
+						offset: 34,
+				  }
+				: {
+						// Default behavior: open below the anchor
+						placement: 'bottom',
+						offset: 8,
+				  } ),
+			...receivedPopoverProps,
+		} ),
+		[ isRenderedInSidebar, receivedPopoverProps ]
+	);
+
 	return (
 		<Dropdown
 			contentClassName="components-color-palette__custom-color-dropdown-content"
-			popoverProps={
-				isRenderedInSidebar
-					? {
-							placement: 'left-start',
-							offset: 20,
-							__unstableShift: true,
-					  }
-					: undefined
-			}
+			popoverProps={ popoverProps }
 			{ ...props }
 		/>
 	);

package/src/color-palette/index.native.js

@@ -11,7 +11,7 @@ import {
 	Platform,
 	Text,
 } from 'react-native';
-import { map, uniq } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -63,11 +63,15 @@ function ColorPalette( {
 	const scale = useRef( new Animated.Value( 1 ) ).current;
 	const opacity = useRef( new Animated.Value( 1 ) ).current;
 
-	const defaultColors = uniq( map( defaultSettings.colors, 'color' ) );
-	const mergedColors = uniq( map( defaultSettings.allColors, 'color' ) );
-	const defaultGradientColors = uniq(
-		map( defaultSettings.gradients, 'gradient' )
-	);
+	const defaultColors = [
+		...new Set( map( defaultSettings.colors, 'color' ) ),
+	];
+	const mergedColors = [
+		...new Set( map( defaultSettings.allColors, 'color' ) ),
+	];
+	const defaultGradientColors = [
+		...new Set( map( defaultSettings.gradients, 'gradient' ) ),
+	];
 	const colors = isGradientSegment ? defaultGradientColors : defaultColors;
 
 	const customIndicatorColor = isGradientSegment

package/src/color-palette/stories/index.js

@@ -82,7 +82,7 @@ MultipleOrigins.args = {
 			],
 		},
 		{
-			name: 'Primary colors',
+			name: 'Secondary colors',
 			colors: [
 				{ name: 'Orange', color: '#f60' },
 				{ name: 'Green', color: '#0f0' },