@wordpress/components 25.0.0 → 25.1.1

package/src/button/index.tsx

@@ -76,6 +76,7 @@ export function UnforwardedButton(
 ) {
 	const {
 		__next40pxDefaultSize,
+		__next32pxSmallSize,
 		isSmall,
 		isPressed,
 		isBusy,
@@ -117,6 +118,7 @@ export function UnforwardedButton(
 
 	const classes = classnames( 'components-button', className, {
 		'is-next-40px-default-size': __next40pxDefaultSize,
+		'is-next-32px-small-size': __next32pxSmallSize,
 		'is-secondary': variant === 'secondary',
 		'is-primary': variant === 'primary',
 		'is-small': isSmall,

package/src/button/stories/e2e/index.tsx

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { wordpress } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { Button } from '../..';
+import type { ButtonAsButtonProps } from '../../types';
+
+const meta: ComponentMeta< typeof Button > = {
+	component: Button,
+	title: 'Components/Button',
+};
+export default meta;
+
+export const VariantStates: ComponentStory< typeof Button > = (
+	props: ButtonAsButtonProps
+) => {
+	const variants: ( typeof props.variant )[] = [
+		undefined,
+		'primary',
+		'secondary',
+		'tertiary',
+		'link',
+	];
+
+	return (
+		<div style={ { display: 'flex', flexDirection: 'column', gap: 24 } }>
+			{ variants.map( ( variant ) => (
+				<div
+					style={ { display: 'flex', gap: 8 } }
+					key={ variant ?? 'undefined' }
+				>
+					<Button { ...props } variant={ variant } />
+					<Button { ...props } variant={ variant } disabled />
+					<Button { ...props } variant={ variant } isBusy />
+					<Button { ...props } variant={ variant } isDestructive />
+					<Button { ...props } variant={ variant } isPressed />
+				</div>
+			) ) }
+		</div>
+	);
+};
+VariantStates.args = {
+	children: 'Code is poetry',
+};
+
+export const Icon = VariantStates.bind( {} );
+Icon.args = {
+	icon: wordpress,
+};
+
+export const Dashicons: ComponentStory< typeof Button > = ( props ) => {
+	return (
+		<div style={ { display: 'flex', gap: 8 } }>
+			<Button { ...props } />
+			<Button { ...props }>Children</Button>
+			<Button { ...props } iconPosition="right">
+				Children (icon right)
+			</Button>
+			<Button { ...props } text="Text" />
+			<Button
+				{ ...props }
+				text="Text (icon right)"
+				iconPosition="right"
+			/>
+		</div>
+	);
+};
+Dashicons.args = {
+	icon: 'editor-help',
+	variant: 'primary',
+};

package/src/button/style.scss

@@ -168,11 +168,6 @@
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 		}
 
-		.dashicon {
-			display: inline-block;
-			flex: 0 0 auto;
-		}
-
 		// Pull left if the tertiary button stands alone after a description, so as to vertically align with items above.
 		p + & {
 			margin-left: -($grid-unit-15 * 0.5);
@@ -263,15 +258,24 @@
 	}
 
 	&.is-small {
-		height: $icon-size;
+		height: $button-size-small-next-default-32px;
 		line-height: 22px;
 		padding: 0 8px;
 		font-size: 11px;
 
 		&.has-icon:not(.has-text) {
 			padding: 0;
-			width: $icon-size;
-			min-width: $icon-size;
+			width: $button-size-small-next-default-32px;
+			min-width: $button-size-small-next-default-32px;
+		}
+
+		&:not(.is-next-32px-small-size) {
+			height: $button-size-small;
+
+			&.has-icon:not(.has-text) {
+				width: $button-size-small;
+				min-width: $button-size-small;
+			}
 		}
 	}
 
@@ -287,10 +291,11 @@
 		}
 
 		.dashicon {
-			display: inline-block;
-			flex: 0 0 auto;
-			margin-left: 2px;
-			margin-right: 2px;
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			padding: 2px;
+			box-sizing: content-box;
 		}
 
 		&.has-text {
@@ -299,10 +304,6 @@
 			padding-left: $grid-unit-10;
 			gap: $grid-unit-05;
 		}
-
-		&.has-text .dashicon {
-			margin-right: $grid-unit-10 + 2px;
-		}
 	}
 
 	// Toggled style.

package/src/button/types.ts

@@ -25,6 +25,15 @@ type BaseButtonProps = {
 	 * @default false
 	 */
 	__next40pxDefaultSize?: boolean;
+	/**
+	 * Start opting into the larger `isSmall` button size that will become the
+	 * default small size in a future version.
+	 *
+	 * Only takes effect when the `isSmall` prop is `true`.
+	 *
+	 * @default false
+	 */
+	__next32pxSmallSize?: boolean;
 	/**
 	 * The button's children.
 	 */

package/src/circular-option-picker/types.ts

@@ -12,7 +12,7 @@ import type { Icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import type { ButtonAsButtonProps } from '../button/types';
-import type Dropdown from '../dropdown';
+import type { DropdownProps } from '../dropdown/types';
 import type { WordPressComponentProps } from '../ui/context';
 
 export type CircularOptionPickerProps = {
@@ -44,10 +44,7 @@ export type DropdownLinkActionProps = {
 		'children'
 	>;
 	linkText: string;
-	dropdownProps: Omit<
-		React.ComponentProps< typeof Dropdown >,
-		'className' | 'renderToggle'
-	>;
+	dropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;
 	className?: string;
 };
 

package/src/clipboard-button/{index.js → index.tsx}

@@ -14,17 +14,11 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import Button from '../button';
+import type { ClipboardButtonProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
 const TIMEOUT = 4000;
 
-/**
- * @param {Object}                    props
- * @param {string}                    [props.className]
- * @param {import('react').ReactNode} props.children
- * @param {() => void}                props.onCopy
- * @param {() => void}                [props.onFinishCopy]
- * @param {string}                    props.text
- */
 export default function ClipboardButton( {
 	className,
 	children,
@@ -32,18 +26,18 @@ export default function ClipboardButton( {
 	onFinishCopy,
 	text,
 	...buttonProps
-} ) {
+}: WordPressComponentProps< ClipboardButtonProps, 'button', false > ) {
 	deprecated( 'wp.components.ClipboardButton', {
 		since: '5.8',
 		alternative: 'wp.compose.useCopyToClipboard',
 	} );
 
-	/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */
-	const timeoutId = useRef();
+	const timeoutId = useRef< NodeJS.Timeout >();
 	const ref = useCopyToClipboard( text, () => {
 		onCopy();
-		// @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.
-		clearTimeout( timeoutId.current );
+		if ( timeoutId.current ) {
+			clearTimeout( timeoutId.current );
+		}
 
 		if ( onFinishCopy ) {
 			timeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );
@@ -51,8 +45,9 @@ export default function ClipboardButton( {
 	} );
 
 	useEffect( () => {
-		// @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.
-		clearTimeout( timeoutId.current );
+		if ( timeoutId.current ) {
+			clearTimeout( timeoutId.current );
+		}
 	}, [] );
 
 	const classes = classnames( 'components-clipboard-button', className );
@@ -62,8 +57,7 @@ export default function ClipboardButton( {
 	// This causes documentHasSelection() in the copy-handler component to
 	// mistakenly override the ClipboardButton, and copy a serialized string
 	// of the current block instead.
-	/** @type {import('react').ClipboardEventHandler<HTMLButtonElement>} */
-	const focusOnCopyEventTarget = ( event ) => {
+	const focusOnCopyEventTarget: React.ClipboardEventHandler = ( event ) => {
 		// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
 		event.target.focus();
 	};

package/src/clipboard-button/types.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export interface ClipboardButtonProps {
+	children: ReactNode;
+	onCopy: () => void;
+	onFinishCopy?: () => void;
+	text: string;
+}

package/src/color-palette/index.tsx

@@ -5,6 +5,7 @@ import type { ForwardedRef } from 'react';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -19,7 +20,6 @@ import Dropdown from '../dropdown';
 import { ColorPicker } from '../color-picker';
 import CircularOptionPicker from '../circular-option-picker';
 import { VStack } from '../v-stack';
-import { Flex, FlexItem } from '../flex';
 import { Truncate } from '../truncate';
 import { ColorHeading } from './styles';
 import DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';
@@ -37,7 +37,6 @@ import {
 	extractColorNameFromCurrentValue,
 	isMultiplePaletteArray,
 	normalizeColorValue,
-	showTransparentBackground,
 } from './utils';
 
 extend( [ namesPlugin, a11yPlugin ] );
@@ -219,21 +218,18 @@ function UnforwardedColorPalette(
 			/>
 		</DropdownContentWrapper>
 	);
+	const isHex = value?.startsWith( '#' );
 
-	const colordColor = colord( normalizedColorValue ?? '' );
-
-	const valueWithoutLeadingHash = value?.startsWith( '#' )
-		? value.substring( 1 )
-		: value ?? '';
-
-	const customColorAccessibleLabel = !! valueWithoutLeadingHash
+	// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
+	const displayValue = value?.replace( /^var\((.+)\)$/, '$1' );
+	const customColorAccessibleLabel = !! displayValue
 		? sprintf(
-				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
+				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
 				__(
 					'Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
 				),
 				buttonLabelName,
-				valueWithoutLeadingHash
+				isHex ? displayValue.split( '' ).join( '-' ) : displayValue
 		  )
 		: __( 'Custom color picker.' );
 
@@ -257,43 +253,48 @@ function UnforwardedColorPalette(
 					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					renderContent={ renderCustomColorPicker }
 					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Flex
-							as={ 'button' }
-							ref={ customColorPaletteCallbackRef }
-							justify="space-between"
-							align="flex-start"
-							className="components-color-palette__custom-color"
-							aria-expanded={ isOpen }
-							aria-haspopup="true"
-							onClick={ onToggle }
-							aria-label={ customColorAccessibleLabel }
-							style={
-								showTransparentBackground( value )
-									? { color: '#000' }
-									: {
-											background: value,
-											color:
-												colordColor.contrast() >
-												colordColor.contrast( '#000' )
-													? '#fff'
-													: '#000',
-									  }
-							}
+						<VStack
+							className="components-color-palette__custom-color-wrapper"
+							spacing={ 0 }
 						>
-							<FlexItem
-								isBlock
-								as={ Truncate }
-								className="components-color-palette__custom-color-name"
-							>
-								{ buttonLabelName }
-							</FlexItem>
-							<FlexItem
-								as="span"
-								className="components-color-palette__custom-color-value"
+							<button
+								ref={ customColorPaletteCallbackRef }
+								className="components-color-palette__custom-color-button"
+								aria-expanded={ isOpen }
+								aria-haspopup="true"
+								onClick={ onToggle }
+								aria-label={ customColorAccessibleLabel }
+								style={ {
+									background: value,
+								} }
+							/>
+							<VStack
+								className="components-color-palette__custom-color-text-wrapper"
+								spacing={ 0.5 }
 							>
-								{ valueWithoutLeadingHash }
-							</FlexItem>
-						</Flex>
+								<Truncate className="components-color-palette__custom-color-name">
+									{ value
+										? buttonLabelName
+										: 'No color selected' }
+								</Truncate>
+								{ /*
+								This `Truncate` is always rendered, even if
+								there is no `displayValue`, to ensure the layout
+								does not shift
+								*/ }
+								<Truncate
+									className={ classnames(
+										'components-color-palette__custom-color-value',
+										{
+											'components-color-palette__custom-color-value--is-hex':
+												isHex,
+										}
+									) }
+								>
+									{ displayValue }
+								</Truncate>
+							</VStack>
+						</VStack>
 					) }
 				/>
 			) }

package/src/color-palette/style.scss

@@ -1,41 +1,79 @@
-.components-color-palette__custom-color {
+$border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
+
+.components-color-palette__custom-color-wrapper {
+	position: relative;
+	z-index: 0;
+}
+.components-color-palette__custom-color-button {
 	position: relative;
 	border: none;
 	background: none;
-	border-radius: $radius-block-ui;
 	height: $grid-unit-80;
-	padding: $grid-unit-15;
-	font-family: inherit;
 	width: 100%;
-	// The background image creates a checkerboard pattern. Ignore rtlcss to
-	// make it work both in LTR and RTL.
-	// See https://github.com/WordPress/gutenberg/pull/42510
-	/*rtl:begin:ignore*/
-	background-image:
-		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
-		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
-	background-position: 0 0, 24px 24px;
-	/*rtl:end:ignore*/
-	background-size: calc(2 * 24px) calc(2 * 24px);
 	box-sizing: border-box;
-	color: $white;
 	cursor: pointer;
-	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 	// Show a thin outline in Windows high contrast mode.
 	outline: 1px solid transparent;
+	border-radius: $radius-block-ui $radius-block-ui 0 0;
+	box-shadow: $border-as-box-shadow;
 
 	&:focus {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		// Show a outline in Windows high contrast mode.
 		outline-width: 2px;
 	}
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: -1;
+		// The background image creates a checkerboard pattern. Ignore rtlcss to
+		// make it work both in LTR and RTL.
+		// See https://github.com/WordPress/gutenberg/pull/42510
+		/*rtl:begin:ignore*/
+		background-image:
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
+		background-position: 0 0, 24px 24px;
+		/*rtl:end:ignore*/
+		background-size: calc(2 * 24px) calc(2 * 24px);
+	}
+}
+
+.components-color-palette__custom-color-text-wrapper {
+	padding: $grid-unit-15 $grid-unit-20;
+	border-radius: 0 0 $radius-block-ui $radius-block-ui;
+	position: relative;
+	font-size: $default-font-size;
+
+	// Add a border with the same technique as the button above,
+	// but only for left, bottom, and right sides.
+	box-shadow:
+		inset 0 -1 * $border-width 0 0 rgba(0, 0, 0, 0.2),
+		inset $border-width 0 0 0 rgba(0, 0, 0, 0.2),
+		inset -1 * $border-width 0 0 0 rgba(0, 0, 0, 0.2);
 }
 
 .components-color-palette__custom-color-name {
-	text-align: left;
+	color: $components-color-foreground;
+	margin: 0 $border-width;
 }
 
 .components-color-palette__custom-color-value {
-	margin-left: $grid-unit-20;
-	text-transform: uppercase;
+	color: $gray-700;
+
+	&--is-hex {
+		text-transform: uppercase;
+	}
+
+	// Add a zero-width space when this element is empty to preserve
+	// a minimum height of 1 line of text, and avoid layout jumps.
+	&:empty::after {
+		content: "\200B";
+		visibility: hidden;
+	}
 }

package/src/color-palette/test/__snapshots__/index.tsx.snap

@@ -127,45 +127,52 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-2>* {
-  min-width: 0;
+  min-height: 0;
 }
 
-.emotion-5 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: calc(4px * 0.5);
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.emotion-4>* {
   min-height: 0;
-  min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
 }
 
-.emotion-7 {
+.emotion-6 {
   display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 <div>
@@ -178,30 +185,39 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
       class="components-dropdown"
       tabindex="-1"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="true"
-        aria-label="Custom color picker. The currently selected color is called "red" and has a value of "f00"."
-        class="components-flex components-color-palette__custom-color emotion-2 emotion-1"
+      <div
+        class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper emotion-2 emotion-1"
         data-wp-c16t="true"
-        data-wp-component="Flex"
-        style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
+        data-wp-component="VStack"
       >
-        <span
-          class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-1 emotion-5 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="FlexItem"
-        >
-          red
-        </span>
-        <span
-          class="components-flex-item components-color-palette__custom-color-value emotion-7 emotion-1"
+        <button
+          aria-expanded="false"
+          aria-haspopup="true"
+          aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#-f-0-0"."
+          class="components-color-palette__custom-color-button"
+          style="background: rgb(255, 0, 0);"
+        />
+        <div
+          class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper emotion-4 emotion-1"
           data-wp-c16t="true"
-          data-wp-component="FlexItem"
+          data-wp-component="VStack"
         >
-          f00
-        </span>
-      </button>
+          <span
+            class="components-truncate components-color-palette__custom-color-name emotion-6 emotion-1"
+            data-wp-c16t="true"
+            data-wp-component="Truncate"
+          >
+            red
+          </span>
+          <span
+            class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-6 emotion-1"
+            data-wp-c16t="true"
+            data-wp-component="Truncate"
+          >
+            #f00
+          </span>
+        </div>
+      </div>
     </div>
     <div
       class="components-circular-option-picker"