@wordpress/components 25.16.0 → 26.0.0

package/src/angle-picker-control/index.tsx

@@ -7,18 +7,17 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import deprecated from '@wordpress/deprecated';
 import { forwardRef } from '@wordpress/element';
 import { isRTL, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { FlexBlock } from '../flex';
+import { Flex, FlexBlock } from '../flex';
 import { Spacer } from '../spacer';
 import NumberControl from '../number-control';
 import AngleCircle from './angle-circle';
-import { Root, UnitText } from './styles/angle-picker-control-styles';
+import { UnitText } from './styles/angle-picker-control-styles';
 
 import type { WordPressComponentProps } from '../context';
 import type { AnglePickerControlProps } from './types';
@@ -28,7 +27,6 @@ function UnforwardedAnglePickerControl(
 	ref: ForwardedRef< any >
 ) {
 	const {
-		__nextHasNoMarginBottom = false,
 		className,
 		label = __( 'Angle' ),
 		onChange,
@@ -36,16 +34,6 @@ function UnforwardedAnglePickerControl(
 		...restProps
 	} = props;
 
-	if ( ! __nextHasNoMarginBottom ) {
-		deprecated(
-			'Bottom margin styles for wp.components.AnglePickerControl',
-			{
-				since: '6.1',
-				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
-			}
-		);
-	}
-
 	const handleOnNumberChange = ( unprocessedValue: string | undefined ) => {
 		if ( onChange === undefined ) {
 			return;
@@ -66,13 +54,7 @@ function UnforwardedAnglePickerControl(
 		: [ null, unitText ];
 
 	return (
-		<Root
-			{ ...restProps }
-			ref={ ref }
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			className={ classes }
-			gap={ 2 }
-		>
+		<Flex { ...restProps } ref={ ref } className={ classes } gap={ 2 }>
 			<FlexBlock>
 				<NumberControl
 					label={ label }
@@ -95,7 +77,7 @@ function UnforwardedAnglePickerControl(
 					onChange={ onChange }
 				/>
 			</Spacer>
-		</Root>
+		</Flex>
 	);
 }
 
@@ -115,7 +97,6 @@ function UnforwardedAnglePickerControl(
  *     <AnglePickerControl
  *       value={ angle }
  *       onChange={ setAngle }
- *       __nextHasNoMarginBottom
  *     </>
  *   );
  * }

package/src/angle-picker-control/stories/index.story.tsx

@@ -52,6 +52,3 @@ const AnglePickerWithState: StoryFn< typeof AnglePickerControl > = ( {
 };
 
 export const Default = AnglePickerWithState.bind( {} );
-Default.args = {
-	__nextHasNoMarginBottom: true,
-};

package/src/angle-picker-control/styles/angle-picker-control-styles.tsx

@@ -1,37 +1,19 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 /**
  * Internal dependencies
  */
-import { Flex } from '../../flex';
 import { COLORS } from '../../utils';
 import { space } from '../../utils/space';
 import { Text } from '../../text';
 import CONFIG from '../../utils/config-values';
 
-import type { AnglePickerControlProps } from '../types';
-
 const CIRCLE_SIZE = 32;
 const INNER_CIRCLE_SIZE = 6;
 
-const deprecatedBottomMargin = ( {
-	__nextHasNoMarginBottom,
-}: Pick< AnglePickerControlProps, '__nextHasNoMarginBottom' > ) => {
-	return ! __nextHasNoMarginBottom
-		? css`
-				margin-bottom: ${ space( 2 ) };
-		  `
-		: '';
-};
-
-export const Root = styled( Flex )`
-	${ deprecatedBottomMargin }
-`;
-
 export const CircleRoot = styled.div`
 	border-radius: 50%;
 	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };

package/src/angle-picker-control/types.ts

@@ -4,6 +4,8 @@ export type AnglePickerControlProps = {
 	 * in a future version.
 	 *
 	 * @default false
+	 * @deprecated Default behavior since WP 6.5. Prop can be safely removed.
+	 * @ignore
 	 */
 	__nextHasNoMarginBottom?: boolean;
 	/**

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

@@ -40,6 +40,12 @@ export const VariantStates: StoryFn< typeof Button > = (
 				>
 					<Button { ...props } variant={ variant } />
 					<Button { ...props } variant={ variant } disabled />
+					<Button
+						{ ...props }
+						variant={ variant }
+						disabled
+						__experimentalIsFocusable
+					/>
 					<Button { ...props } variant={ variant } isBusy />
 					<Button { ...props } variant={ variant } isDestructive />
 					<Button { ...props } variant={ variant } isPressed />

package/src/button/style.scss

@@ -129,11 +129,6 @@
 			background: transparent;
 			transform: none;
 			opacity: 1;
-
-			&:not(:focus) {
-				box-shadow: none;
-				outline: none;
-			}
 		}
 	}
 
@@ -151,6 +146,12 @@
 		&:hover:not(:disabled, [aria-disabled="true"]) {
 			box-shadow: inset 0 0 0 $border-width $components-color-accent-darker-10;
 		}
+
+		&:disabled:not(:focus),
+		&[aria-disabled="true"]:not(:focus),
+		&[aria-disabled="true"]:hover:not(:focus) {
+			box-shadow: inset 0 0 0 $border-width $gray-300;
+		}
 	}
 
 	/**
@@ -164,11 +165,13 @@
 
 		&:hover:not(:disabled, [aria-disabled="true"]) {
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list */
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		}
 
 		&:active:not(:disabled, [aria-disabled="true"]) {
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list */
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 		}
 
@@ -176,6 +179,15 @@
 		p + & {
 			margin-left: -($grid-unit-15 * 0.5);
 		}
+
+		&:disabled,
+		&[aria-disabled="true"],
+		&[aria-disabled="true"]:hover {
+			&:not(:focus) {
+				box-shadow: none;
+				outline: none;
+			}
+		}
 	}
 
 	/**

package/src/card/test/__snapshots__/index.tsx.snap

@@ -26,7 +26,7 @@ Snapshot Diff:
   <div>
     <div
 -     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
-+     class="components-card__body components-card-body css-1nhkags-View-Body-borderRadius-medium-shady e19lxcc00"
++     class="components-card__body components-card-body css-2oh82v-View-Body-borderRadius-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -43,7 +43,7 @@ Snapshot Diff:
   <div>
     <div
 -     class="components-flex components-card__footer components-card-footer css-120suhd-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__footer components-card-footer css-19jxwll-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium-shady e19lxcc00"
++     class="components-flex components-card__footer components-card-footer css-opd7jt-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -77,7 +77,7 @@ Snapshot Diff:
   <div>
     <div
 -     class="components-flex components-card__header components-card-header css-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__header components-card-header css-1qktnah-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium-shady e19lxcc00"
++     class="components-flex components-card__header components-card-header css-tedm3i-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardHeader"
     >

package/src/checkbox-control/README.md

@@ -69,12 +69,11 @@ 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|false`
+#### `label`: `string`
 
 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/stories/index.story.tsx

@@ -13,6 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import CheckboxControl from '..';
 import { VStack } from '../../v-stack';
+import { HStack } from '../../h-stack';
 
 const meta: Meta< typeof CheckboxControl > = {
 	component: CheckboxControl,
@@ -115,3 +116,46 @@ Indeterminate.args = {
 	label: 'Select all',
 	__nextHasNoMarginBottom: true,
 };
+
+/**
+ * For more complex designs, a custom `<label>` element can be associated with the checkbox
+ * by leaving the `label` prop undefined and using the `id` and `htmlFor` props instead.
+ * Because the label element also functions as a click target for the checkbox, [do not
+ * place interactive elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#interactive_content)
+ * such as links or buttons inside the `<label>` node.
+ *
+ * Similarly, a custom description can be added by omitting the `help` prop
+ * and using the `aria-describedby` prop instead.
+ */
+export const WithCustomLabel: StoryFn< typeof CheckboxControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ isChecked, setChecked ] = useState( true );
+
+	return (
+		<HStack justify="flex-start" alignment="top" spacing={ 0 }>
+			<CheckboxControl
+				{ ...args }
+				checked={ isChecked }
+				onChange={ ( v ) => {
+					setChecked( v );
+					onChange( v );
+				} }
+				id="my-checkbox-with-custom-label"
+				aria-describedby="my-custom-description"
+			/>
+			<VStack>
+				<label htmlFor="my-checkbox-with-custom-label">
+					My custom label
+				</label>
+				<div id="my-custom-description" style={ { fontSize: 13 } }>
+					A custom description.
+				</div>
+			</VStack>
+		</HStack>
+	);
+};
+WithCustomLabel.args = {
+	__nextHasNoMarginBottom: true,
+};

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

@@ -60,8 +60,8 @@ describe( 'CheckboxControl', () => {
 			expect( label ).toBeInTheDocument();
 		} );
 
-		it( 'should not render label element if label is set to false', () => {
-			render( <CheckboxControl label={ false } /> );
+		it( 'should not render label element if label is not set', () => {
+			render( <CheckboxControl /> );
 
 			const label = screen.queryByRole( 'label' );
 			expect( label ).not.toBeInTheDocument();

package/src/checkbox-control/types.ts

@@ -19,10 +19,9 @@ 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. If the prop is set to false no label
-	 * is rendered.
+	 * passed an empty label is rendered.
 	 */
-	label?: string | false;
+	label?: string;
 	/**
 	 * 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/index.tsx

@@ -124,10 +124,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 			selected: __( 'Item selected.' ),
 		},
 		__experimentalRenderItem,
-	} = useDeprecated36pxDefaultSizeProp< ComboboxControlProps >(
-		props,
-		'wp.components.ComboboxControl'
-	);
+	} = useDeprecated36pxDefaultSizeProp( props );
 
 	const [ value, setValue ] = useControlledValue( {
 		value: valueProp,

package/src/composite/current/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Composite is a component that may contain navigable items represented by
+ * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
+ * all the keyboard navigation mechanisms to ensure that there's only one
+ * tab stop for the whole Composite element. This means that it can behave as
+ * a roving tabindex or aria-activedescendant container.
+ *
+ * @see https://ariakit.org/components/composite
+ */
+
+/* eslint-disable-next-line no-restricted-imports */
+export {
+	Composite,
+	CompositeGroup,
+	CompositeGroupLabel,
+	CompositeItem,
+	CompositeRow,
+	useCompositeStore,
+} from '@ariakit/react';
+
+/* eslint-disable-next-line no-restricted-imports */
+export type { CompositeStore, CompositeStoreProps } from '@ariakit/react';

package/src/composite/current/stories/index.story.tsx

@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	Composite,
+	CompositeGroup,
+	CompositeRow,
+	CompositeItem,
+	useCompositeStore,
+} from '..';
+import { UseCompositeStorePlaceholder, transform } from './utils';
+
+const meta: Meta< typeof UseCompositeStorePlaceholder > = {
+	title: 'Components/Composite (V2)',
+	component: UseCompositeStorePlaceholder,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		Composite,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		CompositeGroup,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		CompositeRow,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		CompositeItem,
+	},
+	parameters: {
+		badges: [ 'private' ],
+		docs: {
+			canvas: { sourceState: 'shown' },
+			source: { transform },
+			extractArgTypes: ( component: React.FunctionComponent ) => {
+				const name = component.displayName;
+				const path = name
+					?.replace(
+						/([a-z])([A-Z])/g,
+						( _, a, b ) => `${ a }-${ b.toLowerCase() }`
+					)
+					.toLowerCase();
+				const url = `https://ariakit.org/reference/${ path }`;
+				return {
+					props: {
+						name: 'Props',
+						description: `See <a href="${ url }">Ariakit docs</a> for <code>${ name }</code>`,
+						table: { type: { summary: undefined } },
+					},
+				};
+			},
+		},
+	},
+};
+export default meta;
+
+export const Default: StoryFn< typeof Composite > = ( { ...initialState } ) => {
+	const rtl = isRTL();
+	const store = useCompositeStore( { rtl, ...initialState } );
+
+	return (
+		<Composite role="grid" store={ store } aria-label="Ariakit Composite">
+			<CompositeRow role="row">
+				<CompositeItem role="gridcell">Item A1</CompositeItem>
+				<CompositeItem role="gridcell">Item A2</CompositeItem>
+				<CompositeItem role="gridcell">Item A3</CompositeItem>
+			</CompositeRow>
+			<CompositeRow role="row">
+				<CompositeItem role="gridcell">Item B1</CompositeItem>
+				<CompositeItem role="gridcell">Item B2</CompositeItem>
+				<CompositeItem role="gridcell">Item B3</CompositeItem>
+			</CompositeRow>
+			<CompositeRow role="row">
+				<CompositeItem role="gridcell">Item C1</CompositeItem>
+				<CompositeItem role="gridcell">Item C2</CompositeItem>
+				<CompositeItem role="gridcell">Item C3</CompositeItem>
+			</CompositeRow>
+		</Composite>
+	);
+};

package/src/composite/current/stories/utils.tsx

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import type { StoryContext } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import type { CompositeStoreProps } from '..';
+
+export function UseCompositeStorePlaceholder( props: CompositeStoreProps ) {
+	return (
+		<dl>
+			{ Object.entries( props ).map( ( [ name, value ] ) => (
+				<>
+					<dt>{ name }</dt>
+					<dd>{ JSON.stringify( value ) }</dd>
+				</>
+			) ) }
+		</dl>
+	);
+}
+UseCompositeStorePlaceholder.displayName = 'useCompositeStore';
+
+export function transform( code: string, context: StoryContext ) {
+	// The output generated by Storybook for these components is
+	// messy, so we apply this transform to make it more useful
+	// for anyone reading the docs.
+	const config = ` ${ JSON.stringify( context.args, null, 2 ) } `;
+	const state = config.replace( ' {} ', '' );
+	return [
+		// Include a setup line, showing how to make use of
+		// `useCompositeStore` to convert store options into
+		// a composite store prop.
+		`const store = useCompositeStore(${ state });`,
+		'',
+		'return (',
+		'  ' +
+			code
+				// The generated output includes a full dump of everything
+				// in the store; the reader probably isn't interested in
+				// what that looks like, so instead we drop all of that
+				// in favor of the store generated above.
+				.replaceAll( /store=\{\{[\s\S]*?\}\}/g, 'store={ store }' )
+				// Now we tidy the output by removing any unnecessary
+				// whitespace...
+				.replaceAll( /<Composite\w+[\s\S]*?>/g, ( match ) =>
+					match.replaceAll( /\s+\s/g, ' ' )
+				)
+				// ...including around <Composite*> children...
+				.replaceAll(
+					/>\s*(\w[\w ]*?)\s*<\//g,
+					( _, value ) => `>${ value }</`
+				)
+				// ...and inside JSX definitions.
+				.replaceAll( '} >', '}>' )
+				// Finally we indent everything to make it more readable.
+				.replaceAll( /\n/g, '\n  ' ),
+		');',
+	].join( '\n' );
+}

package/src/composite/index.ts

@@ -1,22 +1,7 @@
-/**
- * Composite is a component that may contain navigable items represented by
- * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
- * all the keyboard navigation mechanisms to ensure that there's only one
- * tab stop for the whole Composite element. This means that it can behave as
- * a roving tabindex or aria-activedescendant container.
- *
- * @see https://reakit.io/docs/composite/
- *
- * The plan is to build own API that accounts for future breaking changes
- * in Reakit (https://github.com/WordPress/gutenberg/pull/28085).
- */
-/* eslint-disable-next-line no-restricted-imports */
-export {
-	Composite,
-	CompositeGroup,
-	CompositeItem,
-	useCompositeState,
-} from 'reakit';
+// Originally this pointed at a Reakit implementation of
+// `Composite`, but we are removing Reakit entirely from the
+// codebase. We will continue to support the Reakit API
+// through the 'legacy' version, which uses Ariakit under
+// the hood.
 
-/* eslint-disable-next-line no-restricted-imports */
-export type { CompositeStateReturn as CompositeState } from 'reakit';
+export * from './legacy';