@wordpress/components 36.1.0 → 37.0.0

package/src/border-control/border-control/component.tsx

@@ -39,7 +39,6 @@ const UnconnectedBorderControl = (
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const {
-		__next40pxDefaultSize = false,
 		colors,
 		disableCustomColors,
 		disableUnits,
@@ -57,7 +56,6 @@ const UnconnectedBorderControl = (
 		__unstablePopoverProps,
 		previousStyleSelection,
 		showDropdownHeader,
-		size,
 		sliderClassName,
 		value: border,
 		widthUnit,
@@ -75,8 +73,6 @@ const UnconnectedBorderControl = (
 			/>
 			<HStack spacing={ 4 } className={ innerWrapperClassName }>
 				<UnitControl
-					__next40pxDefaultSize={ __next40pxDefaultSize }
-					__shouldNotWarnDeprecated36pxSize
 					prefix={
 						<Spacer marginRight={ 1 } marginBottom={ 0 }>
 							<BorderControlDropdown
@@ -96,7 +92,6 @@ const UnconnectedBorderControl = (
 								__experimentalIsRenderedInSidebar={
 									__experimentalIsRenderedInSidebar
 								}
-								size={ size }
 							/>
 						</Spacer>
 					}
@@ -108,7 +103,6 @@ const UnconnectedBorderControl = (
 					placeholder={ placeholder }
 					disableUnits={ disableUnits }
 					__unstableInputWidth={ inputWidth }
-					size={ size }
 				/>
 				{ withSlider && (
 					<RangeControl
@@ -122,8 +116,6 @@ const UnconnectedBorderControl = (
 						step={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }
 						value={ widthValue || undefined }
 						withInputField={ false }
-						__next40pxDefaultSize={ __next40pxDefaultSize }
-						__shouldNotWarnDeprecated36pxSize
 					/>
 				) }
 			</HStack>
@@ -156,7 +148,6 @@ const UnconnectedBorderControl = (
  *
  * 	return (
  * 		<BorderControl
- * 			__next40pxDefaultSize
  * 			colors={ colors }
  * 			label={ __( 'Border' ) }
  * 			onChange={ onChange }

package/src/border-control/border-control/hook.ts

@@ -12,7 +12,6 @@ import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { Border, BorderControlProps } from '../types';
-import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 
 // If either width or color are defined, the border is considered valid
 // and a border style can be set as well.
@@ -33,25 +32,15 @@ export function useBorderControl(
 		enableAlpha = true,
 		enableStyle = true,
 		shouldSanitizeBorder = true,
-		size = 'default',
 		value: border,
 		width,
 		__experimentalIsRenderedInSidebar = false,
-		__next40pxDefaultSize,
-		__shouldNotWarnDeprecated36pxSize,
+		// Deprecated props, no longer used.
+		size: _size,
+		__next40pxDefaultSize: _next40pxDefaultSize,
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'BorderControl',
-		__next40pxDefaultSize,
-		size,
-		__shouldNotWarnDeprecated36pxSize,
-	} );
-
-	const computedSize =
-		size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
-
 	const [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(
 		border?.width
 	);
@@ -138,14 +127,15 @@ export function useBorderControl(
 	if ( isCompact ) {
 		// Widths below represent the minimum usable width for compact controls.
 		// Taller controls contain greater internal padding, thus greater width.
-		wrapperWidth = size === '__unstable-large' ? '116px' : '90px';
+		wrapperWidth = '116px';
 	}
 	const innerWrapperClassName = useMemo( () => {
-		const widthStyle = !! wrapperWidth && styles.wrapperWidth;
-		const heightStyle = styles.wrapperHeight( computedSize );
-
-		return cx( styles.innerWrapper(), widthStyle, heightStyle );
-	}, [ wrapperWidth, cx, computedSize ] );
+		return cx(
+			styles.getInnerWrapperStyles( {
+				hasWidth: !! wrapperWidth,
+			} )
+		);
+	}, [ wrapperWidth, cx ] );
 
 	const sliderClassName = useMemo( () => {
 		return cx( styles.borderSlider() );
@@ -168,8 +158,6 @@ export function useBorderControl(
 		value: border,
 		widthUnit,
 		widthValue,
-		size: computedSize,
 		__experimentalIsRenderedInSidebar,
-		__next40pxDefaultSize,
 	};
 }

package/src/border-control/border-control-dropdown/component.tsx

@@ -158,7 +158,6 @@ const BorderControlDropdown = (
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonWrapperClassName,
-		size,
 		__unstablePopoverProps,
 		...otherProps
 	} = useBorderControlDropdown( props );
@@ -188,7 +187,7 @@ const BorderControlDropdown = (
 			tooltipPosition={ dropdownPosition }
 			label={ __( 'Border color and style picker' ) }
 			showTooltip
-			__next40pxDefaultSize={ size === '__unstable-large' }
+			__next40pxDefaultSize
 		>
 			<span className={ indicatorWrapperClassName }>
 				<ColorIndicator

package/src/border-control/border-control-dropdown/hook.ts

@@ -25,7 +25,6 @@ export function useBorderControlDropdown(
 		enableStyle = true,
 		onChange,
 		previousStyleSelection,
-		size = 'default',
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderControlDropdown' );
@@ -65,8 +64,8 @@ export function useBorderControlDropdown(
 	}, [ cx ] );
 
 	const indicatorWrapperClassName = useMemo( () => {
-		return cx( styles.colorIndicatorWrapper( border, size ) );
-	}, [ border, cx, size ] );
+		return cx( styles.colorIndicatorWrapper( border ) );
+	}, [ border, cx ] );
 
 	const popoverControlsClassName = useMemo( () => {
 		return cx( styles.borderControlPopoverControls );
@@ -95,7 +94,6 @@ export function useBorderControlDropdown(
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonWrapperClassName,
-		size,
 		__experimentalIsRenderedInSidebar,
 	};
 }

package/src/border-control/border-control-style-picker/component.tsx

@@ -26,7 +26,6 @@ function UnconnectedBorderControlStylePicker(
 ) {
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			ref={ forwardedRef }
 			isDeselectable
 			onChange={ ( value ) => {

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

@@ -86,7 +86,6 @@ const Template: StoryFn< typeof BorderControl > = ( {
 
 	return (
 		<BorderControl
-			__next40pxDefaultSize
 			onChange={ onChangeMerged }
 			value={ border }
 			{ ...props }
@@ -98,7 +97,6 @@ export const Default = Template.bind( {} );
 Default.args = {
 	colors,
 	label: 'Border',
-	__next40pxDefaultSize: true,
 	enableAlpha: true,
 	enableStyle: true,
 	shouldSanitizeBorder: true,

package/src/border-control/styles.ts

@@ -49,11 +49,13 @@ export const wrapperWidth = css`
 	}
 `;
 
-export const wrapperHeight = ( size?: 'default' | '__unstable-large' ) => {
-	return css`
-		height: ${ size === '__unstable-large' ? '40px' : '30px' };
-	`;
-};
+export const wrapperHeight = css`
+	height: 40px;
+`;
+
+export function getInnerWrapperStyles( { hasWidth }: { hasWidth: boolean } ) {
+	return css( innerWrapper(), hasWidth && wrapperWidth, wrapperHeight );
+}
 
 export const borderControlDropdown = css`
 	background: #fff;
@@ -93,19 +95,16 @@ export const colorIndicatorBorder = ( border?: Border ) => {
 	`;
 };
 
-export const colorIndicatorWrapper = (
-	border?: Border,
-	size?: 'default' | '__unstable-large'
-) => {
+export const colorIndicatorWrapper = ( border?: Border ) => {
 	const { style } = border || {};
 
 	return css`
 		border-radius: ${ CONFIG.radiusFull };
 		border: 2px solid transparent;
 		${ style ? colorIndicatorBorder( border ) : undefined }
-		width: ${ size === '__unstable-large' ? '24px' : '22px' };
-		height: ${ size === '__unstable-large' ? '24px' : '22px' };
-		padding: ${ size === '__unstable-large' ? '2px' : '1px' };
+		width: 24px;
+		height: 24px;
+		padding: 2px;
 
 		/*
 		 * ColorIndicator

package/src/border-control/test/index.js

@@ -14,6 +14,8 @@ import userEvent from '@testing-library/user-event';
  * Internal dependencies
  */
 import { BorderControl } from '../';
+import * as styles from '../styles';
+import { useCx } from '../../utils/hooks/use-cx';
 
 const colors = [
 	{ name: 'Gray', color: '#f6f7f7' },
@@ -77,7 +79,20 @@ const getWidthInput = () => {
 };
 
 function TestBorderControl( restProps ) {
-	return <BorderControl __next40pxDefaultSize { ...restProps } />;
+	return <BorderControl { ...restProps } />;
+}
+
+const getGeneratedEmotionClassNames = ( element ) =>
+	Array.from( element.classList ).filter( ( className ) =>
+		/^(css|emotion)-/.test( className )
+	);
+
+function EmotionStyleTest( { styleFragment } ) {
+	const cx = useCx();
+
+	return (
+		<div data-testid="emotion-style" className={ cx( styleFragment ) } />
+	);
 }
 
 describe( 'BorderControl', () => {
@@ -125,6 +140,22 @@ describe( 'BorderControl', () => {
 			expect( slider ).toBeInTheDocument();
 		} );
 
+		it( 'should compose inner wrapper width and height styles in a single generated class', () => {
+			render(
+				<EmotionStyleTest
+					styleFragment={ styles.getInnerWrapperStyles( {
+						hasWidth: true,
+					} ) }
+				/>
+			);
+
+			expect(
+				getGeneratedEmotionClassNames(
+					screen.getByTestId( 'emotion-style' )
+				)
+			).toHaveLength( 1 );
+		} );
+
 		it( 'should render placeholder in UnitControl', () => {
 			const props = createProps( { placeholder: 'Mixed' } );
 			render( <TestBorderControl { ...props } /> );

package/src/border-control/types.ts

@@ -92,7 +92,8 @@ export type BorderControlProps = ColorProps &
 		/**
 		 * Size of the control.
 		 *
-		 * @default 'default'
+		 * @deprecated This prop no longer has any effect.
+		 * @ignore
 		 */
 		size?: 'default' | '__unstable-large';
 		/**
@@ -113,20 +114,14 @@ export type BorderControlProps = ColorProps &
 		/**
 		 * Start opting into the larger default height that will become the default size in a future version.
 		 *
-		 * @default false
-		 */
-		__next40pxDefaultSize?: boolean;
-		/**
-		 * Do not throw a warning for the deprecated 36px default size.
-		 * For internal components of other components that already throw the warning.
-		 *
+		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
 		 * @ignore
 		 */
-		__shouldNotWarnDeprecated36pxSize?: boolean;
+		__next40pxDefaultSize?: boolean;
 	};
 
 export type DropdownProps = ColorProps &
-	Pick< BorderControlProps, 'enableStyle' | 'size' > & {
+	Pick< BorderControlProps, 'enableStyle' > & {
 		/**
 		 * An object representing a border or `undefined`. This component will
 		 * extract the border color and style selections from this object to use as

package/src/box-control/box-input-control.tsx

@@ -206,8 +206,6 @@ export default function BoxInputControl( {
 						<StyledUnitControl
 							{ ...props }
 							min={ min }
-							__shouldNotWarnDeprecated36pxSize
-							__next40pxDefaultSize
 							className="component-box-control__unit-control"
 							id={ inputId }
 							isPressEnterToChange
@@ -223,8 +221,6 @@ export default function BoxInputControl( {
 					</Tooltip>
 
 					<FlexedRangeControl
-						__next40pxDefaultSize
-						__shouldNotWarnDeprecated36pxSize
 						aria-controls={ inputId }
 						label={ LABELS[ side ] }
 						hideLabelFromVision
@@ -252,7 +248,6 @@ export default function BoxInputControl( {
 
 			{ hasPresets && ! showCustomValueControl && (
 				<FlexedRangeControl
-					__next40pxDefaultSize
 					className="spacing-sizes-control__range-control"
 					value={ presetIndex !== undefined ? presetIndex + 1 : 0 }
 					onChange={ ( newIndex ) => {

package/src/button/stories/e2e/index.story.tsx

@@ -12,7 +12,7 @@ import { wordpress } from '@wordpress/icons';
  * Internal dependencies
  */
 import { Button } from '../..';
-import type { ButtonAsButtonProps } from '../../types';
+import type { ButtonAsButtonProps, ButtonAsAnchorProps } from '../../types';
 
 const meta: Meta< typeof Button > = {
 	component: Button,
@@ -21,7 +21,7 @@ const meta: Meta< typeof Button > = {
 export default meta;
 
 export const VariantStates: StoryFn< typeof Button > = (
-	props: ButtonAsButtonProps
+	props: ButtonAsButtonProps | ButtonAsAnchorProps
 ) => {
 	const variants: ( typeof props.variant )[] = [
 		undefined,
@@ -57,6 +57,11 @@ export const VariantStates: StoryFn< typeof Button > = (
 							{ ...props }
 							variant={ variant }
 							{ ...buttonProps }
+							// Drop an empty `href` so the buttons stay as
+							// `<button>` until an actual value is entered.
+							href={
+								( 'href' in props && props.href ) || undefined
+							}
 						/>
 					</td>
 				) ) }
@@ -141,6 +146,9 @@ export const VariantStates: StoryFn< typeof Button > = (
 VariantStates.args = {
 	children: 'Code is poetry',
 };
+VariantStates.argTypes = {
+	href: { control: 'text' },
+};
 
 export const Icon = VariantStates.bind( {} );
 Icon.args = {

package/src/button/stories/index.story.tsx

@@ -55,7 +55,7 @@ const meta: Meta< typeof Button > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `Button` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`Button`](?path=/docs/design-system-components-button--docs) in `@wordpress/ui`, but continue using for now.',
 		},
 	},
 };

package/src/button/style.scss

@@ -1,5 +1,6 @@
 @use "sass:color";
 @use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins";
 @use "@wordpress/base-styles/variables" as *;
 @use "../utils/theme-variables" as *;
 
@@ -11,27 +12,33 @@
  */
 
 .components-button {
+	// Defend against a conflicting focus ring from WordPress common.css on `a:focus`.
+	&:focus:is(a) {
+		box-shadow: none;
+	}
+
+	&:focus:not(:active) {
+		@include mixins.outset-ring__focus();
+	}
+
 	display: inline-flex;
 	text-decoration: none;
 	font-family: inherit;
 	font-size: $default-font-size;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	margin: 0;
-	border: 0;
 	cursor: var(--wpds-cursor-control);
 	appearance: none;
 	background: none;
-
-	@media not ( prefers-reduced-motion ) {
-		transition: box-shadow 0.1s linear;
-	}
-
 	height: $button-size;
 	align-items: center;
 	box-sizing: border-box;
 	padding: 4px 12px; // Allows 32px min-height.
 	border-radius: $radius-small;
 	color: $components-color-foreground;
+	// Every variant reserves a 1px border (transparent by default) so the box
+	// size stays identical whether or not a variant paints a visible border.
+	border: $border-width solid transparent;
 
 	&.is-next-40px-default-size {
 		height: $button-size-next-default-40px;
@@ -42,12 +49,6 @@
 		color: $components-color-accent;
 	}
 
-	// Focus.
-	// See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors.
-	&:focus:not(:active) {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
-	}
-
 	/**
 	 * Primary button style.
 	 */
@@ -59,9 +60,6 @@
 		text-decoration: none;
 		text-shadow: none;
 
-		// Show the boundary of the button, in High Contrast Mode.
-		outline: 1px solid transparent;
-
 		&:hover:not(:disabled) {
 			background: $components-color-accent-darker-10;
 			color: $components-color-accent-inverted;
@@ -69,14 +67,9 @@
 
 		&:active:not(:disabled) {
 			background: $components-color-accent-darker-20;
-			border-color: $components-color-accent-darker-20;
 			color: $components-color-accent-inverted;
 		}
 
-		&:focus:not(:active) {
-			box-shadow: inset 0 0 0 1px $components-color-background, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
-		}
-
 		&:disabled,
 		&:disabled:active:enabled,
 		&[aria-disabled="true"],
@@ -85,12 +78,6 @@
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
 			color: rgba($white, 0.4);
 			background: $components-color-accent;
-			border-color: $components-color-accent;
-			outline: none;
-
-			&:focus:enabled {
-				box-shadow: inset 0 0 0 1px $components-color-background, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
-			}
 		}
 
 		&.is-busy,
@@ -107,7 +94,6 @@
 				$components-color-accent 70%
 			);
 			/* stylelint-enable */
-			border-color: $components-color-accent;
 		}
 	}
 
@@ -117,13 +103,6 @@
 
 	&.is-secondary,
 	&.is-tertiary {
-		// Show the boundary of the button, in High Contrast Mode.
-		outline: 1px solid transparent;
-
-		&:active:not(:disabled) {
-			box-shadow: none;
-		}
-
 		&:disabled,
 		&[aria-disabled="true"],
 		&[aria-disabled="true"]:hover {
@@ -138,26 +117,34 @@
 	 */
 
 	&.is-secondary {
-		box-shadow: inset 0 0 0 $border-width $components-color-accent, 0 0 0 currentColor;
-		outline: 1px solid transparent; // Shown in high contrast mode.
+		@media not ( prefers-reduced-motion ) {
+			transition: border-color 0.1s linear;
+		}
+
+		border-color: $components-color-accent;
 		white-space: nowrap;
 		color: $components-color-accent;
 		background: transparent;
 
+		&:active:not(:disabled) {
+			// Hide the border while pressed, keeping its width to avoid a size shift.
+			border-color: transparent;
+		}
+
 		&:hover:not(:disabled, [aria-disabled="true"], .is-pressed) {
-			box-shadow: inset 0 0 0 $border-width $components-color-accent-darker-20;
+			border-color: $components-color-accent-darker-20;
 			color: $components-color-accent-darker-20;
 			background: color-mix(in srgb, $components-color-accent 4%, transparent);
 		}
 
+		&:focus:not(:active) {
+			border-color: $components-color-accent;
+		}
+
 		&:disabled:not(:focus),
 		&[aria-disabled="true"]:not(:focus),
 		&[aria-disabled="true"]:hover:not(:focus) {
-			box-shadow: inset 0 0 0 $border-width var(--wpds-color-stroke-interactive-neutral-disabled);
-		}
-
-		&:focus:not(:active) {
-			box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+			border-color: var(--wpds-color-stroke-interactive-neutral-disabled);
 		}
 	}
 
@@ -183,15 +170,6 @@
 		p + & {
 			margin-left: -($grid-unit-15 * 0.5);
 		}
-
-		&:disabled,
-		&[aria-disabled="true"],
-		&[aria-disabled="true"]:hover {
-			&:not(:focus) {
-				box-shadow: none;
-				outline: none;
-			}
-		}
 	}
 
 	/**
@@ -210,10 +188,6 @@
 				color: color.adjust($alert-red, $lightness: -20%);
 			}
 
-			&:focus:not(:active) {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $alert-red;
-			}
-
 			&:active:not(:disabled, [aria-disabled="true"]) {
 				background: $gray-400;
 			}
@@ -243,13 +217,12 @@
 	&.is-link {
 		margin: 0;
 		padding: 0;
-		box-shadow: none;
 		border: 0;
 		border-radius: 0;
 		background: none;
 		outline: none;
 		text-align: left;
-		font-weight: $font-weight-regular;
+		font-weight: var(--wpds-typography-font-weight-default);
 		color: $components-color-accent;
 		text-decoration: underline;
 		text-underline-offset: 0.2em;
@@ -263,8 +236,9 @@
 
 		height: auto;
 
-		&:focus {
+		&:focus:not(:active) {
 			border-radius: $radius-small;
+			text-decoration: none;
 		}
 
 		&:disabled,
@@ -273,14 +247,6 @@
 		}
 	}
 
-	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	// This rule is placed after variant outline declarations (e.g. is-primary,
-	// is-secondary, is-tertiary) to ensure it wins by source order at the same
-	// specificity, while not using `:not(:active)` to avoid outline flicker.
-	&:focus {
-		outline: 3px solid transparent;
-	}
-
 	&:not(:disabled, [aria-disabled="true"]):active {
 		color: $components-color-foreground;
 	}
@@ -361,6 +327,15 @@
 				padding-left: $grid-unit-15;
 			}
 		}
+
+		// Offset the reserved 1px border so it doesn't widen the square
+		// icon button.
+		&:not(.has-text) {
+			svg,
+			.dashicon {
+				margin-inline: -$border-width;
+			}
+		}
 	}
 
 	// Toggled style.
@@ -383,22 +358,6 @@
 			}
 		}
 
-		&:focus:not(:active) {
-			box-shadow: inset 0 0 0 1px $components-color-background, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
-		}
-
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		&:focus {
-			outline: 2px solid transparent;
-		}
-	}
-
-	// Hide focus outline on :active to provide click feedback in forced-colors
-	// mode, where box-shadow is not visible. Higher specificity (0,3,0)
-	// ensures this wins over variant outline declarations. Placed after
-	// .is-pressed to also win by source order at equal specificity (0,3,0).
-	&:focus:active {
-		outline: none;
 	}
 
 	svg {

package/src/button-group/style.scss

@@ -8,7 +8,7 @@
 		border-radius: 0;
 		display: inline-flex;
 		color: $gray-900;
-		box-shadow: inset 0 0 0 $border-width $gray-900;
+		border-color: $gray-900;
 
 		& + .components-button {
 			margin-left: -1px;
@@ -29,10 +29,5 @@
 			position: relative;
 			z-index: 1;
 		}
-
-		// The active button should look pressed.
-		&.is-primary {
-			box-shadow: inset 0 0 0 $border-width $gray-900;
-		}
 	}
 }