@wordpress/components 28.3.0 → 28.5.0

package/src/toggle-control/README.md

@@ -15,6 +15,7 @@ const MyToggleControl = () => {
 
 	return (
 		<ToggleControl
+			__nextHasNoMarginBottom
 			label="Fixed Background"
 			help={
 				hasFixedBackground
@@ -78,3 +79,11 @@ The class that will be added with `components-base-control` and `components-togg
 
 -		Type: `String`
 -		Required: No
+
+### `__nextHasNoMarginBottom`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`

package/src/toggle-control/index.tsx

@@ -3,6 +3,7 @@
  */
 import type { ChangeEvent, ForwardedRef } from 'react';
 import { css } from '@emotion/react';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -22,27 +23,7 @@ import { HStack } from '../h-stack';
 import { useCx } from '../utils';
 import { space } from '../utils/space';
 
-/**
- * ToggleControl is used to generate a toggle user interface.
- *
- * ```jsx
- * import { ToggleControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyToggleControl = () => {
- *   const [ value, setValue ] = useState( false );
- *
- *   return (
- *     <ToggleControl
- *       label="Fixed Background"
- *       checked={ value }
- *       onChange={ () => setValue( ( state ) => ! state ) }
- *     />
- *   );
- * };
- * ```
- */
-export function ToggleControl(
+function UnforwardedToggleControl(
 	{
 		__nextHasNoMarginBottom,
 		label,
@@ -87,11 +68,17 @@ export function ToggleControl(
 	return (
 		<BaseControl
 			id={ id }
-			help={ helpLabel }
+			help={
+				helpLabel && (
+					<span className="components-toggle-control__help">
+						{ helpLabel }
+					</span>
+				)
+			}
 			className={ classes }
 			__nextHasNoMarginBottom
 		>
-			<HStack justify="flex-start" spacing={ 3 }>
+			<HStack justify="flex-start" spacing={ 2 }>
 				<FormToggle
 					id={ id }
 					checked={ checked }
@@ -103,7 +90,9 @@ export function ToggleControl(
 				<FlexBlock
 					as="label"
 					htmlFor={ id }
-					className="components-toggle-control__label"
+					className={ clsx( 'components-toggle-control__label', {
+						'is-disabled': disabled,
+					} ) }
 				>
 					{ label }
 				</FlexBlock>
@@ -112,4 +101,27 @@ export function ToggleControl(
 	);
 }
 
-export default forwardRef( ToggleControl );
+/**
+ * ToggleControl is used to generate a toggle user interface.
+ *
+ * ```jsx
+ * import { ToggleControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyToggleControl = () => {
+ *   const [ value, setValue ] = useState( false );
+ *
+ *   return (
+ *     <ToggleControl
+ *       __nextHasNoMarginBottom
+ *       label="Fixed Background"
+ *       checked={ value }
+ *       onChange={ () => setValue( ( state ) => ! state ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export const ToggleControl = forwardRef( UnforwardedToggleControl );
+
+export default ToggleControl;

package/src/toggle-control/style.scss

@@ -0,0 +1,12 @@
+.components-toggle-control__label {
+	line-height: $toggle-height;
+
+	&:not(.is-disabled) {
+		cursor: pointer;
+	}
+}
+
+.components-toggle-control__help {
+	display: inline-block;
+	margin-inline-start: $toggle-width + $grid-unit-10;
+}

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -33,7 +33,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
@@ -132,6 +132,11 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   border: 0;
 }
 
+.emotion-12[disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+
 .emotion-12:active {
   background: #fff;
 }
@@ -213,6 +218,11 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   border: 0;
 }
 
+.emotion-18[disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+
 .emotion-18:active {
   background: #fff;
 }
@@ -238,7 +248,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
         class="components-toggle-group-control emotion-8 emotion-9"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-as-radio-group-10"
+        id="toggle-group-control-as-radio-group-11"
         role="radiogroup"
       >
         <div
@@ -248,11 +258,11 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             aria-checked="true"
             aria-label="Uppercase"
             class="emotion-12 components-toggle-group-control-option-base"
-            data-active-item=""
+            data-active-item="true"
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-10-24"
+            id="toggle-group-control-as-radio-group-11-30"
             role="radio"
             type="button"
             value="uppercase"
@@ -291,7 +301,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-10-25"
+            id="toggle-group-control-as-radio-group-11-31"
             role="radio"
             type="button"
             value="lowercase"
@@ -359,7 +369,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
@@ -452,6 +462,11 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   border: 0;
 }
 
+.emotion-12[disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+
 .emotion-12:active {
   background: #fff;
 }
@@ -486,7 +501,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
         class="components-toggle-group-control emotion-8 emotion-9"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-as-radio-group-9"
+        id="toggle-group-control-as-radio-group-10"
         role="radiogroup"
       >
         <div
@@ -499,7 +514,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-value="rigas"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-9-22"
+            id="toggle-group-control-as-radio-group-10-28"
             role="radio"
             type="button"
             value="rigas"
@@ -521,7 +536,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-value="jack"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-9-23"
+            id="toggle-group-control-as-radio-group-10-29"
             role="radio"
             type="button"
             value="jack"
@@ -578,7 +593,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
@@ -677,6 +692,11 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   border: 0;
 }
 
+.emotion-12[disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+
 .emotion-12:active {
   background: #fff;
 }
@@ -758,6 +778,11 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   border: 0;
 }
 
+.emotion-18[disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+
 .emotion-18:active {
   background: #fff;
 }
@@ -793,7 +818,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             aria-checked="true"
             aria-label="Uppercase"
             class="emotion-12 components-toggle-group-control-option-base"
-            data-active-item=""
+            data-active-item="true"
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -898,7 +923,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
@@ -991,6 +1016,11 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   border: 0;
 }
 
+.emotion-12[disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+
 .emotion-12:active {
   background: #fff;
 }

package/src/toggle-group-control/test/index.tsx

@@ -80,6 +80,13 @@ const optionsWithTooltip = (
 		/>
 	</>
 );
+const optionsWithDisabledOption = (
+	<>
+		<ToggleGroupControlOption value="pizza" label="Pizza" />
+		<ToggleGroupControlOption value="rice" label="Rice" disabled />
+		<ToggleGroupControlOption value="pasta" label="Pasta" />
+	</>
+);
 
 describe.each( [
 	[ 'uncontrolled', ToggleGroupControl ],
@@ -334,11 +341,9 @@ describe.each( [
 					name: 'R',
 				} );
 
-				await sleep();
 				await press.Tab();
 				expect( rigas ).toHaveFocus();
 
-				await sleep();
 				await press.Tab();
 
 				// When in controlled mode, there is an additional "Reset" button.
@@ -351,6 +356,52 @@ describe.each( [
 
 				expect( expectedFocusTarget ).toHaveFocus();
 			} );
+
+			it( 'should ignore disabled radio options', async () => {
+				const mockOnChange = jest.fn();
+
+				render(
+					<Component
+						value="pizza"
+						onChange={ mockOnChange }
+						label="Test Toggle Group Control"
+					>
+						{ optionsWithDisabledOption }
+					</Component>
+				);
+
+				await press.Tab();
+
+				expect(
+					screen.getByRole( 'radio', { name: 'Pizza' } )
+				).toBeChecked();
+				expect(
+					screen.getByRole( 'radio', { name: 'Rice' } )
+				).toBeDisabled();
+
+				// Arrow navigation skips the disabled option
+				await press.ArrowRight();
+				expect(
+					screen.getByRole( 'radio', { name: 'Pasta' } )
+				).toBeChecked();
+				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+				expect( mockOnChange ).toHaveBeenLastCalledWith( 'pasta' );
+
+				// Arrow navigation skips the disabled option
+				await press.ArrowLeft();
+				expect(
+					screen.getByRole( 'radio', { name: 'Pizza' } )
+				).toBeChecked();
+				expect( mockOnChange ).toHaveBeenCalledTimes( 2 );
+				expect( mockOnChange ).toHaveBeenLastCalledWith( 'pizza' );
+
+				// Clicks don't cause the option to be selected
+				await click( screen.getByRole( 'radio', { name: 'Rice' } ) );
+				expect(
+					screen.getByRole( 'radio', { name: 'Pizza' } )
+				).toBeChecked();
+				expect( mockOnChange ).toHaveBeenCalledTimes( 2 );
+			} );
 		} );
 
 		describe( 'isDeselectable = true', () => {
@@ -394,7 +445,6 @@ describe.each( [
 					</Component>
 				);
 
-				await sleep();
 				await press.Tab();
 				expect(
 					screen.getByRole( 'button', {
@@ -403,7 +453,6 @@ describe.each( [
 					} )
 				).toHaveFocus();
 
-				await sleep();
 				await press.Tab();
 				expect(
 					screen.getByRole( 'button', {
@@ -421,6 +470,65 @@ describe.each( [
 					} )
 				).toHaveFocus();
 			} );
+
+			it( 'should ignore disabled options', async () => {
+				const mockOnChange = jest.fn();
+
+				render(
+					<Component
+						value="pizza"
+						isDeselectable
+						onChange={ mockOnChange }
+						label="Test Toggle Group Control"
+					>
+						{ optionsWithDisabledOption }
+					</Component>
+				);
+
+				await press.Tab();
+
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Pizza',
+						pressed: true,
+					} )
+				).toBeVisible();
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Rice',
+						pressed: false,
+					} )
+				).toBeDisabled();
+
+				// Tab key navigation skips the disabled option
+				await press.Tab();
+				await press.Space();
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Pasta',
+						pressed: true,
+					} )
+				).toHaveFocus();
+				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+				expect( mockOnChange ).toHaveBeenLastCalledWith( 'pasta' );
+
+				// Tab key navigation skips the disabled option
+				await press.ShiftTab();
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Pizza',
+						pressed: false,
+					} )
+				).toHaveFocus();
+
+				// Clicks don't cause the option to be selected.
+				await click(
+					screen.getByRole( 'button', {
+						name: 'Rice',
+					} )
+				);
+				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+			} );
 		} );
 	} );
 } );

package/src/toggle-group-control/toggle-group-control/README.md

@@ -20,7 +20,12 @@ import {
 
 function Example() {
 	return (
-		<ToggleGroupControl label="my label" value="vertical" isBlock>
+		<ToggleGroupControl
+			label="my label"
+			value="vertical"
+			isBlock
+			__nextHasNoMarginBottom
+		>
 			<ToggleGroupControlOption value="horizontal" label="Horizontal" />
 			<ToggleGroupControlOption value="vertical" label="Vertical" />
 		</ToggleGroupControl>
@@ -82,3 +87,10 @@ Callback when a segment is selected.
 The value of the `ToggleGroupControl`.
 
 -   Required: No
+
+### `__nextHasNoMarginBottom`: `boolean`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Required: No
+-   Default: `false`

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -115,7 +115,12 @@ function UnconnectedToggleGroupControl(
  *
  * function Example() {
  *   return (
- *     <ToggleGroupControl label="my label" value="vertical" isBlock>
+ *     <ToggleGroupControl
+ *       label="my label"
+ *       value="vertical"
+ *       isBlock
+ *       __nextHasNoMarginBottom
+ *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />
  *     </ToggleGroupControl>

package/src/toggle-group-control/toggle-group-control-option/README.md

@@ -17,7 +17,12 @@ import {
 
 function Example() {
 	return (
-		<ToggleGroupControl label="my label" value="vertical" isBlock>
+		<ToggleGroupControl
+			label="my label"
+			value="vertical"
+			isBlock
+			__nextHasNoMarginBottom
+		>
 			<ToggleGroupControlOption
 				value="horizontal"
 				label="Horizontal"

package/src/toggle-group-control/toggle-group-control-option/component.tsx

@@ -48,7 +48,12 @@ function UnforwardedToggleGroupControlOption(
  *
  * function Example() {
  *   return (
- *     <ToggleGroupControl label="my label" value="vertical" isBlock>
+ *     <ToggleGroupControl
+ *       label="my label"
+ *       value="vertical"
+ *       isBlock
+ *       __nextHasNoMarginBottom
+ *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />
  *     </ToggleGroupControl>

package/src/toggle-group-control/toggle-group-control-option-base/component.tsx

@@ -52,7 +52,9 @@ function ToggleGroupControlOptionBase(
 			false
 		>,
 		// the element's id is generated internally
-		'id'
+		| 'id'
+		// due to how the component works, only the `disabled` prop should be used
+		| 'aria-disabled'
 	>,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -82,6 +84,7 @@ function ToggleGroupControlOptionBase(
 		children,
 		showTooltip = false,
 		onFocus: onFocusProp,
+		disabled,
 		...otherButtonProps
 	} = buttonProps;
 
@@ -130,6 +133,7 @@ function ToggleGroupControlOptionBase(
 				{ isDeselectable ? (
 					<button
 						{ ...commonProps }
+						disabled={ disabled }
 						onFocus={ onFocusProp }
 						aria-pressed={ isPressed }
 						type="button"
@@ -139,6 +143,7 @@ function ToggleGroupControlOptionBase(
 					</button>
 				) : (
 					<Ariakit.Radio
+						disabled={ disabled }
 						render={
 							<button
 								type="button"

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -64,6 +64,11 @@ export const buttonView = ( {
 		border: 0;
 	}
 
+	&[disabled] {
+		opacity: 0.4;
+		cursor: default;
+	}
+
 	&:active {
 		background: ${ CONFIG.toggleGroupControlBackgroundColor };
 	}

package/src/toggle-group-control/toggle-group-control-option-icon/README.md

@@ -17,7 +17,7 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 function Example() {
 	return (
-		<ToggleGroupControl>
+		<ToggleGroupControl __nextHasNoMarginBottom>
 			<ToggleGroupControlOptionIcon
 				value="uppercase"
 				icon={ formatUppercase }

package/src/toggle-group-control/toggle-group-control-option-icon/component.tsx

@@ -51,20 +51,20 @@ function UnforwardedToggleGroupControlOptionIcon(
  * import { formatLowercase, formatUppercase } from '@wordpress/icons';
  *
  * function Example() {
- *	return (
- *		<ToggleGroupControl>
- *			<ToggleGroupControlOptionIcon
- *				value="uppercase"
- *				label="Uppercase"
- *				icon={ formatUppercase }
- *			/>
- *			<ToggleGroupControlOptionIcon
- *				value="lowercase"
- *				label="Lowercase"
- *				icon={ formatLowercase }
- *			/>
- *		</ToggleGroupControl>
- *	);
+ *  return (
+ *    <ToggleGroupControl __nextHasNoMarginBottom>
+ *      <ToggleGroupControlOptionIcon
+ *        value="uppercase"
+ *        label="Uppercase"
+ *        icon={ formatUppercase }
+ *      />
+ *      <ToggleGroupControlOptionIcon
+ *        value="lowercase"
+ *        label="Lowercase"
+ *        icon={ formatLowercase }
+ *      />
+ *    </ToggleGroupControl>
+ *  );
  * }
  * ```
  */

package/src/tools-panel/tools-panel-header/component.tsx

@@ -200,7 +200,7 @@ const ToolsPanelHeader = (
 					menuProps={ { className: dropdownMenuClassName } }
 					toggleProps={ {
 						size: 'small',
-						describedBy: dropdownMenuDescriptionText,
+						description: dropdownMenuDescriptionText,
 					} }
 				>
 					{ () => (

package/src/tooltip/index.tsx

@@ -13,6 +13,7 @@ import {
 	useContext,
 	createContext,
 	forwardRef,
+	cloneElement,
 } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 
@@ -92,6 +93,7 @@ function UnforwardedTooltip(
 		placement: computedPlacement,
 		showTimeout: delay,
 	} );
+	const mounted = tooltipStore.useState( 'mounted' );
 
 	if ( isNestedInTooltip ) {
 		return isOnlyChild ? (
@@ -101,12 +103,24 @@ function UnforwardedTooltip(
 		);
 	}
 
+	// TODO: this is a temporary workaround to minimize the effects of the
+	// Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to
+	// the tooltip anchor anymore since 0.4.0, so we need to add it manually.
+	// See: https://github.com/WordPress/gutenberg/pull/64066
+	function addDescribedById( element: React.ReactElement ) {
+		return describedById && mounted
+			? cloneElement( element, { 'aria-describedby': describedById } )
+			: element;
+	}
+
 	return (
 		<TooltipInternalContext.Provider value={ CONTEXT_VALUE }>
 			<Ariakit.TooltipAnchor
 				onClick={ hideOnClick ? tooltipStore.hide : undefined }
 				store={ tooltipStore }
-				render={ isOnlyChild ? children : undefined }
+				render={
+					isOnlyChild ? addDescribedById( children ) : undefined
+				}
 				ref={ ref }
 			>
 				{ isOnlyChild ? undefined : children }
@@ -135,7 +149,6 @@ function UnforwardedTooltip(
 		</TooltipInternalContext.Provider>
 	);
 }
-
 export const Tooltip = forwardRef( UnforwardedTooltip );
 
 export default Tooltip;