@wordpress/components 39.0.0 → 40.1.1-next.v.202608281122.0

package/src/border-control/test/{index.js → index.jsx}

@@ -7,8 +7,7 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { BorderControl } from '../';
-import * as styles from '../styles';
-import { useCx } from '../../utils/hooks/use-cx';
+import { COLORS } from '../../utils';
 
 const colors = [
 	{ name: 'Gray', color: '#f6f7f7' },
@@ -75,19 +74,6 @@ function TestBorderControl( 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', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render standard border control', () => {
@@ -133,22 +119,6 @@ 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 } /> );
@@ -157,6 +127,68 @@ describe( 'BorderControl', () => {
 			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
 		} );
 
+		describe( 'color indicator inline styles', () => {
+			const getIndicatorWrapper = ( border ) => {
+				render(
+					<TestBorderControl
+						{ ...createProps( { value: border } ) }
+					/>
+				);
+
+				const toggleButton = screen.getByLabelText( toggleLabelRegex );
+
+				// The wrapper is decorative, so it has no semantic query.
+				// eslint-disable-next-line testing-library/no-node-access
+				return toggleButton.firstElementChild;
+			};
+
+			it( 'should fall back to gray-300 when a style is set without a color', () => {
+				const indicatorWrapper = getIndicatorWrapper( {
+					style: 'solid',
+					color: '',
+				} );
+
+				expect( indicatorWrapper ).toHaveStyle( {
+					borderStyle: 'solid',
+					borderColor: COLORS.gray[ 300 ],
+				} );
+			} );
+
+			it( 'should pass CSS-wide values through to border-style and border-color', () => {
+				const indicatorWrapper = getIndicatorWrapper( {
+					style: 'inherit',
+					color: 'inherit',
+				} );
+
+				expect( indicatorWrapper ).toHaveStyle( {
+					borderStyle: 'inherit',
+					borderColor: 'inherit',
+				} );
+			} );
+
+			it( 'should preview a `none` style as solid without applying a color', () => {
+				const indicatorWrapper = getIndicatorWrapper( {
+					style: 'none',
+				} );
+
+				expect( indicatorWrapper ).toHaveStyle( {
+					borderStyle: 'solid',
+				} );
+				expect( indicatorWrapper ).not.toHaveAttribute(
+					'style',
+					expect.stringContaining( 'border-color' )
+				);
+			} );
+
+			it( 'should not apply inline styles when no style is set', () => {
+				const indicatorWrapper = getIndicatorWrapper( {
+					color: '#72aee6',
+				} );
+
+				expect( indicatorWrapper ).not.toHaveAttribute( 'style' );
+			} );
+		} );
+
 		it( 'should render color and style popover', async () => {
 			const user = userEvent.setup();
 			const props = createProps();

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

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
@@ -15,14 +16,13 @@ import {
 	isValueMixed,
 	LABELS,
 } from './utils';
-import {
-	FlexedBoxControlIcon,
-	FlexedRangeControl,
-	InputWrapper,
-	StyledUnitControl,
-} from './styles/box-control-styles';
+import BoxControlIcon from './icon';
 import type { BoxControlInputControlProps, BoxControlValue } from './types';
 import Button from '../button';
+import { HStack } from '../h-stack';
+import RangeControl from '../range-control';
+import UnitControl from '../unit-control';
+import styles from './style.module.scss';
 
 const noop = () => {};
 
@@ -57,10 +57,10 @@ function getSidesToModify(
 				modifiedSides.push( 'top' );
 				break;
 			case 'left':
-				modifiedSides.push( 'left' );
+				modifiedSides.push( 'right' );
 				break;
 			case 'right':
-				modifiedSides.push( 'right' );
+				modifiedSides.push( 'left' );
 				break;
 		}
 	}
@@ -191,15 +191,26 @@ export default function BoxInputControl( {
 		: [];
 
 	return (
-		<InputWrapper key={ `box-control-${ side }` } expanded>
-			<FlexedBoxControlIcon side={ side } sides={ sides } />
+		<HStack
+			key={ `box-control-${ side }` }
+			className={ styles[ 'input-wrapper' ] }
+			expanded
+		>
+			<BoxControlIcon
+				className={ styles.icon }
+				side={ side }
+				sides={ sides }
+			/>
 			{ showCustomValueControl && (
 				<>
 					<Tooltip placement="top-end" text={ LABELS[ side ] }>
-						<StyledUnitControl
+						<UnitControl
 							{ ...props }
 							min={ min }
-							className="component-box-control__unit-control"
+							className={ clsx(
+								styles[ 'unit-control' ],
+								'component-box-control__unit-control'
+							) }
 							id={ inputId }
 							isPressEnterToChange
 							disableUnits={ isMixed || isMixedUnit }
@@ -213,7 +224,8 @@ export default function BoxInputControl( {
 						/>
 					</Tooltip>
 
-					<FlexedRangeControl
+					<RangeControl
+						className={ styles[ 'range-control' ] }
 						aria-controls={ inputId }
 						label={ LABELS[ side ] }
 						hideLabelFromVision
@@ -240,8 +252,11 @@ export default function BoxInputControl( {
 			) }
 
 			{ hasPresets && ! showCustomValueControl && (
-				<FlexedRangeControl
-					className="spacing-sizes-control__range-control"
+				<RangeControl
+					className={ clsx(
+						styles[ 'range-control' ],
+						'spacing-sizes-control__range-control'
+					) }
 					value={ presetIndex !== undefined ? presetIndex + 1 : 0 }
 					onChange={ ( newIndex ) => {
 						const newValue =
@@ -289,6 +304,6 @@ export default function BoxInputControl( {
 					iconSize={ 24 }
 				/>
 			) }
-		</InputWrapper>
+		</HStack>
 	);
 }

package/src/box-control/index.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { useInstanceId } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -5,12 +6,9 @@ import warning from '@wordpress/warning';
 import { BaseControl } from '../base-control';
 import BoxInputControl from './box-input-control';
 import LinkedButton from './linked-button';
+import Button from '../button';
 import { Grid } from '../grid';
-import {
-	InputWrapper,
-	ResetButton,
-	LinkedButtonWrapper,
-} from './styles/box-control-styles';
+import { HStack } from '../h-stack';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import {
 	DEFAULT_VALUES,
@@ -20,6 +18,7 @@ import {
 } from './utils';
 import { useControlledState } from '../utils/hooks';
 import type { BoxControlProps, BoxControlValue } from './types';
+import styles from './style.module.scss';
 
 const defaultInputProps = {
 	min: 0,
@@ -150,17 +149,17 @@ function BoxControl( {
 				{ label }
 			</BaseControl.VisualLabel>
 			{ isLinked && (
-				<InputWrapper>
+				<HStack className={ styles[ 'input-wrapper' ] }>
 					<BoxInputControl side="all" { ...inputControlProps } />
-				</InputWrapper>
+				</HStack>
 			) }
 			{ ! hasOneSide && (
-				<LinkedButtonWrapper>
+				<div className={ styles[ 'linked-button-wrapper' ] }>
 					<LinkedButton
 						onClick={ toggleLinked }
 						isLinked={ isLinked }
 					/>
-				</LinkedButtonWrapper>
+				</div>
 			) }
 
 			{ ! isLinked &&
@@ -182,15 +181,19 @@ function BoxControl( {
 					/>
 				) ) }
 			{ allowReset && (
-				<ResetButton
-					className="component-box-control__reset-button"
+				<Button
+					className={ clsx(
+						styles[ 'reset-button' ],
+						'component-box-control__reset-button'
+					) }
 					variant="secondary"
 					size="small"
 					onClick={ handleOnReset }
 					disabled={ ! isDirty }
+					accessibleWhenDisabled
 				>
 					{ __( 'Reset' ) }
-				</ResetButton>
+				</Button>
 			) }
 		</Grid>
 	);

package/src/box-control/style.module.scss

@@ -0,0 +1,28 @@
+@use "@wordpress/base-styles/variables" as *;
+
+.unit-control {
+	max-width: 90px;
+}
+
+.input-wrapper {
+	grid-column: 1 / span 3;
+}
+
+.reset-button {
+	grid-area: 1 / 2;
+	justify-self: end;
+}
+
+.linked-button-wrapper {
+	grid-area: 1 / 3;
+	justify-self: end;
+}
+
+.icon {
+	flex: 0 0 auto;
+}
+
+.range-control {
+	width: 100%;
+	margin-inline-end: $grid-unit-10;
+}

package/src/box-control/test/index.tsx

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { useState } from '@wordpress/element';
 import BoxControl from '..';
 import type { BoxControlProps, BoxControlValue } from '../types';
+import styles from '../style.module.scss';
 
 // Since `BoxControlProps` is a the result of type unions, we need to use
 // a distributive version of the standard `Omit` utility.
@@ -164,6 +165,37 @@ describe( 'BoxControl', () => {
 			expect( input ).toHaveValue( '' );
 		} );
 
+		it( 'should expose the reset button as aria-disabled when there are no changes', async () => {
+			render( <UncontrolledBoxControl /> );
+
+			const resetButton = screen.getByRole( 'button', { name: 'Reset' } );
+
+			expect( resetButton ).toHaveAttribute( 'aria-disabled', 'true' );
+			resetButton.focus();
+			expect( resetButton ).toHaveFocus();
+		} );
+
+		it( 'should keep focus on the reset button after it disables itself', async () => {
+			const user = userEvent.setup();
+
+			render( <UncontrolledBoxControl /> );
+
+			await user.type(
+				screen.getByRole( 'textbox', { name: 'All sides' } ),
+				'100'
+			);
+			await user.keyboard( '{Enter}' );
+
+			const resetButton = screen.getByRole( 'button', { name: 'Reset' } );
+
+			expect( resetButton ).not.toHaveAttribute( 'aria-disabled' );
+
+			await user.click( resetButton );
+
+			expect( resetButton ).toHaveAttribute( 'aria-disabled', 'true' );
+			expect( resetButton ).toHaveFocus();
+		} );
+
 		it( 'should persist cleared value when focus changes', async () => {
 			const user = userEvent.setup();
 			const spyChange = jest.fn();
@@ -225,6 +257,33 @@ describe( 'BoxControl', () => {
 			).not.toHaveValue();
 		} );
 
+		it.each( [
+			[ 'Top side', 'Bottom side' ],
+			[ 'Bottom side', 'Top side' ],
+			[ 'Left side', 'Right side' ],
+			[ 'Right side', 'Left side' ],
+		] )(
+			'should update %s together with %s when ALT is held',
+			async ( side, pairedSide ) => {
+				const user = userEvent.setup();
+
+				render( <ControlledBoxControl /> );
+
+				await user.click(
+					screen.getByRole( 'button', { name: 'Unlink sides' } )
+				);
+
+				const input = screen.getByRole( 'textbox', { name: side } );
+				await user.type( input, '10' );
+				await user.keyboard( '{Alt>}{ArrowUp}{/Alt}' );
+
+				expect( input ).toHaveValue( '11' );
+				expect(
+					screen.getByRole( 'textbox', { name: pairedSide } )
+				).toHaveValue( '11' );
+			}
+		);
+
 		it( 'should update a single side value when using slider unlinked', async () => {
 			const user = userEvent.setup();
 
@@ -476,4 +535,106 @@ describe( 'BoxControl', () => {
 			).toHaveAttribute( 'placeholder', 'Inherited' );
 		} );
 	} );
+
+	describe( 'Styles', () => {
+		const presets = [
+			{ name: 'Small', slug: 'small', value: '4px' },
+			{ name: 'Medium', slug: 'medium', value: '8px' },
+		];
+
+		it( 'should apply module classes and retained public class names in custom mode', () => {
+			const { container } = render( <UncontrolledBoxControl /> );
+
+			const grid = screen.getByRole( 'group', { name: 'Box Control' } );
+			const allSidesInput = screen.getByRole( 'textbox', {
+				name: 'All sides',
+			} );
+			const innerInputWrapper =
+				// eslint-disable-next-line testing-library/no-node-access
+				allSidesInput.closest( `.${ styles[ 'input-wrapper' ] }` );
+			const linkedRow =
+				// eslint-disable-next-line testing-library/no-node-access
+				Array.from( grid.children ).find( ( child ) =>
+					child.classList.contains( styles[ 'input-wrapper' ] )
+				);
+			const unlinkButton = screen.getByRole( 'button', {
+				name: 'Unlink sides',
+			} );
+			const linkedButtonWrapper =
+				// eslint-disable-next-line testing-library/no-node-access
+				unlinkButton.closest(
+					`.${ styles[ 'linked-button-wrapper' ] }`
+				);
+
+			expect( innerInputWrapper ).toHaveClass(
+				styles[ 'input-wrapper' ]
+			);
+			expect( linkedRow ).toHaveClass( styles[ 'input-wrapper' ] );
+			expect( linkedRow ).not.toBe( innerInputWrapper );
+			expect( linkedButtonWrapper ).toHaveClass(
+				styles[ 'linked-button-wrapper' ]
+			);
+			expect(
+				// eslint-disable-next-line testing-library/no-node-access
+				innerInputWrapper?.querySelector( `.${ styles.icon }` )
+			).toHaveClass( styles.icon );
+			expect(
+				// Class names live on wrappers around the labeled controls.
+				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+				container.querySelector(
+					'.component-box-control__unit-control'
+				)
+			).toHaveClass( styles[ 'unit-control' ] );
+			expect(
+				screen.getByRole( 'button', { name: 'Reset' } )
+			).toHaveClass(
+				styles[ 'reset-button' ],
+				'component-box-control__reset-button'
+			);
+			expect(
+				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+				container.querySelector( '.components-range-control' )
+			).toHaveClass( styles[ 'range-control' ] );
+		} );
+
+		it( 'should apply the module input-wrapper class to each side after unlinking', async () => {
+			const user = userEvent.setup();
+
+			render( <UncontrolledBoxControl /> );
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
+
+			for ( const name of [
+				'Top side',
+				'Right side',
+				'Bottom side',
+				'Left side',
+			] ) {
+				const sideInput = screen.getByRole( 'textbox', { name } );
+				expect(
+					// eslint-disable-next-line testing-library/no-node-access
+					sideInput.closest( `.${ styles[ 'input-wrapper' ] }` )
+				).toHaveClass( styles[ 'input-wrapper' ] );
+			}
+		} );
+
+		it( 'should compose the module range class with the public preset class', () => {
+			const { container } = render(
+				<UncontrolledBoxControl
+					presets={ presets }
+					presetKey="padding"
+				/>
+			);
+
+			expect(
+				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+				container.querySelector( '.components-range-control' )
+			).toHaveClass(
+				styles[ 'range-control' ],
+				'spacing-sizes-control__range-control'
+			);
+		} );
+	} );
 } );

package/src/button/index.tsx

@@ -5,9 +5,15 @@ import type {
 	HTMLAttributes,
 	MouseEvent,
 	ReactElement,
+	ReactNode,
 } from 'react';
 import deprecated from '@wordpress/deprecated';
-import { forwardRef } from '@wordpress/element';
+import {
+	Children,
+	Fragment,
+	forwardRef,
+	isValidElement,
+} from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import Tooltip from '../tooltip';
 import Icon from '../icon';
@@ -17,6 +23,30 @@ import { positionToPlacement } from '../popover/utils';
 
 const disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ] as const;
 
+/**
+ * Whether `children` will render any content, to differentiate an icon-only
+ * button or an icon-with-text button.
+ *
+ * `Children.toArray` discards the children that render nothing (`null`,
+ * `undefined`, and booleans), which is what conditionally rendered content
+ * evaluates to when its condition is unmet.
+ *
+ * @param children The children passed to the button.
+ */
+const hasRenderableChildren = ( children: ReactNode ): boolean =>
+	Children.toArray( children ).some( ( child ) => {
+		if ( ! isValidElement( child ) ) {
+			return child !== '';
+		}
+
+		if ( child.type === Fragment ) {
+			return hasRenderableChildren( child.props.children );
+		}
+
+		// A tooltip should not be considered as a child.
+		return child.props.className !== 'components-tooltip';
+	} );
+
 function useDeprecatedProps( {
 	__experimentalIsFocusable,
 	isDefault,
@@ -135,14 +165,6 @@ export const Button = forwardRef( function UnforwardedButton(
 		'components-button__description'
 	);
 
-	const hasChildren =
-		( 'string' === typeof children && !! children ) ||
-		( Array.isArray( children ) &&
-			children?.[ 0 ] &&
-			children[ 0 ] !== null &&
-			// Tooltip should not considered as a child
-			children?.[ 0 ]?.props?.className !== 'components-tooltip' );
-
 	const truthyAriaPressedValues: ( typeof ariaPressed )[] = [
 		true,
 		'true',
@@ -163,7 +185,7 @@ export const Button = forwardRef( function UnforwardedButton(
 		'is-busy': isBusy,
 		'is-link': variant === 'link',
 		'is-destructive': isDestructive,
-		'has-text': !! icon && ( hasChildren || text ),
+		'has-text': !! icon && ( text || hasRenderableChildren( children ) ),
 		'has-icon': !! icon,
 		'has-icon-right': iconPosition === 'right',
 	} );

package/src/button/test/index.tsx

@@ -95,6 +95,57 @@ describe( 'Button', () => {
 			);
 		} );
 
+		it( 'should render a button element with has-text when the text is not the first child', () => {
+			const isBusy = false;
+
+			render(
+				<Button icon={ plusCircle } isBusy={ isBusy }>
+					{ isBusy && 'Saving…' }
+					{ ! isBusy && 'Save' }
+				</Button>
+			);
+
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'has-text' );
+		} );
+
+		it( 'should render a button element with has-text when children are wrapped in an element', () => {
+			render(
+				<Button icon={ plusCircle }>
+					<span>Children</span>
+				</Button>
+			);
+
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'has-text' );
+		} );
+
+		it( 'should render a button element with has-text when children are wrapped in a fragment', () => {
+			render(
+				<Button icon={ plusCircle }>
+					<>Children</>
+				</Button>
+			);
+
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'has-text' );
+		} );
+
+		it( 'should render a button element without has-text when every child is falsy', () => {
+			const isBusy: boolean = false;
+
+			render(
+				<Button icon={ plusCircle }>
+					{ isBusy && 'Generating…' }
+					{ null }
+					{ /* See: https://github.com/jsx-eslint/eslint-plugin-react/issues/3995 */ }
+					{ /* eslint-disable-next-line react/jsx-curly-brace-presence */ }
+					{ '' }
+				</Button>
+			);
+
+			expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+				'has-text'
+			);
+		} );
+
 		it( 'should render a button element without has-text when a button wrapped in Tooltip', () => {
 			render(
 				<Tooltip text="Help text">

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

@@ -22,7 +22,7 @@ export function useCardBody(
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.Body,
+				styles.getCardBodyStyles( { isScrollable } ),
 				styles.borderRadius,
 				getPaddingBySize( size ),
 				isShady && styles.shady,
@@ -30,7 +30,7 @@ export function useCardBody(
 				'components-card__body',
 				className
 			),
-		[ className, cx, isShady, size ]
+		[ className, cx, isScrollable, isShady, size ]
 	);
 
 	return {

package/src/card/styles.ts

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { COLORS, CONFIG } from '../utils';
 import { getPaddingBySize } from './get-padding-by-size';
-import type { FooterProps, HeaderProps, Props } from './types';
+import type { BodyProps, 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
@@ -42,6 +42,16 @@ export const Body = css`
 	max-height: 100%;
 `;
 
+const ScrollableBody = css`
+	height: 100%;
+`;
+
+export function getCardBodyStyles( {
+	isScrollable,
+}: Pick< BodyProps, 'isScrollable' > ) {
+	return isScrollable ? css( Body, ScrollableBody ) : Body;
+}
+
 export const Media = css`
 	box-sizing: border-box;
 	overflow: hidden;