From c0ba214cc83df13e7ce2aab2ed3802e720c733bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= Date: Tue, 3 Dec 2019 10:23:00 +0100 Subject: [PATCH] Components: Enforce consistent usage of Button and ToolbarGroup components (#18817) * Components: Enforce consisten usage of Button component * Convert Toolbar components into ToolbarGroup * Fix the two issues. * Increase specificity. --- .eslintrc.js | 57 ++++++++++----- .../components/inserter-list-item/index.js | 9 ++- .../components/inserter-list-item/style.scss | 3 +- .../components/link-control/search-item.js | 6 +- .../skip-to-selected-block/index.js | 2 +- .../src/components/url-input/index.js | 6 +- packages/block-library/src/audio/edit.js | 6 +- packages/block-library/src/cover/edit.js | 12 ++-- .../block-library/src/embed/embed-controls.js | 11 ++- packages/block-library/src/file/edit.js | 6 +- .../src/heading/heading-toolbar.js | 4 +- packages/block-library/src/html/edit.js | 19 +++-- packages/block-library/src/image/edit.js | 10 +-- .../block-library/src/image/edit.native.js | 14 ++-- .../block-library/src/latest-posts/edit.js | 6 +- .../src/legacy-widget/edit/index.js | 6 +- packages/block-library/src/list/edit.js | 4 +- packages/block-library/src/media-text/edit.js | 8 +-- .../src/media-text/edit.native.js | 4 +- .../src/media-text/media-container.js | 6 +- .../src/media-text/media-container.native.js | 6 +- .../block-library/src/navigation-link/edit.js | 6 +- .../src/navigation/block-colors-selector.js | 6 +- packages/block-library/src/navigation/edit.js | 10 +-- packages/block-library/src/paragraph/edit.js | 4 +- packages/block-library/src/rss/edit.js | 4 +- packages/block-library/src/table/edit.js | 12 ++-- packages/block-library/src/video/edit.js | 6 +- .../block-library/src/video/edit.native.js | 6 +- .../src/circular-option-picker/index.js | 4 +- .../test/__snapshots__/index.js.snap | 70 ++++++++++++++++--- .../components/src/color-picker/saturation.js | 3 +- .../test/__snapshots__/index.js.snap | 18 +++-- .../components/src/font-size-picker/index.js | 1 - .../edit-post/src/components/layout/index.js | 1 - .../components/sidebar/post-schedule/index.js | 1 - .../sidebar/post-visibility/index.js | 1 - .../sidebar/settings-header/index.js | 9 +-- .../sidebar/settings-header/style.scss | 4 +- .../src/components/sidebar/style.scss | 3 +- .../src/components/import-dropdown/index.js | 1 - storybook/test/__snapshots__/index.js.snap | 18 ++--- 42 files changed, 242 insertions(+), 151 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 43e259b40c7b7..c6404f79817f4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -16,6 +16,17 @@ const { version } = require( './package' ); */ const majorMinorRegExp = escapeRegExp( version.replace( /\.\d+$/, '' ) ) + '(\\.\\d+)?'; +/** + * The list of patterns matching files used only for development purposes. + * + * @type {string[]} + */ +const developmentFiles = [ + '**/benchmark/**/*.js', + '**/@(__mocks__|__tests__|test)/**/*.js', + '**/@(storybook|stories)/**/*.js', +]; + module.exports = { root: true, extends: [ @@ -97,34 +108,42 @@ module.exports = { message: 'Avoid truthy checks on length property rendering, as zero length is rendered verbatim.', }, ], - 'react/forbid-elements': [ 'error', { - forbid: [ - [ 'circle', 'Circle' ], - [ 'g', 'G' ], - [ 'path', 'Path' ], - [ 'polygon', 'Polygon' ], - [ 'rect', 'Rect' ], - [ 'svg', 'SVG' ], - ].map( ( [ element, componentName ] ) => { - return { - element, - message: `use cross-platform <${ componentName }> component instead.`, - }; - } ), - } ], }, overrides: [ { files: [ 'packages/**/*.js' ], + excludedFiles: [ + '**/*.@(android|ios|native).js', + ...developmentFiles, + ], rules: { 'import/no-extraneous-dependencies': 'error', }, + }, + { + files: [ 'packages/**/*.js' ], excludedFiles: [ - '**/*.@(android|ios|native).js', - '**/benchmark/**/*.js', - '**/@(__mocks__|__tests__|test)/**/*.js', - '**/@(storybook|stories)/**/*.js', + 'packages/block-library/src/*/save.js', + ...developmentFiles, ], + rules: { + 'react/forbid-elements': [ 'error', { + forbid: [ + [ 'button', 'Button' ], + [ 'circle', 'Circle' ], + [ 'g', 'G' ], + [ 'path', 'Path' ], + [ 'polygon', 'Polygon' ], + [ 'rect', 'Rect' ], + [ 'svg', 'SVG' ], + ].map( ( [ element, componentName ] ) => { + return { + element, + message: `use cross-platform <${ componentName } /> component instead.`, + }; + } ), + } ], + }, }, { files: [ diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js index a4af815ac3644..5aeed7b0bd00f 100644 --- a/packages/block-editor/src/components/inserter-list-item/index.js +++ b/packages/block-editor/src/components/inserter-list-item/index.js @@ -3,6 +3,11 @@ */ import classnames from 'classnames'; +/** + * WordPress dependencies + */ +import { Button } from '@wordpress/components'; + /** * Internal dependencies */ @@ -23,7 +28,7 @@ function InserterListItem( { return (
  • - +
    • ); } diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss index 8dc8b8084ad4f..4f384b1c77566 100644 --- a/packages/block-editor/src/components/inserter-list-item/style.scss +++ b/packages/block-editor/src/components/inserter-list-item/style.scss @@ -5,7 +5,7 @@ margin: 0 0 12px; } -.block-editor-block-types-list__item { +.components-button.block-editor-block-types-list__item { display: flex; flex-direction: column; width: 100%; @@ -54,6 +54,7 @@ &:focus { position: relative; @include block-style__focus(); + background: transparent; .block-editor-block-types-list__item-icon, .block-editor-block-types-list__item-title { diff --git a/packages/block-editor/src/components/link-control/search-item.js b/packages/block-editor/src/components/link-control/search-item.js index 432b4bb3dff17..5045389816a4c 100644 --- a/packages/block-editor/src/components/link-control/search-item.js +++ b/packages/block-editor/src/components/link-control/search-item.js @@ -13,14 +13,14 @@ import TextHighlight from './text-highlight'; */ import { safeDecodeURI } from '@wordpress/url'; import { __ } from '@wordpress/i18n'; - import { + Button, Icon, } from '@wordpress/components'; export const LinkControlSearchItem = ( { itemProps, suggestion, isSelected = false, onClick, isURL = false, searchTerm = '' } ) => { return ( - + ); }; 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 index 672baa3920fd8..a4f233d3533f9 100644 --- a/packages/block-editor/src/components/skip-to-selected-block/index.js +++ b/packages/block-editor/src/components/skip-to-selected-block/index.js @@ -18,7 +18,7 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => { return ( selectedBlockClientId && - ); diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index aa56c03ee0123..1d4e3a48645b8 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -11,7 +11,7 @@ import scrollIntoView from 'dom-scroll-into-view'; import { __, sprintf, _n } from '@wordpress/i18n'; import { Component, createRef } from '@wordpress/element'; import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes'; -import { BaseControl, Spinner, withSpokenMessages, Popover } from '@wordpress/components'; +import { BaseControl, Button, Spinner, withSpokenMessages, Popover } from '@wordpress/components'; import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; import { isURL } from '@wordpress/url'; @@ -348,7 +348,7 @@ class URLInput extends Component { ) } > { suggestions.map( ( suggestion, index ) => ( - + ) ) } diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js index b048722a70ecf..7c582faa63ad3 100644 --- a/packages/block-library/src/audio/edit.js +++ b/packages/block-library/src/audio/edit.js @@ -9,7 +9,7 @@ import { PanelBody, SelectControl, ToggleControl, - Toolbar, + ToolbarGroup, withNotices, } from '@wordpress/components'; import { @@ -154,14 +154,14 @@ class AudioEdit extends Component { return ( <> - + - + diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index d64c80989d870..647c94528b974 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -14,17 +14,17 @@ import { useState, } from '@wordpress/element'; import { + BaseControl, + Button, FocalPointPicker, IconButton, PanelBody, PanelRow, RangeControl, + ResizableBox, ToggleControl, - Toolbar, + ToolbarGroup, withNotices, - ResizableBox, - BaseControl, - Button, } from '@wordpress/components'; import { compose, withInstanceId } from '@wordpress/compose'; import { @@ -312,7 +312,7 @@ function CoverEdit( { { hasBackground && ( <> - + ) } /> - + ) } diff --git a/packages/block-library/src/embed/embed-controls.js b/packages/block-library/src/embed/embed-controls.js index fe115b403be22..09044b43b9abd 100644 --- a/packages/block-library/src/embed/embed-controls.js +++ b/packages/block-library/src/embed/embed-controls.js @@ -2,7 +2,12 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { IconButton, Toolbar, PanelBody, ToggleControl } from '@wordpress/components'; +import { + IconButton, + PanelBody, + ToggleControl, + ToolbarGroup, +} from '@wordpress/components'; import { BlockControls, InspectorControls } from '@wordpress/block-editor'; const EmbedControls = ( props ) => { @@ -18,7 +23,7 @@ const EmbedControls = ( props ) => { return ( <> - + { showEditButton && ( { onClick={ switchBackToURLInput } /> ) } - + { themeSupportsResponsive && blockSupportsResponsive && ( diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js index 503345f8b1407..918849fd88a34 100644 --- a/packages/block-library/src/file/edit.js +++ b/packages/block-library/src/file/edit.js @@ -15,7 +15,7 @@ import { Animate, ClipboardButton, IconButton, - Toolbar, + ToolbarGroup, withNotices, } from '@wordpress/components'; import { compose } from '@wordpress/compose'; @@ -190,7 +190,7 @@ class FileEdit extends Component { /> - + ) } /> - + diff --git a/packages/block-library/src/heading/heading-toolbar.js b/packages/block-library/src/heading/heading-toolbar.js index 6d19cc0822f89..330712435e640 100644 --- a/packages/block-library/src/heading/heading-toolbar.js +++ b/packages/block-library/src/heading/heading-toolbar.js @@ -8,7 +8,7 @@ import { range } from 'lodash'; */ import { __, sprintf } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; -import { Toolbar } from '@wordpress/components'; +import { ToolbarGroup } from '@wordpress/components'; /** * Internal dependencies @@ -31,7 +31,7 @@ class HeadingToolbar extends Component { const { isCollapsed = true, minLevel, maxLevel, selectedLevel, onChange } = this.props; return ( - } controls={ range( minLevel, maxLevel ).map( diff --git a/packages/block-library/src/html/edit.js b/packages/block-library/src/html/edit.js index 4f1ab45a073df..2e03b0a08886b 100644 --- a/packages/block-library/src/html/edit.js +++ b/packages/block-library/src/html/edit.js @@ -8,7 +8,12 @@ import { PlainText, transformStyles, } from '@wordpress/block-editor'; -import { Disabled, SandBox } from '@wordpress/components'; +import { + Button, + Disabled, + SandBox, + ToolbarGroup, +} from '@wordpress/components'; import { withSelect } from '@wordpress/data'; class HTMLEdit extends Component { @@ -57,20 +62,20 @@ class HTMLEdit extends Component { return (
    -
    - - -
    + +     { ( isDisabled ) => ( diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index feb8f7113919d..f8b964e18e617 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -32,7 +32,7 @@ import { TextareaControl, TextControl, ToggleControl, - Toolbar, + ToolbarGroup, withNotices, } from '@wordpress/components'; import { compose } from '@wordpress/compose'; @@ -609,7 +609,7 @@ export class ImageEdit extends Component { /> { url && ( <> - + - - + + } /> - + ) } diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index af10c47fdfa3e..df70ef1a67148 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -16,14 +16,14 @@ import { isEmpty, map, get } from 'lodash'; * WordPress dependencies */ import { - TextControl, - ToggleControl, - SelectControl, Icon, - Toolbar, - ToolbarButton, PanelBody, PanelActions, + SelectControl, + TextControl, + ToggleControl, + ToolbarButton, + ToolbarGroup, } from '@wordpress/components'; import { @@ -303,13 +303,13 @@ export class ImageEdit extends React.Component { const getToolbarEditButton = ( open ) => ( - + - + { inspectorControls } - +
      - + { ( widgetObject && ! widgetObject.isHidden ) && ( ) } - + { inspectorControls } { hasEditForm && ( diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js index 845065a794ebe..3ca1bb26ec544 100644 --- a/packages/block-library/src/list/edit.js +++ b/packages/block-library/src/list/edit.js @@ -9,7 +9,7 @@ import { RichTextShortcut, } from '@wordpress/block-editor'; import { - Toolbar, + ToolbarGroup, } from '@wordpress/components'; import { __unstableCanIndentListItems as canIndentListItems, @@ -68,7 +68,7 @@ export default function ListEdit( { } } /> - - - - + ) } /> - + ); } diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/media-container.native.js index 55022b18ff8cd..8ad8304cab8fc 100644 --- a/packages/block-library/src/media-text/media-container.native.js +++ b/packages/block-library/src/media-text/media-container.native.js @@ -14,7 +14,7 @@ import { import { Icon, IconButton, - Toolbar, + ToolbarGroup, withNotices, } from '@wordpress/components'; import { @@ -109,14 +109,14 @@ class MediaContainer extends Component { renderToolbarEditButton( open ) { return ( - + - + ); } diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index eb673de0292d4..58b6ba74a8e95 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -18,9 +18,9 @@ import { SVG, TextareaControl, TextControl, - Toolbar, ToggleControl, ToolbarButton, + ToolbarGroup, } from '@wordpress/components'; import { LEFT, @@ -136,7 +136,7 @@ function NavigationLinkEdit( { return ( - + - + ( { onToggle, isOpen } ) => { }; return ( - + ( { onToggle, isOpen } ) => { onKeyDown={ openOnArrowDown } icon={ } /> - + ); }; diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 164fe682f601b..ab5f40cc040fa 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -20,12 +20,12 @@ import { import { createBlock } from '@wordpress/blocks'; import { withSelect, withDispatch } from '@wordpress/data'; import { + Button, CheckboxControl, PanelBody, - Spinner, - Toolbar, Placeholder, - Button, + Spinner, + ToolbarGroup, } from '@wordpress/components'; import { compose } from '@wordpress/compose'; @@ -152,9 +152,9 @@ function Navigation( { return ( - + { navigatorToolbarButton } - + - + diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js index b2aa14dbfea7d..663f97eb3c1c1 100644 --- a/packages/block-library/src/table/edit.js +++ b/packages/block-library/src/table/edit.js @@ -18,13 +18,13 @@ import { } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; import { - PanelBody, - ToggleControl, - TextControl, Button, - Toolbar, DropdownMenu, + PanelBody, Placeholder, + TextControl, + ToggleControl, + ToolbarGroup, } from '@wordpress/components'; /** @@ -535,14 +535,14 @@ export class TableEdit extends Component { return ( <> - + - + - + - + diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js index e49607bd8ff7e..de12486e9075d 100644 --- a/packages/block-library/src/video/edit.native.js +++ b/packages/block-library/src/video/edit.native.js @@ -17,8 +17,8 @@ import { */ import { Icon, - Toolbar, ToolbarButton, + ToolbarGroup, PanelBody, } from '@wordpress/components'; import { withPreferredColorScheme } from '@wordpress/compose'; @@ -169,14 +169,14 @@ class VideoEdit extends React.Component { onSelect={ this.onSelectMediaUploadOption } render={ ( { open, getMediaOptions } ) => { return ( - + { getMediaOptions() } - + ); } } > diff --git a/packages/components/src/circular-option-picker/index.js b/packages/components/src/circular-option-picker/index.js index 1d1b7635f9f58..204ebf515fa02 100644 --- a/packages/components/src/circular-option-picker/index.js +++ b/packages/components/src/circular-option-picker/index.js @@ -18,8 +18,7 @@ function Option( { ...additionalProps } ) { const optionButton = ( -
    @@ -392,7 +426,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = ` - +
  • - +
    • diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss index 2f55d4ed7f053..cf230cc3acb9a 100644 --- a/packages/edit-post/src/components/sidebar/settings-header/style.scss +++ b/packages/edit-post/src/components/sidebar/settings-header/style.scss @@ -14,11 +14,12 @@ } } -.edit-post-sidebar__panel-tab { +.components-button.edit-post-sidebar__panel-tab { background: transparent; border: none; box-shadow: none; cursor: pointer; + display: inline-block; padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode margin-left: 0; font-weight: 400; @@ -58,6 +59,7 @@ } &:focus { + background-color: transparent; @include square-style__focus; } } diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss index fa05feb0a33b4..0c68a362bf9f6 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -149,7 +149,8 @@ } } - &:focus { + &:focus:not(:disabled) { @include square-style__focus; + box-shadow: none; } } diff --git a/packages/list-reusable-blocks/src/components/import-dropdown/index.js b/packages/list-reusable-blocks/src/components/import-dropdown/index.js index 18d1ffe7b242d..f3a12cd90a793 100644 --- a/packages/list-reusable-blocks/src/components/import-dropdown/index.js +++ b/packages/list-reusable-blocks/src/components/import-dropdown/index.js @@ -21,7 +21,6 @@ function ImportDropdown( { onUpload } ) { contentClassName="list-reusable-blocks-import-dropdown__content" renderToggle={ ( { isOpen, onToggle } ) => (