ToolbarButton: Deprecate isDisabled prop and merge with disabled (#…

…63101) * ToolbarButton: Deprecate `isDisabled` prop and merge with `disabled` # Conflicts: # packages/components/src/toolbar/toolbar-button/index.tsx * Migrate `isDisabled` usage in codebase * Add changelog Co-authored-by: mirka <[email protected]> Co-authored-by: ciampo <[email protected]>
WordPress · Jul 3, 2024 · f020aec · f020aec
1 parent 750f1db
commit f020aec
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 26 deletions.
diff --git a/packages/block-editor/src/components/grid/grid-item-movers.js b/packages/block-editor/src/components/grid/grid-item-movers.js
@@ -46,7 +46,7 @@ export function GridItemMovers( {
 			<ToolbarButton
 				icon={ arrowUp }
 				label={ __( 'Move block up' ) }
-				isDisabled={ rowStart <= 1 }
+				disabled={ rowStart <= 1 }
 				onClick={ () => {
 					onChange( {
 						rowStart: rowStart - 1,
@@ -66,7 +66,7 @@ export function GridItemMovers( {
 			<ToolbarButton
 				icon={ arrowDown }
 				label={ __( 'Move block down' ) }
-				isDisabled={ rowCount && rowEnd >= rowCount }
+				disabled={ rowCount && rowEnd >= rowCount }
 				onClick={ () => {
 					onChange( {
 						rowStart: rowStart + 1,
@@ -86,7 +86,7 @@ export function GridItemMovers( {
 			<ToolbarButton
 				icon={ arrowLeft }
 				label={ __( 'Move block left' ) }
-				isDisabled={ columnStart <= 1 }
+				disabled={ columnStart <= 1 }
 				onClick={ () => {
 					onChange( {
 						columnStart: columnStartNumber - 1,
@@ -106,7 +106,7 @@ export function GridItemMovers( {
 			<ToolbarButton
 				icon={ arrowRight }
 				label={ __( 'Move block right' ) }
-				isDisabled={ columnCount && columnEnd >= columnCount }
+				disabled={ columnCount && columnEnd >= columnCount }
 				onClick={ () => {
 					onChange( {
 						columnStart: columnStartNumber + 1,

diff --git a/packages/block-library/src/list-item/edit.js b/packages/block-library/src/list-item/edit.js
@@ -61,7 +61,7 @@ export function IndentUI( { clientId } ) {
 				icon={ isRTL() ? formatIndentRTL : formatIndent }
 				title={ __( 'Indent' ) }
 				describedBy={ __( 'Indent list item' ) }
-				isDisabled={ ! canIndent }
+				disabled={ ! canIndent }
 				onClick={ () => indentListItem() }
 			/>
 		</>

diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
@@ -387,7 +387,7 @@ export default function NavigationSubmenuEdit( {
 						title={ __( 'Convert to Link' ) }
 						onClick={ transformToLink }
 						className="wp-block-navigation__submenu__revert"
-						isDisabled={ ! canConvertToLink }
+						disabled={ ! canConvertToLink }
 					/>
 				</ToolbarGroup>
 			</BlockControls>

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -9,6 +9,10 @@
 -   `UnitControl`: Fix an issue where keyboard shortcuts unintentionally shift focus on Windows OS. ([#62988](https://github.com/WordPress/gutenberg/pull/62988))
 -   Fix inaccessibly disabled `Button`s ([#62306](https://github.com/WordPress/gutenberg/pull/62306)).
 
+### Enhancements
+
+-   `ToolbarButton`: Deprecate `isDisabled` prop and merge with `disabled` ([#63101](https://github.com/WordPress/gutenberg/pull/63101)).
+
 ### Internal
 
 -   `CustomSelectControlV2`: prevent keyboard event propagation in legacy wrapper. ([#62907](https://github.com/WordPress/gutenberg/pull/62907))

diff --git a/packages/components/src/toolbar/toolbar-button/index.tsx b/packages/components/src/toolbar/toolbar-button/index.tsx
@@ -19,40 +19,50 @@ import ToolbarButtonContainer from './toolbar-button-container';
 import type { ToolbarButtonProps } from './types';
 import type { WordPressComponentProps } from '../../context';
 
+function useDeprecatedProps( {
+	isDisabled,
+	...otherProps
+}: React.ComponentProps< typeof ToolbarButton > ) {
+	return {
+		disabled: isDisabled,
+		...otherProps,
+	};
+}
+
 function UnforwardedToolbarButton(
-	{
+	props: WordPressComponentProps< ToolbarButtonProps, typeof Button, false >,
+	ref: ForwardedRef< any >
+) {
+	const {
 		children,
 		className,
 		containerClassName,
 		extraProps,
 		isActive,
-		isDisabled,
 		title,
-		...props
-	}: WordPressComponentProps< ToolbarButtonProps, typeof Button, false >,
-	ref: ForwardedRef< any >
-) {
+		...restProps
+	} = useDeprecatedProps( props );
 	const accessibleToolbarState = useContext( ToolbarContext );
 
 	if ( ! accessibleToolbarState ) {
 		return (
 			<ToolbarButtonContainer className={ containerClassName }>
 				<Button
 					ref={ ref }
-					icon={ props.icon }
+					icon={ restProps.icon }
 					label={ title }
-					shortcut={ props.shortcut }
-					data-subscript={ props.subscript }
+					shortcut={ restProps.shortcut }
+					data-subscript={ restProps.subscript }
 					onClick={ (
 						event: ReactMouseEvent<
 							HTMLButtonElement & HTMLAnchorElement,
 							MouseEvent
 						>
 					) => {
 						event.stopPropagation();
-						// TODO: Possible bug; maybe use onClick instead of props.onClick.
-						if ( props.onClick ) {
-							props.onClick( event );
+						// TODO: Possible bug; maybe use onClick instead of restProps.onClick.
+						if ( restProps.onClick ) {
+							restProps.onClick( event );
 						}
 					} }
 					className={ clsx(
@@ -61,10 +71,9 @@ function UnforwardedToolbarButton(
 					) }
 					isPressed={ isActive }
 					__experimentalIsFocusable
-					disabled={ isDisabled }
 					data-toolbar-item
 					{ ...extraProps }
-					{ ...props }
+					{ ...restProps }
 				>
 					{ children }
 				</Button>
@@ -79,18 +88,13 @@ function UnforwardedToolbarButton(
 		<ToolbarItem
 			className={ clsx( 'components-toolbar-button', className ) }
 			{ ...extraProps }
-			{ ...props }
+			{ ...restProps }
 			ref={ ref }
 		>
 			{ ( toolbarItemProps ) => (
 				<Button
 					label={ title }
 					isPressed={ isActive }
-					// TODO: Should be focusable disabled, but adding `__experimentalIsFocusable` will trigger a
-					// focus bug when ToolbarButton is disabled via the `disabled` prop.
-					// Must address first: https://github.com/WordPress/gutenberg/issues/63070
-					// eslint-disable-next-line no-restricted-syntax
-					disabled={ isDisabled }
 					{ ...toolbarItemProps }
 				>
 					{ children }

diff --git a/packages/components/src/toolbar/toolbar-button/types.ts b/packages/components/src/toolbar/toolbar-button/types.ts
@@ -22,6 +22,9 @@ export type ToolbarButtonProps = {
 	isActive?: boolean;
 	/**
 	 * Indicates if the button is disabled.
+	 *
+	 * @deprecated Use `disabled` instead.
+	 * @ignore
 	 */
 	isDisabled?: boolean;
 	/**