@wordpress/components 36.0.1 → 37.0.1-next.v.202607070741.0

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

@@ -22,16 +22,17 @@ import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
 import { ToggleGroupControlAsButtonGroup } from './as-button-group';
 import { useTrackElementOffsetRect } from '../../utils/element-rect';
 import { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';
-import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 
 function UnconnectedToggleGroupControl(
 	props: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const {
-		__nextHasNoMarginBottom: _, // Prevent passing this to the internal component
-		__next40pxDefaultSize = false,
-		__shouldNotWarnDeprecated36pxSize,
+		// Prevent passing legacy props to internal component.
+		__nextHasNoMarginBottom: _,
+		size: _size,
+		__next40pxDefaultSize: _next40pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,
 		className,
 		isAdaptiveWidth = false,
 		isBlock = false,
@@ -41,7 +42,6 @@ function UnconnectedToggleGroupControl(
 		hideLabelFromVision = false,
 		help,
 		onChange,
-		size = 'default',
 		value,
 		children,
 		...otherProps
@@ -54,9 +54,6 @@ function UnconnectedToggleGroupControl(
 		hideLabelFromVision,
 	} );
 
-	const normalizedSize =
-		__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;
-
 	const [ selectedElement, setSelectedElement ] = useState< HTMLElement >();
 	const [ controlElement, setControlElement ] = useState< HTMLElement >();
 	const refs = useMergeRefs( [ setControlElement, forwardedRef ] );
@@ -78,25 +75,16 @@ function UnconnectedToggleGroupControl(
 				styles.toggleGroupControl( {
 					isBlock,
 					isDeselectable,
-					size: normalizedSize,
 				} ),
-				isBlock && styles.block,
 				className
 			),
-		[ className, cx, isBlock, isDeselectable, normalizedSize ]
+		[ className, cx, isBlock, isDeselectable ]
 	);
 
 	const MainControl = isDeselectable
 		? ToggleGroupControlAsButtonGroup
 		: ToggleGroupControlAsRadioGroup;
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'ToggleGroupControl',
-		size,
-		__next40pxDefaultSize,
-		__shouldNotWarnDeprecated36pxSize,
-	} );
-
 	return (
 		<BaseControl { ...baseControlProps }>
 			<MainControl
@@ -110,7 +98,6 @@ function UnconnectedToggleGroupControl(
 				label={ label }
 				onChange={ onChange }
 				ref={ refs }
-				size={ normalizedSize }
 				value={ value }
 			>
 				{ children }
@@ -144,7 +131,6 @@ function UnconnectedToggleGroupControl(
  *       label="my label"
  *       value="vertical"
  *       isBlock
- *       __next40pxDefaultSize
  *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />

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

@@ -9,22 +9,25 @@ import { css } from '@emotion/react';
 import { CONFIG, COLORS } from '../../utils';
 import type { ToggleGroupControlProps } from '../types';
 
+export const block = css`
+	display: flex;
+	width: 100%;
+`;
+
 export const toggleGroupControl = ( {
 	isBlock,
 	isDeselectable,
-	size,
-}: Pick< ToggleGroupControlProps, 'isBlock' | 'isDeselectable' > & {
-	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
-} ) => css`
+}: Pick< ToggleGroupControlProps, 'isBlock' | 'isDeselectable' > ) => css`
 	background: ${ COLORS.ui.background };
 	border: 1px solid transparent;
 	border-radius: ${ CONFIG.radiusSmall };
 	display: inline-flex;
+	height: 40px;
 	min-width: 0;
 	position: relative;
 
-	${ toggleGroupControlSize( size ) }
 	${ ! isDeselectable && enclosingBorders( isBlock ) }
+	${ isBlock && block }
 
 	@media not ( prefers-reduced-motion ) {
 		&[data-indicator-animated]::before {
@@ -79,23 +82,3 @@ const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
 		}
 	`;
 };
-
-export const toggleGroupControlSize = (
-	size: NonNullable< ToggleGroupControlProps[ 'size' ] >
-) => {
-	const styles = {
-		default: css`
-			height: 36px;
-		`,
-		'__unstable-large': css`
-			height: 40px;
-		`,
-	};
-
-	return styles[ size ];
-};
-
-export const block = css`
-	display: flex;
-	width: 100%;
-`;

package/src/toggle-group-control/toggle-group-control-option/README.md

@@ -20,7 +20,6 @@ function Example() {
 			label="my label"
 			value="vertical"
 			isBlock
-			__next40pxDefaultSize
 		>
 			<ToggleGroupControlOption
 				value="horizontal"

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

@@ -52,7 +52,6 @@ function UnforwardedToggleGroupControlOption(
  *       label="my label"
  *       value="vertical"
  *       isBlock
- *       __next40pxDefaultSize
  *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />

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

@@ -63,11 +63,8 @@ function ToggleGroupControlOptionBase(
 		'ToggleGroupControlOptionBase'
 	);
 
-	const {
-		isBlock = false,
-		isDeselectable = false,
-		size = 'default',
-	} = toggleGroupControlContext;
+	const { isBlock = false, isDeselectable = false } =
+		toggleGroupControlContext;
 
 	const {
 		className,
@@ -92,11 +89,10 @@ function ToggleGroupControlOptionBase(
 					isDeselectable,
 					isIcon,
 					isPressed,
-					size,
 				} ),
 				className
 			),
-		[ cx, isDeselectable, isIcon, isPressed, size, className ]
+		[ cx, isDeselectable, isIcon, isPressed, className ]
 	);
 
 	const buttonOnClick = () => {

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -28,8 +28,7 @@ export const buttonView = ( {
 	isDeselectable,
 	isIcon,
 	isPressed,
-	size,
-}: Pick< ToggleGroupControlProps, 'isDeselectable' | 'size' > &
+}: Pick< ToggleGroupControlProps, 'isDeselectable' > &
 	Pick< ToggleGroupControlOptionBaseProps, 'isIcon' > & {
 		isPressed?: boolean;
 	} ) => css`
@@ -74,7 +73,7 @@ export const buttonView = ( {
 	}
 
 	${ isDeselectable && deselectable }
-	${ isIcon && isIconStyles( { size } ) }
+	${ isIcon && isIconStyles }
 	${ isPressed && pressed }
 `;
 
@@ -102,18 +101,9 @@ export const ButtonContentView = styled.div`
 	line-height: 1;
 `;
 
-const isIconStyles = ( {
-	size = 'default',
-}: Pick< ToggleGroupControlProps, 'size' > ) => {
-	const iconButtonSizes = {
-		default: '34px',
-		'__unstable-large': '38px',
-	};
-
-	return css`
-		height: ${ iconButtonSizes[ size ] };
-		aspect-ratio: 1;
-		padding-left: 0;
-		padding-right: 0;
-	`;
-};
+const isIconStyles = css`
+	height: 38px;
+	aspect-ratio: 1;
+	padding-left: 0;
+	padding-right: 0;
+`;

package/src/toggle-group-control/toggle-group-control-option-icon/README.md

@@ -17,7 +17,7 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 function Example() {
 	return (
-		<ToggleGroupControl __next40pxDefaultSize>
+		<ToggleGroupControl>
 			<ToggleGroupControlOptionIcon
 				value="uppercase"
 				icon={ formatUppercase }

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

@@ -52,7 +52,7 @@ function UnforwardedToggleGroupControlOptionIcon(
  *
  * function Example() {
  *  return (
- *    <ToggleGroupControl __next40pxDefaultSize>
+ *    <ToggleGroupControl>
  *      <ToggleGroupControlOptionIcon
  *        value="uppercase"
  *        label="Uppercase"

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

@@ -119,13 +119,15 @@ export type ToggleGroupControlProps = Pick<
 	/**
 	 * The size variant of the control.
 	 *
-	 * @default 'default'
+	 * @deprecated This prop no longer has any effect.
+	 * @ignore
 	 */
 	size?: 'default' | '__unstable-large';
 	/**
 	 * Start opting into the larger default height that will become the default size in a future version.
 	 *
-	 * @default false
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
 	/**
@@ -142,7 +144,6 @@ export type ToggleGroupControlContextProps = {
 	isDeselectable?: boolean;
 	baseId: string;
 	isBlock: ToggleGroupControlProps[ 'isBlock' ];
-	size: ToggleGroupControlProps[ 'size' ];
 	value: ToggleGroupControlProps[ 'value' ];
 	setValue: ( newValue: string | number | undefined ) => void;
 	setSelectedElement: ( element: HTMLElement | undefined ) => void;
@@ -150,6 +151,6 @@ export type ToggleGroupControlContextProps = {
 
 export type ToggleGroupControlMainControlProps = Pick<
 	ToggleGroupControlProps,
-	'children' | 'isAdaptiveWidth' | 'label' | 'size' | 'onChange' | 'value'
+	'children' | 'isAdaptiveWidth' | 'label' | 'onChange' | 'value'
 > &
 	Pick< ToggleGroupControlContextProps, 'setSelectedElement' >;

package/src/tools-panel/stories/index.story.tsx

@@ -81,7 +81,6 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						isShownByDefault
 					>
 						<UnitControl
-							__next40pxDefaultSize
 							label="Width"
 							value={ width }
 							onChange={ ( next ) => setWidth( next ) }
@@ -94,7 +93,6 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						isShownByDefault
 					>
 						<UnitControl
-							__next40pxDefaultSize
 							label="Height"
 							value={ height }
 							onChange={ ( next ) => setHeight( next ) }
@@ -107,7 +105,6 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						isShownByDefault
 					>
 						<UnitControl
-							__next40pxDefaultSize
 							label="Minimum height"
 							value={ minHeight }
 							onChange={ ( next ) => setMinHeight( next ) }
@@ -119,7 +116,6 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						onDeselect={ () => setScale( undefined ) }
 					>
 						<ToggleGroupControl
-							__next40pxDefaultSize
 							label="Scale"
 							value={ scale }
 							onChange={ ( next ) => setScale( next ) }
@@ -176,7 +172,6 @@ export const WithNonToolsPanelItems: StoryFn< typeof ToolsPanel > = ( {
 						isShownByDefault
 					>
 						<UnitControl
-							__next40pxDefaultSize
 							label="Width"
 							value={ width }
 							onChange={ ( next ) => setWidth( next ) }
@@ -189,7 +184,6 @@ export const WithNonToolsPanelItems: StoryFn< typeof ToolsPanel > = ( {
 						isShownByDefault
 					>
 						<UnitControl
-							__next40pxDefaultSize
 							label="Height"
 							value={ height }
 							onChange={ ( next ) => setHeight( next ) }
@@ -248,7 +242,6 @@ export const WithOptionalItemsPlusIcon: StoryFn< typeof ToolsPanel > = ( {
 							}
 						>
 							<UnitControl
-								__next40pxDefaultSize
 								label="Minimum width"
 								value={ minWidth }
 								onChange={ ( next ) => setMinWidth( next ) }
@@ -261,7 +254,6 @@ export const WithOptionalItemsPlusIcon: StoryFn< typeof ToolsPanel > = ( {
 							isShownByDefault={ false }
 						>
 							<UnitControl
-								__next40pxDefaultSize
 								label="Width"
 								value={ width }
 								onChange={ ( next ) => setWidth( next ) }
@@ -274,7 +266,6 @@ export const WithOptionalItemsPlusIcon: StoryFn< typeof ToolsPanel > = ( {
 							isShownByDefault={ false }
 						>
 							<UnitControl
-								__next40pxDefaultSize
 								label="Height"
 								value={ height }
 								onChange={ ( next ) => setHeight( next ) }
@@ -355,7 +346,6 @@ export const WithSlotFillItems: StoryFn< typeof ToolsPanel > = ( {
 					panelId={ panelId }
 				>
 					<UnitControl
-						__next40pxDefaultSize
 						label="Injected Width"
 						value={ width }
 						onChange={ ( next ) =>
@@ -371,7 +361,6 @@ export const WithSlotFillItems: StoryFn< typeof ToolsPanel > = ( {
 					panelId={ panelId }
 				>
 					<UnitControl
-						__next40pxDefaultSize
 						label="Injected Height"
 						value={ height }
 						onChange={ ( next ) =>
@@ -457,7 +446,6 @@ export const WithConditionalDefaultControl: StoryFn< typeof ToolsPanel > = ( {
 					isShownByDefault
 				>
 					<UnitControl
-						__next40pxDefaultSize
 						label="Injected Height"
 						value={ height }
 						onChange={ ( next ) =>
@@ -474,7 +462,6 @@ export const WithConditionalDefaultControl: StoryFn< typeof ToolsPanel > = ( {
 					isShownByDefault={ !! height }
 				>
 					<ToggleGroupControl
-						__next40pxDefaultSize
 						label="Scale"
 						value={ scale }
 						onChange={ ( next ) =>
@@ -557,7 +544,6 @@ export const WithConditionallyRenderedControl: StoryFn<
 					isShownByDefault
 				>
 					<UnitControl
-						__next40pxDefaultSize
 						label="Injected Height"
 						value={ height }
 						onChange={ ( next ) =>
@@ -577,7 +563,6 @@ export const WithConditionallyRenderedControl: StoryFn<
 						isShownByDefault
 					>
 						<ToggleGroupControl
-							__next40pxDefaultSize
 							label="Scale"
 							value={ scale }
 							onChange={ ( next ) =>

package/src/tools-panel/styles.ts

@@ -62,6 +62,22 @@ export const ToolsPanelHiddenInnerWrapper = css`
 	}
 `;
 
+export function getToolsPanelStyles( {
+	columns,
+	hasInnerWrapper,
+	areAllOptionalControlsHidden,
+}: {
+	columns: number;
+	hasInnerWrapper: boolean;
+	areAllOptionalControlsHidden: boolean;
+} ) {
+	return css(
+		ToolsPanel( columns ),
+		hasInnerWrapper && ToolsPanelWithInnerWrapper( columns ),
+		areAllOptionalControlsHidden && ToolsPanelHiddenInnerWrapper
+	);
+}
+
 export const ToolsPanelHeader = css`
 	${ toolsPanelGrid.item.fullWidth }
 	gap: ${ space( 2 ) };

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

@@ -9,6 +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 type {
 	ToolsPanelContext as ToolsPanelContextType,
 	ResetAllFilter,
@@ -18,6 +20,25 @@ 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 ) } />
+	);
+}
+
 type ControlValue = boolean | undefined;
 
 // Default props for the tools panel.
@@ -259,6 +280,24 @@ 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();

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

@@ -75,7 +75,6 @@ const UnconnectedToolsPanel = (
  *         onDeselect={ () => setHeight() }
  *       >
  *         <UnitControl
- *           __next40pxDefaultSize
  *           label={ __( 'Height' ) }
  *           onChange={ setHeight }
  *           value={ height }
@@ -87,7 +86,6 @@ const UnconnectedToolsPanel = (
  *         onDeselect={ () => setWidth() }
  *       >
  *         <UnitControl
- *           __next40pxDefaultSize
  *           label={ __( 'Width' ) }
  *           onChange={ setWidth }
  *           value={ width }

package/src/tools-panel/tools-panel/hook.ts

@@ -341,16 +341,12 @@ export function useToolsPanel(
 
 	const cx = useCx();
 	const classes = useMemo( () => {
-		const wrapperStyle =
-			hasInnerWrapper &&
-			styles.ToolsPanelWithInnerWrapper( DEFAULT_COLUMNS );
-		const emptyStyle =
-			areAllOptionalControlsHidden && styles.ToolsPanelHiddenInnerWrapper;
-
 		return cx(
-			styles.ToolsPanel( DEFAULT_COLUMNS ),
-			wrapperStyle,
-			emptyStyle,
+			styles.getToolsPanelStyles( {
+				columns: DEFAULT_COLUMNS,
+				hasInnerWrapper,
+				areAllOptionalControlsHidden,
+			} ),
 			className
 		);
 	}, [ areAllOptionalControlsHidden, className, cx, hasInnerWrapper ] );

package/src/tree-select/README.md

@@ -15,7 +15,6 @@ const MyTreeSelect = () => {
 
 	return (
 		<TreeSelect
-			__next40pxDefaultSize
 			label="Parent page"
 			noOptionLabel="No parent page"
 			onChange={ ( newPage ) => setPage( newPage ) }
@@ -53,14 +52,6 @@ const MyTreeSelect = () => {
 
 ## Props
 
-### `__next40pxDefaultSize`
-
- - Type: `boolean`
- - Required: No
- - Default: `false`
-
-Start opting into the larger default height that will become the default size in a future version.
-
 ### `children`
 
  - Type: `ReactNode`

package/src/tree-select/index.tsx

@@ -9,8 +9,6 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { SelectControl } from '../select-control';
 import type { TreeSelectProps, Tree, Truthy } from './types';
-import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function getSelectOptions(
 	tree: Tree[],
@@ -38,7 +36,6 @@ function getSelectOptions(
  *
  * 	return (
  * 		<TreeSelect
- * 			__next40pxDefaultSize
  * 			label="Parent page"
  * 			noOptionLabel="No parent page"
  * 			onChange={ ( newPage ) => setPage( newPage ) }
@@ -76,14 +73,16 @@ function getSelectOptions(
  */
 export function TreeSelect( props: TreeSelectProps ) {
 	const {
-		__nextHasNoMarginBottom: _, // Prevent passing to internal component
+		// Prevent passing legacy props to internal component.
+		__nextHasNoMarginBottom: _,
+		__next40pxDefaultSize: _next40pxDefaultSize,
 		label,
 		noOptionLabel,
 		onChange,
 		selectedId,
 		tree = [],
 		...restProps
-	} = useDeprecated36pxDefaultSizeProp( props );
+	} = props;
 
 	const options = useMemo( () => {
 		return [
@@ -92,17 +91,8 @@ export function TreeSelect( props: TreeSelectProps ) {
 		].filter( < T, >( option: T ): option is Truthy< T > => !! option );
 	}, [ noOptionLabel, tree ] );
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'TreeSelect',
-		size: restProps.size,
-		__next40pxDefaultSize: restProps.__next40pxDefaultSize,
-	} );
-
 	return (
-		// Disable reason: the parent component already takes case of the `__next40pxDefaultSize` prop.
-		// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
 		<SelectControl
-			__shouldNotWarnDeprecated36pxSize
 			{ ...{ label, options, onChange } }
 			value={ selectedId }
 			{ ...restProps }

package/src/tree-select/stories/index.story.tsx

@@ -45,7 +45,6 @@ const TreeSelectWithState: StoryFn< typeof TreeSelect > = ( props ) => {
 
 	return (
 		<TreeSelect
-			__next40pxDefaultSize
 			{ ...props }
 			onChange={ setSelection }
 			selectedId={ selection }
@@ -55,7 +54,6 @@ const TreeSelectWithState: StoryFn< typeof TreeSelect > = ( props ) => {
 
 export const Default = TreeSelectWithState.bind( {} );
 Default.args = {
-	__next40pxDefaultSize: true,
 	label: 'Label Text',
 	noOptionLabel: 'No parent page',
 	help: 'Help text to explain the select control.',

package/src/tree-select/types.ts

@@ -18,8 +18,15 @@ export interface Tree {
 export interface TreeSelectProps
 	extends Omit<
 		SelectControlSingleSelectionProps,
-		'value' | 'multiple' | 'onChange'
+		'value' | 'multiple' | 'onChange' | '__next40pxDefaultSize'
 	> {
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * If this property is added, an option will be added with this label to represent empty selection.
 	 */