diff --git a/packages/block-directory/src/plugins/get-install-missing/index.js b/packages/block-directory/src/plugins/get-install-missing/index.js index c228b53c0b35b3..80673914d4dc10 100644 --- 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( - ); 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 index b229b29bc10515..e092ba58c26641 100644 --- 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 index 422fbeffc0ed5d..e6d58b3e97c245 100644 --- 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 && ( 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 index 95ad614306ea7b..d3adf817bb83fd 100644 --- 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" > action 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 index f9e98bd7ccec7a..941787ca95b2e7 100644 --- 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( { , 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 index 7eba89edb25793..44157626ca9725 100644 --- 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 } ) => (
-
diff --git a/packages/block-editor/src/components/block-variation-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js index f7db011f294875..24bdfa272c34b2 100644 --- 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 ) => (
  • diff --git a/packages/block-editor/src/components/image-size-control/index.js b/packages/block-editor/src/components/image-size-control/index.js index 94a41e8820ef68..f465ec1f6e3938 100644 --- 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( { @@ -316,7 +316,7 @@ export function MediaPlaceholder( { render={ ( { open } ) => { return ( @@ -51,10 +51,10 @@ const EmbedPlaceholder = ( {
    { __( 'Sorry, this content could not be embedded.' ) }
    - { ' ' } - diff --git a/packages/block-library/src/missing/edit.js b/packages/block-library/src/missing/edit.js index cbe8536a3fdafd..2f9dbcb478d512 100644 --- 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( - ); diff --git a/packages/block-library/src/navigation/placeholder.js b/packages/block-library/src/navigation/placeholder.js index 03b942f3b30bd0..a9e0e589910ce4 100644 --- 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 ? ( ) : undefined } - 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 index 6686ba3081b745..e900a9ab94d380 100644 --- 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 } ) { ) }

    - diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 1508583257fbec..ec794a60e44aca 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -295,9 +295,11 @@ export default function SearchEdit( { ) } ) } diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js index bb20bbf794cbf6..04f3f04f73cd05 100644 --- 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 } ) { > { track.label } -
    diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 951908f23ab7bc..d85d01a72fdfa2 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Deprecation + +- `isPrimary`, `isSecondary`, `isTertiary` and `isLink` props in `Button` have been deprecated. Use `variant` instead ([#31713](https://github.com/WordPress/gutenberg/pull/31713)). + ## 14.1.0 (2021-05-20) ## 14.0.0 (2021-05-14) diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js index 21bf8314270ba0..49a8d153aee6fd 100644 --- a/packages/components/src/box-control/index.js +++ b/packages/components/src/box-control/index.js @@ -126,7 +126,7 @@ export default function BoxControl( { - + + ); ``` diff --git a/packages/components/src/button-group/stories/index.js b/packages/components/src/button-group/stories/index.js index 50332eede746ac..3b82a4c86346b4 100644 --- a/packages/components/src/button-group/stories/index.js +++ b/packages/components/src/button-group/stories/index.js @@ -10,10 +10,10 @@ export const _default = () => { const style = { margin: '0 4px' }; return ( - - diff --git a/packages/components/src/button/README.md b/packages/components/src/button/README.md index 0a32c865df11a3..c4e0be59143c25 100644 --- a/packages/components/src/button/README.md +++ b/packages/components/src/button/README.md @@ -112,7 +112,7 @@ Renders a button with default style. ```jsx import { Button } from '@wordpress/components'; -const MyButton = () => ; +const MyButton = () => ; ``` ### Props @@ -137,29 +137,13 @@ If provided, renders `a` instead of `button`. - Required: No - Default: `undefined` -#### isSecondary +#### variant -Renders a default button style. +Specifies the button's style. The accepted values are `'primary'` (the primary button styles), `'secondary'` (the default button styles), `'tertiary'` (the text-based button styles), and `'link'` (the link button styles). -- Type: `Boolean` -- Required: No -- Default: `false` - -#### isPrimary - -Renders a primary button style. - -- Type: `Boolean` -- Required: No -- Default: `false` - -#### isTertiary - -Renders a text-based button style. - -- Type: `Boolean` +- Type: `String` - Required: No -- Default: `false` +- Default: `undefined` #### isDestructive @@ -193,14 +177,6 @@ Indicates activity while a action is being performed. - Required: No - Default: `false` -#### isLink - -Renders a button with an anchor style. - -- Type: `Boolean` -- Required: No -- Default: `false` - #### focus Whether the button is focused. diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js index d3804056cd2a89..34b30a4338beac 100644 --- a/packages/components/src/button/index.js +++ b/packages/components/src/button/index.js @@ -19,18 +19,55 @@ import VisuallyHidden from '../visually-hidden'; const disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ]; +function useDeprecatedProps( { + isDefault, + isPrimary, + isSecondary, + isTertiary, + isLink, + variant, + ...otherProps +} ) { + let computedVariant = variant; + + if ( isPrimary ) { + computedVariant ??= 'primary'; + } + + if ( isTertiary ) { + computedVariant ??= 'tertiary'; + } + + if ( isSecondary ) { + computedVariant ??= 'secondary'; + } + + if ( isDefault ) { + deprecated( 'Button isDefault prop', { + since: '5.4', + alternative: 'variant="secondary"', + } ); + + computedVariant ??= 'secondary'; + } + + if ( isLink ) { + computedVariant ??= 'link'; + } + + return { + ...otherProps, + variant: computedVariant, + }; +} + export function Button( props, ref ) { const { href, target, - isPrimary, isSmall, - isTertiary, isPressed, isBusy, - isDefault, - isSecondary, - isLink, isDestructive, className, disabled, @@ -43,26 +80,20 @@ export function Button( props, ref ) { label, children, text, + variant, __experimentalIsFocusable: isFocusable, describedBy, ...additionalProps - } = props; - - if ( isDefault ) { - deprecated( 'Button isDefault prop', { - since: '5.4', - alternative: 'isSecondary', - } ); - } + } = useDeprecatedProps( props ); const classes = classnames( 'components-button', className, { - 'is-secondary': isDefault || isSecondary, - 'is-primary': isPrimary, + 'is-secondary': variant === 'secondary', + 'is-primary': variant === 'primary', 'is-small': isSmall, - 'is-tertiary': isTertiary, + 'is-tertiary': variant === 'tertiary', 'is-pressed': isPressed, 'is-busy': isBusy, - 'is-link': isLink, + 'is-link': variant === 'link', 'is-destructive': isDestructive, 'has-text': !! icon && !! children, 'has-icon': !! icon, diff --git a/packages/components/src/button/stories/index.js b/packages/components/src/button/stories/index.js index faf75af0d5fb19..3de50fc0be432f 100644 --- a/packages/components/src/button/stories/index.js +++ b/packages/components/src/button/stories/index.js @@ -30,19 +30,19 @@ export const _default = () => { export const primary = () => { const label = text( 'Label', 'Primary Button' ); - return ; + return ; }; export const secondary = () => { const label = text( 'Label', 'Secondary Button' ); - return ; + return ; }; export const tertiary = () => { const label = text( 'Label', 'Tertiary Button' ); - return ; + return ; }; export const isDestructive = () => { @@ -64,7 +64,7 @@ export const isPrimaryDestructive = () => { return ( ); @@ -176,20 +176,20 @@ export const buttons = () => {

    Small Buttons

    - - -
    @@ -197,14 +197,14 @@ export const buttons = () => {

    Regular Buttons

    - - - + + +
    diff --git a/packages/components/src/button/test/index.js b/packages/components/src/button/test/index.js index 7c16354c42e8de..ea0a3257071c35 100644 --- a/packages/components/src/button/test/index.js +++ b/packages/components/src/button/test/index.js @@ -30,21 +30,43 @@ describe( 'Button', () => { } ); it( 'should render a button element with is-primary class', () => { - const button = shallow( +     diff --git a/packages/components/src/card/stories/header.js b/packages/components/src/card/stories/header.js index 0a2027c532db7e..63d37f7bc0514b 100644 --- a/packages/components/src/card/stories/header.js +++ b/packages/components/src/card/stories/header.js @@ -36,7 +36,7 @@ export const alignment = () => { { content } - + diff --git a/packages/components/src/circular-option-picker/index.js b/packages/components/src/circular-option-picker/index.js index 3da049b5f0bda3..a259d0eb97dceb 100644 --- a/packages/components/src/circular-option-picker/index.js +++ b/packages/components/src/circular-option-picker/index.js @@ -66,7 +66,7 @@ function DropdownLinkAction( { aria-expanded={ isOpen } aria-haspopup="true" onClick={ onToggle } - isLink + variant="link" { ...buttonProps } > { linkText } @@ -85,7 +85,7 @@ function ButtonAction( { className, children, ...additionalProps } ) { className ) } isSmall - isSecondary + variant="secondary" { ...additionalProps } > { children } diff --git a/packages/components/src/clipboard-button/README.md b/packages/components/src/clipboard-button/README.md index 1244de821a04e2..1789278b3a1ab6 100644 --- a/packages/components/src/clipboard-button/README.md +++ b/packages/components/src/clipboard-button/README.md @@ -14,7 +14,7 @@ const MyClipboardButton = withState( { hasCopied: false, } )( ( { hasCopied, setState } ) => ( setState( { hasCopied: true } ) } onFinishCopy={ () => setState( { hasCopied: false } ) } diff --git a/packages/components/src/color-edit/index.js b/packages/components/src/color-edit/index.js index 31b49ad1454b33..85926eddbe69b3 100644 --- a/packages/components/src/color-edit/index.js +++ b/packages/components/src/color-edit/index.js @@ -136,7 +136,7 @@ function ColorOption( { onConfirm(); } } } - isPrimary + variant="primary" > { confirmLabel } @@ -314,7 +314,7 @@ export default function ColorEdit( { { !! canReset && ( diff --git a/packages/components/src/date-time/index.js b/packages/components/src/date-time/index.js index f433011786379f..603bf1dafd0bf4 100644 --- a/packages/components/src/date-time/index.js +++ b/packages/components/src/date-time/index.js @@ -146,7 +146,7 @@ function DateTimePicker( { ! calendarHelpIsVisible && currentDate && ( diff --git a/packages/components/src/disabled/stories/index.js b/packages/components/src/disabled/stories/index.js index fb994153c1037c..fd90126d42fe6f 100644 --- a/packages/components/src/disabled/stories/index.js +++ b/packages/components/src/disabled/stories/index.js @@ -53,7 +53,7 @@ export const DisabledWithProp = () => {
    - diff --git a/packages/components/src/dropdown/README.md b/packages/components/src/dropdown/README.md index d3d515c0ce8656..3558015b08b323 100644 --- a/packages/components/src/dropdown/README.md +++ b/packages/components/src/dropdown/README.md @@ -15,7 +15,11 @@ const MyDropdown = () => ( contentClassName="my-popover-content-classname" position="bottom right" renderToggle={ ( { isOpen, onToggle } ) => ( - ) } diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index 5a1080c8d8b523..9acb94e06890de 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -139,7 +139,7 @@ function FontSizePicker( onChange( undefined ); } } isSmall - isSecondary + variant="secondary" > { __( 'Reset' ) } diff --git a/packages/components/src/guide/stories/index.js b/packages/components/src/guide/stories/index.js index 3d6b6fb551359c..cae514e84107ad 100644 --- a/packages/components/src/guide/stories/index.js +++ b/packages/components/src/guide/stories/index.js @@ -28,7 +28,7 @@ const ModalExample = ( { numberOfPages, ...props } ) => { return ( <> - { isOpen && ( diff --git a/packages/components/src/higher-order/with-constrained-tabbing/README.md b/packages/components/src/higher-order/with-constrained-tabbing/README.md index 5cbb5b6acaba77..a5b57f25aa7450 100644 --- a/packages/components/src/higher-order/with-constrained-tabbing/README.md +++ b/packages/components/src/higher-order/with-constrained-tabbing/README.md @@ -40,7 +40,7 @@ const MyComponentWithConstrainedTabbing = withState( { return (
    { form } - diff --git a/packages/components/src/higher-order/with-fallback-styles/README.md b/packages/components/src/higher-order/with-fallback-styles/README.md index ba583e42013f16..1ac16ad7c72be5 100644 --- a/packages/components/src/higher-order/with-fallback-styles/README.md +++ b/packages/components/src/higher-order/with-fallback-styles/README.md @@ -18,7 +18,7 @@ const MyComponentWithFallbackStyles = withFallbackStyles( } )( ( { fallbackTextColor, fallbackBackgroundColor } ) => (
    - +
    Text color: { fallbackTextColor }
    Background color: { fallbackBackgroundColor }
    diff --git a/packages/components/src/higher-order/with-focus-return/README.md b/packages/components/src/higher-order/with-focus-return/README.md index 0efff07c2dbdba..c219b84000f57c 100644 --- a/packages/components/src/higher-order/with-focus-return/README.md +++ b/packages/components/src/higher-order/with-focus-return/README.md @@ -34,7 +34,7 @@ const MyComponentWithFocusReturn = withState( { /> { text && } { text && ( - ) } diff --git a/packages/components/src/higher-order/with-notices/README.md b/packages/components/src/higher-order/with-notices/README.md index b40f19a6031c16..84c484eba101b2 100644 --- a/packages/components/src/higher-order/with-notices/README.md +++ b/packages/components/src/higher-order/with-notices/README.md @@ -46,7 +46,7 @@ const MyComponentWithNotices = withNotices( return (
    { noticeUI } -
    diff --git a/packages/components/src/higher-order/with-spoken-messages/README.md b/packages/components/src/higher-order/with-spoken-messages/README.md index 568c47bf3a3573..6142b0438b08f3 100644 --- a/packages/components/src/higher-order/with-spoken-messages/README.md +++ b/packages/components/src/higher-order/with-spoken-messages/README.md @@ -8,11 +8,14 @@ import { withSpokenMessages, Button } from '@wordpress/components'; const MyComponentWithSpokenMessages = withSpokenMessages( ( { speak, debouncedSpeak } ) => (
    - { isOpen && ( - diff --git a/packages/components/src/modal/stories/index.js b/packages/components/src/modal/stories/index.js index 1d6b4acc48d0be..6204051960e2b1 100644 --- a/packages/components/src/modal/stories/index.js +++ b/packages/components/src/modal/stories/index.js @@ -24,12 +24,12 @@ const ModalExample = ( props ) => { return ( <> - { isOpen && ( - diff --git a/packages/components/src/navigable-container/README.md b/packages/components/src/navigable-container/README.md index f513a43b2b3d80..25a795c1ec0c7d 100644 --- a/packages/components/src/navigable-container/README.md +++ b/packages/components/src/navigable-container/README.md @@ -60,23 +60,23 @@ const MyNavigableContainer = () => (
    Navigable Menu: - - - + + + Tabbable Container: - - - - diff --git a/packages/components/src/navigation/back-button/index.js b/packages/components/src/navigation/back-button/index.js index c52932bb8e8624..5912e104d2cbb7 100644 --- a/packages/components/src/navigation/back-button/index.js +++ b/packages/components/src/navigation/back-button/index.js @@ -43,7 +43,7 @@ function NavigationBackButton( diff --git a/packages/components/src/navigation/menu/menu-title-search.js b/packages/components/src/navigation/menu/menu-title-search.js index 02b87e8b089f14..8af2f4635990dc 100644 --- a/packages/components/src/navigation/menu/menu-title-search.js +++ b/packages/components/src/navigation/menu/menu-title-search.js @@ -100,7 +100,7 @@ function MenuTitleSearch( { diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js index 5fc1c09b278b3a..3986a5bad8ec4e 100644 --- a/packages/components/src/popover/stories/index.js +++ b/packages/components/src/popover/stories/index.js @@ -118,7 +118,7 @@ function DynamicHeightPopover() {
    diff --git a/packages/components/src/radio/index.js b/packages/components/src/radio/index.js index 6d7305002e3fce..d7bdefbe608c9b 100644 --- a/packages/components/src/radio/index.js +++ b/packages/components/src/radio/index.js @@ -22,8 +22,7 @@ function Radio( { children, value, ...props }, ref ) { diff --git a/packages/components/src/scroll-lock/README.md b/packages/components/src/scroll-lock/README.md index cdafa3dc415ada..f3912df94eb645 100644 --- a/packages/components/src/scroll-lock/README.md +++ b/packages/components/src/scroll-lock/README.md @@ -18,7 +18,7 @@ const MyScrollLock = withState( { }; return (
    - { isScrollLocked && } diff --git a/packages/components/src/scroll-lock/stories/index.js b/packages/components/src/scroll-lock/stories/index.js index ead007d69a9287..9a9de3584e465c 100644 --- a/packages/components/src/scroll-lock/stories/index.js +++ b/packages/components/src/scroll-lock/stories/index.js @@ -19,7 +19,7 @@ const Example = () => {
    Start scrolling down...
    - { isScrollLocked && } diff --git a/packages/components/src/snackbar/index.js b/packages/components/src/snackbar/index.js index 84f78aee2ffd9a..30633e879120c4 100644 --- a/packages/components/src/snackbar/index.js +++ b/packages/components/src/snackbar/index.js @@ -130,7 +130,7 @@ function Snackbar( @@ -73,14 +73,14 @@ const Rows = ( { items, level = 1 } ) => { { ( props ) => ( - ) } { ( props ) => ( - ) } diff --git a/packages/customize-widgets/src/components/header/index.js b/packages/customize-widgets/src/components/header/index.js index 6143da620e3357..b23c75de1d7ed6 100644 --- a/packages/customize-widgets/src/components/header/index.js +++ b/packages/customize-widgets/src/components/header/index.js @@ -76,7 +76,7 @@ function Header( { , ] } diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js index 41177d5bded10e..c923caf5b17676 100644 --- a/packages/edit-navigation/src/components/header/index.js +++ b/packages/edit-navigation/src/components/header/index.js @@ -56,7 +56,7 @@ export default function Header( { 'Switch menu, or create a new menu' ), showTooltip: false, - isTertiary: true, + variant: 'tertiary', disabled: ! menus?.length, __experimentalIsFocusable: true, } } diff --git a/packages/edit-navigation/src/components/header/save-button.js b/packages/edit-navigation/src/components/header/save-button.js index 0ab895f6746dec..ed255851a22ef1 100644 --- a/packages/edit-navigation/src/components/header/save-button.js +++ b/packages/edit-navigation/src/components/header/save-button.js @@ -28,7 +28,7 @@ export default function SaveButton( { navigationPost } ) { return ( diff --git a/packages/edit-post/src/components/sidebar/post-visibility/index.js b/packages/edit-post/src/components/sidebar/post-visibility/index.js index 2eacd4d3042aab..35043102f0e9e5 100644 --- a/packages/edit-post/src/components/sidebar/post-visibility/index.js +++ b/packages/edit-post/src/components/sidebar/post-visibility/index.js @@ -29,7 +29,7 @@ export function PostVisibility() { aria-expanded={ isOpen } className="edit-post-post-visibility__toggle" onClick={ onToggle } - isTertiary + variant="tertiary" > diff --git a/packages/edit-post/src/components/sidebar/template/actions.js b/packages/edit-post/src/components/sidebar/template/actions.js index 2568f4881f3b25..ab9884b1638d8c 100644 --- a/packages/edit-post/src/components/sidebar/template/actions.js +++ b/packages/edit-post/src/components/sidebar/template/actions.js @@ -55,13 +55,13 @@ function PostTemplateActions() {
    { !! template && ( ) } -
    @@ -107,7 +107,7 @@ function PostTemplateActions() { > - diff --git a/packages/edit-post/src/components/text-editor/index.js b/packages/edit-post/src/components/text-editor/index.js index c056b72a30ea68..c5191c2e561195 100644 --- a/packages/edit-post/src/components/text-editor/index.js +++ b/packages/edit-post/src/components/text-editor/index.js @@ -24,7 +24,7 @@ function TextEditor( { onExit, isRichEditingEnabled } ) {

    { __( 'Editing code' ) }

    , - diff --git a/packages/edit-widgets/src/components/header/index.js b/packages/edit-widgets/src/components/header/index.js index c0475441002a25..3a67e7999482a4 100644 --- a/packages/edit-widgets/src/components/header/index.js +++ b/packages/edit-widgets/src/components/header/index.js @@ -87,7 +87,7 @@ function Header() { ref={ inserterButton } as={ Button } className="edit-widgets-header-toolbar__inserter-toggle" - isPrimary + variant="primary" isPressed={ isInserterOpened } onMouseDown={ ( event ) => { event.preventDefault(); diff --git a/packages/edit-widgets/src/components/save-button/index.js b/packages/edit-widgets/src/components/save-button/index.js index 60af723800c506..607a928416772c 100644 --- a/packages/edit-widgets/src/components/save-button/index.js +++ b/packages/edit-widgets/src/components/save-button/index.js @@ -25,7 +25,7 @@ function SaveButton() { return ( diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js index af233aec56f264..0015cdecd6435c 100644 --- a/packages/editor/src/components/entities-saved-states/index.js +++ b/packages/editor/src/components/entities-saved-states/index.js @@ -141,7 +141,7 @@ export default function EntitiesSavedStates( { close } ) {
    ); @@ -59,7 +59,11 @@ class ErrorBoundary extends Component { + , diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js index 6f636bb5a98b8e..519e538c82c2b2 100644 --- a/packages/editor/src/components/post-featured-image/index.js +++ b/packages/editor/src/components/post-featured-image/index.js @@ -188,7 +188,7 @@ function PostFeaturedImage( { allowedTypes={ ALLOWED_MEDIA_TYPES } modalClass="editor-post-featured-image__media-modal" render={ ( { open } ) => ( - ) } @@ -197,7 +197,11 @@ function PostFeaturedImage( { ) } { !! featuredImageId && ( - diff --git a/packages/editor/src/components/post-format/index.js b/packages/editor/src/components/post-format/index.js index 57620a32b9025e..9f945f997f8d0c 100644 --- a/packages/editor/src/components/post-format/index.js +++ b/packages/editor/src/components/post-format/index.js @@ -100,7 +100,7 @@ export default function PostFormat() {
    { __( 'Suggestion:' ) }{ ' ' }
    -
    @@ -217,11 +217,11 @@ export default function PostLockedModal() {
    - -
    diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js index d7ee759c8b5d2e..7f51eb03635208 100644 --- a/packages/editor/src/components/post-preview-button/index.js +++ b/packages/editor/src/components/post-preview-button/index.js @@ -196,7 +196,7 @@ export class PostPreviewButton extends Component { return (
    -
    diff --git a/packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js b/packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js index 270d11fe749525..a9b836cb1a873b 100644 --- a/packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js +++ b/packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js @@ -27,7 +27,10 @@ const PostFormatSuggestion = ( { suggestionText, onUpdatePostFormat, } ) => ( - ); diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js index 3be45aefa59461..7c431aa4885f47 100644 --- a/packages/editor/src/components/post-publish-panel/postpublish.js +++ b/packages/editor/src/components/post-publish-panel/postpublish.js @@ -42,7 +42,7 @@ const getFuturePostUrl = ( post ) => { function CopyButton( { text, onCopy, children } ) { const ref = useCopyToClipboard( text, onCopy ); return ( - ); @@ -127,7 +127,7 @@ class PostPublishPanelPostpublish extends Component { />
    { ! isScheduled && ( - ) } diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap index 601a5876e3102e..7bd560d187275c 100644 --- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap @@ -95,7 +95,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is className="editor-post-publish-panel__header-cancel-button" > Cancel @@ -135,7 +135,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not className="editor-post-publish-panel__header-cancel-button" > Cancel @@ -175,7 +175,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1 className="editor-post-publish-panel__header-cancel-button" > Cancel diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js index 1103b0f7468785..114610c0247621 100644 --- a/packages/editor/src/components/post-saved-state/index.js +++ b/packages/editor/src/components/post-saved-state/index.js @@ -169,7 +169,7 @@ export default function PostSavedState( { className="editor-post-save-draft" onClick={ () => savePost() } shortcut={ displayShortcut.primary( 's' ) } - isTertiary + variant="tertiary" > { label } diff --git a/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap index 7bdbf164f7481b..575ba88aa66114 100644 --- a/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap @@ -5,9 +5,9 @@ exports[`PostSavedState returns a switch to draft link if the post is published exports[`PostSavedState should return Save button if edits to be saved 1`] = ` Save draft diff --git a/packages/editor/src/components/post-switch-to-draft-button/index.js b/packages/editor/src/components/post-switch-to-draft-button/index.js index 122b5f8377e763..32f2cac753bd69 100644 --- a/packages/editor/src/components/post-switch-to-draft-button/index.js +++ b/packages/editor/src/components/post-switch-to-draft-button/index.js @@ -40,7 +40,7 @@ function PostSwitchToDraftButton( { className="editor-post-switch-to-draft" onClick={ onSwitch } disabled={ isSaving } - isTertiary + variant="tertiary" > { isMobileViewport ? __( 'Draft' ) : __( 'Switch to draft' ) } diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js index 234b5f25e8f6ac..24c7131cb70b2b 100644 --- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js +++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js @@ -487,7 +487,7 @@ class HierarchicalTermSelector extends Component { onClick={ this.onToggleForm } className="editor-post-taxonomies__hierarchical-terms-add" aria-expanded={ showForm } - isLink + variant="link" > { newTermButtonLabel } @@ -518,7 +518,7 @@ class HierarchicalTermSelector extends Component { /> ) }
    • diff --git a/packages/editor/src/components/post-trash/index.js b/packages/editor/src/components/post-trash/index.js index c82eb8d99c0a97..f0f07f9405f9e4 100644 --- a/packages/editor/src/components/post-trash/index.js +++ b/packages/editor/src/components/post-trash/index.js @@ -17,7 +17,7 @@ function PostTrash( { isNew, postId, postType, ...props } ) { ) } diff --git a/packages/list-reusable-blocks/src/components/import-form/index.js b/packages/list-reusable-blocks/src/components/import-form/index.js index a7305ec03552b6..a9dd565d29c551 100644 --- a/packages/list-reusable-blocks/src/components/import-form/index.js +++ b/packages/list-reusable-blocks/src/components/import-form/index.js @@ -107,7 +107,7 @@ class ImportForm extends Component { type="submit" isBusy={ isLoading } disabled={ ! file || isLoading } - isSecondary + variant="secondary" className="list-reusable-blocks-import-form__button" > { _x( 'Import', 'button label' ) } diff --git a/packages/nux/src/components/dot-tip/index.js b/packages/nux/src/components/dot-tip/index.js index 308e07a0b689c6..7f1461ab585664 100644 --- a/packages/nux/src/components/dot-tip/index.js +++ b/packages/nux/src/components/dot-tip/index.js @@ -58,7 +58,7 @@ export function DotTip( { >

    { children }

    -

    diff --git a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap index b8637fcbe88f28..b72099d193cfa8 100644 --- a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap +++ b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap @@ -17,7 +17,7 @@ exports[`DotTip should render correctly 1`] = `

    Got it diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js index c14bfa44f0e4c7..ab7d8b12e44168 100644 --- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js +++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js @@ -150,7 +150,7 @@ export default function ReusableBlockConvertButton( { > -