From edd8820c6684454e473166055e6b6ea0546ac18c Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Fri, 29 Nov 2019 11:18:01 +0100 Subject: [PATCH 1/4] Components: Enforce consisten usage of Button component --- .eslintrc.js | 57 ++++++++++----- .../components/inserter-list-item/index.js | 9 ++- .../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/html/edit.js | 19 +++-- .../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 +-- .../src/components/import-dropdown/index.js | 1 - storybook/test/__snapshots__/index.js.snap | 18 ++--- 17 files changed, 154 insertions(+), 72 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 43e259b40c7b7e..c6404f79817f42 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 a4af815ac36446..5aeed7b0bd00f0 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/link-control/search-item.js b/packages/block-editor/src/components/link-control/search-item.js index 432b4bb3dff17a..5045389816a4cf 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 672baa3920fd82..a4f233d3533f94 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 aa56c03ee0123c..1d4e3a48645b85 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/html/edit.js b/packages/block-library/src/html/edit.js index 4f1ab45a073dfe..cdd0465582d193 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 { + Disabled, + SandBox, + ToolbarButton, + 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/components/src/circular-option-picker/index.js b/packages/components/src/circular-option-picker/index.js index 1d1b7635f9f589..204ebf515fa02c 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/list-reusable-blocks/src/components/import-dropdown/index.js b/packages/list-reusable-blocks/src/components/import-dropdown/index.js index 18d1ffe7b242df..f3a12cd90a7932 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 } ) => ( diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index feb8f7113919dd..f8b964e18e6171 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 af10c47fdfa3e7..df70ef1a67148e 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 845065a794ebe3..3ca1bb26ec544d 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 55022b18ff8cdd..8ad8304cab8fc1 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 eb673de0292d46..58b6ba74a8e95c 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 164fe682f601b3..ab5f40cc040fa2 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 b2aa14dbfea7d3..663f97eb3c1c16 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 e49607bd8ff7ed..de12486e9075d8 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/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss index 2f55d4ed7f0539..cf230cc3acb9a9 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; } } From 457637fc6044e6751fa2adead9576ee88e891585 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 2 Dec 2019 10:35:33 +0100 Subject: [PATCH 3/4] Fix the two issues. --- .../block-editor/src/components/inserter-list-item/style.scss | 1 + packages/edit-post/src/components/sidebar/style.scss | 1 + 2 files changed, 2 insertions(+) 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 ac5958607bdb72..4f384b1c775660 100644 --- a/packages/block-editor/src/components/inserter-list-item/style.scss +++ b/packages/block-editor/src/components/inserter-list-item/style.scss @@ -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/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss index fa05feb0a33b4a..3e44d62c68c461 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -151,5 +151,6 @@ &:focus { @include square-style__focus; + box-shadow: none; } } From ae766c700ecae50147bad442e8bf33496cb9ac73 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 2 Dec 2019 11:22:19 +0100 Subject: [PATCH 4/4] Increase specificity. --- packages/edit-post/src/components/sidebar/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss index 3e44d62c68c461..0c68a362bf9f6b 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -149,7 +149,7 @@ } } - &:focus { + &:focus:not(:disabled) { @include square-style__focus; box-shadow: none; }