From bfc58f53a38b9b0830198fa134a5f08eb3dad5ef Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 12 Dec 2019 08:08:12 +0100 Subject: [PATCH] Update buttons and icons buttons size and consistency (#19058) --- packages/base-styles/_z-index.scss | 2 +- .../components/block-compare/block-view.js | 2 +- .../test/__snapshots__/block-view.js.snap | 2 +- .../block-list/block-invalid-warning.js | 4 +- .../src/components/block-mover/style.scss | 10 +- .../components/block-pattern-picker/index.js | 2 +- .../block-pattern-picker/style.scss | 2 +- .../default-block-appender/style.scss | 2 +- .../components/inserter-list-item/style.scss | 1 + .../src/components/link-control/index.js | 2 +- .../src/components/link-control/style.scss | 1 + .../src/components/media-placeholder/index.js | 8 +- .../components/media-replace-flow/style.scss | 2 +- .../skip-to-selected-block/index.js | 2 +- .../src/components/url-popover/style.scss | 4 +- .../src/block/edit-panel/index.js | 4 +- packages/block-library/src/cover/edit.js | 2 +- .../src/embed/embed-placeholder.js | 7 +- .../embed/test/__snapshots__/index.js.snap | 2 +- packages/block-library/src/file/edit.js | 2 +- .../block-library/src/gallery/editor.scss | 2 +- packages/block-library/src/navigation/edit.js | 2 +- packages/block-library/src/rss/edit.js | 2 +- packages/block-library/src/table/edit.js | 2 +- packages/block-library/src/video/edit.js | 2 +- packages/components/CHANGELOG.md | 12 +- .../components/src/button-group/style.scss | 6 +- packages/components/src/button/README.md | 4 +- packages/components/src/button/index.js | 11 +- .../components/src/button/stories/index.js | 46 ++- .../components/src/button/stories/style.css | 8 + packages/components/src/button/style.scss | 63 ++-- packages/components/src/button/test/index.js | 17 +- .../src/circular-option-picker/index.js | 2 +- .../src/circular-option-picker/style.scss | 5 + .../test/__snapshots__/index.js.snap | 4 +- .../date-time/test/__snapshots__/time.js.snap | 8 +- packages/components/src/date-time/time.js | 4 +- .../components/src/dropdown-menu/style.scss | 8 +- .../components/src/font-size-picker/index.js | 2 +- .../components/src/guide/finish-button.js | 1 - .../components/src/guide/stories/index.js | 2 +- .../with-constrained-tabbing/README.md | 2 +- .../higher-order/with-focus-return/README.md | 2 +- .../src/higher-order/with-notices/README.md | 2 +- .../with-spoken-messages/README.md | 4 +- .../components/src/icon-button/style.scss | 26 +- packages/components/src/menu-item/style.scss | 3 +- packages/components/src/modal/README.md | 4 +- .../components/src/modal/stories/index.js | 4 +- .../src/navigable-container/README.md | 14 +- packages/components/src/notice/index.js | 2 +- packages/components/src/notice/style.scss | 8 +- .../notice/test/__snapshots__/index.js.snap | 2 +- packages/components/src/panel/style.scss | 15 +- .../components/src/placeholder/style.scss | 1 - packages/components/src/popover/README.md | 2 +- .../components/src/range-control/index.js | 2 +- packages/components/src/scroll-lock/README.md | 2 +- .../src/scroll-lock/stories/index.js | 2 +- packages/components/src/snackbar/style.scss | 2 +- packages/components/src/tooltip/README.md | 2 +- packages/e2e-tests/plugins/hooks-api/index.js | 2 +- .../__snapshots__/plugins-api.test.js.snap | 4 +- .../src/components/header/style.scss | 2 - .../edit-post/src/components/layout/index.js | 2 +- .../options/enable-custom-fields.js | 2 +- .../enable-custom-fields.js.snap | 4 +- .../src/components/sidebar/style.scss | 1 + .../src/hooks/validate-multiple-use/index.js | 6 +- .../src/components/save-button/index.js | 1 - .../src/components/error-boundary/index.js | 6 +- .../components/post-featured-image/index.js | 2 +- .../components/post-last-revision/style.scss | 6 +- .../src/components/post-locked-modal/index.js | 6 +- .../src/components/post-permalink/editor.js | 2 +- .../src/components/post-permalink/index.js | 2 +- .../components/post-preview-button/index.js | 2 +- .../test/__snapshots__/index.js.snap | 4 +- .../components/post-publish-button/index.js | 1 - .../post-publish-panel/postpublish.js | 4 +- .../hierarchical-term-selector.js | 2 +- .../editor/src/components/post-trash/index.js | 2 +- .../template-validation-notice/index.js | 2 +- .../src/components/import-form/index.js | 2 +- storybook/test/__snapshots__/index.js.snap | 329 ++++++++++++++++-- 86 files changed, 535 insertions(+), 238 deletions(-) create mode 100644 packages/components/src/button/stories/style.css diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 0841cb4128915a..535dbd99f7c470 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -35,7 +35,7 @@ $z-layers: ( ".wp-block-site-title__save-button": 1, // Active pill button - ".components-button.is-button {:focus or .is-primary}": 1, + ".components-button {:focus or .is-primary}": 1, // The draggable element should show up above the entire UI ".components-draggable__clone": 1000000000, diff --git a/packages/block-editor/src/components/block-compare/block-view.js b/packages/block-editor/src/components/block-compare/block-view.js index ffe120658c412c..ed5e030c7fd4fe 100644 --- a/packages/block-editor/src/components/block-compare/block-view.js +++ b/packages/block-editor/src/components/block-compare/block-view.js @@ -19,7 +19,7 @@ const BlockView = ( { title, rawContent, renderedContent, action, actionText, cl
- +
); 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 a5870d5f0f35e3..95ad614306ea7b 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,7 +27,7 @@ exports[`BlockView should match snapshot 1`] = ` className="block-editor-block-compare__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 0b1d45c1084863..0a541263bbb36d 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 @@ -48,14 +48,14 @@ export class BlockInvalidWarning extends Component { <> + , hasHTMLBlock && ( - ), diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss index 4b99a5e8d70f98..27feba375d8390 100644 --- a/packages/block-editor/src/components/block-mover/style.scss +++ b/packages/block-editor/src/components/block-mover/style.scss @@ -79,7 +79,7 @@ @include break-small() { color: $dark-opacity-300; - &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { + &:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover { background-color: transparent; box-shadow: none; } @@ -97,15 +97,15 @@ fill: currentColor; &, - &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover, - &:not(:disabled):not([aria-disabled="true"]):not(.is-default):active, - &:not(:disabled):not([aria-disabled="true"]):not(.is-default):focus { + &:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover, + &:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active, + &:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):focus { box-shadow: none; background: none; color: $dark-opacity-500; } - &:not(:disabled):not([aria-disabled="true"]):not(.is-default):active { + &:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active { cursor: grabbing; } } diff --git a/packages/block-editor/src/components/block-pattern-picker/index.js b/packages/block-editor/src/components/block-pattern-picker/index.js index 3b2b0a1c05383f..1d362702b8dbfa 100644 --- a/packages/block-editor/src/components/block-pattern-picker/index.js +++ b/packages/block-editor/src/components/block-pattern-picker/index.js @@ -39,7 +39,7 @@ function BlockPatternPicker( { { patterns.map( ( pattern ) => (
  • onSelect( pattern ) } diff --git a/packages/block-editor/src/components/block-pattern-picker/style.scss b/packages/block-editor/src/components/block-pattern-picker/style.scss index ac92faea0848aa..d5653af4c00b19 100644 --- a/packages/block-editor/src/components/block-pattern-picker/style.scss +++ b/packages/block-editor/src/components/block-pattern-picker/style.scss @@ -46,7 +46,7 @@ // icon horizontally. justify-content: center; - &.is-default { + &.is-secondary { background-color: $white; } } diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss index b3228aaab41707..5dff610a1c61ad 100644 --- a/packages/block-editor/src/components/default-block-appender/style.scss +++ b/packages/block-editor/src/components/default-block-appender/style.scss @@ -87,7 +87,7 @@ // Hide the box shadow that appears on hover. // All the :not() rules are needed to override default iconButton styles. - &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { + &:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover { box-shadow: none; } } 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 4f384b1c775660..824108bc3929ad 100644 --- a/packages/block-editor/src/components/inserter-list-item/style.scss +++ b/packages/block-editor/src/components/inserter-list-item/style.scss @@ -22,6 +22,7 @@ transition: all 0.05s ease-in-out; @include reduce-motion("transition"); position: relative; + height: auto; &:disabled { @include block-style__disabled(); diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index e1ad86afc773d5..18ae9da7c5401b 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -225,7 +225,7 @@ function LinkControl( { { filterURLForDisplay( safeDecodeURI( currentLink.url ) ) || '' } - diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 30cbc78526b3d0..ef01a96da4bfcb 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -90,6 +90,7 @@ text-align: left; padding: 10px 15px; border-radius: 5px; + height: auto; &:hover, &:focus { diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index d7d72d4a39ddf1..c2cba7aaf28589 100644 --- a/packages/block-editor/src/components/media-placeholder/index.js +++ b/packages/block-editor/src/components/media-placeholder/index.js @@ -272,7 +272,7 @@ export class MediaPlaceholder extends Component { className="block-editor-media-placeholder__button" onClick={ this.openURLInput } isPressed={ isURLInputVisible } - isLarge + isSecondary > { __( 'Insert from URL' ) } @@ -315,7 +315,7 @@ export class MediaPlaceholder extends Component { render={ ( { open } ) => { return ( ); diff --git a/packages/block-editor/src/components/url-popover/style.scss b/packages/block-editor/src/components/url-popover/style.scss index e844e4b8f29423..f98cbbf2cdd589 100644 --- a/packages/block-editor/src/components/url-popover/style.scss +++ b/packages/block-editor/src/components/url-popover/style.scss @@ -2,7 +2,7 @@ border-top: $border-width solid $light-gray-500; } -.block-editor-url-popover__additional-controls > div[role="menu"] .components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default) > svg { +.block-editor-url-popover__additional-controls > div[role="menu"] .components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) > svg { box-shadow: none; } @@ -31,7 +31,7 @@ width: 30px; } - &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { + &:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover { box-shadow: none; > svg { diff --git a/packages/block-library/src/block/edit-panel/index.js b/packages/block-library/src/block/edit-panel/index.js index 0bc064d25203c7..ee2097a038b8ae 100644 --- a/packages/block-library/src/block/edit-panel/index.js +++ b/packages/block-library/src/block/edit-panel/index.js @@ -64,7 +64,7 @@ class ReusableBlockEditPanel extends Component { { cannotEmbed &&

    { __( 'Sorry, this content could not be embedded.' ) }
    - +

    } diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap index 75222a004b93fe..f0439c6a4c69f5 100644 --- a/packages/block-library/src/embed/test/__snapshots__/index.js.snap +++ b/packages/block-library/src/embed/test/__snapshots__/index.js.snap @@ -44,7 +44,7 @@ exports[`core/embed block edit matches snapshot 1`] = ` value="" /> diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js index 663f97eb3c1c16..3d837bb3c0a90d 100644 --- a/packages/block-library/src/table/edit.js +++ b/packages/block-library/src/table/edit.js @@ -521,7 +521,7 @@ export class TableEdit extends Component { min="1" className="wp-block-table__placeholder-input" /> - + ); diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js index 84492ec552c154..f0eb10c85a66b1 100644 --- a/packages/block-library/src/video/edit.js +++ b/packages/block-library/src/video/edit.js @@ -213,7 +213,7 @@ class VideoEdit extends Component { allowedTypes={ VIDEO_POSTER_ALLOWED_MEDIA_TYPES } render={ ( { open } ) => ( ); @@ -128,7 +128,7 @@ Name | Type | Default | Description --- | --- | --- | --- `disabled` | `bool` | `false` | Whether the button is disabled. If `true`, this will force a `button` element to be rendered. `href` | `string` | `undefined` | If provided, renders `a` instead of `button`. -`isDefault` | `bool` | `false` | Renders a default button style. +`isSecondary` | `bool` | `false` | Renders a default button style. `isPrimary` | `bool` | `false` | Renders a primary button style. `isTertiary` | `bool` | `false` | Renders a text-based button style. `isDestructive` | `bool` | `false` | Renders a red text-based button style to indicate destructive behavior. diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js index 57de08de8bf79e..3987b0b31ac28f 100644 --- a/packages/components/src/button/index.js +++ b/packages/components/src/button/index.js @@ -6,6 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ +import deprecated from '@wordpress/deprecated'; import { createElement, forwardRef } from '@wordpress/element'; export function Button( props, ref ) { @@ -19,6 +20,7 @@ export function Button( props, ref ) { isPressed, isBusy, isDefault, + isSecondary, isLink, isDestructive, className, @@ -26,9 +28,14 @@ export function Button( props, ref ) { ...additionalProps } = props; + if ( isDefault ) { + deprecated( 'Button isDefault prop', { + alternative: 'isSecondary', + } ); + } + const classes = classnames( 'components-button', className, { - 'is-button': isDefault || isPrimary || isLarge || isSmall, - 'is-default': isDefault || ( ! isPrimary && ( isLarge || isSmall ) ), + 'is-secondary': isDefault || isSecondary, 'is-primary': isPrimary, 'is-large': isLarge, 'is-small': isSmall, diff --git a/packages/components/src/button/stories/index.js b/packages/components/src/button/stories/index.js index 5d60381ed1768f..3dffc07e08ae5f 100644 --- a/packages/components/src/button/stories/index.js +++ b/packages/components/src/button/stories/index.js @@ -6,7 +6,9 @@ import { text } from '@storybook/addon-knobs'; /** * Internal dependencies */ +import './style.css'; import Button from '../'; +import IconButton from '../../icon-button'; export default { title: 'Components|Button', component: Button }; @@ -26,19 +28,19 @@ export const primary = () => { ); }; -export const large = () => { - const label = text( 'Label', 'Large Button' ); +export const secondary = () => { + const label = text( 'Label', 'Secondary Button' ); return ( - + ); }; -export const largePrimary = () => { - const label = text( 'Label', 'Large Primary Button' ); +export const tertiary = () => { + const label = text( 'Label', 'Tertiary Button' ); return ( - + ); }; @@ -85,3 +87,35 @@ export const disabledLink = () => { ); }; + +export const buttons = () => { + return ( +
    +

    Small Buttons

    +
    + + + + + + + + + Icon & Text +
    + +

    Regular Buttons

    +
    + + + + + + + + + Icon & Text +
    +
    + ); +}; diff --git a/packages/components/src/button/stories/style.css b/packages/components/src/button/stories/style.css new file mode 100644 index 00000000000000..239018d6a298a4 --- /dev/null +++ b/packages/components/src/button/stories/style.css @@ -0,0 +1,8 @@ +.story-buttons-container { + display: flex; +} + +.story-buttons-container > * { + margin-right: 10px; + margin-bottom: 10px; +} diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 2f62f199794eda..d0c0e043cfa88c 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -9,24 +9,27 @@ background: none; transition: box-shadow 0.1s linear; @include reduce-motion("transition"); - - &.is-button { - padding: 0 10px; - line-height: 2; - height: 28px; - border-radius: 3px; - white-space: nowrap; - border-width: $border-width; - border-style: solid; + height: 36px; + align-items: center; + box-sizing: border-box; + padding: 0 8px; + overflow: hidden; + border-radius: 3px; + + &:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):not(.is-primary):not(.is-tertiary):not(.is-link):hover { + @include button-style__hover; } // Default button style - &.is-default { + &.is-secondary { + border-width: $border-width; + border-style: solid; + white-space: nowrap; color: color(theme(button) shade(6%)); border-color: color(theme(button) shade(6%)); background: #f3f5f6; - &:hover { + &:not(:disabled):not([aria-disabled="true"]):hover { background: #f1f1f1; border-color: color(theme(button) shade(25%)); color: color(theme(button) shade(25%)); @@ -61,13 +64,16 @@ } &.is-primary { + border-width: $border-width; + border-style: solid; + white-space: nowrap; background: color(theme(button)); border-color: color(theme(button)); color: $white; text-decoration: none; text-shadow: none; - &:hover, + &:not(:disabled):not([aria-disabled="true"]):hover, &:focus:enabled { background: color(theme(button) shade(10%)); border-color: color(theme(button) shade(10%)); @@ -96,15 +102,6 @@ border-color: color(theme(button) tint(10%)); opacity: 1; - // This specificity is needed to override alternate color schemes in WP-Admin. - // This can presumably be removed when https://core.trac.wordpress.org/ticket/34904 lands. - &.is-button, - &.is-button:hover, - &:active:enabled { - box-shadow: none; - text-shadow: none; - } - &:focus:enabled { box-shadow: 0 0 0 $border-width $white, @@ -148,8 +145,9 @@ transition-duration: 0.05s; transition-timing-function: ease-in-out; @include reduce-motion("transition"); + height: auto; - &:hover, + &:not(:disabled):not([aria-disabled="true"]):hover, &:active { color: #00a0d2; } @@ -182,25 +180,19 @@ } &.is-busy, - &.is-default.is-busy, - &.is-default.is-busy:disabled, - &.is-default.is-busy[aria-disabled="true"] { + &.is-secondary.is-busy, + &.is-secondary.is-busy:disabled, + &.is-secondary.is-busy[aria-disabled="true"] { animation: components-button__busy-animation 2500ms infinite linear; background-size: 100px 100%; background-image: repeating-linear-gradient(-45deg, $light-gray-500, $white 11px, $white 10px, $light-gray-500 20px); opacity: 1; } - &.is-large { - height: 30px; - line-height: 28px; - padding: 0 12px 2px; - } - &.is-small { height: 24px; line-height: 22px; - padding: 0 8px 1px; + padding: 0 8px; font-size: 11px; } @@ -208,11 +200,6 @@ &.is-tertiary { color: theme(outlines); - // Matches default button in hit area. See line 11. - padding: 0 10px; - line-height: 26px; - height: 28px; - .dashicon { display: inline-block; flex: 0 0 auto; @@ -228,7 +215,7 @@ box-shadow: none; } - &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { + &:not(:disabled):not([aria-disabled="true"]):hover { color: color(theme(outlines) shade(25%)); } } diff --git a/packages/components/src/button/test/index.js b/packages/components/src/button/test/index.js index 27c5a24f490e87..c0b03149abd2f0 100644 --- a/packages/components/src/button/test/index.js +++ b/packages/components/src/button/test/index.js @@ -31,26 +31,18 @@ describe( 'Button', () => { const button = shallow( diff --git a/packages/components/src/guide/finish-button.js b/packages/components/src/guide/finish-button.js index baf1fccaff480a..151fd3a9672ccd 100644 --- a/packages/components/src/guide/finish-button.js +++ b/packages/components/src/guide/finish-button.js @@ -24,7 +24,6 @@ export default function FinishButton( { className, onClick, children } ) { ref={ button } className={ className } isPrimary - isLarge onClick={ onClick } > { children } diff --git a/packages/components/src/guide/stories/index.js b/packages/components/src/guide/stories/index.js index 3a96e1031e3968..ff82a9befae368 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 && ( { times( numberOfPages, ( page ) => ( 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 143d3e857ddf74..cb4b8fad7079f9 100644 --- a/packages/components/src/higher-order/with-constrained-tabbing/README.md +++ b/packages/components/src/higher-order/with-constrained-tabbing/README.md @@ -32,7 +32,7 @@ const MyComponentWithConstrainedTabbing = withState( { return (
    { form } -
    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 f0872f15600f3d..13b9053026e468 100644 --- a/packages/components/src/higher-order/with-focus-return/README.md +++ b/packages/components/src/higher-order/with-focus-return/README.md @@ -40,7 +40,7 @@ const MyComponentWithFocusReturn = withState( { onChange={ ( text ) => setState( { text } ) } /> { text && } - { 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 9ca098a2bffe40..1ae0f1edab407b 100644 --- a/packages/components/src/higher-order/with-notices/README.md +++ b/packages/components/src/higher-order/with-notices/README.md @@ -11,7 +11,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 5e539b3f3d5725..44e1630456ecd2 100644 --- a/packages/components/src/higher-order/with-spoken-messages/README.md +++ b/packages/components/src/higher-order/with-spoken-messages/README.md @@ -7,8 +7,8 @@ import { withSpokenMessages, Button } from '@wordpress/components'; const MyComponentWithSpokenMessages = withSpokenMessages( ( { speak, debouncedSpeak } ) => (
    - - + +
    ) ); ``` diff --git a/packages/components/src/icon-button/style.scss b/packages/components/src/icon-button/style.scss index 074ae90b634f4e..102a361d940885 100644 --- a/packages/components/src/icon-button/style.scss +++ b/packages/components/src/icon-button/style.scss @@ -1,15 +1,4 @@ .components-icon-button { - display: flex; - align-items: center; - padding: 8px; - margin: 0; - border: none; - background: none; - color: $dark-gray-500; - position: relative; - overflow: hidden; - border-radius: $radius-round-rectangle; - .dashicon { display: inline-block; flex: 0 0 auto; @@ -22,19 +11,6 @@ } &.has-text svg { - margin-right: 4px; - } - - &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { - @include button-style__hover; - } - - &:not(:disabled):not([aria-disabled="true"]):not(.is-default):active { - @include button-style__active; - } - - &[aria-disabled="true"]:focus, - &:disabled:focus { - box-shadow: none; + margin-right: 8px; } } diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss index b854dab40915cb..39cc7867a75d6a 100644 --- a/packages/components/src/menu-item/style.scss +++ b/packages/components/src/menu-item/style.scss @@ -18,7 +18,8 @@ flex: 0 0 auto; } - &:hover:not(:disabled):not([aria-disabled="true"]) { + // This needs to be higher-specificity that the default button hover style. + &.components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):not(.is-tertiary):not(.is-primary):hover { @include menu-style__hover; .components-menu-item__shortcut { diff --git a/packages/components/src/modal/README.md b/packages/components/src/modal/README.md index ad75e3ee656b29..ae25dea81bea84 100644 --- a/packages/components/src/modal/README.md +++ b/packages/components/src/modal/README.md @@ -129,12 +129,12 @@ const MyModal = () => { return ( <> - + { isOpen && ( - diff --git a/packages/components/src/modal/stories/index.js b/packages/components/src/modal/stories/index.js index 043a9126561f7a..dbdfa9828794f8 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 630c9be46f053d..9ba8376a38c071 100644 --- a/packages/components/src/navigable-container/README.md +++ b/packages/components/src/navigable-container/README.md @@ -56,17 +56,17 @@ const MyNavigableContainer = () => (
    Navigable Menu: - - - + + + Tabbable Container: - - - - + + + +
    ); diff --git a/packages/components/src/notice/index.js b/packages/components/src/notice/index.js index 4f55ead17a1a34..4cd318f3d5c063 100644 --- a/packages/components/src/notice/index.js +++ b/packages/components/src/notice/index.js @@ -51,7 +51,7 @@ function Notice( { { isScrollLocked && } diff --git a/packages/components/src/scroll-lock/stories/index.js b/packages/components/src/scroll-lock/stories/index.js index 5d225a33c17337..05d23d9614ae3c 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/style.scss b/packages/components/src/snackbar/style.scss index 4b4dc5341fd1d5..60ef13e12c2e8a 100644 --- a/packages/components/src/snackbar/style.scss +++ b/packages/components/src/snackbar/style.scss @@ -35,7 +35,7 @@ line-height: $default-line-height; padding: 0; - &:not(:disabled):not([aria-disabled="true"]):not(.is-default) { + &:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) { text-decoration: underline; background-color: transparent; diff --git a/packages/components/src/tooltip/README.md b/packages/components/src/tooltip/README.md index f3f702a6b486d0..3014bd9318b9fa 100644 --- a/packages/components/src/tooltip/README.md +++ b/packages/components/src/tooltip/README.md @@ -13,7 +13,7 @@ import { Tooltip, Button } from '@wordpress/components'; const MyTooltip = () => ( - diff --git a/packages/e2e-tests/plugins/hooks-api/index.js b/packages/e2e-tests/plugins/hooks-api/index.js index 3cfe4ca1590322..6429cfe35015d2 100644 --- a/packages/e2e-tests/plugins/hooks-api/index.js +++ b/packages/e2e-tests/plugins/hooks-api/index.js @@ -16,7 +16,7 @@ Button, { className: 'e2e-reset-block-button', - isDefault: true, + isSecondary: true, isLarge: true, onClick: function() { var emptyBlock = createBlock( props.name ); diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap index ed29927f1af8c0..86ce33a736311e 100644 --- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap +++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap @@ -2,6 +2,6 @@ exports[`Using Plugins API Document Setting Custom Panel Should render a custom panel inside Document Setting sidebar 1`] = `"My Custom Panel"`; -exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"
    (no title)
    Sidebar title plugin
    "`; +exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"
    (no title)
    Sidebar title plugin
    "`; -exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"
    (no title)
    Sidebar title plugin
    "`; +exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"
    (no title)
    Sidebar title plugin
    "`; diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 45e5eb1893b5b3..daab27dd554be2 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -69,8 +69,6 @@ &.editor-post-publish-button, &.editor-post-publish-panel__toggle { margin: 2px; - height: 34px; - line-height: 32px; font-size: $default-font-size; } diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 69d69662b0615c..35267cc6a169e5 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -127,7 +127,7 @@ function Layout() { ) : (
    , - , outboundType && ( , - + { __( 'Copy Post Text' ) } , - + { __( 'Copy Error' ) } , ] } diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js index 4400f03f0f5982..c32a266e1423c3 100644 --- a/packages/editor/src/components/post-featured-image/index.js +++ b/packages/editor/src/components/post-featured-image/index.js @@ -114,7 +114,7 @@ function PostFeaturedImage( { allowedTypes={ ALLOWED_MEDIA_TYPES } modalClass="editor-post-featured-image__media-modal" render={ ( { open } ) => ( - ) } diff --git a/packages/editor/src/components/post-last-revision/style.scss b/packages/editor/src/components/post-last-revision/style.scss index 67d551d00febe1..e017aa1f3604e8 100644 --- a/packages/editor/src/components/post-last-revision/style.scss +++ b/packages/editor/src/components/post-last-revision/style.scss @@ -9,10 +9,14 @@ // Needs specificity .components-icon-button:not(:disabled):not([aria-disabled="true"]).editor-post-last-revision__title { + height: auto; &:hover, &:active { - @include menu-style__neutral; + // Override the default button hover style + background: $light-gray-200 !important; + border: none !important; + box-shadow: none !important; } &:focus { diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js index 5a2568c8a86505..5749db90428c5d 100644 --- a/packages/editor/src/components/post-locked-modal/index.js +++ b/packages/editor/src/components/post-locked-modal/index.js @@ -180,7 +180,7 @@ class PostLockedModal extends Component {
    -
    @@ -200,11 +200,11 @@ class PostLockedModal extends Component {
    - -
    diff --git a/packages/editor/src/components/post-permalink/editor.js b/packages/editor/src/components/post-permalink/editor.js index 593af16f2c4686..408deba736e661 100644 --- a/packages/editor/src/components/post-permalink/editor.js +++ b/packages/editor/src/components/post-permalink/editor.js @@ -73,7 +73,7 @@ class PostPermalinkEditor extends Component { ) } - + { this.state.showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy Link' ) } 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 b3e4bbe15cae80..e7563ba296a3db 100644 --- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js +++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js @@ -439,7 +439,7 @@ class HierarchicalTermSelector extends Component { /> } ); diff --git a/packages/editor/src/components/template-validation-notice/index.js b/packages/editor/src/components/template-validation-notice/index.js index f9b612b3e70395..2efa8eb3a0abd7 100644 --- a/packages/editor/src/components/template-validation-notice/index.js +++ b/packages/editor/src/components/template-validation-notice/index.js @@ -22,7 +22,7 @@ function TemplateValidationNotice( { isValid, ...props } ) {

    { __( 'The content of your post doesn’t match the template assigned to your post type.' ) }

    - +
    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 f5db62dfd7a71d..dd80120e0f33ab 100644 --- a/packages/list-reusable-blocks/src/components/import-form/index.js +++ b/packages/list-reusable-blocks/src/components/import-form/index.js @@ -100,7 +100,7 @@ class ImportForm extends Component { type="submit" isBusy={ isLoading } disabled={ ! file || isLoading } - isDefault + isSecondary className="list-reusable-blocks-import-form__button" > { _x( 'Import', 'button label' ) } diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index 707b97a8e35f95..9e663317961f4e 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -279,6 +279,271 @@ exports[`Storyshots Components|BaseControl Default 1`] = ` `; +exports[`Storyshots Components|Button Buttons 1`] = ` +
    +

    + Small Buttons +

    +
    + + + + + + + + + +
    +

    + Regular Buttons +

    +
    + + + + + + + + + +
    +
    +`; + exports[`Storyshots Components|Button Default 1`] = ` -`; - -exports[`Storyshots Components|Button Large Primary 1`] = ` - -`; - exports[`Storyshots Components|Button Link 1`] = ` Primary Button `; +exports[`Storyshots Components|Button Secondary 1`] = ` + +`; + exports[`Storyshots Components|Button Small 1`] = ` `; +exports[`Storyshots Components|Button Tertiary 1`] = ` + +`; + exports[`Storyshots Components|ButtonGroup Default 1`] = `