@wordpress/components 35.0.1 → 36.0.0

package/src/divider/component.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -9,18 +10,41 @@ import type { ForwardedRef } from 'react';
  */
 import type { WordPressComponentProps } from '../context';
 import { contextConnect, useContextSystem } from '../context';
-import { DividerView } from './styles';
+import { space } from '../utils/space';
 import type { DividerProps } from './types';
+import styles from './style.module.scss';
 
 function UnconnectedDivider(
 	props: WordPressComponentProps< DividerProps, 'hr', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
-	const contextProps = useContextSystem( props, 'Divider' );
+	const {
+		className,
+		margin,
+		marginEnd,
+		marginStart,
+		style,
+		...contextProps
+	} = useContextSystem( props, 'Divider' );
+
+	const dividerStyle = { ...style };
+	const resolvedMarginStart = space( marginStart ?? margin );
+	const resolvedMarginEnd = space( marginEnd ?? margin );
+
+	if ( resolvedMarginStart ) {
+		dividerStyle[ '--wp-components-divider-margin-start' ] =
+			resolvedMarginStart;
+	}
+
+	if ( resolvedMarginEnd ) {
+		dividerStyle[ '--wp-components-divider-margin-end' ] =
+			resolvedMarginEnd;
+	}
 
 	return (
 		<Ariakit.Separator
-			render={ <DividerView /> }
+			className={ clsx( styles.divider, className ) }
+			style={ dividerStyle }
 			{ ...contextProps }
 			ref={ forwardedRef }
 		/>

package/src/divider/style.module.scss

@@ -0,0 +1,21 @@
+.divider {
+	border: 0;
+	margin: 0;
+
+	&[aria-orientation="horizontal"] {
+		border-block-end: 1px solid currentColor;
+		block-size: 0;
+		inline-size: auto;
+		margin-block-start: var(--wp-components-divider-margin-start, 0);
+		margin-block-end: var(--wp-components-divider-margin-end, 0);
+	}
+
+	&[aria-orientation="vertical"] {
+		display: inline;
+		border-inline-end: 1px solid currentColor;
+		block-size: auto;
+		inline-size: 0;
+		margin-inline-start: var(--wp-components-divider-margin-start, 0);
+		margin-inline-end: var(--wp-components-divider-margin-end, 0);
+	}
+}

package/src/divider/test/index.tsx

@@ -9,32 +9,42 @@ import { render, screen } from '@testing-library/react';
 import { Divider } from '..';
 
 describe( 'props', () => {
-	test( 'should render correctly', () => {
+	test( 'should render a horizontal separator by default', () => {
 		render( <Divider /> );
-		expect( screen.getByRole( 'separator' ) ).toMatchSnapshot();
+
+		const divider = screen.getByRole( 'separator' );
+		expect( divider ).toHaveAttribute( 'aria-orientation', 'horizontal' );
 	} );
 
 	test( 'should render marginStart', () => {
-		render( <Divider /> );
 		render( <Divider marginStart={ 5 } /> );
 
-		const dividers = screen.getAllByRole( 'separator' );
-		expect( dividers[ 0 ] ).toMatchStyleDiffSnapshot( dividers[ 1 ] );
+		expect( screen.getByRole( 'separator' ) ).toHaveStyle( {
+			'--wp-components-divider-margin-start': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render marginEnd', () => {
-		render( <Divider /> );
 		render( <Divider marginEnd={ 5 } /> );
 
-		const dividers = screen.getAllByRole( 'separator' );
-		expect( dividers[ 0 ] ).toMatchStyleDiffSnapshot( dividers[ 1 ] );
+		expect( screen.getByRole( 'separator' ) ).toHaveStyle( {
+			'--wp-components-divider-margin-end': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render margin', () => {
-		render( <Divider /> );
 		render( <Divider margin={ 7 } /> );
 
-		const dividers = screen.getAllByRole( 'separator' );
-		expect( dividers[ 0 ] ).toMatchStyleDiffSnapshot( dividers[ 1 ] );
+		expect( screen.getByRole( 'separator' ) ).toHaveStyle( {
+			'--wp-components-divider-margin-start': 'calc(4px * 7)',
+			'--wp-components-divider-margin-end': 'calc(4px * 7)',
+		} );
+	} );
+
+	test( 'should render vertical orientation', () => {
+		render( <Divider orientation="vertical" /> );
+
+		const divider = screen.getByRole( 'separator' );
+		expect( divider ).toHaveAttribute( 'aria-orientation', 'vertical' );
 	} );
 } );

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/higher-order/with-constrained-tabbing/README.md

@@ -23,12 +23,10 @@ const MyComponentWithConstrainedTabbing = () => {
 	let form = (
 		<form>
 			<TextControl
-				__next40pxDefaultSize
 				label="Input 1"
 				onChange={ () => {} }
 			/>
 			<TextControl
-				__next40pxDefaultSize
 				label="Input 2"
 				onChange={ () => {} }
 			/>

package/src/higher-order/with-fallback-styles/index.tsx

@@ -6,19 +6,17 @@ import fastDeepEqual from 'fast-deep-equal/es6/index.js';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { useState, useRef } from '@wordpress/element';
+import {
+	createHigherOrderComponent,
+	useIsomorphicLayoutEffect,
+} from '@wordpress/compose';
 
 type Props = {
 	node?: HTMLElement;
 	[ key: string ]: any;
 };
 
-type State = {
-	fallbackStyles?: { [ key: string ]: any };
-	grabStylesCompleted: boolean;
-};
-
 export default (
 	mapNodeToProps: (
 		node: HTMLElement,
@@ -26,69 +24,41 @@ export default (
 	) => { [ key: string ]: any }
 ) =>
 	createHigherOrderComponent( ( WrappedComponent ) => {
-		return class WithFallbackStyles extends Component< Props, State > {
-			nodeRef?: HTMLElement;
+		return function WithFallbackStyles( props: Props ) {
+			const [ fallbackStyles, setFallbackStyles ] = useState<
+				{ [ key: string ]: any } | undefined
+			>( undefined );
 
-			constructor( props: Props ) {
-				super( props );
-				this.nodeRef = this.props.node;
-				this.state = {
-					fallbackStyles: undefined,
-					grabStylesCompleted: false,
-				};
+			const nodeRef = useRef< HTMLDivElement >( null );
 
-				this.bindRef = this.bindRef.bind( this );
-			}
-
-			bindRef( node: HTMLDivElement ) {
-				if ( ! node ) {
-					return;
-				}
-				this.nodeRef = node;
-			}
+			// Runs before paint, so the fallback styles apply without a flash.
+			useIsomorphicLayoutEffect( () => {
+				const node = props.node ?? nodeRef.current;
+				// Derived from fallbackStyles: the grab is complete once every
+				// mapped value has resolved to a truthy style.
+				const grabStylesCompleted =
+					!! fallbackStyles &&
+					Object.values( fallbackStyles ).every( Boolean );
 
-			componentDidMount() {
-				this.grabFallbackStyles();
-			}
-
-			componentDidUpdate() {
-				this.grabFallbackStyles();
-			}
-
-			grabFallbackStyles() {
-				const { grabStylesCompleted, fallbackStyles } = this.state;
-				if ( this.nodeRef && ! grabStylesCompleted ) {
-					const newFallbackStyles = mapNodeToProps(
-						this.nodeRef,
-						this.props
-					);
+				if ( node && ! grabStylesCompleted ) {
+					const newFallbackStyles = mapNodeToProps( node, props );
 
 					if (
 						! fastDeepEqual( newFallbackStyles, fallbackStyles )
 					) {
-						this.setState( {
-							fallbackStyles: newFallbackStyles,
-							grabStylesCompleted:
-								Object.values( newFallbackStyles ).every(
-									Boolean
-								),
-						} );
+						setFallbackStyles( newFallbackStyles );
 					}
 				}
-			}
+			} );
+
+			const wrappedComponent = (
+				<WrappedComponent { ...props } { ...fallbackStyles } />
+			);
 
-			render() {
-				const wrappedComponent = (
-					<WrappedComponent
-						{ ...this.props }
-						{ ...this.state.fallbackStyles }
-					/>
-				);
-				return this.props.node ? (
-					wrappedComponent
-				) : (
-					<div ref={ this.bindRef }> { wrappedComponent } </div>
-				);
-			}
+			return props.node ? (
+				wrappedComponent
+			) : (
+				<div ref={ nodeRef }> { wrappedComponent } </div>
+			);
 		};
 	}, 'withFallbackStyles' );

package/src/higher-order/with-fallback-styles/test/index.tsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import withFallbackStyles from '..';
+
+describe( 'withFallbackStyles', () => {
+	const Wrapped = ( props: { fallbackColor?: string } ) => (
+		<div>{ props.fallbackColor ?? 'no-fallback' }</div>
+	);
+
+	it( 'derives the fallback styles from the provided node prop', () => {
+		const node = document.createElement( 'span' );
+		node.dataset.color = 'rgb(1, 2, 3)';
+		const mapNodeToProps = jest.fn( ( el: HTMLElement ) => ( {
+			fallbackColor: el.dataset.color,
+		} ) );
+		const Component = withFallbackStyles( mapNodeToProps )( Wrapped );
+
+		render( <Component node={ node } /> );
+
+		// The rendered value proves the actual node was read by mapNodeToProps.
+		expect( mapNodeToProps ).toHaveBeenCalledWith(
+			node,
+			expect.objectContaining( { node } )
+		);
+		expect( screen.getByText( 'rgb(1, 2, 3)' ) ).toBeInTheDocument();
+	} );
+
+	it( 'derives the fallback styles from the internal wrapper node when no node prop is given', () => {
+		const mapNodeToProps = jest.fn( ( el: HTMLElement ) => ( {
+			fallbackColor: el.tagName.toLowerCase(),
+		} ) );
+		const Component = withFallbackStyles( mapNodeToProps )( Wrapped );
+
+		render( <Component /> );
+
+		// The HOC wraps in a <div>, so reading the node's tagName yields 'div'.
+		expect( mapNodeToProps ).toHaveBeenCalled();
+		expect( mapNodeToProps.mock.calls[ 0 ][ 0 ].tagName ).toBe( 'DIV' );
+		expect( screen.getByText( 'div' ) ).toBeInTheDocument();
+	} );
+} );

package/src/higher-order/with-focus-return/README.md

@@ -14,7 +14,6 @@ const EnhancedComponent = withFocusReturn( () => (
 	<div>
 		Focus will return to the previous input when this component is unmounted
 		<TextControl
-			__next40pxDefaultSize
 			autoFocus={ true }
 			onChange={ () => {} }
 		/>
@@ -31,7 +30,6 @@ const MyComponentWithFocusReturn = () => {
 	return (
 		<div>
 			<TextControl
-				__next40pxDefaultSize
 				placeholder="Type something"
 				value={ text }
 				onChange={ ( value ) => setText( value ) }

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

@@ -26,21 +26,6 @@ Default.args = {
 	icon: wordpress,
 };
 
-export const FillColor: StoryFn< typeof Icon > = ( args ) => {
-	return (
-		<div
-			style={ {
-				fill: 'blue',
-			} }
-		>
-			<Icon { ...args } />
-		</div>
-	);
-};
-FillColor.args = {
-	...Default.args,
-};
-
 /**
  * When `icon` is a function, it will be passed the `size` prop and any other additional props.
  */

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