@wordpress/components 25.12.0 → 25.14.0

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

@@ -149,6 +149,7 @@ const BorderControlDropdown = (
 		popoverControlsClassName,
 		resetButtonClassName,
 		showDropdownHeader,
+		size,
 		__unstablePopoverProps,
 		...otherProps
 	} = useBorderControlDropdown( props );
@@ -178,6 +179,7 @@ const BorderControlDropdown = (
 			tooltipPosition={ dropdownPosition }
 			label={ __( 'Border color and style picker' ) }
 			showTooltip={ true }
+			__next40pxDefaultSize={ size === '__unstable-large' ? true : false }
 		>
 			<span className={ indicatorWrapperClassName }>
 				<ColorIndicator
@@ -198,7 +200,7 @@ const BorderControlDropdown = (
 						<HStack>
 							<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
 							<Button
-								isSmall
+								size="small"
 								label={ __( 'Close border color' ) }
 								icon={ closeSmall }
 								onClick={ onClose }

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

@@ -57,8 +57,8 @@ export function useBorderControlDropdown(
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx( styles.borderControlDropdown( size ), className );
-	}, [ className, cx, size ] );
+		return cx( styles.borderControlDropdown, className );
+	}, [ className, cx ] );
 
 	const indicatorClassName = useMemo( () => {
 		return cx( styles.borderColorIndicator );
@@ -95,6 +95,7 @@ export function useBorderControlDropdown(
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
+		size,
 		__experimentalIsRenderedInSidebar,
 	};
 }

package/src/border-control/styles.ts

@@ -59,18 +59,11 @@ export const wrapperHeight = ( size?: 'default' | '__unstable-large' ) => {
 	`;
 };
 
-export const borderControlDropdown = (
-	size?: 'default' | '__unstable-large'
-) => css`
+export const borderControlDropdown = css`
 	background: #fff;
 
 	&& > button {
-		/*
-		 * Override button component styles to fit within BorderControl
-		 * regardless of size.
-		 */
-		height: ${ size === '__unstable-large' ? '40px' : '30px' };
-		width: ${ size === '__unstable-large' ? '40px' : '30px' };
+		aspect-ratio: 1;
 		padding: 0;
 		display: flex;
 		align-items: center;

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

@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BoxControl from '../';
+
+const meta: Meta< typeof BoxControl > = {
+	title: 'Components (Experimental)/BoxControl',
+	component: BoxControl,
+	argTypes: {
+		values: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const TemplateUncontrolled: StoryFn< typeof BoxControl > = ( props ) => {
+	return <BoxControl { ...props } />;
+};
+
+const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => {
+	const [ values, setValues ] = useState< ( typeof props )[ 'values' ] >();
+
+	return (
+		<BoxControl
+			values={ values }
+			{ ...props }
+			onChange={ ( nextValue ) => {
+				setValues( nextValue );
+				props.onChange?.( nextValue );
+			} }
+		/>
+	);
+};
+
+export const Default = TemplateUncontrolled.bind( {} );
+Default.args = {
+	label: 'Label',
+};
+
+export const Controlled = TemplateControlled.bind( {} );
+Controlled.args = {
+	...Default.args,
+};
+
+export const ArbitrarySides = TemplateControlled.bind( {} );
+ArbitrarySides.args = {
+	...Default.args,
+	sides: [ 'top', 'bottom' ],
+};
+
+export const SingleSide = TemplateControlled.bind( {} );
+SingleSide.args = {
+	...Default.args,
+	sides: [ 'bottom' ],
+};
+
+export const AxialControls = TemplateControlled.bind( {} );
+AxialControls.args = {
+	...Default.args,
+	splitOnAxis: true,
+};
+
+export const AxialControlsWithSingleSide = TemplateControlled.bind( {} );
+AxialControlsWithSingleSide.args = {
+	...Default.args,
+	sides: [ 'horizontal' ],
+	splitOnAxis: true,
+};

package/src/button/style.scss

@@ -129,8 +129,11 @@
 			background: transparent;
 			transform: none;
 			opacity: 1;
-			box-shadow: none;
-			outline: none;
+
+			&:not(:focus) {
+				box-shadow: none;
+				outline: none;
+			}
 		}
 	}
 
@@ -242,6 +245,11 @@
 	&.is-secondary.is-busy:disabled,
 	&.is-secondary.is-busy[aria-disabled="true"] {
 		animation: components-button__busy-animation 2500ms infinite linear;
+		// This should be refactored to use the reduce-motion("animation") mixin
+		// as soon as https://github.com/WordPress/gutenberg/issues/55566 is closed.
+		@media (prefers-reduced-motion: reduce) {
+			animation-duration: 0s;
+		}
 		opacity: 1;
 		background-size: 100px 100%;
 		// Disable reason: This function call looks nicer when each argument is on its own line.

package/src/checkbox-control/README.md

@@ -77,11 +77,12 @@ const MyCheckboxControl = () => {
 The set of props accepted by the component will be specified below.
 Props not included in this set will be applied to the input element.
 
-#### `label`: `string`
+#### `label`: `string|false`
 
 A label for the input field, that appears at the side of the checkbox.
 The prop will be rendered as content a label element.
 If no prop is passed an empty label is rendered.
+If the prop is set to false no label is rendered.
 
 -   Required: No
 

package/src/checkbox-control/index.tsx

@@ -125,12 +125,14 @@ export function CheckboxControl(
 					/>
 				) : null }
 			</span>
-			<label
-				className="components-checkbox-control__label"
-				htmlFor={ id }
-			>
-				{ label }
-			</label>
+			{ label && (
+				<label
+					className="components-checkbox-control__label"
+					htmlFor={ id }
+				>
+					{ label }
+				</label>
+			) }
 		</BaseControl>
 	);
 }

package/src/checkbox-control/test/__snapshots__/index.tsx.snap

@@ -5,14 +5,14 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -8,17 +8,31 @@
+@@ -8,13 +8,27 @@
         <span
           class="components-checkbox-control__input-container"
         >
           <input
             class="components-checkbox-control__input"
--           id="inspector-checkbox-control-5"
-+           id="inspector-checkbox-control-6"
+-           id="inspector-checkbox-control-6"
++           id="inspector-checkbox-control-7"
             type="checkbox"
             value="1"
 +         />
@@ -31,11 +31,6 @@ Snapshot Diff:
             />
 +         </svg>
         </span>
-        <label
-          class="components-checkbox-control__label"
--         for="inspector-checkbox-control-5"
-+         for="inspector-checkbox-control-6"
-        />
       </div>
     </div>
   </div>

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

@@ -60,6 +60,13 @@ describe( 'CheckboxControl', () => {
 			expect( label ).toBeInTheDocument();
 		} );
 
+		it( 'should not render label element if label is set to false', () => {
+			render( <CheckboxControl label={ false } /> );
+
+			const label = screen.queryByRole( 'label' );
+			expect( label ).not.toBeInTheDocument();
+		} );
+
 		it( 'should render a checkbox in an indeterminate state', () => {
 			render( <CheckboxControl indeterminate /> );
 			expect( getInput() ).toHaveProperty( 'indeterminate', true );

package/src/checkbox-control/types.ts

@@ -19,9 +19,10 @@ export type CheckboxControlProps = Pick<
 	/**
 	 * A label for the input field, that appears at the side of the checkbox.
 	 * The prop will be rendered as content a label element. If no prop is
-	 * passed an empty label is rendered.
+	 * passed an empty label is rendered. If the prop is set to false no label
+	 * is rendered.
 	 */
-	label?: string;
+	label?: string | false;
 	/**
 	 * If checked is true the checkbox will be checked. If checked is false the
 	 * checkbox will be unchecked. If no value is passed the checkbox will be

package/src/combobox-control/README.md

@@ -47,9 +47,7 @@ function MyComboboxControl() {
 			onFilterValueChange={ ( inputValue ) =>
 				setFilteredOptions(
 					options.filter( ( option ) =>
-						option.label
-							.toLowerCase()
-							.startsWith( inputValue.toLowerCase() )
+						option.value === inputValue
 					)
 				)
 			}