@wordpress/components 30.7.1-next.36001005c.0 → 30.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "30.7.1-next.36001005c.0",
+	"version": "30.8.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -54,24 +54,24 @@
 		"@types/gradient-parser": "1.1.0",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.33.1-next.36001005c.0",
-		"@wordpress/base-styles": "^6.10.1-next.36001005c.0",
-		"@wordpress/compose": "^7.33.1-next.36001005c.0",
-		"@wordpress/date": "^5.33.1-next.36001005c.0",
-		"@wordpress/deprecated": "^4.33.1-next.36001005c.0",
-		"@wordpress/dom": "^4.33.1-next.36001005c.0",
-		"@wordpress/element": "^6.33.1-next.36001005c.0",
-		"@wordpress/escape-html": "^3.33.1-next.36001005c.0",
-		"@wordpress/hooks": "^4.33.1-next.36001005c.0",
-		"@wordpress/html-entities": "^4.33.1-next.36001005c.0",
-		"@wordpress/i18n": "^6.6.1-next.36001005c.0",
-		"@wordpress/icons": "^11.0.1-next.36001005c.0",
-		"@wordpress/is-shallow-equal": "^5.33.1-next.36001005c.0",
-		"@wordpress/keycodes": "^4.33.1-next.36001005c.0",
-		"@wordpress/primitives": "^4.33.1-next.36001005c.0",
-		"@wordpress/private-apis": "^1.33.1-next.36001005c.0",
-		"@wordpress/rich-text": "^7.33.1-next.36001005c.0",
-		"@wordpress/warning": "^3.33.1-next.36001005c.0",
+		"@wordpress/a11y": "^4.35.0",
+		"@wordpress/base-styles": "^6.11.0",
+		"@wordpress/compose": "^7.35.0",
+		"@wordpress/date": "^5.35.0",
+		"@wordpress/deprecated": "^4.35.0",
+		"@wordpress/dom": "^4.35.0",
+		"@wordpress/element": "^6.35.0",
+		"@wordpress/escape-html": "^3.35.0",
+		"@wordpress/hooks": "^4.35.0",
+		"@wordpress/html-entities": "^4.35.0",
+		"@wordpress/i18n": "^6.8.0",
+		"@wordpress/icons": "^11.2.0",
+		"@wordpress/is-shallow-equal": "^5.35.0",
+		"@wordpress/keycodes": "^4.35.0",
+		"@wordpress/primitives": "^4.35.0",
+		"@wordpress/private-apis": "^1.35.0",
+		"@wordpress/rich-text": "^7.35.0",
+		"@wordpress/warning": "^3.35.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -97,5 +97,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b73a8a22e779c59efb8f911e32b681652f237d60"
+	"gitHead": "77aa1f194edceafe8ac2a1b9438bf84b557e76e3"
 }

package/src/badge/styles.scss

