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

Deprecate ToolbarButton props #22637

Closed
wants to merge 6 commits into from
Closed

Deprecate ToolbarButton props #22637

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9b7cc07
Deprecate ToolbarButton props
diegohaz May 26, 2020
eea6a31
Update deprecated ToolbarButton props usage
diegohaz May 26, 2020
dd1ebd5
Normalize ToolbarGroup controls API
diegohaz May 26, 2020
a7f5608
Update Toolbar stories
diegohaz May 26, 2020
ebd122c
Revert change on RichTextToolbarButton
diegohaz May 28, 2020
b786caa
Translate ToolbarButtons into DropdownMenu controls on FormatToolbar
diegohaz May 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions packages/block-editor/src/components/rich-text/format-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,17 @@ const POPOVER_PROPS = {
isAlternate: true,
};

function translateToolbarButtonProps( { label, isPressed, ...props } ) {
return { title: label, isActive: isPressed, ...props };
}

function getFillsProps( fills ) {
return orderBy(
fills.map( ( [ { props } ] ) => translateToolbarButtonProps( props ) ),
'label'
);
}

const FormatToolbar = () => {
return (
<div className="block-editor-format-toolbar">
Expand All @@ -45,12 +56,7 @@ const FormatToolbar = () => {
'More rich text controls'
) }
toggleProps={ toggleProps }
controls={ orderBy(
fills.map(
( [ { props } ] ) => props
),
'title'
) }
controls={ getFillsProps( fills ) }
popoverProps={ POPOVER_PROPS }
/>
) }
Expand Down
9 changes: 8 additions & 1 deletion packages/block-editor/src/components/rich-text/toolbar-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ export function RichTextToolbarButton( {
name,
shortcutType,
shortcutCharacter,
title,
isActive,
...props
} ) {
let shortcut;
Expand All @@ -23,7 +25,12 @@ export function RichTextToolbarButton( {

return (
<Fill name={ fillName }>
<ToolbarButton { ...props } shortcut={ shortcut } />
<ToolbarButton
label={ title }
isPressed={ isActive }
{ ...props }
shortcut={ shortcut }
/>
</Fill>
);
}
2 changes: 1 addition & 1 deletion packages/block-library/src/button/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ function URLPicker( {
<ToolbarButton
name="link"
icon={ link }
title={ __( 'Link' ) }
label={ __( 'Link' ) }
shortcut={ displayShortcut.primary( 'k' ) }
onClick={ openLinkControl }
/>
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/navigation-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,14 +149,14 @@ function NavigationLinkEdit( {
<ToolbarButton
name="link"
icon={ linkIcon }
title={ __( 'Link' ) }
label={ __( 'Link' ) }
shortcut={ displayShortcut.primary( 'k' ) }
onClick={ () => setIsLinkOpen( true ) }
/>
<ToolbarButton
name="submenu"
icon={ <ToolbarSubmenuIcon /> }
title={ __( 'Add submenu' ) }
label={ __( 'Add submenu' ) }
onClick={ insertLinkBlock }
/>
</ToolbarGroup>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/post-date/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ function PostDateEditor( { format, setAttributes } ) {
<ToolbarGroup>
<ToolbarButton
icon="edit"
title={ __( 'Change Date' ) }
label={ __( 'Change Date' ) }
onClick={ () =>
setIsPickerOpen(
( _isPickerOpen ) => ! _isPickerOpen
Expand Down
22 changes: 22 additions & 0 deletions packages/components/src/toolbar-button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { useContext } from '@wordpress/element';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
Expand All @@ -28,6 +29,25 @@ function ToolbarButton( {
} ) {
const accessibleToolbarState = useContext( ToolbarContext );

if ( extraProps ) {
deprecated( 'ToolbarButton extraProps prop', {
hint:
'You can pass extra Button props directly to the ToolbarButton component instead.',
} );
}

if ( title ) {
deprecated( 'ToolbarButton title prop', {
alternative: 'label',
} );
}

if ( isActive !== undefined ) {
deprecated( 'ToolbarButton isActive prop', {
alternative: 'isPressed',
} );
}

if ( ! accessibleToolbarState ) {
// This should be deprecated when <Toolbar __experimentalAccessibilityLabel="label">
// becomes stable.
Expand All @@ -52,6 +72,7 @@ function ToolbarButton( {
disabled={ isDisabled }
data-experimental-toolbar-item
{ ...extraProps }
{ ...props }
>
{ children }
</Button>
Expand All @@ -65,6 +86,7 @@ function ToolbarButton( {
return (
<ToolbarItem
className={ classnames( 'components-toolbar-button', className ) }
{ ...extraProps }
{ ...props }
>
{ ( toolbarItemProps ) => (
Expand Down
31 changes: 20 additions & 11 deletions packages/components/src/toolbar-group/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,17 +94,26 @@ function ToolbarGroup( {
return (
<ToolbarGroupContainer className={ finalClassName } { ...props }>
{ flatMap( controlSets, ( controlSet, indexOfSet ) =>
controlSet.map( ( control, indexOfControl ) => (
<ToolbarButton
key={ [ indexOfSet, indexOfControl ].join() }
containerClassName={
indexOfSet > 0 && indexOfControl === 0
? 'has-left-divider'
: null
}
{ ...control }
/>
) )
controlSet.map( ( control, indexOfControl ) => {
const {
title: controlTitle,
isActive,
...controlProps
} = control;
return (
<ToolbarButton
key={ [ indexOfSet, indexOfControl ].join() }
containerClassName={
indexOfSet > 0 && indexOfControl === 0
? 'has-left-divider'
: null
}
label={ controlTitle }
isPressed={ isActive }
{ ...controlProps }
/>
);
} )
) }
{ children }
</ToolbarGroupContainer>
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/toolbar-group/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ export default { title: 'Components/ToolbarGroup', component: ToolbarGroup };
export const _default = () => {
return (
<ToolbarGroup>
<ToolbarButton icon={ formatBold } title="Bold" isActive />
<ToolbarButton icon={ formatItalic } title="Italic" />
<ToolbarButton icon={ link } title="Link" />
<ToolbarButton icon={ formatBold } label="Bold" isPressed />
<ToolbarButton icon={ formatItalic } label="Italic" />
<ToolbarButton icon={ link } label="Link" />
</ToolbarGroup>
);
};
Expand Down
20 changes: 10 additions & 10 deletions packages/components/src/toolbar/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,41 +133,41 @@ export const toolbars = () => {
<div style={ { padding: '20px' } }>
<h2>Icon-only Toolbar</h2>
<Toolbar>
<ToolbarButton icon={ formatBold } title="Bold" />
<ToolbarButton icon={ formatBold } label="Bold" />
<ToolbarButton
icon={ formatItalic }
title="Italic"
isActive
label="Italic"
isPressed
/>
<ToolbarButton icon={ link } title="Link" />
<ToolbarButton icon={ link } label="Link" />
</Toolbar>
</div>

<div style={ { padding: '20px' } }>
<h2>Text-only Toolbar</h2>
<Toolbar>
<ToolbarButton>Bold Format</ToolbarButton>
<ToolbarButton isActive>Italic Format</ToolbarButton>
<ToolbarButton isPressed>Italic Format</ToolbarButton>
<ToolbarButton>Link Format</ToolbarButton>
</Toolbar>
</div>

<div style={ { padding: '20px' } }>
<h2>Text and Icon Toolbar</h2>
<Toolbar>
<ToolbarButton icon={ formatBold } title="Bold" />
<ToolbarButton isActive>Bold Format</ToolbarButton>
<ToolbarButton icon={ formatItalic } title="Italic" />
<ToolbarButton icon={ formatBold } label="Bold" />
<ToolbarButton isPressed>Bold Format</ToolbarButton>
<ToolbarButton icon={ formatItalic } label="Italic" />
<ToolbarButton>Italic Format</ToolbarButton>
<ToolbarButton icon={ link } title="Link" />
<ToolbarButton icon={ link } label="Link" />
<ToolbarButton>Link Format</ToolbarButton>
</Toolbar>
</div>

<div style={ { padding: '20px' } }>
<h2>Single Icon Button Toolbar</h2>
<Toolbar>
<ToolbarButton icon={ formatBold } title="Bold" />
<ToolbarButton icon={ formatBold } label="Bold" />
</Toolbar>
</div>

Expand Down