@wordpress/components 35.0.0 → 35.1.1-next.v.202606191442.0

package/src/base-control/README.md

@@ -30,7 +30,7 @@ const MyCustomTextareaControl = ({ children, ...baseProps }) => (
 
 ### `as`
 
- - Type: `"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 516 more ... | ("view" & FunctionComponent<...>)`
+ - Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 516 more ... | ("view" & FunctionComponent<...>)`
  - Required: No
 
 The HTML element or React component to render the component as.
@@ -107,7 +107,7 @@ const MyBaseControl = () => (
 
 ##### `as`
 
- - Type: `"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | ...`
+ - Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | ...`
  - Required: No
 
 The HTML element or React component to render the component as.

package/src/base-control/styles/base-control-styles.ts

@@ -45,6 +45,7 @@ export const StyledHelp = styled.p`
 	font-size: ${ font( 'helpText.fontSize' ) };
 	font-style: normal;
 	color: ${ COLORS.gray[ 700 ] };
+	text-wrap: pretty;
 `;
 
 export const StyledVisualLabel = styled.span`

package/src/border-control/styles.ts

@@ -84,6 +84,7 @@ export const colorIndicatorBorder = ( border?: Border ) => {
 	const { color, style } = border || {};
 
 	const fallbackColor =
+		// TODO: should use the `stroke-interactive-neutral` WPDS token when refactored to SCSS modules
 		!! style && style !== 'none' ? COLORS.gray[ 300 ] : undefined;
 
 	return css`

package/src/button/index.tsx

@@ -104,7 +104,7 @@ function useDeprecatedProps( {
  * );
  * ```
  */
-export function UnforwardedButton(
+export const Button = forwardRef( function UnforwardedButton(
 	props: ButtonProps & DeprecatedButtonProps,
 	ref: ForwardedRef< any >
 ) {
@@ -301,8 +301,6 @@ export function UnforwardedButton(
 			) }
 		</>
 	);
-}
+} );
 
-export const Button = forwardRef( UnforwardedButton );
-Button.displayName = 'Button';
 export default Button;

package/src/button/style.scss

@@ -153,7 +153,7 @@
 		&:disabled:not(:focus),
 		&[aria-disabled="true"]:not(:focus),
 		&[aria-disabled="true"]:hover:not(:focus) {
-			box-shadow: inset 0 0 0 $border-width $gray-300;
+			box-shadow: inset 0 0 0 $border-width var(--wpds-color-stroke-interactive-neutral-disabled);
 		}
 
 		&:focus:not(:active) {
@@ -321,14 +321,14 @@
 	}
 
 	&.is-small {
-		height: $button-size-small;
+		height: var(--wpds-dimension-size-sm);
 		line-height: 22px;
 		padding: 0 8px;
 		font-size: 11px;
 
 		&.has-icon:not(.has-text) {
 			padding: 0;
-			min-width: $button-size-small;
+			min-width: var(--wpds-dimension-size-sm);
 		}
 	}
 

package/src/card/card/README.md

@@ -85,9 +85,9 @@ This component provides a collection of sub-component that can be used to compos
 
 -   [`<CardBody />`](/packages/components/src/card/card-body/README.md)
 -   [`<CardDivider />`](/packages/components/src/card/card-divider/README.md)
--   [`<CardFooter />`](/packages/components/src/card/card-footer/README.md))
--   [`<CardHeader />`](/packages/components/src/card/card-header/README.md))
--   [`<CardMedia />`](/packages/components/src/card/card-media/README.md))
+-   [`<CardFooter />`](/packages/components/src/card/card-footer/README.md)
+-   [`<CardHeader />`](/packages/components/src/card/card-header/README.md)
+-   [`<CardMedia />`](/packages/components/src/card/card-media/README.md)
 
 ### Sub-Components Example
 
@@ -165,7 +165,7 @@ const Example = () => (
 );
 ```
 
-These sub-components are designed to be flexible. The Context props can be overridden by the sub-component(s) as required. In the following example, the last `<CardBody />` will render it's specified size:
+These sub-components are designed to be flexible. The Context props can be overridden by the sub-component(s) as required. In the following example, the last `<CardBody />` will render its specified size:
 
 ```jsx
 import { Card, CardBody } from '@wordpress/components';

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

@@ -12,9 +12,13 @@ import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { DividerProps } from '../../divider';
 
