Skip to content

Commit

Permalink
Components: Update Toolbar and ClipboardInput components to prevent d…
Browse files Browse the repository at this point in the history
…eprecation notices (#39960)
  • Loading branch information
coder-karen authored Nov 6, 2024
1 parent f1111d7 commit 0c2f195
Show file tree
Hide file tree
Showing 8 changed files with 81 additions and 75 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: compat

Components: Shortlink and Toolbar related components have been updated to ensure compatibility.
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { CURRENCIES } from '@automattic/format-currency';
import { getSiteFragment } from '@automattic/jetpack-shared-extension-utils';
import { BlockControls, InspectorControls } from '@wordpress/block-editor';
import {
Button,
Dashicon,
Dropdown,
ExternalLink,
Expand All @@ -12,6 +11,7 @@ import {
ToggleControl,
ToolbarGroup,
ToolbarItem,
ToolbarButton,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { DOWN } from '@wordpress/keycodes';
Expand Down Expand Up @@ -70,7 +70,7 @@ const Controls = props => {
};

return (
<Button
<ToolbarButton
className="jetpack-donations__currency-toggle"
icon={
<>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { isEqual } from 'lodash';
import { getActiveStyleName } from '../../shared/block-styles';
import { getValidatedAttributes } from '../../shared/get-validated-attributes';
import { isNewsletterFeatureEnabled } from '../../shared/memberships/edit';
import GetAddPaidPlanButton from '../../shared/memberships/utils';
import GetAddPaidPlanButton, { paidPlanButtonText } from '../../shared/memberships/utils';
import './view.scss';
import { store as membershipProductsStore } from '../../store/membership-products';
import metadata from './block.json';
Expand Down Expand Up @@ -237,6 +237,8 @@ export function SubscriptionEdit( props ) {

let content;

const paidPlanLabel = paidPlanButtonText( hasTierPlans );

if ( isLoadingModules ) {
content = <SubscriptionSkeletonLoader />;
} else if ( ! isModuleActive ) {
Expand Down Expand Up @@ -281,7 +283,7 @@ export function SubscriptionEdit( props ) {
</InspectorControls>
{ isNewsletterFeatureEnabled() && (
<BlockControls>
<Toolbar>
<Toolbar label={ paidPlanLabel }>
<GetAddPaidPlanButton context={ 'toolbar' } hasTierPlans={ hasTierPlans } />
</Toolbar>
</BlockControls>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@
import { Dropdown, MenuItem, NavigableMenu, Path, SVG, Toolbar } from '@wordpress/components';
import { BlockControls } from '@wordpress/block-editor';
import {
Dropdown,
MenuItem,
NavigableMenu,
Path,
SVG,
Toolbar,
ToolbarButton,
} from '@wordpress/components';
import { __, _x } from '@wordpress/i18n';

const availableFilters = [
Expand Down Expand Up @@ -72,6 +81,13 @@ const availableFilters = [

const label = __( 'Pick an image filter', 'jetpack' );

const toolbarIcon = (
<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<Path fill="none" d="M0 0h24v24H0V0z" />
<Path d="M19 10v9H4.98V5h9V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2zm-2.94-2.06L17 10l.94-2.06L20 7l-2.06-.94L17 4l-.94 2.06L14 7zM12 8l-1.25 2.75L8 12l2.75 1.25L12 16l1.25-2.75L16 12l-2.75-1.25z" />
</SVG>
);

export default function FilterToolbar( { value, onChange } ) {
return (
<Dropdown
Expand All @@ -80,30 +96,18 @@ export default function FilterToolbar( { value, onChange } ) {
contentClassName="editor-block-switcher__popover"
renderToggle={ ( { onToggle, isOpen } ) => {
return (
<Toolbar
controls={ [
{
onClick: onToggle,
extraProps: {
'aria-haspopup': 'true',
'aria-expanded': isOpen,
},
title: label,
tooltip: label,
icon: (
<SVG
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<Path fill="none" d="M0 0h24v24H0V0z" />
<Path d="M19 10v9H4.98V5h9V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2zm-2.94-2.06L17 10l.94-2.06L20 7l-2.06-.94L17 4l-.94 2.06L14 7zM12 8l-1.25 2.75L8 12l2.75 1.25L12 16l1.25-2.75L16 12l-2.75-1.25z" />
</SVG>
),
},
] }
/>
<BlockControls>
<Toolbar label={ label }>
<ToolbarButton
onClick={ onToggle }
aria-expanded={ isOpen }
aria-haspopup="true"
label={ label }
showTooltip={ true }
icon={ toolbarIcon }
/>
</Toolbar>
</BlockControls>
);
} }
renderContent={ ( { onClose } ) => {
Expand Down
61 changes: 19 additions & 42 deletions projects/plugins/jetpack/extensions/shared/clipboard-input.js
Original file line number Diff line number Diff line change
@@ -1,47 +1,24 @@
import { ClipboardButton, TextControl } from '@wordpress/components';
import { Component } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
import { CopyToClipboard } from '@automattic/jetpack-components';
import { TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

import './clipboard-input.scss';

class ClipboardInput extends Component {
state = {
hasCopied: false,
};

onCopy = () => this.setState( { hasCopied: true } );

onFinishCopy = () => this.setState( { hasCopied: false } );

onFocus = event => event.target.select();

render() {
const { link } = this.props;
const { hasCopied } = this.state;

if ( ! link ) {
return null;
}

return (
<div className="jetpack-clipboard-input">
<TextControl
readOnly
onFocus={ this.onFocus }
value={ link }
__nextHasNoMarginBottom={ true }
/>
<ClipboardButton
variant="secondary"
onCopy={ this.onCopy }
onFinishCopy={ this.onFinishCopy }
text={ link }
>
{ hasCopied ? __( 'Copied!', 'jetpack' ) : _x( 'Copy', 'verb', 'jetpack' ) }
</ClipboardButton>
</div>
);
}
}
const ClipboardInput = ( { link } ) => {
return (
<div className="jetpack-clipboard-input">
<TextControl readOnly value={ link } __nextHasNoMarginBottom={ true } />
<CopyToClipboard
buttonStyle="icon-text"
className="components-clipboard-button"
textToCopy={ link }
variant="secondary"
weight="regular"
>
{ __( 'Copy', 'jetpack' ) }
</CopyToClipboard>
</div>
);
};

export default ClipboardInput;
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,14 @@

.components-clipboard-button {
margin-left: 6px;
padding: 0 !important;

svg {
padding-left: 5px;
}

span {
padding-right: 5px;
}
}
}
10 changes: 8 additions & 2 deletions projects/plugins/jetpack/extensions/shared/edit-button.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import { Button } from '@wordpress/components';
import { ToolbarButton } from '@wordpress/components';

export default ( { label, onClick } ) => (
<Button className="components-toolbar__control" label={ label } icon="edit" onClick={ onClick } />
<ToolbarButton
className="components-toolbar__control"
onClick={ onClick }
icon="edit"
title={ label }
showTooltip
></ToolbarButton>
);
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,14 @@ export const MisconfigurationWarning = () => (
</Notice>
);

export default function GetAddPaidPlanButton( { context = 'other', hasTierPlans } ) {
const addPaidPlanButtonText = hasTierPlans
export const paidPlanButtonText = hasTierPlans => {
return hasTierPlans
? _x( 'Manage plans', 'unused context to distinguish translations', 'jetpack' )
: __( 'Set up a paid plan', 'jetpack' );
};

export default function GetAddPaidPlanButton( { context = 'other', hasTierPlans } ) {
const addPaidPlanButtonText = paidPlanButtonText( hasTierPlans );

if ( 'toolbar' === context ) {
return (
Expand Down

0 comments on commit 0c2f195

Please sign in to comment.