From 40bcb706bf0765d4bd5ef55638132134957dfeb2 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 4 Jul 2024 00:55:45 +0900 Subject: [PATCH 1/5] ToolbarButton: Always keep focusable when disabled --- packages/components/src/toolbar/toolbar-item/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/toolbar/toolbar-item/index.tsx b/packages/components/src/toolbar/toolbar-item/index.tsx index 2c343eb173a27..7f4ccb7f659cd 100644 --- a/packages/components/src/toolbar/toolbar-item/index.tsx +++ b/packages/components/src/toolbar/toolbar-item/index.tsx @@ -50,6 +50,7 @@ function ToolbarItem( return ( Date: Thu, 4 Jul 2024 05:49:06 +0900 Subject: [PATCH 2/5] Omit `__experimentalIsFocusable` from TS types --- .../components/src/toolbar/toolbar-button/index.tsx | 9 +++++++-- .../components/src/toolbar/toolbar-button/types.ts | 10 ++++++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/components/src/toolbar/toolbar-button/index.tsx b/packages/components/src/toolbar/toolbar-button/index.tsx index 48f385fa1abaf..ce3479b275b43 100644 --- a/packages/components/src/toolbar/toolbar-button/index.tsx +++ b/packages/components/src/toolbar/toolbar-button/index.tsx @@ -16,7 +16,7 @@ import Button from '../../button'; import ToolbarItem from '../toolbar-item'; import ToolbarContext from '../toolbar-context'; import ToolbarButtonContainer from './toolbar-button-container'; -import type { ToolbarButtonProps } from './types'; +import type { ToolbarButtonDeprecatedProps, ToolbarButtonProps } from './types'; import type { WordPressComponentProps } from '../../context'; function useDeprecatedProps( { @@ -30,7 +30,11 @@ function useDeprecatedProps( { } function UnforwardedToolbarButton( - props: WordPressComponentProps< ToolbarButtonProps, typeof Button, false >, + props: Omit< + WordPressComponentProps< ToolbarButtonProps, typeof Button, false >, + '__experimentalIsFocusable' // ToolbarButton will always be focusable. + > & + ToolbarButtonDeprecatedProps, ref: ForwardedRef< any > ) { const { @@ -111,6 +115,7 @@ function UnforwardedToolbarButton( * ```jsx * import { Toolbar, ToolbarButton } from '@wordpress/components'; * import { edit } from '@wordpress/icons'; + import { __ } from '../../../../i18n/build-types/create-i18n'; * * function MyToolbar() { * return ( diff --git a/packages/components/src/toolbar/toolbar-button/types.ts b/packages/components/src/toolbar/toolbar-button/types.ts index bcd349c0d8936..a3c8e1df9e85a 100644 --- a/packages/components/src/toolbar/toolbar-button/types.ts +++ b/packages/components/src/toolbar/toolbar-button/types.ts @@ -37,6 +37,16 @@ export type ToolbarButtonProps = { title?: string; }; +export type ToolbarButtonDeprecatedProps = { + /** + * Whether to keep the button focusable when disabled. + * + * @deprecated ToolbarButton will always be focusable. + * @ignore + */ + __experimentalIsFocusable?: boolean; +}; + export type ToolbarButtonContainerProps = { /** * Children to be rendered inside the button container. From 96670675f79c15752ef8a0b293d0cd275e789fd7 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 4 Jul 2024 06:11:55 +0900 Subject: [PATCH 3/5] Fixup --- packages/components/src/toolbar/toolbar-button/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/toolbar/toolbar-button/index.tsx b/packages/components/src/toolbar/toolbar-button/index.tsx index ce3479b275b43..31ceec9ee56c2 100644 --- a/packages/components/src/toolbar/toolbar-button/index.tsx +++ b/packages/components/src/toolbar/toolbar-button/index.tsx @@ -115,7 +115,6 @@ function UnforwardedToolbarButton( * ```jsx * import { Toolbar, ToolbarButton } from '@wordpress/components'; * import { edit } from '@wordpress/icons'; - import { __ } from '../../../../i18n/build-types/create-i18n'; * * function MyToolbar() { * return ( From 1ad5d4282edd28b5043481b91b75cdd7b6f0bf3e Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 4 Jul 2024 06:14:35 +0900 Subject: [PATCH 4/5] Add changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a0d4bef929311..ab79666d24170 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -12,6 +12,7 @@ ### Enhancements - `ToolbarButton`: Deprecate `isDisabled` prop and merge with `disabled` ([#63101](https://github.com/WordPress/gutenberg/pull/63101)). +- `ToolbarButton`: Always keep focusable when disabled ([#63102](https://github.com/WordPress/gutenberg/pull/63102)). ### Internal From a5b11ebf3d8c49742077281b2eee5d2ab79635b3 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 4 Jul 2024 19:09:38 +0900 Subject: [PATCH 5/5] Clarify deprecation comment Co-authored-by: Marco Ciampini --- packages/components/src/toolbar/toolbar-button/index.tsx | 2 +- packages/components/src/toolbar/toolbar-button/types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/toolbar/toolbar-button/index.tsx b/packages/components/src/toolbar/toolbar-button/index.tsx index 31ceec9ee56c2..a8967df75690c 100644 --- a/packages/components/src/toolbar/toolbar-button/index.tsx +++ b/packages/components/src/toolbar/toolbar-button/index.tsx @@ -32,7 +32,7 @@ function useDeprecatedProps( { function UnforwardedToolbarButton( props: Omit< WordPressComponentProps< ToolbarButtonProps, typeof Button, false >, - '__experimentalIsFocusable' // ToolbarButton will always be focusable. + '__experimentalIsFocusable' // ToolbarButton will always be focusable even when disabled. > & ToolbarButtonDeprecatedProps, ref: ForwardedRef< any > diff --git a/packages/components/src/toolbar/toolbar-button/types.ts b/packages/components/src/toolbar/toolbar-button/types.ts index a3c8e1df9e85a..59965e66d1347 100644 --- a/packages/components/src/toolbar/toolbar-button/types.ts +++ b/packages/components/src/toolbar/toolbar-button/types.ts @@ -41,7 +41,7 @@ export type ToolbarButtonDeprecatedProps = { /** * Whether to keep the button focusable when disabled. * - * @deprecated ToolbarButton will always be focusable. + * @deprecated ToolbarButton will always be focusable even when disabled. * @ignore */ __experimentalIsFocusable?: boolean;