Button: deprecate isPrimary, isSecondary, isTertiary and `isLin…

…k` props in favour of `variant` prop (#31713) * Deprecate isPrimary, isSecondary and isTertiary props in favor of variant prop * Update button docs * Update Button variant in Storybook * Update tests * changelog * Swap order of isSecondary / isTertiary deprecation * Depracate isLink prop too * Spacing * Update changelog * Update example in README * Add unit test for deprecated props * Use `expect( console ).toHaveWarned()` instead of mocking `@wordpress/deprecated`, move new tests into one file * Revert auto-formatting * Move SCSS comment above selector * Do not mark isPrimary, isSecondary, isTertiary and isLink props as deprecated * Remove TODO comment * Better wording for the notice component README
WordPress · May 26, 2021 · 9df736c · 9df736c
1 parent f33e8bf
commit 9df736c
Show file tree

Hide file tree

Showing 133 changed files with 388 additions and 278 deletions.
diff --git a/packages/block-directory/src/plugins/get-install-missing/index.js b/packages/block-directory/src/plugins/get-install-missing/index.js
@@ -88,7 +88,7 @@ const ModifiedWarning = ( { originalBlock, ...props } ) => {
 			originalBlock.title || originalName
 		);
 		actions.push(
-			<Button key="convert" onClick={ convertToHTML } isLink>
+			<Button key="convert" onClick={ convertToHTML } variant="link">
 				{ __( 'Keep as HTML' ) }
 			</Button>
 		);

diff --git a/packages/block-directory/src/plugins/get-install-missing/install-button.js b/packages/block-directory/src/plugins/get-install-missing/install-button.js
@@ -43,7 +43,7 @@ export default function InstallButton( { attributes, block, clientId } ) {
 			}
 			disabled={ isInstallingBlock }
 			isBusy={ isInstallingBlock }
-			isPrimary
+			variant="primary"
 		>
 			{ sprintf(
 				/* translators: %s: block name */

diff --git a/packages/block-editor/src/components/block-breadcrumb/index.js b/packages/block-editor/src/components/block-breadcrumb/index.js
@@ -54,7 +54,7 @@ function BlockBreadcrumb() {
 				{ hasSelection && (
 					<Button
 						className="block-editor-block-breadcrumb__button"
-						isTertiary
+						variant="tertiary"
 						onClick={ clearSelectedBlock }
 					>
 						{ __( 'Document' ) }
@@ -66,7 +66,7 @@ function BlockBreadcrumb() {
 				<li key={ parentClientId }>
 					<Button
 						className="block-editor-block-breadcrumb__button"
-						isTertiary
+						variant="tertiary"
 						onClick={ () => selectBlock( parentClientId ) }
 					>
 						<BlockTitle clientId={ parentClientId } />

diff --git a/packages/block-editor/src/components/block-compare/block-view.js b/packages/block-editor/src/components/block-compare/block-view.js
@@ -28,7 +28,7 @@ const BlockView = ( {
 			</div>
 
 			<div className="block-editor-block-compare__action">
-				<Button isSecondary tabIndex="0" onClick={ action }>
+				<Button variant="secondary" tabIndex="0" onClick={ action }>
 					{ actionText }
 				</Button>
 			</div>

diff --git a/packages/block-editor/src/components/block-compare/test/__snapshots__/block-view.js.snap b/packages/block-editor/src/components/block-compare/test/__snapshots__/block-view.js.snap
@@ -27,9 +27,9 @@ exports[`BlockView should match snapshot 1`] = `
     className="block-editor-block-compare__action"
   >
     <ForwardRef(Button)
-      isSecondary={true}
       onClick={[Function]}
       tabIndex="0"
+      variant="secondary"
     >
       action
     </ForwardRef(Button)>

diff --git a/packages/block-editor/src/components/block-list/block-invalid-warning.js b/packages/block-editor/src/components/block-list/block-invalid-warning.js
@@ -56,7 +56,7 @@ export function BlockInvalidWarning( {
 					<Button
 						key="recover"
 						onClick={ attemptBlockRecovery }
-						isPrimary
+						variant="primary"
 					>
 						{ __( 'Attempt Block Recovery' ) }
 					</Button>,

diff --git a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
@@ -18,7 +18,7 @@ import { VIEWMODES } from './constants';
 const Actions = ( { onStartBlank, onBlockPatternSelect } ) => (
 	<div className="block-editor-block-pattern-setup__actions">
 		<Button onClick={ onStartBlank }>{ __( 'Start blank' ) }</Button>
-		<Button isPrimary onClick={ onBlockPatternSelect }>
+		<Button variant="primary" onClick={ onBlockPatternSelect }>
 			{ __( 'Choose' ) }
 		</Button>
 	</div>

diff --git a/packages/block-editor/src/components/block-variation-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -42,7 +42,7 @@ function BlockVariationPicker( {
 				{ variations.map( ( variation ) => (
 					<li key={ variation.name }>
 						<Button
-							isSecondary
+							variant="secondary"
 							icon={ variation.icon }
 							iconSize={ 48 }
 							onClick={ () => onSelect( variation ) }
@@ -61,7 +61,7 @@ function BlockVariationPicker( {
 			{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 			{ allowSkip && (
 				<div className="block-editor-block-variation-picker__skip">
-					<Button isLink onClick={ () => onSelect() }>
+					<Button variant="link" onClick={ () => onSelect() }>
 						{ __( 'Skip' ) }
 					</Button>
 				</div>

diff --git a/packages/block-editor/src/components/image-size-control/index.js b/packages/block-editor/src/components/image-size-control/index.js
@@ -90,7 +90,9 @@ export default function ImageSizeControl( {
 									<Button
 										key={ scale }
 										isSmall
-										isPrimary={ isCurrent }
+										variant={
+											isCurrent ? 'primary' : undefined
+										}
 										isPressed={ isCurrent }
 										onClick={ updateDimensions(
 											scaledWidth,

diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js
@@ -43,7 +43,7 @@ export default function LinkPreview( { value, onEditClick } ) {
 			</span>
 
 			<Button
-				isSecondary
+				variant="secondary"
 				onClick={ () => onEditClick() }
 				className="block-editor-link-control__search-item-action"
 			>

diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -266,7 +266,7 @@ export function MediaPlaceholder( {
 				<Button
 					className="block-editor-media-placeholder__cancel-button"
 					title={ __( 'Cancel' ) }
-					isLink
+					variant="link"
 					onClick={ onCancel }
 				>
 					{ __( 'Cancel' ) }
@@ -283,7 +283,7 @@ export function MediaPlaceholder( {
 						className="block-editor-media-placeholder__button"
 						onClick={ openURLInput }
 						isPressed={ isURLInputVisible }
-						isTertiary
+						variant="tertiary"
 					>
 						{ __( 'Insert from URL' ) }
 					</Button>
@@ -316,7 +316,7 @@ export function MediaPlaceholder( {
 				render={ ( { open } ) => {
 					return (
 						<Button
-							isTertiary
+							variant="tertiary"
 							onClick={ ( event ) => {
 								event.stopPropagation();
 								open();
@@ -341,7 +341,7 @@ export function MediaPlaceholder( {
 							const content = (
 								<>
 									<Button
-										isPrimary
+										variant="primary"
 										className={ classnames(
 											'block-editor-media-placeholder__button',
 											'block-editor-media-placeholder__upload-button'
@@ -366,7 +366,7 @@ export function MediaPlaceholder( {
 				<>
 					{ renderDropZone() }
 					<FormFileUpload
-						isPrimary
+						variant="primary"
 						className={ classnames(
 							'block-editor-media-placeholder__button',
 							'block-editor-media-placeholder__upload-button'

diff --git a/packages/block-editor/src/components/preview-options/index.js b/packages/block-editor/src/components/preview-options/index.js
@@ -29,7 +29,7 @@ export default function PreviewOptions( {
 		position: 'bottom left',
 	};
 	const toggleProps = {
-		isTertiary: true,
+		variant: 'tertiary',
 		className: 'block-editor-post-preview__button-toggle',
 		disabled: ! isEnabled,
 		/* translators: button label text should, if possible, be under 16 characters. */

diff --git a/packages/block-editor/src/components/skip-to-selected-block/index.js b/packages/block-editor/src/components/skip-to-selected-block/index.js
@@ -19,7 +19,7 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
 
 	return selectedBlockClientId ? (
 		<Button
-			isSecondary
+			variant="secondary"
 			className="block-editor-skip-to-selected-block"
 			onClick={ onClick }
 		>

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -113,7 +113,7 @@ function LayoutPanel( { setAttributes, attributes } ) {
 						</div>
 						<div className="block-editor-hooks__layout-controls-reset">
 							<Button
-								isSecondary
+								variant="secondary"
 								isSmall
 								disabled={ ! contentSize && ! wideSize }
 								onClick={ () =>

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -49,7 +49,11 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 						<Button
 							key={ widthValue }
 							isSmall
-							isPrimary={ widthValue === selectedWidth }
+							variant={
+								widthValue === selectedWidth
+									? 'primary'
+									: undefined
+							}
 							onClick={ () => handleChange( widthValue ) }
 						>
 							{ widthValue }%

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
@@ -492,7 +492,7 @@ function CoverEdit( {
 						) }
 						<PanelRow>
 							<Button
-								isSecondary
+								variant="secondary"
 								isSmall
 								className="block-library-cover__reset-button"
 								onClick={ () =>

diff --git a/packages/block-library/src/embed/embed-placeholder.js b/packages/block-library/src/embed/embed-placeholder.js
@@ -33,7 +33,7 @@ const EmbedPlaceholder = ( {
 					placeholder={ __( 'Enter URL to embed here…' ) }
 					onChange={ onChange }
 				/>
-				<Button isPrimary type="submit">
+				<Button variant="primary" type="submit">
 					{ _x( 'Embed', 'button label' ) }
 				</Button>
 			</form>
@@ -51,10 +51,10 @@ const EmbedPlaceholder = ( {
 					<div className="components-placeholder__instructions">
 						{ __( 'Sorry, this content could not be embedded.' ) }
 					</div>
-					<Button isSecondary onClick={ tryAgain }>
+					<Button variant="secondary" onClick={ tryAgain }>
 						{ _x( 'Try again', 'button label' ) }
 					</Button>{ ' ' }
-					<Button isSecondary onClick={ fallback }>
+					<Button variant="secondary" onClick={ fallback }>
 						{ _x( 'Convert to link', 'button label' ) }
 					</Button>
 				</div>

diff --git a/packages/block-library/src/missing/edit.js b/packages/block-library/src/missing/edit.js
@@ -28,7 +28,7 @@ function MissingBlockWarning( { attributes, convertToHTML } ) {
 			originalName
 		);
 		actions.push(
-			<Button key="convert" onClick={ convertToHTML } isPrimary>
+			<Button key="convert" onClick={ convertToHTML } variant="primary">
 				{ __( 'Keep as HTML' ) }
 			</Button>
 		);

diff --git a/packages/block-library/src/navigation/placeholder.js b/packages/block-library/src/navigation/placeholder.js
@@ -81,7 +81,7 @@ function NavigationPlaceholder( { onCreate }, ref ) {
 	}, [ isCreatingFromMenu, hasResolvedMenuItems ] );
 
 	const toggleProps = {
-		isPrimary: true,
+		variant: 'primary',
 		className: 'wp-block-navigation-placeholder__actions__dropdown',
 	};
 	return (
@@ -132,14 +132,16 @@ function NavigationPlaceholder( { onCreate }, ref ) {
 						) : undefined }
 						{ hasPages ? (
 							<Button
-								isPrimary={ hasMenus ? false : true }
-								isTertiary={ hasMenus ? true : false }
+								variant={ hasMenus ? 'tertiary' : 'primary' }
 								onClick={ onCreateAllPages }
 							>
 								{ __( 'Add all pages' ) }
 							</Button>
 						) : undefined }
-						<Button isTertiary onClick={ onCreateEmptyMenu }>
+						<Button
+							variant="tertiary"
+							onClick={ onCreateEmptyMenu }
+						>
 							{ __( 'Start empty' ) }
 						</Button>
 					</div>

diff --git a/packages/block-library/src/page-list/convert-to-links-modal.js b/packages/block-library/src/page-list/convert-to-links-modal.js
@@ -103,11 +103,11 @@ export default function ConvertToLinksModal( { onClose, clientId } ) {
 				) }
 			</p>
 			<div className="wp-block-page-list-modal-buttons">
-				<Button isTertiary onClick={ onClose }>
+				<Button variant="tertiary" onClick={ onClose }>
 					{ __( 'Cancel' ) }
 				</Button>
 				<Button
-					isPrimary
+					variant="primary"
 					disabled={ ! pagesFinished }
 					onClick={ convertSelectedBlockToNavigationLinks( {
 						pages,

diff --git a/packages/block-library/src/post-comment/edit.js b/packages/block-library/src/post-comment/edit.js
@@ -36,7 +36,7 @@ export default function Edit( { attributes, setAttributes } ) {
 					/>
 
 					<Button
-						isPrimary
+						variant="primary"
 						onClick={ () => {
 							setAttributes( { commentId: commentIdInput } );
 						} }

diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js
@@ -72,7 +72,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 							}
 							className="wp-block-rss__placeholder-input"
 						/>
-						<Button isPrimary type="submit">
+						<Button variant="primary" type="submit">
 							{ __( 'Use URL' ) }
 						</Button>
 					</form>

diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
@@ -295,9 +295,11 @@ export default function SearchEdit( {
 									<Button
 										key={ widthValue }
 										isSmall
-										isPrimary={
+										variant={
 											`${ widthValue }%` ===
 											`${ width }${ widthUnit }`
+												? 'primary'
+												: undefined
 										}
 										onClick={ () =>
 											setAttributes( {

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -528,7 +528,7 @@ function TableEdit( {
 						/>
 						<Button
 							className="blocks-table__placeholder-button"
-							isPrimary
+							variant="primary"
 							type="submit"
 						>
 							{ __( 'Create Table' ) }

diff --git a/packages/block-library/src/template-part/edit/placeholder/index.js b/packages/block-library/src/template-part/edit/placeholder/index.js
@@ -107,17 +107,17 @@ export default function TemplatePartPlaceholder( {
 							<>
 								{ enableSelection && (
 									<Button
-										isPrimary
+										variant="primary"
 										onClick={ onToggle }
 										aria-expanded={ isOpen }
 									>
 										{ __( 'Choose existing' ) }
 									</Button>
 								) }
 								<Button
-									{ ...( enableSelection
-										? { isTertiary: true }
-										: { isPrimary: true } ) }
+									variant={
+										enableSelection ? 'tertiary' : 'primary'
+									}
 									onClick={ () =>
 										setStep( PLACEHOLDER_STEPS.patterns )
 									}

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
@@ -199,7 +199,7 @@ function VideoEdit( {
 								}
 								render={ ( { open } ) => (
 									<Button
-										isPrimary
+										variant="primary"
 										onClick={ open }
 										ref={ posterImageButton }
 										aria-describedby={
@@ -226,7 +226,10 @@ function VideoEdit( {
 									  ) }
 							</p>
 							{ !! poster && (
-								<Button onClick={ onRemovePoster } isTertiary>
+								<Button
+									onClick={ onRemovePoster }
+									variant="tertiary"
+								>
 									{ __( 'Remove' ) }
 								</Button>
 							) }

diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js
@@ -73,7 +73,7 @@ function TrackList( { tracks, onEditPress } ) {
 				>
 					<span>{ track.label } </span>
 					<Button
-						isTertiary
+						variant="tertiary"
 						onClick={ () => onEditPress( index ) }
 						aria-label={ sprintf(
 							/* translators: %s: Label of the video text track e.g: "French subtitles" */
@@ -152,7 +152,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 				/>
 				<div className="block-library-video-tracks-editor__single-track-editor-buttons-container">
 					<Button
-						isSecondary
+						variant="secondary"
 						onClick={ () => {
 							const changes = {};
 							let hasChanges = false;
@@ -179,7 +179,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 					>
 						{ __( 'Close' ) }
 					</Button>
-					<Button isDestructive isLink onClick={ onRemove }>
+					<Button isDestructive variant="link" onClick={ onRemove }>
 						{ __( 'Remove track' ) }
 					</Button>
 				</div>