@wordpress/components 39.0.0 → 40.0.0

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/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/spinner/stories/index.story.tsx

@@ -3,7 +3,6 @@ import Spinner from '../';
 import { space } from '../../utils/space';
 
 const meta: Meta< typeof Spinner > = {
-	tags: [ 'manifest' ],
 	title: 'Components/Feedback/Spinner',
 	id: 'components-spinner',
 	component: Spinner,
@@ -13,8 +12,9 @@ const meta: Meta< typeof Spinner > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'recommended',
+			status: 'not-recommended',
 			whereUsed: 'global',
+			notes: 'Use [`Spinner`](?path=/docs/design-system-components-spinner--docs) from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/style.scss

@@ -21,6 +21,7 @@
 @use "./form-token-field/style.scss" as *;
 @use "./guide/style.scss" as *;
 @use "./higher-order/navigate-regions/style.scss" as *;
+@use "./input-control/style.scss" as *;
 @use "./menu-group/style.scss" as *;
 @use "./menu-item/style.scss" as *;
 @use "./menu-items-choice/style.scss" as *;

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

@@ -3,7 +3,6 @@ import { useState } from '@wordpress/element';
 import TextControl from '..';
 
 const meta: Meta< typeof TextControl > = {
-	tags: [ 'manifest' ],
 	component: TextControl,
 	title: 'Components/Selection & Input/Common/TextControl',
 	id: 'components-textcontrol',
@@ -19,9 +18,9 @@ const meta: Meta< typeof TextControl > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'recommended',
+			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Prefer `InputControl` when placing buttons or icons in the prefix/suffix slots.',
+			notes: 'Use [`InputControl`](?path=/docs/design-system-components-form-inputcontrol--docs) from `@wordpress/ui` instead. See the [migration guide](?path=/docs/components-inputcontrol--migration-guide).',
 		},
 	},
 };

package/src/text-control/style.scss

@@ -24,7 +24,6 @@
 	background: $components-color-background;
 	color: $components-color-foreground;
 	@include input-control;
-	border-color: $components-color-border;
 
 	// Subtract 1px to account for the border, which isn't included on the element
 	// on newer components like InputControl, SelectControl, etc.

package/src/textarea-control/index.tsx

@@ -2,9 +2,9 @@ import clsx from 'clsx';
 import { useInstanceId } from '@wordpress/compose';
 import { forwardRef } from '@wordpress/element';
 import BaseControl from '../base-control';
-import { StyledTextarea } from './styles/textarea-control-styles';
 import type { TextareaControlProps } from './types';
 import type { WordPressComponentProps } from '../context';
+import styles from './style.module.scss';
 
 function UnforwardedTextareaControl(
 	props: WordPressComponentProps< TextareaControlProps, 'textarea', false >,
@@ -37,8 +37,11 @@ function UnforwardedTextareaControl(
 			help={ help }
 			className={ classes }
 		>
-			<StyledTextarea
-				className="components-textarea-control__input"
+			<textarea
+				className={ clsx(
+					'components-textarea-control__input',
+					styles.textarea
+				) }
 				id={ id }
 				rows={ rows }
 				onChange={ onChangeValue }

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

@@ -3,7 +3,6 @@ import { useState } from '@wordpress/element';
 import TextareaControl from '..';
 
 const meta: Meta< typeof TextareaControl > = {
-	tags: [ 'manifest' ],
 	component: TextareaControl,
 	title: 'Components/Selection & Input/Common/TextareaControl',
 	id: 'components-textareacontrol',
@@ -22,9 +21,9 @@ const meta: Meta< typeof TextareaControl > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'recommended',
+			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by [`TextareaControl`](?path=/docs/design-system-components-form-primitives-textarea--docs) in `@wordpress/ui`, but continue using for now.',
+			notes: 'Use [`TextareaControl`](?path=/docs/design-system-components-form-textareacontrol--docs) from `@wordpress/ui` instead. See the [migration guide](?path=/docs/components-textareacontrol--migration-guide).',
 		},
 	},
 };

package/src/textarea-control/stories/migration-guide.mdx

@@ -0,0 +1,79 @@
+import { Markdown, Meta } from '@storybook/addon-docs/blocks';
+import * as TextareaControlStories from './index.story';
+
+<Meta of={ TextareaControlStories } name="Migration Guide" />
+
+# TextareaControl migration guide
+
+Migrate from [`TextareaControl`](?path=/docs/components-textareacontrol--docs) in `@wordpress/components` to [`TextareaControl`](?path=/docs/design-system-components-form-textareacontrol--docs) in `@wordpress/ui`.
+
+## Basic migration
+
+Update the import and swap the callback prop:
+
+```jsx
+// Before
+import { TextareaControl } from '@wordpress/components';
+
+<TextareaControl
+	label="Description"
+	value={ value }
+	onChange={ setValue }
+	help="Enter a short description."
+/>;
+
+// After
+import { TextareaControl } from '@wordpress/ui';
+
+<TextareaControl
+	label="Description"
+	value={ value }
+	onValueChange={ setValue }
+	description="Enter a short description."
+/>;
+```
+
+## Prop mapping
+
+<Markdown>{ `
+| \`@wordpress/components\` | \`@wordpress/ui\` | Notes |
+| --- | --- | --- |
+| \`onChange\` | \`onValueChange\` | Receives the next string value on every change. |
+| \`help\` | \`description\` | Use plain text only. |
+| \`help\` with links or other markup | \`details\` | Use when the help text needs semantic content. |
+| \`hideLabelFromVision\` | \`hideLabelFromVision\` | Same behavior. |
+| \`rows\` | \`rows\` | Same default (\`4\`). |
+` }</Markdown>
+
+## Labels
+
+`TextareaControl` requires a `label` prop with a plain `string` value. The legacy component treats `label` as optional.
+
+When the visible label text already exists elsewhere, pass a descriptive string and hide it visually:
+
+```jsx
+<TextareaControl
+	label="Notes"
+	hideLabelFromVision
+	value={ value }
+	onValueChange={ setValue }
+/>;
+```
+
+When the label is not a plain string, or you need a custom layout, compose the [`Textarea`](?path=/docs/design-system-components-form-primitives-textarea--docs) and [`Field`](?path=/docs/design-system-components-form-primitives-field--docs) primitives instead of `TextareaControl`:
+
+```jsx
+import { Field, Textarea } from '@wordpress/ui';
+
+<Field.Root>
+	<Field.Label>
+		Custom <strong>label</strong> content
+	</Field.Label>
+	<Textarea
+		value={ value }
+		onValueChange={ setValue }
+	/>
+</Field.Root>
+```
+
+See the [`Field` stories](?path=/docs/design-system-components-form-primitives-field--docs) for other association patterns, such as external labels with `aria-labelledby`.