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

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/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/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/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/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 ];