Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ToolbarButton: Deprecate isDisabled prop and merge with disabled #63101

Merged
merged 4 commits into from
Jul 3, 2024
Merged

ToolbarButton: Deprecate isDisabled prop and merge with disabled #63101

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3840a45
ToolbarButton: Deprecate `isDisabled` prop and merge with `disabled`
mirka Jul 2, 2024
cc441ed
Migrate `isDisabled` usage in codebase
mirka Jul 3, 2024
0836192
Add changelog
mirka Jul 3, 2024
8472e7a
Merge branch 'trunk' into fix/toolbar-button-disabled
mirka Jul 3, 2024
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/grid/grid-item-movers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/list-item/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export function IndentUI( { clientId } ) {
icon={ isRTL() ? formatIndentRTL : formatIndent }
title={ __( 'Indent' ) }
describedBy={ __( 'Indent list item' ) }
isDisabled={ ! canIndent }
disabled={ ! canIndent }
onClick={ () => indentListItem() }
/>
</>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/navigation-submenu/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
- `useUpdateEffect`: Correctly track mounted state in strict mode. ([#62974](https://github.com/WordPress/gutenberg/pull/62974))
- `UnitControl`: Fix an issue where keyboard shortcuts unintentionally shift focus on Windows OS. ([#62988](https://github.com/WordPress/gutenberg/pull/62988))

### 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))
Expand Down
40 changes: 24 additions & 16 deletions packages/components/src/toolbar/toolbar-button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,51 +19,60 @@ 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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unrelated, but what is this comment about? 🤔
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The onClick function written here will be overridden by the consumer's onClick function passed through with the restProps 🙃
if ( restProps.onClick ) {
restProps.onClick( event );
}
} }
className={ clsx(
'components-toolbar__control',
className
) }
isPressed={ isActive }
disabled={ isDisabled }
data-toolbar-item
{ ...extraProps }
{ ...props }
{ ...restProps }
>
{ children }
</Button>
Expand All @@ -78,14 +87,13 @@ function UnforwardedToolbarButton(
<ToolbarItem
className={ clsx( 'components-toolbar-button', className ) }
{ ...extraProps }
{ ...props }
{ ...restProps }
ref={ ref }
>
{ ( toolbarItemProps ) => (
<Button
label={ title }
isPressed={ isActive }
disabled={ isDisabled }
{ ...toolbarItemProps }
>
{ children }
Expand Down
3 changes: 3 additions & 0 deletions packages/components/src/toolbar/toolbar-button/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ export type ToolbarButtonProps = {
isActive?: boolean;
/**
* Indicates if the button is disabled.
*
* @deprecated Use `disabled` instead.
* @ignore
*/
isDisabled?: boolean;
/**
Expand Down
Loading