Button: Introduce size prop

packages/base-styles/_variables.scss

@@ -48,7 +48,7 @@ $icon-size: 24px;
 $button-size: 36px;
 $button-size-next-default-40px: 40px; // transitionary variable for next default button size
 $button-size-small: 24px;
-$button-size-small-next-default-32px: 32px; // transitionary variable for next small button size
+$button-size-compact: 32px;
 $header-height: 60px;
 $panel-header-height: $grid-unit-60;
 $nav-sidebar-width: 360px;

packages/components/src/button/README.md

@@ -218,6 +218,18 @@ If provided, renders a [Tooltip](/packages/components/src/tooltip/README.md) com
 
 -   Required: No
 
+#### `size`: `'default'` | `'compact'` | `'small'`
+
+The size of the button.
+
+-   `'default'`: For normal text-label buttons, unless it is a toggle button.
+-   `'compact'`: For toggle buttons and icon buttons.
+-   `'small'`: For icon buttons associated with more advanced or auxiliary features.
+
+
+-   Required: No
+-   Default: `'default'`
+
 #### `target`: `string`
 
 If provided with `href`, sets the `target` attribute to the `a`.

packages/components/src/button/index.tsx

@@ -33,11 +33,18 @@ function useDeprecatedProps( {
 	isSecondary,
 	isTertiary,
 	isLink,
+	isSmall,
+	size,
 	variant,
 	...otherProps
 }: ButtonProps & DeprecatedButtonProps ): ButtonProps {
+	let computedSize = size;
 	let computedVariant = variant;
 
+	if ( isSmall ) {
+		computedSize ??= 'small';
+	}
+
 	if ( isPrimary ) {
 		computedVariant ??= 'primary';
 	}
@@ -66,6 +73,7 @@ function useDeprecatedProps( {
 
 	return {
 		...otherProps,
+		size: computedSize,
 		variant: computedVariant,
 	};
 }
@@ -76,8 +84,6 @@ export function UnforwardedButton(
 ) {
 	const {
 		__next40pxDefaultSize,
-		__next32pxSmallSize,
-		isSmall,
 		isPressed,
 		isBusy,
 		isDestructive,
@@ -91,6 +97,7 @@ export function UnforwardedButton(
 		shortcut,
 		label,
 		children,
+		size = 'default',
 		text,
 		variant,
 		__experimentalIsFocusable: isFocusable,
@@ -118,10 +125,10 @@ export function UnforwardedButton(
 
 	const classes = classnames( 'components-button', className, {
 		'is-next-40px-default-size': __next40pxDefaultSize,
-		'is-next-32px-small-size': __next32pxSmallSize,
 		'is-secondary': variant === 'secondary',
 		'is-primary': variant === 'primary',
-		'is-small': isSmall,
+		'is-small': size === 'small',
+		'is-compact': size === 'compact',
 		'is-tertiary': variant === 'tertiary',
 		'is-pressed': isPressed,
 		'is-busy': isBusy,

packages/components/src/button/style.scss

@@ -257,25 +257,26 @@
 		/* stylelint-enable */
 	}
 
+	&.is-compact {
+		height: $button-size-compact;
+
+		&.has-icon:not(.has-text) {
+			padding: 0;
+			width: $button-size-compact;
+			min-width: $button-size-compact;
+		}
+	}
+
 	&.is-small {
-		height: $button-size-small-next-default-32px;
+		height: $button-size-small;
 		line-height: 22px;
 		padding: 0 8px;
 		font-size: 11px;
 
 		&.has-icon:not(.has-text) {
 			padding: 0;
-			width: $button-size-small-next-default-32px;
-			min-width: $button-size-small-next-default-32px;
-		}
-
-		&:not(.is-next-32px-small-size) {
-			height: $button-size-small;
-
-			&.has-icon:not(.has-text) {
-				width: $button-size-small;
-				min-width: $button-size-small;
-			}
+			width: $button-size-small;
+			min-width: $button-size-small;
 		}
 	}
 

packages/components/src/button/test/index.tsx

@@ -402,6 +402,11 @@ describe( 'Button', () => {
 			);
 			expect( console ).toHaveWarned();
 		} );
+
+		it( 'should not break when the legacy isSmall prop is passed', () => {
+			render( <Button isSmall /> );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-small' );
+		} );
 	} );
 
 	describe( 'static typing', () => {

packages/components/src/button/types.ts

@@ -25,15 +25,6 @@ type BaseButtonProps = {
 	 * @default false
 	 */
 	__next40pxDefaultSize?: boolean;
-	/**
-	 * Start opting into the larger `isSmall` button size that will become the
-	 * default small size in a future version.
-	 *
-	 * Only takes effect when the `isSmall` prop is `true`.
-	 *
-	 * @default false
-	 */
-	__next32pxSmallSize?: boolean;
 	/**
 	 * The button's children.
 	 */
@@ -74,8 +65,13 @@ type BaseButtonProps = {
 	 * Renders a pressed button style.
 	 */
 	isPressed?: boolean;
+	// TODO: Deprecate officially (add console warning and move to DeprecatedButtonProps).
 	/**
 	 * Decreases the size of the button.
+	 *
+	 * Deprecated in favor of the `size` prop.
+	 *
+	 * @deprecated Use the `'small'` value on the `size` prop instead.
 	 */
 	isSmall?: boolean;
 	/**
@@ -92,6 +88,16 @@ type BaseButtonProps = {
 	 * If provided, renders a Tooltip component for the button.
 	 */
 	showTooltip?: boolean;
+	/**
+	 * The size of the button.
+	 *
+	 * - `'default'`: For normal text-label buttons, unless it is a toggle button.
+	 * - `'compact'`: For toggle buttons and icon buttons.
+	 * - `'small'`: For icon buttons associated with more advanced or auxiliary features.
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | 'compact' | 'small';
 	/**
 	 * If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them.
 	 */

packages/components/src/font-size-picker/index.tsx

@@ -14,6 +14,7 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { Button } from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
 import {
@@ -31,7 +32,6 @@ import {
 	HeaderLabel,
 	HeaderToggle,
 	Controls,
-	ResetButton,
 } from './styles';
 import { Spacer } from '../spacer';
 import FontSizePickerSelect from './font-size-picker-select';
@@ -268,17 +268,21 @@ const UnforwardedFontSizePicker = (
 						) }
 						{ withReset && (
 							<FlexItem>
-								<ResetButton
+								<Button
 									disabled={ value === undefined }
 									onClick={ () => {
 										onChange?.( undefined );
 									} }
-									isSmall
 									variant="secondary"
-									size={ size }
+									__next40pxDefaultSize
+									size={
+										size !== '__unstable-large'
+											? 'small'
+											: 'default'
+									}
 								>
 									{ __( 'Reset' ) }
-								</ResetButton>
+								</Button>
 							</FlexItem>
 						) }
 					</Flex>

packages/components/src/font-size-picker/styles.ts

@@ -11,7 +11,6 @@ import Button from '../button';
 import { HStack } from '../h-stack';
 import { space } from '../ui/utils/space';
 import { COLORS } from '../utils';
-import type { FontSizePickerProps } from './types';
 
 export const Container = styled.fieldset`
 	border: 0;
@@ -44,12 +43,3 @@ export const Controls = styled.div< {
 	${ ( props ) =>
 		! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` }
 `;
-
-export const ResetButton = styled( Button )< {
-	size: FontSizePickerProps[ 'size' ];
-} >`
-	&&& {
-		height: ${ ( props ) =>
-			props.size === '__unstable-large' ? '40px' : '30px' };
-	}
-`;

packages/components/src/number-control/index.tsx

@@ -244,7 +244,7 @@ function UnforwardedNumberControl(
 									onClick={ buildSpinButtonClickHandler(
 										'up'
 									) }
-									size={ size }
+									spinButtonSize={ size }
 								/>
 								<SpinButton
 									icon={ resetIcon }
@@ -255,7 +255,7 @@ function UnforwardedNumberControl(
 									onClick={ buildSpinButtonClickHandler(
 										'down'
 									) }
-									size={ size }
+									spinButtonSize={ size }
 								/>
 							</HStack>
 						</Spacer>

packages/components/src/number-control/styles/number-control-styles.ts

@@ -36,9 +36,11 @@ export const Input = styled( InputControl )`
 `;
 
 const spinButtonSizeStyles = ( {
-	size,
-}: Pick< NumberControlProps, 'size' > ) => {
-	if ( size !== 'small' ) {
+	spinButtonSize,
+}: {
+	spinButtonSize: NumberControlProps[ 'size' ];
+} ) => {
+	if ( spinButtonSize !== 'small' ) {
 		return ``;
 	}