+/*
+ * The explicit return type keeps the emitted declaration from inlining the inferred type,
+ * which references `WrapElement` from @ariakit/react-utils
+ */
 export function useCardDivider(
 	props: WordPressComponentProps< DividerProps, 'hr', false >
-) {
+): WordPressComponentProps< DividerProps, 'hr', false > {
 	const { className, ...otherProps } = useContextSystem(
 		props,
 		'CardDivider'

package/src/card/test/__snapshots__/index.tsx.snap

@@ -26,7 +26,7 @@ Snapshot Diff:
   <div>
     <div
 -     class="components-card__body components-card-body css-1gg1viu-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
-+     class="components-card__body components-card-body css-p7byxx-PolymorphicDiv-Body-borderRadius-medium-shady e19lxcc00"
++     class="components-card__body components-card-body css-1jxruy0-PolymorphicDiv-Body-borderRadius-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -43,7 +43,7 @@ Snapshot Diff:
   <div>
     <div
 -     class="components-flex components-card__footer components-card-footer css-1s5uzde-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__footer components-card-footer css-12kx59h-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium-shady e19lxcc00"
++     class="components-flex components-card__footer components-card-footer css-1nz7z3h-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -77,7 +77,7 @@ Snapshot Diff:
   <div>
     <div
 -     class="components-flex components-card__header components-card-header css-1hlwlpa-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__header components-card-header css-lljjlu-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium-shady e19lxcc00"
++     class="components-flex components-card__header components-card-header css-zom6gv-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardHeader"
     >

package/src/checkbox-control/README.md

@@ -45,7 +45,7 @@ If only a few child checkboxes are checked, the parent checkbox becomes a mixed
 
 ### Usage
 
-Render an is author checkbox:
+Render an author checkbox:
 
 ```jsx
 import { useState } from 'react';

package/src/clipboard-button/README.md

@@ -51,15 +51,15 @@ The text that will be copied to the clipboard.
 
 The function that will be called when the text is copied.
 
--- Type: `() => void`
--- Required: yes
+- Type: `() => void`
+- Required: yes
 
 ### onFinishCopy
 
 The function that will be called when the text is copied and the copy animation is finished.
 
--- Type: `() => void`
--- Required: no
+- Type: `() => void`
+- Required: no
 
 ### Inherited props
 

package/src/color-palette/index.tsx

@@ -276,6 +276,11 @@ function UnforwardedColorPalette(
 		ariaLabelledby
 	);
 
+	// If disableCustomColors is true and colors.length is 0, return null to avoid rendering an empty palette wrapper.
+	if ( disableCustomColors && colors.length === 0 && ! actions ) {
+		return null;
+	}
+
 	return (
 		<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>
 			{ ! disableCustomColors && (

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

@@ -151,6 +151,20 @@ describe( 'ColorPalette', () => {
 		).not.toBeInTheDocument();
 	} );
 
+	it( 'should render nothing when custom colors are disabled, there are no colors, and it is not clearable', () => {
+		const onChange = jest.fn();
+		const { container } = render(
+			<ColorPalette
+				colors={ [] }
+				disableCustomColors
+				clearable={ false }
+				onChange={ onChange }
+			/>
+		);
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
 	it( 'should render dropdown and its content', async () => {
 		const user = userEvent.setup();
 		const onChange = jest.fn();
@@ -217,6 +231,22 @@ describe( 'ColorPalette', () => {
 		).toBeInTheDocument();
 	} );
 
+	it( 'should still show the clear button when colors is empty and custom colors are disabled', () => {
+		const onChange = jest.fn();
+
+		render(
+			<ColorPalette
+				colors={ [] }
+				disableCustomColors
+				onChange={ onChange }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'Clear' } )
+		).toBeInTheDocument();
+	} );
+
 	it( 'should display the selected color name and value', async () => {
 		const user = userEvent.setup();
 

package/src/combobox-control/README.md

@@ -91,7 +91,7 @@ Function called when the control's search input value changes. The argument cont
 
 #### onChange
 
-Function called with the selected value changes.
+Function called when the selected value changes.
 
 -   Type: `( value: string | null | undefined ) => void`
 -   Required: No

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

@@ -30,6 +30,11 @@ const meta: Meta< typeof Composite > = {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		'Composite.Context': Composite.Context,
 	},
+	// Temporary: Due to an upstream bug, render the root explicitly so the
+	// components manifest extractor can resolve props from the JSX.
+	//
+	// See: https://github.com/storybookjs/storybook/issues/34877
+	render: ( args ) => <Composite { ...args } />,
 	argTypes: {
 		children: { control: false },
 		render: { control: false },

package/src/confirm-dialog/README.md

@@ -4,7 +4,7 @@
 This feature is still experimental. "Experimental" means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md) and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.
+`ConfirmDialog` is built on top of [`Modal`](/packages/components/src/modal/README.md) and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.
 
 The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key. It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay).
 

package/src/confirm-dialog/stories/index.story.tsx

@@ -36,6 +36,7 @@ const meta: Meta< typeof ConfirmDialog > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
+			notes: 'Will be superseded by `AlertDialog` in `@wordpress/ui`, but continue using for now.',
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 	},

package/src/custom-gradient-picker/gradient-bar/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import type { MouseEventHandler } from 'react';
 
 /**
  * WordPress dependencies
@@ -21,6 +20,7 @@ import type {
 	CustomGradientBarReducerAction,
 	CustomGradientBarIdleState,
 } from '../types';
+import type { MouseEventHandler } from 'react';
 
 const customGradientBarReducer = (
 	state: CustomGradientBarReducerState,

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

@@ -19,6 +19,11 @@ const meta: Meta< typeof Dropdown > = {
 	id: 'components-dropdown',
 	component: Dropdown,
 	subcomponents: { DropdownContentWrapper },
+	// Temporary: Due to an upstream bug, render the root explicitly so the
+	// components manifest extractor can resolve props from the JSX.
+	//
+	// See: https://github.com/storybookjs/storybook/issues/34877
+	render: ( args ) => <Dropdown { ...args } />,
 	args: {
 		onClose: fn(),
 		onToggle: fn(),

package/src/dropdown-menu/style.scss

@@ -30,7 +30,7 @@
 			display: block;
 			content: "";
 			box-sizing: content-box;
-			background-color: $gray-300;
+			background-color: var(--wpds-color-stroke-surface-neutral);
 			position: absolute;
 			top: -3px;
 			left: 0;

package/src/external-link/style.scss

@@ -1,5 +1,5 @@
 .components-external-link {
-	color: var(--wpds-color-fg-interactive-brand);
+	color: var(--wpds-color-foreground-interactive-brand);
 	text-decoration: none;
 
 	// Match the `outset-ring--focus` utility used by `Link` in `@wordpress/ui`.
@@ -12,18 +12,18 @@
 	outline-offset: 1px;
 
 	&:visited {
-		color: var(--wpds-color-fg-interactive-brand);
+		color: var(--wpds-color-foreground-interactive-brand);
 	}
 
 	&:hover,
 	&:active {
-		color: var(--wpds-color-fg-interactive-brand-active);
+		color: var(--wpds-color-foreground-interactive-brand-active);
 	}
 
 	&:focus {
 		outline:
 			var(--wpds-border-width-focus) solid
-			var(--wpds-color-stroke-focus-brand);
+			var(--wpds-color-stroke-focus);
 		// Override style from wp-admin common.css.
 		box-shadow: none;
 		border-radius: 0;

package/src/flex/flex/README.md

@@ -4,7 +4,7 @@
 
 ## Usage
 
-`Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`.
+`Flex` is used with any of its two sub-components, `FlexItem` and `FlexBlock`.
 
 ```jsx
 import { Flex, FlexBlock, FlexItem } from '@wordpress/components';

package/src/form-toggle/style.scss

@@ -106,7 +106,7 @@ $transition-duration: 0.2s;
 	.components-disabled & {
 		.components-form-toggle__track {
 			background-color: $components-color-gray-100;
-			border-color: $components-color-gray-300;
+			border-color: var(--wpds-color-stroke-interactive-neutral-disabled);
 
 			@media ( forced-colors: active ) {
 				border-color: GrayText;

package/src/heading/test/__snapshots__/index.tsx.snap

@@ -2,11 +2,11 @@
 
 exports[`props should render correctly 1`] = `
 .emotion-0 {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   line-height: 1.4;
   margin: 0;
   text-wrap: pretty;
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   font-size: calc(1.95 * 13px);
   font-weight: 600;
   display: block;
@@ -29,7 +29,7 @@ Snapshot Diff:
 @@ -1,10 +1,10 @@
   Array [
     Object {
-      "color": "var(--wp-components-color-foreground, #1e1e1e)",
+      "color": "var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))",
       "display": "block",
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",
@@ -48,7 +48,7 @@ Snapshot Diff:
 @@ -1,10 +1,10 @@
   Array [
     Object {
-      "color": "var(--wp-components-color-foreground, #1e1e1e)",
+      "color": "var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))",
       "display": "block",
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",

package/src/menu/README.md

@@ -306,7 +306,7 @@ that don't support the native `disabled` attribute.
 The checked state of the radio menu item when it is initially rendered.
 Use when not wanting to control its checked state.
 
-Note: this prop will be overriden by the `checked` prop, if it is defined.
+Note: this prop will be overridden by the `checked` prop, if it is defined.
 
 ##### `hideOnClick`
 
@@ -404,7 +404,7 @@ that don't support the native `disabled` attribute.
 The checked state of the checkbox menu item when it is initially rendered.
 Use when not wanting to control its checked state.
 
-Note: this prop will be overriden by the `checked` prop, if it is defined.
+Note: this prop will be overridden by the `checked` prop, if it is defined.
 
 ##### `hideOnClick`
 

package/src/menu/styles.ts

@@ -22,7 +22,9 @@ const ITEM_PADDING_INLINE = space( 3 );
 // - border color and divider color are different from COLORS.theme variables
 // - lighter text color is not defined in COLORS.theme, should it be?
 // - lighter background color is not defined in COLORS.theme, should it be?
+// TODO: should use the `stroke-surface-neutral` WPDS token when refactored to SCSS modules
 const DEFAULT_BORDER_COLOR = COLORS.theme.gray[ 300 ];
+// TODO: should use the `stroke-surface-neutral-weak` WPDS token when refactored to SCSS modules
 const DIVIDER_COLOR = COLORS.theme.gray[ 200 ];
 const LIGHTER_TEXT_COLOR = COLORS.theme.gray[ 700 ];
 const LIGHT_BACKGROUND_COLOR = COLORS.theme.gray[ 100 ];