@wordpress/components 39.0.0 → 40.1.1-next.v.202608281122.0

package/src/resizable-box/resize-tooltip/index.tsx

@@ -1,12 +1,14 @@
 import clsx from 'clsx';
-import type { Ref, ForwardedRef } from 'react';
+import type { ElementType, Ref, ForwardedRef } from 'react';
 import { forwardRef } from '@wordpress/element';
+import { PolymorphicElement } from '../../utils/polymorphic-element';
 import Label from './label';
 import type { Axis, Position } from './utils';
 import { useResizeLabel, POSITIONS } from './utils';
-import { Root } from './styles/resize-tooltip.styles';
+import styles from './style.module.scss';
 
-type ResizeTooltipProps = React.ComponentProps< typeof Root > & {
+type ResizeTooltipProps = React.ComponentPropsWithoutRef< 'div' > & {
+	as?: ElementType;
 	'aria-hidden'?: boolean;
 	axis?: Axis;
 	className?: string;
@@ -23,6 +25,7 @@ const noop = () => {};
 
 function ResizeTooltip(
 	{
+		as = 'div',
 		axis,
 		className,
 		fadeTimeout = 180,
@@ -34,7 +37,7 @@ function ResizeTooltip(
 		zIndex = 1000,
 		...props
 	}: ResizeTooltipProps,
-	ref: ForwardedRef< HTMLDivElement >
+	ref: ForwardedRef< HTMLElement >
 ) {
 	const { label, resizeListener } = useResizeLabel( {
 		axis,
@@ -48,10 +51,16 @@ function ResizeTooltip(
 		return null;
 	}
 
-	const classes = clsx( 'components-resize-tooltip', className );
+	const classes = clsx( 'components-resize-tooltip', styles.root, className );
 
 	return (
-		<Root aria-hidden="true" className={ classes } ref={ ref } { ...props }>
+		<PolymorphicElement
+			aria-hidden="true"
+			as={ as }
+			{ ...props }
+			className={ classes }
+			ref={ ref }
+		>
 			{ resizeListener }
 			<Label
 				aria-hidden={ props[ 'aria-hidden' ] }
@@ -60,7 +69,7 @@ function ResizeTooltip(
 				ref={ labelRef }
 				zIndex={ zIndex }
 			/>
-		</Root>
+		</PolymorphicElement>
 	);
 }
 

package/src/resizable-box/resize-tooltip/label.tsx

@@ -1,13 +1,11 @@
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 import { forwardRef } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
+import { Text } from '../../text';
 import type { Position } from './utils';
 import { POSITIONS } from './utils';
-import {
-	TooltipWrapper,
-	Tooltip,
-	LabelText,
-} from './styles/resize-tooltip.styles';
+import styles from './style.module.scss';
 
 const CORNER_OFFSET = 4;
 const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;
@@ -66,20 +64,28 @@ function Label(
 	}
 
 	return (
-		<TooltipWrapper
+		<div
 			aria-hidden="true"
-			className="components-resizable-tooltip__tooltip-wrapper"
+			className={ clsx(
+				'components-resizable-tooltip__tooltip-wrapper',
+				styles[ 'tooltip-wrapper' ]
+			) }
 			ref={ ref }
 			style={ style }
 			{ ...props }
 		>
-			<Tooltip
-				className="components-resizable-tooltip__tooltip"
+			<div
+				className={ clsx(
+					'components-resizable-tooltip__tooltip',
+					styles.tooltip
+				) }
 				style={ labelStyle }
 			>
-				<LabelText as="span">{ label }</LabelText>
-			</Tooltip>
-		</TooltipWrapper>
+				<Text as="span" className={ styles[ 'label-text' ] }>
+					{ label }
+				</Text>
+			</div>
+		</div>
 	);
 }
 

package/src/resizable-box/resize-tooltip/style.module.scss

@@ -0,0 +1,40 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "../../utils/theme-variables" as *;
+
+.root {
+	box-sizing: border-box;
+	pointer-events: none;
+	position: absolute;
+	inset: 0;
+}
+
+.tooltip-wrapper {
+	align-items: center;
+	box-sizing: border-box;
+	display: inline-flex;
+	justify-content: center;
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 120ms linear;
+}
+
+.tooltip {
+	background: $components-color-foreground;
+	border-radius: $radius-small;
+	box-sizing: border-box;
+	font-family: $default-font;
+	font-size: 12px;
+	color: $components-color-foreground-inverted;
+	padding: $grid-unit-05 $grid-unit-10;
+	position: relative;
+}
+
+// Match the previous Emotion `&&&` specificity so label styles continue to
+// override Text / consumer typography.
+.label-text.label-text.label-text {
+	color: $components-color-foreground-inverted;
+	display: block;
+	font-size: 13px;
+	line-height: 1.4;
+	white-space: nowrap;
+}

package/src/resizable-box/resize-tooltip/test/index.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import { createRef, createElement } from '@wordpress/element';
+import ResizeTooltip from '../index';
+import styles from '../style.module.scss';
+
+describe( 'ResizeTooltip', () => {
+	it( 'renders the legacy root class together with className and style', () => {
+		render(
+			<ResizeTooltip
+				className="custom-tooltip"
+				data-testid="resize-tooltip"
+				style={ { zIndex: 7 } }
+			/>
+		);
+
+		const root = screen.getByTestId( 'resize-tooltip' );
+
+		expect( root ).toHaveClass( 'components-resize-tooltip' );
+		expect( root ).toHaveClass( styles.root );
+		expect( root ).toHaveClass( 'custom-tooltip' );
+		expect( root ).toHaveStyle( { zIndex: '7' } );
+	} );
+
+	it( 'renders as a different element, forwards the root ref, and forwards target-specific props', () => {
+		const ref = createRef< HTMLElement >();
+
+		render(
+			createElement( ResizeTooltip, {
+				as: 'label',
+				'data-testid': 'resize-tooltip',
+				htmlFor: 'size-field',
+				ref,
+			} as React.ComponentProps< typeof ResizeTooltip > & {
+				htmlFor?: string;
+			} )
+		);
+
+		const root = screen.getByTestId( 'resize-tooltip' );
+
+		expect( root.tagName ).toBe( 'LABEL' );
+		expect( ref.current ).toBe( root );
+		expect( root ).toHaveAttribute( 'for', 'size-field' );
+	} );
+} );

package/src/resizable-box/resize-tooltip/test/label.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import Label from '../label';
+import { POSITIONS } from '../utils';
+
+describe( 'ResizeTooltip label', () => {
+	it( 'keeps the Text contract when an ancestor uses a bold font weight', () => {
+		render(
+			<div style={ { fontWeight: 700 } }>
+				<Label
+					label="120 x 80"
+					position={ POSITIONS.bottom }
+					zIndex={ 1 }
+				/>
+			</div>
+		);
+
+		const label = screen.getByText( '120 x 80' );
+
+		expect( label.tagName ).toBe( 'SPAN' );
+		expect( label ).toHaveClass( 'components-text' );
+		expect( label ).toHaveClass( 'components-truncate' );
+		expect( label ).toHaveAttribute( 'data-wp-component', 'Text' );
+		expect( label ).toHaveStyle( { fontWeight: 'normal' } );
+	} );
+} );

package/src/resizable-box/stories/index.story.tsx

@@ -11,6 +11,7 @@ const meta: Meta< typeof ResizableBox > = {
 		children: { control: false },
 		enable: { control: 'object' },
 		onResizeStop: { action: 'onResizeStop' },
+		__experimentalShowTooltip: { control: 'boolean' },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -85,3 +86,13 @@ DisabledDirections.args = {
 		topLeft: false,
 	},
 };
+
+/**
+ * The resize size label is hidden by default. Enable it with
+ * `__experimentalShowTooltip`, or toggle that control in Storybook.
+ */
+export const WithResizeTooltip = Template.bind( {} );
+WithResizeTooltip.args = {
+	...Default.args,
+	__experimentalShowTooltip: true,
+};

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

@@ -28,12 +28,14 @@ const Template: StoryFn< typeof SandBox > = ( args ) => <SandBox { ...args } />;
 
 export const Default = Template.bind( {} );
 Default.args = {
+	title: 'Sandbox preview',
 	html: '<p>Arbitrary HTML content</p>',
 	allowForms: false,
 };
 
 export const WithForm = Template.bind( {} );
 WithForm.args = {
+	title: 'Sandbox preview with form',
 	html: '<form action="#"><label for="name">Name</label><input id="name" type="text" /><button type="submit">Submit</button></form>',
 	allowForms: true,
 };

package/src/scrollable/hook.ts

@@ -1,9 +1,8 @@
-import { useMemo } from '@wordpress/element';
+import clsx from 'clsx';
 import type { WordPressComponentProps } from '../context';
 import { useContextSystem } from '../context';
-import * as styles from './styles';
-import { useCx } from '../utils/hooks/use-cx';
 import type { ScrollableProps } from './types';
+import styles from './style.module.scss';
 
 export function useScrollable(
 	props: WordPressComponentProps< ScrollableProps, 'div' >
@@ -15,20 +14,15 @@ export function useScrollable(
 		...otherProps
 	} = useContextSystem( props, 'Scrollable' );
 
-	const cx = useCx();
-
-	const classes = useMemo(
-		() =>
-			cx(
-				styles.Scrollable,
-				styles.scrollableScrollbar,
-				smoothScroll && styles.smoothScroll,
-				scrollDirection === 'x' && styles.scrollX,
-				scrollDirection === 'y' && styles.scrollY,
-				scrollDirection === 'auto' && styles.scrollAuto,
-				className
-			),
-		[ className, cx, scrollDirection, smoothScroll ]
+	const classes = clsx(
+		styles.scrollable,
+		{
+			[ styles[ 'smooth-scroll' ] ]: smoothScroll,
+			[ styles[ 'scroll-x' ] ]: scrollDirection === 'x',
+			[ styles[ 'scroll-y' ] ]: scrollDirection === 'y',
+			[ styles[ 'scroll-auto' ] ]: scrollDirection === 'auto',
+		},
+		className
 	);
 
 	return { ...otherProps, className: classes };

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

@@ -64,6 +64,7 @@ const Template: StoryFn< typeof Scrollable > = ( { ...args } ) => {
 						right: 0,
 					} }
 					type="text"
+					aria-label="Element out of view"
 					value="Focus me"
 					readOnly
 				/>

package/src/scrollable/style.module.scss

@@ -0,0 +1,44 @@
+.scrollable {
+	height: 100%;
+
+	@media only screen and (min-device-width: 40em) {
+		&::-webkit-scrollbar {
+			height: 12px;
+			width: 12px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: rgba(0, 0, 0, 0.04);
+			border-radius: 8px;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background-clip: padding-box;
+			background-color: rgba(0, 0, 0, 0.2);
+			border: 2px solid rgba(0, 0, 0, 0);
+			border-radius: 7px;
+		}
+
+		&:hover::-webkit-scrollbar-thumb {
+			background-color: rgba(0, 0, 0, 0.5);
+		}
+	}
+}
+
+.smooth-scroll {
+	scroll-behavior: smooth;
+}
+
+.scroll-x {
+	overflow-x: auto;
+	overflow-y: hidden;
+}
+
+.scroll-y {
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+.scroll-auto {
+	overflow-y: auto;
+}

package/src/scrollable/test/index.tsx

@@ -1,5 +1,35 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
+import { createPortal, useState } from '@wordpress/element';
+import { registerStyle } from '@wordpress/style-runtime';
+import { CardBody } from '../../card';
+import StyleProvider from '../../style-provider';
 import { Scrollable } from '../index';
+import styles from '../style.module.scss';
+
+type GlobalScopeWithStyleRuntime = typeof globalThis & {
+	__wpStyleRuntime?: unknown;
+};
+
+function IframeWithStyleProvider( {
+	children,
+}: {
+	children: React.ReactNode;
+} ) {
+	const [ iframe, setIframe ] = useState< HTMLIFrameElement | null >( null );
+	const iframeDocument = iframe?.contentDocument;
+
+	return (
+		<iframe title="CardBody document" ref={ setIframe }>
+			{ iframeDocument &&
+				createPortal(
+					<StyleProvider document={ iframeDocument }>
+						{ children }
+					</StyleProvider>,
+					iframeDocument.body
+				) }
+		</iframe>
+	);
+}
 
 describe( 'props', () => {
 	test( 'should render correctly', () => {
@@ -9,23 +39,107 @@ describe( 'props', () => {
 			</Scrollable>
 		);
 
-		expect( screen.getByTestId( 'scrollable' ) ).toMatchSnapshot();
+		const scrollable = screen.getByTestId( 'scrollable' );
+
+		expect( scrollable ).toHaveClass( 'components-scrollable' );
+		expect( scrollable ).toHaveClass( styles.scrollable );
+		expect( scrollable ).toHaveClass( styles[ 'scroll-y' ] );
+		expect( scrollable ).not.toHaveClass( styles[ 'smooth-scroll' ] );
 	} );
 
 	test( 'should render smoothScroll', () => {
 		render(
-			<Scrollable data-testid="scrollable">
+			<Scrollable smoothScroll data-testid="smooth-scrollable">
 				WordPress.org - Code is Poetry
 			</Scrollable>
 		);
+
+		expect( screen.getByTestId( 'smooth-scrollable' ) ).toHaveClass(
+			styles[ 'smooth-scroll' ]
+		);
+	} );
+
+	test( 'should render scrollDirection x', () => {
 		render(
-			<Scrollable smoothScroll data-testid="smooth-scrollable">
+			<Scrollable scrollDirection="x" data-testid="scrollable-x">
 				WordPress.org - Code is Poetry
 			</Scrollable>
 		);
 
+		const scrollable = screen.getByTestId( 'scrollable-x' );
+
+		expect( scrollable ).toHaveClass( styles[ 'scroll-x' ] );
+		expect( scrollable ).not.toHaveClass( styles[ 'scroll-y' ] );
+	} );
+
+	test( 'should render scrollDirection auto', () => {
+		render(
+			<Scrollable scrollDirection="auto" data-testid="scrollable-auto">
+				WordPress.org - Code is Poetry
+			</Scrollable>
+		);
+
+		const scrollable = screen.getByTestId( 'scrollable-auto' );
+
+		expect( scrollable ).toHaveClass( styles[ 'scroll-auto' ] );
+		expect( scrollable ).not.toHaveClass( styles[ 'scroll-y' ] );
+	} );
+} );
+
+describe( 'CardBody isScrollable height', () => {
+	const globalScope = globalThis as GlobalScopeWithStyleRuntime;
+
+	afterEach( () => {
+		// Style runtime injects outside Testing Library's container.
+		/* eslint-disable testing-library/no-node-access */
+		document
+			.querySelectorAll( 'style[data-wp-hash="scrollable-height"]' )
+			.forEach( ( style ) => style.remove() );
+		/* eslint-enable testing-library/no-node-access */
+
+		delete globalScope.__wpStyleRuntime;
+	} );
+
+	test( 'should keep height 100% in the main document and in an iframe', () => {
+		// CSS module registration is skipped by the Jest transform, so mirror the
+		// generated production call explicitly.
+		registerStyle(
+			'scrollable-height',
+			`.${ styles.scrollable }{height:100%;}`
+		);
+
+		render( <CardBody data-testid="card-body">Body</CardBody> );
+		render(
+			<CardBody isScrollable data-testid="scrollable-body">
+				Body
+			</CardBody>
+		);
+
+		expect(
+			getComputedStyle( screen.getByTestId( 'card-body' ) ).height
+		).toBe( 'auto' );
+		expect(
+			getComputedStyle( screen.getByTestId( 'scrollable-body' ) ).height
+		).toBe( '100%' );
+
+		render(
+			<IframeWithStyleProvider>
+				<CardBody isScrollable data-testid="scrollable-body-iframe">
+					Body
+				</CardBody>
+			</IframeWithStyleProvider>
+		);
+
+		const iframeDocument =
+			screen.getByTitle< HTMLIFrameElement >( 'CardBody document' )
+				.contentDocument!;
+
+		const iframeBody = within( iframeDocument.body ).getByTestId(
+			'scrollable-body-iframe'
+		);
+
 		expect(
-			screen.getByTestId( 'smooth-scrollable' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'scrollable' ) );
+			iframeDocument.defaultView!.getComputedStyle( iframeBody ).height
+		).toBe( '100%' );
 	} );
 } );

package/src/snackbar/index.tsx

@@ -1,5 +1,6 @@
 import type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';
 import clsx from 'clsx';
+import { useIsPresent } from 'framer-motion';
 import { speak } from '@wordpress/a11y';
 import {
 	useEffect,
@@ -57,6 +58,8 @@ function UnforwardedSnackbar(
 	}: WordPressComponentProps< SnackbarProps, 'div' >,
 	ref: ForwardedRef< any >
 ) {
+	const isPresent = useIsPresent();
+
 	function dismissMe( event: KeyboardEvent | MouseEvent ) {
 		if ( event && event.preventDefault ) {
 			event.preventDefault();
@@ -92,16 +95,17 @@ function UnforwardedSnackbar(
 	} );
 
 	useEffect( () => {
-		// Only set up the timeout dismiss if we're not explicitly dismissing.
+		if ( explicitDismiss || ! isPresent ) {
+			return;
+		}
+
 		const timeoutHandle = setTimeout( () => {
-			if ( ! explicitDismiss ) {
-				callbacksRef.current.onDismiss?.();
-				callbacksRef.current.onRemove?.();
-			}
+			callbacksRef.current.onDismiss?.();
+			callbacksRef.current.onRemove?.();
 		}, NOTICE_TIMEOUT );
 
 		return () => clearTimeout( timeoutHandle );
-	}, [ explicitDismiss ] );
+	}, [ explicitDismiss, isPresent ] );
 
 	const classes = clsx( className, 'components-snackbar', {
 		'components-snackbar-explicit-dismiss': !! explicitDismiss,

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

@@ -60,6 +60,11 @@ WithActions.args = {
 	],
 	children: 'Use Snackbars with an action link to an external page.',
 };
+WithActions.parameters = {
+	// FIXME: Action control nested inside the snackbar creates nested interactive elements (nested-interactive).
+	// See: https://github.com/WordPress/gutenberg/issues/81596
+	a11y: { test: 'todo' },
+};
 
 export const WithIcon: StoryFn< typeof Snackbar > = DefaultTemplate.bind( {} );
 WithIcon.args = {

package/src/snackbar/stories/list.story.tsx

@@ -14,6 +14,9 @@ const meta: Meta< typeof SnackbarList > = {
 		},
 	},
 	parameters: {
+		// FIXME: Snackbars with actions nest interactive elements (nested-interactive).
+		// See: https://github.com/WordPress/gutenberg/issues/81596
+		a11y: { test: 'todo' },
 		controls: {
 			expanded: true,
 		},

package/src/snackbar/test/index.tsx

@@ -1,4 +1,4 @@
-import { render, screen, within } from '@testing-library/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import { click } from '@ariakit/test';
 import { speak } from '@wordpress/a11y';
 import { SVG, Path } from '@wordpress/primitives';
@@ -14,6 +14,10 @@ describe( 'Snackbar', () => {
 		mockedSpeak.mockReset();
 	} );
 
+	afterEach( () => {
+		jest.useRealTimers();
+	} );
+
 	it( 'should render correctly', () => {
 		render( <Snackbar>Message</Snackbar> );
 
@@ -44,6 +48,22 @@ describe( 'Snackbar', () => {
 		expect( icon ).toBeVisible();
 	} );
 
+	it( 'should not restart auto-dismissal after an unrelated rerender', async () => {
+		jest.useFakeTimers();
+		const removeNotice = jest.fn();
+		const { rerender } = render(
+			<Snackbar onRemove={ () => removeNotice() }>Message</Snackbar>
+		);
+
+		await act( async () => jest.advanceTimersByTime( 5000 ) );
+		rerender(
+			<Snackbar onRemove={ () => removeNotice() }>Message</Snackbar>
+		);
+		await act( async () => jest.advanceTimersByTime( 1000 ) );
+
+		expect( removeNotice ).toHaveBeenCalledTimes( 1 );
+	} );
+
 	it( 'should be dismissible by clicking the snackbar', async () => {
 		const onRemove = jest.fn();
 		const onDismiss = jest.fn();
@@ -69,6 +89,7 @@ describe( 'Snackbar', () => {
 	} );
 
 	it( 'should not be dismissible by clicking the snackbar when the `explicitDismiss` prop is set to `true`', async () => {
+		jest.useFakeTimers();
 		const onRemove = jest.fn();
 		const onDismiss = jest.fn();
 
@@ -93,7 +114,12 @@ describe( 'Snackbar', () => {
 			'components-snackbar-explicit-dismiss'
 		);
 
-		await click( snackbar );
+		fireEvent.click( snackbar );
+
+		expect( onRemove ).not.toHaveBeenCalled();
+		expect( onDismiss ).not.toHaveBeenCalled();
+
+		await act( async () => jest.advanceTimersByTime( 6000 ) );
 
 		expect( onRemove ).not.toHaveBeenCalled();
 		expect( onDismiss ).not.toHaveBeenCalled();