From f020aeca42a6b5a2b7ba151e2a4427a3b9a20913 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 4 Jul 2024 03:48:03 +0900 Subject: [PATCH] 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 <0mirka00@git.wordpress.org> Co-authored-by: ciampo --- .../src/components/grid/grid-item-movers.js | 8 ++-- packages/block-library/src/list-item/edit.js | 2 +- .../src/navigation-submenu/edit.js | 2 +- packages/components/CHANGELOG.md | 4 ++ .../src/toolbar/toolbar-button/index.tsx | 44 ++++++++++--------- .../src/toolbar/toolbar-button/types.ts | 3 ++ 6 files changed, 37 insertions(+), 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 index 4f1d3853568fda..ed8e35c201f7e0 100644 --- 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( { { onChange( { rowStart: rowStart - 1, @@ -66,7 +66,7 @@ export function GridItemMovers( { = rowCount } + disabled={ rowCount && rowEnd >= rowCount } onClick={ () => { onChange( { rowStart: rowStart + 1, @@ -86,7 +86,7 @@ export function GridItemMovers( { { onChange( { columnStart: columnStartNumber - 1, @@ -106,7 +106,7 @@ export function GridItemMovers( { = 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 index 42a8bb5551319c..71be31c03c0f8f 100644 --- 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 index bbba77707e8159..4decc2e68ffbbb 100644 --- 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 } /> diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 2f8da9ba0ec0d5..a0d4bef9293116 100644 --- 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 index 05278bb37ba97c..48f385fa1abaff 100644 --- a/packages/components/src/toolbar/toolbar-button/index.tsx +++ b/packages/components/src/toolbar/toolbar-button/index.tsx @@ -19,19 +19,29 @@ 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 ) { @@ -39,10 +49,10 @@ function UnforwardedToolbarButton( @@ -79,18 +88,13 @@ function UnforwardedToolbarButton( { ( toolbarItemProps ) => (