@wordpress/components 37.0.0 → 38.0.0

package/src/toggle-group-control/test/index.tsx

@@ -21,6 +21,8 @@ import {
 } from '../index';
 import { TOOLTIP_DELAY } from '../../tooltip';
 import type { ToggleGroupControlProps } from '../types';
+import controlStyles from '../toggle-group-control/style.module.scss';
+import optionStyles from '../toggle-group-control-option-base/style.module.scss';
 
 const hoverOutside = async () => {
 	await hover( document.body );
@@ -637,7 +639,7 @@ describe.each( [
 	} );
 } );
 
-test( 'should compose block styles in a single generated class', () => {
+test( 'should render block styles without Emotion-generated classes', () => {
 	render(
 		<ToggleGroupControl label="Test Toggle Group Control" isBlock>
 			{ options }
@@ -648,6 +650,34 @@ test( 'should compose block styles in a single generated class', () => {
 		name: 'Test Toggle Group Control',
 	} );
 
-	expect( getGeneratedEmotionClassNames( control ) ).toHaveLength( 1 );
-	expect( control ).toHaveStyle( { display: 'flex' } );
+	expect( getGeneratedEmotionClassNames( control ) ).toHaveLength( 0 );
+	expect( control ).toHaveClass(
+		controlStyles[ 'toggle-group-control' ],
+		controlStyles[ 'is-block' ],
+		controlStyles[ 'has-border' ],
+		controlStyles[ 'has-enclosing-borders' ]
+	);
+} );
+
+test( 'should render deselectable styles without enclosing borders', () => {
+	render(
+		<ToggleGroupControl label="Test Toggle Group Control" isDeselectable>
+			{ options }
+		</ToggleGroupControl>
+	);
+
+	const control = screen.getByRole( 'group', {
+		name: 'Test Toggle Group Control',
+	} );
+	const option = screen.getByRole( 'button', { name: 'R' } );
+
+	expect( control ).toHaveClass( controlStyles[ 'toggle-group-control' ] );
+	expect( control ).not.toHaveClass(
+		controlStyles[ 'has-border' ],
+		controlStyles[ 'has-enclosing-borders' ]
+	);
+	expect( option ).toHaveClass(
+		optionStyles.button,
+		optionStyles[ 'is-deselectable' ]
+	);
 } );

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { useMemo, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
@@ -14,10 +15,9 @@ import { useMergeRefs } from '@wordpress/compose';
  */
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect, useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks';
 import BaseControl, { useBaseControlProps } from '../../base-control';
 import type { ToggleGroupControlProps } from '../types';
-import * as styles from './styles';
+import styles from './style.module.scss';
 import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
 import { ToggleGroupControlAsButtonGroup } from './as-button-group';
 import { useTrackElementOffsetRect } from '../../utils/element-rect';
@@ -32,7 +32,6 @@ function UnconnectedToggleGroupControl(
 		__nextHasNoMarginBottom: _,
 		size: _size,
 		__next40pxDefaultSize: _next40pxDefaultSize,
-		__shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,
 		className,
 		isAdaptiveWidth = false,
 		isBlock = false,
@@ -67,18 +66,14 @@ function UnconnectedToggleGroupControl(
 		roundRect: false,
 	} );
 
-	const cx = useCx();
-
-	const classes = useMemo(
-		() =>
-			cx(
-				styles.toggleGroupControl( {
-					isBlock,
-					isDeselectable,
-				} ),
-				className
-			),
-		[ className, cx, isBlock, isDeselectable ]
+	const classes = clsx(
+		styles[ 'toggle-group-control' ],
+		{
+			[ styles[ 'is-block' ] ]: isBlock,
+			[ styles[ 'has-border' ] ]: isBlock && ! isDeselectable,
+			[ styles[ 'has-enclosing-borders' ] ]: ! isDeselectable,
+		},
+		className
 	);
 
 	const MainControl = isDeselectable

package/src/toggle-group-control/toggle-group-control/style.module.scss

@@ -0,0 +1,63 @@
+@use "@wordpress/base-styles/mixins";
+@use "../../utils/theme-variables" as *;
+
+.toggle-group-control {
+	background: $components-color-background;
+	border: 1px solid transparent;
+	border-radius: var(--wpds-border-radius-sm);
+	display: inline-flex;
+	height: 40px;
+	min-width: 0;
+	position: relative;
+
+	@media not ( prefers-reduced-motion ) {
+		&[data-indicator-animated]::before {
+			transition-property: transform, border-radius;
+			transition-duration: 0.2s;
+			transition-timing-function: ease-out;
+		}
+	}
+
+	&::before {
+		content: "";
+		position: absolute;
+		pointer-events: none;
+		background: $components-color-gray-100;
+		border: 1px solid $components-color-gray-700;
+
+		outline: 2px solid transparent;
+		outline-offset: -3px;
+
+		border-radius: var(--wpds-border-radius-sm);
+		top: -1px;
+		/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Preserve the indicator's physical offset. */
+		left: -2px;
+		width: calc(calc(var(--selected-width, 0) * 1px) + 2px);
+		height: calc(calc(var(--selected-height, 0) * 1px) + 2px);
+		transform: translateX(calc(var(--selected-left, 0) * 1px));
+		/* Hide when dimensions are unset (0) */
+		opacity: min(1, max(0, var(--selected-width, 0), var(--selected-height, 0)));
+	}
+}
+
+.has-border {
+	border-color: $components-color-gray-300;
+}
+
+.has-enclosing-borders {
+	&:hover {
+		border-color: $components-color-gray-400;
+	}
+
+	&:focus-within {
+		z-index: 1;
+		@include mixins.outset-ring__focus();
+		// Preserve validated-control accent overrides.
+		outline-color: $components-color-focus;
+	}
+}
+
+.is-block {
+	display: flex;
+	width: 100%;
+}

package/src/toggle-group-control/toggle-group-control-option-base/component.tsx

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 import * as Ariakit from '@ariakit/react';
 
@@ -8,7 +9,7 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useLayoutEffect, useMemo, useRef } from '@wordpress/element';
+import { useLayoutEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,12 +21,9 @@ import type {
 	WithToolTipProps,
 } from '../types';
 import { useToggleGroupControlContext } from '../context';
-import * as styles from './styles';
-import { useCx } from '../../utils/hooks';
+import styles from './style.module.scss';
 import Tooltip from '../../tooltip';
 
-const { ButtonContentView, LabelView } = styles;
-
 const WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {
 	if ( showTooltip && text ) {
 		return (
@@ -77,22 +75,18 @@ function ToggleGroupControlOptionBase(
 	} = buttonProps;
 
 	const isPressed = toggleGroupControlContext.value === value;
-	const cx = useCx();
-	const labelViewClasses = useMemo(
-		() => cx( isBlock && styles.labelBlock ),
-		[ cx, isBlock ]
+	const labelClasses = clsx(
+		styles.label,
+		isBlock && styles[ 'label-block' ]
 	);
-	const itemClasses = useMemo(
-		() =>
-			cx(
-				styles.buttonView( {
-					isDeselectable,
-					isIcon,
-					isPressed,
-				} ),
-				className
-			),
-		[ cx, isDeselectable, isIcon, isPressed, className ]
+	const itemClasses = clsx(
+		styles.button,
+		{
+			[ styles[ 'is-deselectable' ] ]: isDeselectable,
+			[ styles[ 'is-icon' ] ]: isIcon,
+			[ styles[ 'is-pressed' ] ]: isPressed,
+		},
+		className
 	);
 
 	const buttonOnClick = () => {
@@ -118,7 +112,7 @@ function ToggleGroupControlOptionBase(
 	}, [ isPressed, toggleGroupControlContext ] );
 
 	return (
-		<LabelView ref={ labelRef } className={ labelViewClasses }>
+		<div ref={ labelRef } className={ labelClasses }>
 			<WithToolTip
 				showTooltip={ showTooltip }
 				text={ otherButtonProps[ 'aria-label' ] }
@@ -131,7 +125,9 @@ function ToggleGroupControlOptionBase(
 						type="button"
 						onClick={ buttonOnClick }
 					>
-						<ButtonContentView>{ children }</ButtonContentView>
+						<div className={ styles[ 'button-content' ] }>
+							{ children }
+						</div>
 					</button>
 				) : (
 					<Ariakit.Radio
@@ -153,11 +149,13 @@ function ToggleGroupControlOptionBase(
 						render={ <button type="button" { ...commonProps } /> }
 						value={ value }
 					>
-						<ButtonContentView>{ children }</ButtonContentView>
+						<div className={ styles[ 'button-content' ] }>
+							{ children }
+						</div>
 					</Ariakit.Radio>
 				) }
 			</WithToolTip>
-		</LabelView>
+		</div>
 	);
 }
 

package/src/toggle-group-control/toggle-group-control-option-base/style.module.scss

@@ -0,0 +1,88 @@
+@use "@wordpress/base-styles/mixins";
+@use "../../utils/theme-variables" as *;
+
+.label {
+	display: inline-flex;
+	max-width: 100%;
+	min-width: 0;
+	position: relative;
+}
+
+.label-block {
+	flex: 1;
+}
+
+.button {
+	align-items: center;
+	appearance: none;
+	background: transparent;
+	border: none;
+	border-radius: var(--wpds-border-radius-xs);
+	color: $components-color-gray-700;
+	fill: currentColor;
+	cursor: var(--wpds-cursor-control);
+	display: flex;
+	font-family: inherit;
+	height: 100%;
+	justify-content: center;
+	line-height: 1;
+	outline: none;
+	padding: 0 12px;
+	position: relative;
+	text-align: center;
+
+	@media not ( prefers-reduced-motion ) {
+		transition:
+			color 160ms linear,
+			font-weight 60ms linear;
+	}
+
+	user-select: none;
+	width: 100%;
+	z-index: 2;
+
+	&::-moz-focus-inner {
+		border: 0;
+	}
+
+	&[disabled],
+	&[aria-disabled="true"] {
+		opacity: 0.4;
+		cursor: default;
+	}
+
+	&:hover:not([disabled]):not([aria-disabled="true"]) {
+		color: $components-color-foreground;
+	}
+}
+
+.is-deselectable {
+	&:focus {
+		@include mixins.outset-ring__focus();
+		// Preserve validated-control accent overrides.
+		outline-color: $components-color-focus;
+
+		// Hide overlapping border.
+		&[aria-pressed="false"] {
+			background: $components-color-background;
+			box-shadow: 0 0 0 2px $components-color-background;
+		}
+	}
+}
+
+.is-icon {
+	height: 38px;
+	aspect-ratio: 1;
+	padding: 0;
+}
+
+.is-pressed {
+	color: $components-color-foreground;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+}
+
+.button-content {
+	display: flex;
+	font-size: var(--wpds-typography-font-size-md);
+	line-height: 1;
+}

package/src/toggle-group-control/types.ts

@@ -130,13 +130,6 @@ export type ToggleGroupControlProps = Pick<
 	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
-	/**
-	 * Do not throw a warning for the deprecated 36px default size.
-	 * For internal components of other components that already throw the warning.
-	 *
-	 * @ignore
-	 */
-	__shouldNotWarnDeprecated36pxSize?: boolean;
 };
 
 export type ToggleGroupControlContextProps = {

package/src/tools-panel/style.module.scss

@@ -0,0 +1,117 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "../utils/theme-variables" as *;
+
+.tools-panel {
+	border-top: $border-width solid $gray-300;
+	margin-top: -$border-width;
+	padding: $grid-unit-20;
+}
+
+.tools-panel-with-inner-wrapper {
+	> div:not(:first-of-type) {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		column-gap: $grid-unit-20;
+		row-gap: $grid-unit-20;
+		grid-column: 1 / -1;
+	}
+}
+
+.tools-panel-hidden-inner-wrapper {
+	> div:not(:first-of-type) {
+		display: none;
+	}
+}
+
+.tools-panel-header {
+	grid-column: 1 / -1;
+	gap: $grid-unit-10;
+
+	// Targeting DropdownMenu's legacy classes is temporary until it exposes a
+	// supported styling hook for these overrides.
+	:global(.components-dropdown-menu) {
+		margin: (-1 * $grid-unit-05) 0;
+		line-height: 0;
+	}
+}
+
+// Match the previous Emotion `&&&&` specificity so these styles continue to
+// override the DropdownMenu toggle defaults.
+.tools-panel-header.tools-panel-header.tools-panel-header.tools-panel-header {
+	:global(.components-dropdown-menu__toggle) {
+		padding: 0;
+		min-width: $grid-unit-30;
+	}
+}
+
+// Outrank Heading's base typography regardless of stylesheet insertion order.
+.tools-panel-heading.tools-panel-heading {
+	font-size: inherit;
+	line-height: normal;
+	margin: 0;
+}
+
+.tools-panel-item {
+	grid-column: 1 / -1;
+
+	// Clear spacing in and around controls added as panel items. Remove these
+	// overrides when the spacing can be addressed via the context system.
+	& > div,
+	& > fieldset {
+		padding-bottom: 0;
+		margin-bottom: 0;
+		max-width: 100%;
+	}
+}
+
+// Match the previous Emotion `&&` specificity and target BaseControl's
+// preserved public class names instead of its generated Emotion classes.
+.tools-panel-item.tools-panel-item :global(.components-base-control) {
+	margin-bottom: 0;
+
+	// Keep the field spacing when help text follows it.
+	:global(.components-base-control__field):last-child {
+		margin-bottom: 0;
+	}
+}
+
+.tools-panel-item :global(.components-base-control__help) {
+	margin-bottom: 0;
+}
+
+.tools-panel-item-placeholder {
+	display: none;
+}
+
+.dropdown-menu {
+	min-width: 200px;
+}
+
+.reset-label {
+	color: $components-color-accent-darker-10;
+	font-size: var(--wpds-typography-font-size-xs);
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+	line-height: 1.4;
+	margin-inline-start: $grid-unit-15;
+	text-transform: uppercase;
+}
+
+.default-controls-item {
+	color: $gray-900;
+}
+
+// Match the previous Emotion `&&` specificity so disabled MenuItem styles
+// continue to override its defaults.
+.default-controls-item.default-controls-item[aria-disabled="true"] {
+	color: $gray-700;
+	opacity: 1;
+
+	&:hover {
+		color: $gray-700;
+	}
+
+	.reset-label {
+		opacity: 0.3;
+	}
+}

package/src/tools-panel/test/index.tsx

@@ -9,8 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { ToolsPanel, ToolsPanelContext, ToolsPanelItem } from '../';
 import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
-import * as styles from '../styles';
-import { useCx } from '../../utils/hooks/use-cx';
+import { ContextSystemProvider } from '../../context';
+import moduleStyles from '../style.module.scss';
 import type {
 	ToolsPanelContext as ToolsPanelContextType,
 	ResetAllFilter,
@@ -19,25 +19,12 @@ import type {
 const { Fill: ToolsPanelItems, Slot } = createSlotFill( 'ToolsPanelSlot' );
 const resetAll = jest.fn();
 const noop = () => undefined;
-
-type EmotionStyleFragment = Parameters< ReturnType< typeof useCx > >[ 0 ];
-
-const getGeneratedEmotionClassNames = ( element: HTMLElement ) =>
-	Array.from( element.classList ).filter( ( className ) =>
-		/^(css|emotion)-/.test( className )
-	);
-
-function EmotionStyleTest( {
-	styleFragment,
-}: {
-	styleFragment: EmotionStyleFragment;
-} ) {
-	const cx = useCx();
-
-	return (
-		<div data-testid="emotion-style" className={ cx( styleFragment ) } />
-	);
-}
+const gridContextValue = {
+	Grid: {
+		columnGap: '40px',
+		rowGap: '48px',
+	},
+};
 
 type ControlValue = boolean | undefined;
 
@@ -280,24 +267,6 @@ describe( 'ToolsPanel', () => {
 			expect( resetAllItem ).toBeInTheDocument();
 		} );
 
-		it( 'should compose inner wrapper visibility styles in a single generated class', () => {
-			render(
-				<EmotionStyleTest
-					styleFragment={ styles.getToolsPanelStyles( {
-						columns: 2,
-						hasInnerWrapper: true,
-						areAllOptionalControlsHidden: true,
-					} ) }
-				/>
-			);
-
-			expect(
-				getGeneratedEmotionClassNames(
-					screen.getByTestId( 'emotion-style' )
-				)
-			).toHaveLength( 1 );
-		} );
-
 		it( 'should render panel menu items correctly', async () => {
 			renderPanel();
 			await openDropdownMenu();
@@ -315,6 +284,103 @@ describe( 'ToolsPanel', () => {
 
 			expect( header ).toBeInTheDocument();
 		} );
+
+		it( 'should apply SCSS Module styles to the panel and its items', () => {
+			render(
+				<ToolsPanel { ...defaultProps } data-testid="tools-panel">
+					<ToolsPanelItem
+						{ ...controlProps }
+						className="custom-item"
+						data-testid="tools-panel-item"
+					>
+						<div>Example control</div>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			);
+
+			expect( screen.getByTestId( 'tools-panel' ) ).toHaveClass(
+				moduleStyles[ 'tools-panel' ],
+				'components-tools-panel'
+			);
+			expect( screen.getByTestId( 'tools-panel-item' ) ).toHaveClass(
+				moduleStyles[ 'tools-panel-item' ],
+				'components-tools-panel-item',
+				'custom-item'
+			);
+
+			const heading = screen.getByRole( 'heading', {
+				name: defaultProps.label,
+			} );
+
+			expect( heading ).toHaveClass(
+				moduleStyles[ 'tools-panel-heading' ]
+			);
+			// Disable reason: Semantic queries can't reach the header wrapper.
+			// eslint-disable-next-line testing-library/no-node-access
+			expect( heading.parentElement ).toHaveClass(
+				moduleStyles[ 'tools-panel-header' ],
+				'components-tools-panel-header'
+			);
+		} );
+
+		it( 'should preserve its spacing against Grid context values', () => {
+			render(
+				<ContextSystemProvider value={ gridContextValue }>
+					<ToolsPanel { ...defaultProps } data-testid="tools-panel">
+						<span>Panel content</span>
+					</ToolsPanel>
+				</ContextSystemProvider>
+			);
+
+			const panel = screen.getByTestId( 'tools-panel' );
+			const generatedClassName = Array.from( panel.classList ).find(
+				( className ) => /^(css|emotion)-/.test( className )
+			);
+			const generatedRule = Array.from( document.styleSheets )
+				.flatMap( ( styleSheet ) => Array.from( styleSheet.cssRules ) )
+				.find( ( rule ) =>
+					rule.cssText.includes( `.${ generatedClassName }` )
+				);
+
+			expect( generatedRule?.cssText ).toContain(
+				'grid-column-gap: calc(4px * 4);'
+			);
+			expect( generatedRule?.cssText ).toContain(
+				'grid-row-gap: calc(4px * 4);'
+			);
+		} );
+
+		it( 'should apply SCSS Module variants for inner wrappers and placeholders', () => {
+			render(
+				<ToolsPanel
+					{ ...defaultProps }
+					data-testid="tools-panel"
+					hasInnerWrapper
+					shouldRenderPlaceholderItems
+				>
+					<ToolsPanelItem
+						{ ...altControlProps }
+						className="custom-item"
+						data-testid="tools-panel-item"
+					>
+						<div>Alt control</div>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			);
+
+			expect( screen.getByTestId( 'tools-panel' ) ).toHaveClass(
+				moduleStyles[ 'tools-panel-with-inner-wrapper' ],
+				moduleStyles[ 'tools-panel-hidden-inner-wrapper' ]
+			);
+			expect( screen.getByTestId( 'tools-panel-item' ) ).toHaveClass(
+				moduleStyles[ 'tools-panel-item' ],
+				moduleStyles[ 'tools-panel-item-placeholder' ]
+			);
+			expect( screen.getByTestId( 'tools-panel-item' ) ).not.toHaveClass(
+				'components-tools-panel-item',
+				'custom-item'
+			);
+		} );
 	} );
 
 	describe( 'conditional rendering of panel items', () => {

package/src/tools-panel/tools-panel/component.tsx

@@ -13,6 +13,9 @@ import { Grid } from '../../grid';
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect } from '../../context';
 import type { ToolsPanelProps } from '../types';
+import { space } from '../../utils/space';
+
+const TOOLS_PANEL_GAP = space( 4 );
 
 const UnconnectedToolsPanel = (
 	props: WordPressComponentProps< ToolsPanelProps, 'div' >,
@@ -30,7 +33,15 @@ const UnconnectedToolsPanel = (
 	} = useToolsPanel( props );
 
 	return (
-		<Grid { ...toolsPanelProps } columns={ 2 } ref={ forwardedRef }>
+		<Grid
+			{ ...toolsPanelProps }
+			columns={ 2 }
+			gap={ 4 }
+			columnGap={ TOOLS_PANEL_GAP }
+			rowGap={ TOOLS_PANEL_GAP }
+			templateColumns="repeat( 2, minmax(0, 1fr) )"
+			ref={ forwardedRef }
+		>
 			<ToolsPanelContext.Provider value={ panelContext }>
 				<ToolsPanelHeader
 					label={ label }