@@ -18,6 +18,7 @@ $badge-colors: (
 	min-height: $grid-unit-30;
 	border-radius: $radius-small;
 	line-height: 0;
+	max-width: 100%;
 
 	// Prevents anchor text-decoration styles from being applied through a parent.
 	display: inline-block;

package/src/button/style.scss

@@ -86,9 +86,9 @@
 		&[aria-disabled="true"]:enabled, // This catches a situation where a Button is aria-disabled, but not disabled.
 		&[aria-disabled="true"]:active:enabled {
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
-			color: $components-color-foreground-inverted;
-			background: $components-color-gray-300;
-			border-color: $components-color-gray-300;
+			color: rgba($white, 0.4);
+			background: $components-color-accent;
+			border-color: $components-color-accent;
 			outline: none;
 
 			&:focus:enabled {

package/src/button/test/index.tsx

@@ -532,7 +532,6 @@ describe( 'Button', () => {
 			render(
 				<Button
 					// @ts-expect-error - a button should not have `href`
-					// eslint-disable-next-line no-restricted-syntax
 					href="https://wordpress.org/"
 					disabled
 					accessibleWhenDisabled

package/src/card/card/README.md

@@ -56,13 +56,24 @@ Renders with rounded corners.
 - Required: No
 - Default: `true`
 
-### `size`: `string`
+### `size`: `string | object`
 
-Determines the amount of padding within the component.
+Determines the amount of padding within the component. Can be specified either as a single size token or as an object.
 
 - Required: No
 - Default: `medium`
-- Allowed values: `xSmall`, `small`, `medium`, `large`
+- Allowed values:
+   	- Single size token: `none`, `xSmall`, `small`, `medium`, `large`
+   	- Object:
+
+    ```ts
+    {
+      blockStart: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
+      blockEnd: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
+      inlineStart: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
+      inlineEnd: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
+    }
+    ```
 
 ### Inherited props
 
@@ -104,6 +115,40 @@ const Example = () => (
 );
 ```
 
+### Logical Padding Properties
+
+The `size` prop supports logical properties that adapt to different writing directions:
+
+- `blockStart` - Maps to `top` in horizontal writing modes
+- `blockEnd` - Maps to `bottom` in horizontal writing modes
+- `inlineStart` - Maps to `left` in horizontal left-to-right writing modes
+- `inlineEnd` - Maps to `right` in horizontal left-to-right writing modes
+
+```jsx
+import { Card, CardBody } from '@wordpress/components';
+
+const Example = () => (
+	<Card
+		size={ {
+			blockStart: 'large',
+			blockEnd: 'small',
+			inlineStart: 'medium',
+			inlineEnd: 'medium',
+		} }
+	>
+		<CardBody
+			size={ {
+				blockStart: 'small',
+				inlineStart: 'large',
+				inlineEnd: 'large',
+			} }
+		>
+			Content with logical padding properties
+		</CardBody>
+	</Card>
+);
+```
+
 ### Context
 
 `<Card />`'s sub-components are connected to `<Card />` using [Context](https://react.dev/learn/passing-data-deeply-with-context). Certain props like `size` and `isBorderless` are passed through to some of the sub-components.

package/src/card/card-body/README.md

@@ -32,10 +32,21 @@ Renders with a light gray background color.
 -   Required: No
 -   Default: `false`
 
-### `size`: `string`
+### `size`: `string | object`
 
-Determines the amount of padding within the component.
+Determines the amount of padding within the component. Can be specified either as a single size token or as an object.
 
 - Required: No
 - Default: `medium`
-- Allowed values: `xSmall`, `small`, `medium`, `large`
+- Allowed values:
+-   Single size token: `none`, `xSmall`, `small`, `medium`, `large`
+-   Object:
+
+    ```ts
+    {
+      blockStart: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
+      blockEnd: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
+      inlineStart: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
+      inlineEnd: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
+    }
+    ```

package/src/card/card-body/hook.ts

@@ -11,6 +11,7 @@ import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { BodyProps } from '../types';
+import { getPaddingBySize } from '../get-padding-by-size';
 
 export function useCardBody(
 	props: WordPressComponentProps< BodyProps, 'div' >
@@ -30,7 +31,7 @@ export function useCardBody(
 			cx(
 				styles.Body,
 				styles.borderRadius,
-				styles.cardPaddings[ size ],
+				getPaddingBySize( size ),
 				isShady && styles.shady,
 				// This classname is added for legacy compatibility reasons.
 				'components-card__body',

package/src/card/card-footer/README.md

@@ -65,10 +65,21 @@ Renders with a light gray background color.
 
 See the documentation for the `justify` prop for the [`Flex` component](/packages/components/src/flex/flex/README.md#justify)
 
-### `size`: `string`
+### `size`: `string | object`
 
-Determines the amount of padding within the component.
+Determines the amount of padding within the component. Can be specified either as a single size token or as an object.
 
 - Required: No
 - Default: `medium`
-- Allowed values: `xSmall`, `small`, `medium`, `large`
+- Allowed values:
+-   Single size token: `none`, `xSmall`, `small`, `medium`, `large`
+-   Object:
+
+    ```ts
+    {
+      blockStart: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
+      blockEnd: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
+      inlineStart: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
+      inlineEnd: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
+    }
+    ```

package/src/card/card-footer/hook.ts

@@ -11,6 +11,7 @@ import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { FooterProps } from '../types';
+import { getPaddingBySize } from '../get-padding-by-size';
 
 export function useCardFooter(
 	props: WordPressComponentProps< FooterProps, 'div' >
@@ -32,7 +33,7 @@ export function useCardFooter(
 				styles.Footer,
 				styles.borderRadius,
 				styles.borderColor,
-				styles.cardPaddings[ size ],
+				getPaddingBySize( size ),
 				isBorderless && styles.borderless,
 				isShady && styles.shady,
 				// This classname is added for legacy compatibility reasons.

package/src/card/card-header/README.md

@@ -33,10 +33,21 @@ Renders with a light gray background color.
 -   Required: No
 -   Default: `false`
 
-### `size`: `string`
+### `size`: `string | object`
 
-Determines the amount of padding within the component.
+Determines the amount of padding within the component. Can be specified either as a single size token or as an object.
 
 - Required: No
 - Default: `medium`
-- Allowed values: `xSmall`, `small`, `medium`, `large`
+- Allowed values:
+-   Single size token: `none`, `xSmall`, `small`, `medium`, `large`
+-   Object:
+
+    ```ts
+    {
+      blockStart: 'none' |  'xSmall' | 'small' | 'medium' | 'large';
+      blockEnd: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
+      inlineStart: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
+      inlineEnd: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
+    }
+    ```

package/src/card/card-header/hook.ts

@@ -11,6 +11,7 @@ import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { HeaderProps } from '../types';
+import { getPaddingBySize } from '../get-padding-by-size';
 
 export function useCardHeader(
 	props: WordPressComponentProps< HeaderProps, 'div' >
@@ -31,7 +32,7 @@ export function useCardHeader(
 				styles.Header,
 				styles.borderRadius,
 				styles.borderColor,
-				styles.cardPaddings[ size ],
+				getPaddingBySize( size ),
 				isBorderless && styles.borderless,
 				isShady && styles.shady,
 				// This classname is added for legacy compatibility reasons.

package/src/card/get-padding-by-size.ts

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import { css, type SerializedStyles } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import type { Props, SizeToken } from './types';
+import { space } from '../utils/space';
+
+const xSmallCardPadding = css`
+	padding: ${ space( 2 ) };
+`;
+
+export const cardPaddings = {
+	none: css`
+		padding: 0;
+	`,
+	large: css`
+		padding: ${ space( 6 ) } ${ space( 8 ) };
+	`,
+	medium: css`
+		padding: ${ space( 4 ) } ${ space( 6 ) };
+	`,
+	small: css`
+		padding: ${ space( 4 ) };
+	`,
+	xSmall: xSmallCardPadding,
+	// The `extraSmall` size is not officially documented, but the following styles
+	// are kept for legacy reasons to support older values of the `size` prop.
+	extraSmall: xSmallCardPadding,
+};
+
+const getSinglePaddingValue = ( size: SizeToken ): string | undefined => {
+	switch ( size ) {
+		case 'xSmall':
+			return space( 2 );
+		case 'small':
+			return space( 4 );
+		case 'medium':
+			return space( 6 );
+		case 'large':
+			return space( 8 );
+		case 'none':
+			return '0';
+		default:
+			return space( 6 );
+	}
+};
+
+export const getPaddingBySize = ( size: Props[ 'size' ] ): SerializedStyles => {
+	// Handle string-based sizes (both standard and deprecated)
+	if ( typeof size === 'string' ) {
+		return cardPaddings[ size as SizeToken ];
+	}
+
+	if ( size ) {
+		const { blockStart, blockEnd, inlineStart, inlineEnd } = size;
+		return css`
+			padding-block-start: ${ getSinglePaddingValue( blockStart ) };
+			padding-block-end: ${ getSinglePaddingValue( blockEnd ) };
+			padding-inline-start: ${ getSinglePaddingValue( inlineStart ) };
+			padding-inline-end: ${ getSinglePaddingValue( inlineEnd ) };
+		`;
+	}
+
+	// Default to medium if no size is provided
+	return cardPaddings.medium;
+};

package/src/card/stories/index.story.tsx

@@ -91,3 +91,62 @@ export const FullBleedContent: StoryObj< typeof Card > = {
 		),
 	},
 };
+
+/**
+ * The Card component supports three approaches to padding:
+ * 1. Default padding (medium) - no size prop needed
+ * 2. Token-based padding - using size tokens: xSmall, small, medium, large
+ * 3. Logical padding - customize each direction using logical properties
+ *
+ * Each component (Card, CardHeader, CardBody) can have its own padding configuration.
+ */
+export const PaddingVariations: StoryObj< typeof Card > = {
+	render: () => (
+		<div
+			style={ { display: 'flex', flexDirection: 'column', gap: '32px' } }
+		>
+			{ /* 1. Default Padding */ }
+			<div>
+				<Card>
+					<CardHeader>
+						<Text>Header with default padding</Text>
+					</CardHeader>
+					<CardBody>
+						<Text>Body with default padding (medium)</Text>
+					</CardBody>
+				</Card>
+			</div>
+
+			<div>
+				<Card>
+					<CardHeader
+						size={ {
+							blockStart: 'large',
+							blockEnd: 'small',
+							inlineStart: 'xSmall',
+							inlineEnd: 'large',
+						} }
+					>
+						<Text>
+							Header with logical padding (large blockStart, small
+							blockEnd, xSmall inlineStart, large inlineEnd)
+						</Text>
+					</CardHeader>
+					<CardBody
+						size={ {
+							blockStart: 'medium',
+							blockEnd: 'xSmall',
+							inlineStart: 'large',
+							inlineEnd: 'xSmall',
+						} }
+					>
+						<Text>
+							Body with logical padding (medium blockStart, xSmall
+							blockEnd, large inlineStart, xSmall inlineEnd)
+						</Text>
+					</CardBody>
+				</Card>
+			</div>
+		</div>
+	),
+};

package/src/card/styles.ts

@@ -94,26 +94,6 @@ export const rounded = css`
 	border-radius: ${ adjustedBorderRadius };
 `;
 
-const xSmallCardPadding = css`
-	padding: ${ CONFIG.cardPaddingXSmall };
-`;
-
-export const cardPaddings = {
-	large: css`
-		padding: ${ CONFIG.cardPaddingLarge };
-	`,
-	medium: css`
-		padding: ${ CONFIG.cardPaddingMedium };
-	`,
-	small: css`
-		padding: ${ CONFIG.cardPaddingSmall };
-	`,
-	xSmall: xSmallCardPadding,
-	// The `extraSmall` size is not officially documented, but the following styles
-	// are kept for legacy reasons to support older values of the `size` prop.
-	extraSmall: xSmallCardPadding,
-};
-
 export const shady = css`
 	background-color: ${ COLORS.ui.backgroundDisabled };
 `;

package/src/card/types.ts

@@ -1,16 +1,20 @@
-/**
- * External dependencies
- */
-import type { CSSProperties } from 'react';
-
 /**
  * Internal dependencies
  */
 import type { SurfaceProps } from '../surface/types';
+import type { FlexProps } from '../flex/types';
 
 type DeprecatedSizeOptions = 'extraSmall';
-export type SizeOptions = 'xSmall' | 'small' | 'medium' | 'large';
+export type SizeToken = 'xSmall' | 'small' | 'medium' | 'large' | 'none';
 
+export type SizeOptions =
+	| SizeToken
+	| {
+			blockStart: SizeToken;
+			blockEnd: SizeToken;
+			inlineStart: SizeToken;
+			inlineEnd: SizeToken;
+	  };
 type SizeableProps = {
 	/**
 	 * Determines the amount of padding within the component.
@@ -90,8 +94,6 @@ type MarginalSubComponentProps = BaseSubComponentProps & {
 	isBorderless?: boolean;
 };
 
-export type HeaderProps = MarginalSubComponentProps;
+export type HeaderProps = MarginalSubComponentProps & Partial< FlexProps >;
 
-export type FooterProps = MarginalSubComponentProps & {
-	justify?: CSSProperties[ 'justifyContent' ];
-};
+export type FooterProps = MarginalSubComponentProps & Partial< FlexProps >;

package/src/color-picker/component.tsx

@@ -1,9 +1,9 @@
 /**
  * External dependencies
  */
-import type { ForwardedRef } from 'react';
+import type { ClipboardEvent, ForwardedRef } from 'react';
 import type { Colord } from 'colord';
-import { colord, extend } from 'colord';
+import { colord, extend, getFormat } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
 /**
@@ -76,8 +76,57 @@ const UnconnectedColorPicker = (
 		copyFormat || 'hex'
 	);
 
+	/*
+	 * ! Listener intended for the CAPTURE phase
+	 *
+	 * Capture paste events over the entire color picker, looking for clipboard
+	 * data that could be parsed as a color. If not, let the paste event
+	 * propagate normally, so that individual input controls within the
+	 * component have a chance to handle it.
+	 */
+	const maybeHandlePaste = useCallback(
+		( event: ClipboardEvent ) => {
+			const pastedText = event.clipboardData?.getData( 'text' )?.trim();
+			if ( ! pastedText ) {
+				return;
+			}
+
+			const parsedColor = colord( pastedText );
+			if ( ! parsedColor.isValid() ) {
+				return;
+			}
+
+			// Apply all valid colors, even if the format isn't supported in
+			// the UI (e.g. names like "cyan" or, in the future color spaces
+			// like "lch" if we add the right colord plugins)
+			handleChange( parsedColor );
+
+			// This redundancy helps TypeScript and is safer than assertions
+			const supportedFormats: Record< string, ColorType | undefined > = {
+				hex: 'hex',
+				rgb: 'rgb',
+				hsl: 'hsl',
+			};
+
+			const detectedFormat = String( getFormat( pastedText ) );
+			const newColorType = supportedFormats[ detectedFormat ];
+			if ( newColorType ) {
+				setColorType( newColorType );
+			}
+
+			// Stop at capture phase; no bubbling
+			event.stopPropagation();
+			event.preventDefault();
+		},
+		[ handleChange, setColorType ]
+	);
+
 	return (
-		<ColorfulWrapper ref={ forwardedRef } { ...divProps }>
+		<ColorfulWrapper
+			ref={ forwardedRef }
+			{ ...divProps }
+			onPasteCapture={ maybeHandlePaste }
+		>
 			<Picker
 				onChange={ handleChange }
 				color={ safeColordColor }

package/src/combobox-control/index.tsx

@@ -365,13 +365,10 @@ function ComboboxControl( props: ComboboxControlProps ) {
 							/>
 						</FlexBlock>
 						{ isLoading && <Spinner /> }
-						{ allowReset && (
+						{ allowReset && Boolean( value ) && ! isExpanded && (
 							<Button
 								size="small"
 								icon={ closeSmall }
-								// Disable reason: Focus returns to input field when reset is clicked.
-								// eslint-disable-next-line no-restricted-syntax
-								disabled={ ! value }
 								onClick={ handleOnReset }
 								onKeyDown={ handleResetStopPropagation }
 								label={ __( 'Reset' ) }

package/src/combobox-control/stories/index.story.tsx

@@ -79,7 +79,6 @@ export const Default = Template.bind( {} );
 Default.args = {
 	__next40pxDefaultSize: true,
 	__nextHasNoMarginBottom: true,
-	allowReset: false,
 	label: 'Select a country',
 	options: countryOptions,
 };

package/src/combobox-control/test/index.tsx

@@ -356,7 +356,7 @@ describe.each( [
 		expect( input ).toHaveValue( targetOption.label );
 	} );
 
-	it( 'should render with Reset button disabled', () => {
+	it( 'should not render Reset button when no value is set', () => {
 		render(
 			<Component
 				options={ timezones }
@@ -365,10 +365,23 @@ describe.each( [
 			/>
 		);
 
-		const resetButton = screen.getByRole( 'button', { name: 'Reset' } );
+		const resetButton = screen.queryByRole( 'button', { name: 'Reset' } );
+
+		expect( resetButton ).not.toBeInTheDocument();
+	} );
+
+	it( 'should not render Reset button when allowReset is false', () => {
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				allowReset={ false }
+			/>
+		);
+
+		const resetButton = screen.queryByRole( 'button', { name: 'Reset' } );
 
-		expect( resetButton ).toBeVisible();
-		expect( resetButton ).toBeDisabled();
+		expect( resetButton ).not.toBeInTheDocument();
 	} );
 
 	it( 'should reset input when clicking the Reset button', async () => {
@@ -400,8 +413,8 @@ describe.each( [
 
 		await user.click( resetButton );
 
+		expect( resetButton ).not.toBeInTheDocument();
 		expect( input ).toHaveValue( '' );
-		expect( resetButton ).toBeDisabled();
 		expect( input ).toHaveFocus();
 	} );
 
@@ -439,8 +452,8 @@ describe.each( [
 		// Pressing Enter/Return resets the input.
 		await user.keyboard( '{Enter}' );
 
+		expect( resetButton ).not.toBeInTheDocument();
 		expect( input ).toHaveValue( '' );
-		expect( resetButton ).toBeDisabled();
 		expect( input ).toHaveFocus();
 	} );
 
@@ -478,8 +491,8 @@ describe.each( [
 		// Pressing Spacebar resets the input.
 		await user.keyboard( '[Space]' );
 
+		expect( resetButton ).not.toBeInTheDocument();
 		expect( input ).toHaveValue( '' );
-		expect( resetButton ).toBeDisabled();
 		expect( input ).toHaveFocus();
 	} );
 } );

package/src/composite/legacy/index.tsx

@@ -238,7 +238,6 @@ export function useCompositeState(
 		loop: focusLoop = false,
 		wrap: focusWrap = false,
 		shift: focusShift = false,
-		// eslint-disable-next-line camelcase
 		unstable_virtual: virtualFocus,
 	} = legacyStateOptions;