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

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/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,6 +12,10 @@
  */
 
 .components-button {
+	&:focus:not(:active) {
+		@include mixins.outset-ring__focus();
+	}
+
 	display: inline-flex;
 	text-decoration: none;
 	font-family: inherit;
@@ -21,11 +26,6 @@
 	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;
@@ -42,12 +42,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 +53,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 +60,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 +71,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 +87,10 @@
 				$components-color-accent 70%
 			);
 			/* stylelint-enable */
-			border-color: $components-color-accent;
+		}
+
+		@media (forced-colors: active) {
+			outline: 1px solid ButtonBorder;
 		}
 	}
 
@@ -117,9 +100,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;
 		}
@@ -131,6 +111,10 @@
 			background: transparent;
 			transform: none;
 		}
+
+		@media (forced-colors: active) {
+			outline: 1px solid ButtonBorder;
+		}
 	}
 
 	/**
@@ -138,8 +122,13 @@
 	 */
 
 	&.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: box-shadow 0.1s linear;
+		}
+
+		box-shadow:
+			inset 0 0 0 $border-width $components-color-accent,
+			0 0 0 currentColor;
 		white-space: nowrap;
 		color: $components-color-accent;
 		background: transparent;
@@ -156,8 +145,9 @@
 			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;
+		@media (forced-colors: active) {
+			// Inset box-shadow borders are not reliable in forced-colors mode.
+			box-shadow: none;
 		}
 	}
 
@@ -183,15 +173,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 +191,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;
 			}
@@ -263,8 +240,9 @@
 
 		height: auto;
 
-		&:focus {
+		&:focus:not(:active) {
 			border-radius: $radius-small;
+			text-decoration: none;
 		}
 
 		&:disabled,
@@ -273,14 +251,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;
 	}
@@ -383,22 +353,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/card/card/hook.ts

@@ -57,9 +57,10 @@ export function useCard( props: CardProps ) {
 
 	const classes = useMemo( () => {
 		return cx(
-			styles.Card,
-			isBorderless && styles.boxShadowless,
-			isRounded && styles.rounded,
+			styles.getCardStyles( {
+				isBorderless,
+				isRounded,
+			} ),
 			className
 		);
 	}, [ className, cx, isBorderless, isRounded ] );

package/src/card/card-footer/hook.ts

@@ -11,7 +11,6 @@ import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { FooterProps } from '../types';
-import { getPaddingBySize } from '../get-padding-by-size';
 
 export function useCardFooter(
 	props: WordPressComponentProps< FooterProps, 'div' >
@@ -27,21 +26,18 @@ export function useCardFooter(
 
 	const cx = useCx();
 
-	const classes = useMemo(
-		() =>
-			cx(
-				styles.Footer,
-				styles.borderRadius,
-				styles.borderColor,
-				getPaddingBySize( size ),
-				isBorderless && styles.borderless,
-				isShady && styles.shady,
-				// This classname is added for legacy compatibility reasons.
-				'components-card__footer',
-				className
-			),
-		[ className, cx, isBorderless, isShady, size ]
-	);
+	const classes = useMemo( () => {
+		return cx(
+			styles.getCardFooterStyles( {
+				isBorderless,
+				isShady,
+				size,
+			} ),
+			// This classname is added for legacy compatibility reasons.
+			'components-card__footer',
+			className
+		);
+	}, [ className, cx, isBorderless, isShady, size ] );
 
 	return {
 		...otherProps,

package/src/card/card-header/hook.ts

@@ -11,7 +11,6 @@ import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { HeaderProps } from '../types';
-import { getPaddingBySize } from '../get-padding-by-size';
 
 export function useCardHeader(
 	props: WordPressComponentProps< HeaderProps, 'div' >
@@ -26,21 +25,18 @@ export function useCardHeader(
 
 	const cx = useCx();
 
-	const classes = useMemo(
-		() =>
-			cx(
-				styles.Header,
-				styles.borderRadius,
-				styles.borderColor,
-				getPaddingBySize( size ),
-				isBorderless && styles.borderless,
-				isShady && styles.shady,
-				// This classname is added for legacy compatibility reasons.
-				'components-card__header',
-				className
-			),
-		[ className, cx, isBorderless, isShady, size ]
-	);
+	const classes = useMemo( () => {
+		return cx(
+			styles.getCardHeaderStyles( {
+				isBorderless,
+				isShady,
+				size,
+			} ),
+			// This classname is added for legacy compatibility reasons.
+			'components-card__header',
+			className
+		);
+	}, [ className, cx, isBorderless, isShady, size ] );
 
 	return {
 		...otherProps,

package/src/card/styles.ts

@@ -7,6 +7,8 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { COLORS, CONFIG } from '../utils';
+import { getPaddingBySize } from './get-padding-by-size';
+import type { FooterProps, HeaderProps, Props } from './types';
 
 // Since the border for `Card` is rendered via the `box-shadow` property
 // (as opposed to the `border` property), the value of the border radius needs
@@ -97,3 +99,50 @@ export const rounded = css`
 export const shady = css`
 	background-color: ${ COLORS.ui.backgroundDisabled };
 `;
+
+export function getCardStyles( {
+	isBorderless,
+	isRounded,
+}: Pick< Props, 'isBorderless' | 'isRounded' > ) {
+	const cardStyles = css(
+		Card,
+		isBorderless && boxShadowless,
+		isRounded && rounded
+	);
+
+	return cardStyles;
+}
+
+export function getCardHeaderStyles( {
+	isBorderless,
+	isShady,
+	size,
+}: Pick< HeaderProps, 'isBorderless' | 'isShady' | 'size' > ) {
+	const headerStyles = css(
+		Header,
+		borderRadius,
+		borderColor,
+		getPaddingBySize( size ),
+		isBorderless && borderless,
+		isShady && shady
+	);
+
+	return headerStyles;
+}
+
+export function getCardFooterStyles( {
+	isBorderless,
+	isShady,
+	size,
+}: Pick< FooterProps, 'isBorderless' | 'isShady' | 'size' > ) {
+	const footerStyles = css(
+		Footer,
+		borderRadius,
+		borderColor,
+		getPaddingBySize( size ),
+		isBorderless && borderless,
+		isShady && shady
+	);
+
+	return footerStyles;
+}