@wordpress/components 36.0.1 → 37.0.0

package/src/toggle-group-control/toggle-group-control/as-button-group.tsx

@@ -23,7 +23,6 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 		isAdaptiveWidth,
 		label,
 		onChange,
-		size,
 		value: valueProp,
 		id: idProp,
 		setSelectedElement,
@@ -63,7 +62,6 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 			setValue: setSelectedValue,
 			isBlock: ! isAdaptiveWidth,
 			isDeselectable: true,
-			size,
 			setSelectedElement,
 		} ),
 		[
@@ -71,7 +69,6 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 			selectedValue,
 			setSelectedValue,
 			isAdaptiveWidth,
-			size,
 			setSelectedElement,
 		]
 	);

package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx

@@ -29,7 +29,6 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 		isAdaptiveWidth,
 		label,
 		onChange: onChangeProp,
-		size,
 		value: valueProp,
 		id: idProp,
 		setSelectedElement,
@@ -85,7 +84,6 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 				radio.getState().activeId !== radio.first(),
 			baseId,
 			isBlock: ! isAdaptiveWidth,
-			size,
 			// @ts-expect-error - This is wrong and we should fix it.
 			value: selectedValue,
 			// @ts-expect-error - This is wrong and we should fix it.
@@ -99,7 +97,6 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 			selectedValue,
 			setSelectedElement,
 			setValue,
-			size,
 		]
 	);
 

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,13 +73,13 @@ export const buttonView = ( {
 	}
 
 	${ isDeselectable && deselectable }
-	${ isIcon && isIconStyles( { size } ) }
+	${ isIcon && isIconStyles }
 	${ isPressed && pressed }
 `;
 
 const pressed = css`
 	color: ${ COLORS.theme.foreground };
-	font-weight: ${ CONFIG.fontWeightMedium };
+	font-weight: ${ CONFIG.fontWeightEmphasis };
 `;
 
 const deselectable = css`
@@ -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/toolbar/toolbar-button/style.scss

@@ -13,7 +13,7 @@
 		content: attr(data-subscript);
 		font-family: $default-font;
 		font-size: $default-font-size;
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 		line-height: 12px;
 		position: absolute;
 		right: 8px;

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 ) };
@@ -85,7 +101,7 @@ export const ToolsPanelHeader = css`
 
 export const ToolsPanelHeading = css`
 	font-size: inherit;
-	font-weight: ${ CONFIG.fontWeightMedium };
+	font-weight: ${ CONFIG.fontWeightEmphasis };
 	line-height: normal;
 
 	/* Required to meet specificity requirements to ensure zero margin */
@@ -136,7 +152,7 @@ export const DropdownMenu = css`
 export const ResetLabel = styled.span`
 	color: ${ COLORS.theme.accentDarker10 };
 	font-size: 11px;
-	font-weight: ${ CONFIG.fontWeightMedium };
+	font-weight: ${ CONFIG.fontWeightEmphasis };
 	line-height: 1.4;
 	${ rtl( { marginLeft: space( 3 ) } ) }
 	text-transform: uppercase;

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

@@ -39,7 +39,7 @@ const meta: Meta< typeof Tooltip > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Use `Tooltip` from `@wordpress/ui` instead.',
+			notes: 'Use [`Tooltip`](?path=/docs/design-system-components-tooltip--docs) from `@wordpress/ui` instead.',
 		},
 	},
 };

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

@@ -124,7 +124,6 @@ const Rows = ( {
 										label="Description"
 										hideLabelFromVision
 										placeholder="Description"
-										__next40pxDefaultSize
 										{ ...props }
 									/>
 								) }
@@ -135,7 +134,6 @@ const Rows = ( {
 										label="Notes"
 										hideLabelFromVision
 										placeholder="Notes"
-										__next40pxDefaultSize
 										{ ...props }
 									/>
 								) }

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`