From bd07cde71336fa2500444b890830acdd32dcbea6 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 13 May 2019 11:22:33 +0100 Subject: [PATCH 01/25] Try using snackbar notices instead of prominent ones for saving/failure notices --- assets/stylesheets/_z-index.scss | 4 + packages/components/src/index.js | 2 + packages/components/src/snackbar/index.js | 75 +++++++++++++++++++ packages/components/src/snackbar/list.js | 42 +++++++++++ packages/components/src/snackbar/style.scss | 46 ++++++++++++ packages/components/src/style.scss | 1 + .../edit-post/src/components/layout/index.js | 3 +- .../src/components/layout/style.scss | 35 ++------- .../src/components/editor-notices/index.js | 39 +++++++--- .../src/components/editor-notices/style.scss | 38 ++++++++++ packages/editor/src/store/actions.js | 2 + .../src/store/effects/reusable-blocks.js | 4 + .../editor/src/store/utils/notice-builder.js | 12 ++- packages/editor/src/style.scss | 1 + packages/notices/src/store/actions.js | 2 + 15 files changed, 265 insertions(+), 41 deletions(-) create mode 100644 packages/components/src/snackbar/index.js create mode 100644 packages/components/src/snackbar/list.js create mode 100644 packages/components/src/snackbar/style.scss create mode 100644 packages/editor/src/components/editor-notices/style.scss diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index 733a5c3ed756e..92a044a7b899a 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -76,6 +76,10 @@ $z-layers: ( // .edit-post-header { z-index: 30 } ".components-notice-list": 29, + + // Show snackbars above everything (similar to popovers) + ".components-snackbar-list": 100000, + // Show modal under the wp-admin menus and the popover ".components-modal__screen-overlay": 100000, diff --git a/packages/components/src/index.js b/packages/components/src/index.js index ce378c0b09e3a..ab0540fa2f232 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -50,6 +50,8 @@ export { default as ResizableBox } from './resizable-box'; export { default as ResponsiveWrapper } from './responsive-wrapper'; export { default as SandBox } from './sandbox'; export { default as SelectControl } from './select-control'; +export { default as Snackbar } from './snackbar'; +export { default as SnackbarList } from './snackbar/list'; export { default as Spinner } from './spinner'; export { default as ServerSideRender } from './server-side-render'; export { default as TabPanel } from './tab-panel'; diff --git a/packages/components/src/snackbar/index.js b/packages/components/src/snackbar/index.js new file mode 100644 index 0000000000000..e0fdc2cd3c2b0 --- /dev/null +++ b/packages/components/src/snackbar/index.js @@ -0,0 +1,75 @@ +/** + * External dependencies + */ +import { flow, noop } from 'lodash'; +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { RawHTML } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { Button } from '../'; + +const stopPropagation = ( event ) => event.stopPropagation(); + +function Snackbar( { + className, + status, + children, + actions = [], + __unstableHTML, + onRemove = noop, +} ) { + const classes = classnames( className, 'components-snackbar', 'is-' + status ); + + if ( __unstableHTML ) { + children = { children }; + } + + return ( +
+
+ { children } + { actions.map( + ( + { + className: buttonCustomClasses, + label, + onClick, + url, + }, + index + ) => { + return ( + + ); + } + + ) } +
+
+ ); +} + +export default Snackbar; diff --git a/packages/components/src/snackbar/list.js b/packages/components/src/snackbar/list.js new file mode 100644 index 0000000000000..6a563c2f82a6d --- /dev/null +++ b/packages/components/src/snackbar/list.js @@ -0,0 +1,42 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; +import { omit, noop } from 'lodash'; + +/** + * Internal dependencies + */ +import Snackbar from './'; + +/** +* Renders a list of notices. +* +* @param {Object} $0 Props passed to the component. +* @param {Array} $0.notices Array of notices to render. +* @param {Function} $0.onRemove Function called when a notice should be removed / dismissed. +* @param {Object} $0.className Name of the class used by the component. +* @param {Object} $0.children Array of children to be rendered inside the notice list. +* @return {Object} The rendered notices list. +*/ +function SnackbarList( { notices, className, children, onRemove = noop } ) { + className = classnames( 'components-snackbar-list', className ); + const removeNotice = ( id ) => () => onRemove( id ); + + return ( +
+ { children } + { [ ...notices ].reverse().map( ( notice ) => ( + + { notice.content } + + ) ) } +
+ ); +} + +export default SnackbarList; diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss new file mode 100644 index 0000000000000..86592bb94f025 --- /dev/null +++ b/packages/components/src/snackbar/style.scss @@ -0,0 +1,46 @@ +.components-snackbar { + font-family: $default-font; + font-size: $default-font-size; + background-color: $dark-gray-800; + border-radius: $radius-round-rectangle; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + color: $white; + padding: 10px; + min-width: 200px; + max-width: 400px; + + &.is-success { + background-color: $alert-green; + } + + &.is-warning { + background-color: $alert-yellow; + } + + &.is-error { + background-color: $alert-red; + } + + &:focus { + @include menu-style__focus; + } +} + +.components-snackbar__action.components-button { + margin-left: 20px; + color: $white; +} + +.components-snackbar__content { + display: flex; + align-items: center; +} + +.components-snackbar-list { + position: absolute; + z-index: z-index(".components-snackbar-list"); + + .components-snackbar { + margin-top: 10px; + } +} diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss index 66d20f3427df8..39c566be5ad52 100644 --- a/packages/components/src/style.scss +++ b/packages/components/src/style.scss @@ -35,6 +35,7 @@ @import "./sandbox/style.scss"; @import "./scroll-lock/style.scss"; @import "./select-control/style.scss"; +@import "./snackbar/style.scss"; @import "./spinner/style.scss"; @import "./text-control/style.scss"; @import "./textarea-control/style.scss"; diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 364208959d1b6..ee2b55bbed5d2 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -84,8 +84,7 @@ function Layout( { aria-label={ __( 'Editor content' ) } tabIndex="-1" > - - + diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index dc40e6321ced3..202d5f173a857 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -6,34 +6,6 @@ .edit-post-layout { position: relative; - .components-notice-list { - position: sticky; - top: $header-height; - right: 0; - color: $dark-gray-900; - - @include break-small { - top: 0; - } - - // Non-dismissible notices. - &.is-pinned { - position: relative; - left: 0; - top: 0; - } - } - - .components-notice { - margin: 0 0 5px; - padding: 6px 12px; - min-height: $panel-header-height; - - .components-notice__dismiss { - margin: 10px 5px; - } - } - // Beyond the mobile breakpoint, the editor bar is fixed, so make room for it eabove the layout content. @include break-small { padding-top: $header-height; @@ -54,6 +26,13 @@ } } +// Adjust the position of the notices +@include editor-left(".edit-post-layout__content .components-editor-notices__snackbar"); +.edit-post-layout__content .components-editor-notices__snackbar { + position: fixed; + padding-left: 20px; +} + .edit-post-layout__content { display: flex; flex-direction: column; diff --git a/packages/editor/src/components/editor-notices/index.js b/packages/editor/src/components/editor-notices/index.js index f899f4a61e0ff..fdab17a01b523 100644 --- a/packages/editor/src/components/editor-notices/index.js +++ b/packages/editor/src/components/editor-notices/index.js @@ -6,7 +6,7 @@ import { filter } from 'lodash'; /** * WordPress dependencies */ -import { NoticeList } from '@wordpress/components'; +import { NoticeList, SnackbarList } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; @@ -15,17 +15,38 @@ import { compose } from '@wordpress/compose'; */ import TemplateValidationNotice from '../template-validation-notice'; -export function EditorNotices( { dismissible, notices, ...props } ) { - if ( dismissible !== undefined ) { - notices = filter( notices, { isDismissible: dismissible } ); - } +export function EditorNotices( { notices, onRemove } ) { + const dismissibleNotices = filter( notices, { + isDismissible: true, + type: 'default', + } ); + const nonDismissibleNotices = filter( notices, { + isDismissible: false, + type: 'default', + } ); + const snackbarNotices = filter( notices, { + type: 'snackbar', + } ); return ( - - { dismissible !== false && ( + <> + + - ) } - + + + ); } diff --git a/packages/editor/src/components/editor-notices/style.scss b/packages/editor/src/components/editor-notices/style.scss new file mode 100644 index 0000000000000..c1db6a759703e --- /dev/null +++ b/packages/editor/src/components/editor-notices/style.scss @@ -0,0 +1,38 @@ +// Dismissible notices. +.components-editor-notices__dismissible { + position: sticky; + top: $header-height; + right: 0; + color: $dark-gray-900; + + @include break-small { + top: 0; + } +} + +// Non-dismissible notices. +.components-editor-notices__pinned { + position: relative; + left: 0; + top: 0; + right: 0; + color: $dark-gray-900; +} + +.components-editor-notices__dismissible, +.components-editor-notices__pinned { + .components-notice { + margin: 0 0 5px; + padding: 6px 12px; + min-height: $panel-header-height; + + .components-notice__dismiss { + margin: 10px 5px; + } + } +} + +.components-editor-notices__snackbar { + bottom: 20px; + left: 20px; +} diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index 52f021d1a2f83..f163859519f4b 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -366,11 +366,13 @@ export function* savePost( options = {} ) { 'core/notices', 'removeNotice', SAVE_POST_NOTICE_ID, + { type: 'snackbar' } ); yield dispatch( 'core/notices', 'removeNotice', 'autosave-exists', + { type: 'snackbar' } ); } diff --git a/packages/editor/src/store/effects/reusable-blocks.js b/packages/editor/src/store/effects/reusable-blocks.js index 63bc00169c543..92188d7ef86ba 100644 --- a/packages/editor/src/store/effects/reusable-blocks.js +++ b/packages/editor/src/store/effects/reusable-blocks.js @@ -133,6 +133,7 @@ export const saveReusableBlocks = async ( action, store ) => { const message = isTemporary ? __( 'Block created.' ) : __( 'Block updated.' ); dataDispatch( 'core/notices' ).createSuccessNotice( message, { id: REUSABLE_BLOCK_NOTICE_ID, + type: 'snackbar', } ); dataDispatch( 'core/block-editor' ).__unstableSaveReusableBlock( id, updatedReusableBlock.id ); @@ -140,6 +141,7 @@ export const saveReusableBlocks = async ( action, store ) => { dispatch( { type: 'SAVE_REUSABLE_BLOCK_FAILURE', id } ); dataDispatch( 'core/notices' ).createErrorNotice( error.message, { id: REUSABLE_BLOCK_NOTICE_ID, + type: 'snackbar', } ); } }; @@ -199,6 +201,7 @@ export const deleteReusableBlocks = async ( action, store ) => { const message = __( 'Block deleted.' ); dataDispatch( 'core/notices' ).createSuccessNotice( message, { id: REUSABLE_BLOCK_NOTICE_ID, + type: 'snackbar', } ); } catch ( error ) { dispatch( { @@ -208,6 +211,7 @@ export const deleteReusableBlocks = async ( action, store ) => { } ); dataDispatch( 'core/notices' ).createErrorNotice( error.message, { id: REUSABLE_BLOCK_NOTICE_ID, + type: 'snackbar', } ); } }; diff --git a/packages/editor/src/store/utils/notice-builder.js b/packages/editor/src/store/utils/notice-builder.js index 4ef98c74e3a54..db98428924d4d 100644 --- a/packages/editor/src/store/utils/notice-builder.js +++ b/packages/editor/src/store/utils/notice-builder.js @@ -67,10 +67,12 @@ export function getNotificationArgumentsForSaveSuccess( data ) { noticeMessage, { id: SAVE_POST_NOTICE_ID, + type: 'snackbar', actions, }, ]; } + return []; } @@ -103,7 +105,10 @@ export function getNotificationArgumentsForSaveFail( data ) { messages[ edits.status ] : __( 'Updating failed' ); - return [ noticeMessage, { id: SAVE_POST_NOTICE_ID } ]; + return [ noticeMessage, { + id: SAVE_POST_NOTICE_ID, + type: 'snackbar', + } ]; } /** @@ -118,6 +123,9 @@ export function getNotificationArgumentsForTrashFail( data ) { data.error.message && data.error.code !== 'unknown_error' ? data.error.message : __( 'Trashing failed' ), - { id: TRASH_POST_NOTICE_ID }, + { + id: TRASH_POST_NOTICE_ID, + type: 'snackbar', + }, ]; } diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss index 63f0e18c9974d..949f751bd72af 100644 --- a/packages/editor/src/style.scss +++ b/packages/editor/src/style.scss @@ -1,5 +1,6 @@ @import "./components/autocompleters/style.scss"; @import "./components/document-outline/style.scss"; +@import "./components/editor-notices/style.scss"; @import "./components/error-boundary/style.scss"; @import "./components/page-attributes/style.scss"; @import "./components/post-excerpt/style.scss"; diff --git a/packages/notices/src/store/actions.js b/packages/notices/src/store/actions.js index af74f5b6116fe..7513f82d59c82 100644 --- a/packages/notices/src/store/actions.js +++ b/packages/notices/src/store/actions.js @@ -38,6 +38,7 @@ export function* createNotice( status = DEFAULT_STATUS, content, options = {} ) context = DEFAULT_CONTEXT, id = uniqueId( context ), actions = [], + type = 'default', __unstableHTML, } = options; @@ -60,6 +61,7 @@ export function* createNotice( status = DEFAULT_STATUS, content, options = {} ) __unstableHTML, isDismissible, actions, + type, }, }; } From 36f8419eae30ba04a73076124897dfad6dd5ade2 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 14 May 2019 10:26:28 +0100 Subject: [PATCH 02/25] Auto-remove the snackbar notice after 10 seconds --- packages/components/src/snackbar/index.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/components/src/snackbar/index.js b/packages/components/src/snackbar/index.js index e0fdc2cd3c2b0..d9afe2e758bd7 100644 --- a/packages/components/src/snackbar/index.js +++ b/packages/components/src/snackbar/index.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { RawHTML } from '@wordpress/element'; +import { RawHTML, useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -15,6 +15,7 @@ import { RawHTML } from '@wordpress/element'; import { Button } from '../'; const stopPropagation = ( event ) => event.stopPropagation(); +const NOTICE_TIMEOUT = 10000; function Snackbar( { className, @@ -24,6 +25,16 @@ function Snackbar( { __unstableHTML, onRemove = noop, } ) { + useEffect( () => { + // This rule doesn't account yet for React Hooks + // eslint-disable-next-line @wordpress/react-no-unsafe-timeout + const timeoutHandle = setTimeout( () => { + onRemove(); + }, NOTICE_TIMEOUT ); + + return () => clearTimeout( timeoutHandle ); + }, [] ); + const classes = classnames( className, 'components-snackbar', 'is-' + status ); if ( __unstableHTML ) { From 7f6992e2fe5ab7f7584db61a3fa5d8e98e192ede Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 16 May 2019 09:50:42 +0100 Subject: [PATCH 03/25] No support for the HTML content in the snackbar notices --- packages/components/src/snackbar/index.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/components/src/snackbar/index.js b/packages/components/src/snackbar/index.js index d9afe2e758bd7..955aa5521777e 100644 --- a/packages/components/src/snackbar/index.js +++ b/packages/components/src/snackbar/index.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { RawHTML, useEffect } from '@wordpress/element'; +import { useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -22,7 +22,6 @@ function Snackbar( { status, children, actions = [], - __unstableHTML, onRemove = noop, } ) { useEffect( () => { @@ -37,10 +36,6 @@ function Snackbar( { const classes = classnames( className, 'components-snackbar', 'is-' + status ); - if ( __unstableHTML ) { - children = { children }; - } - return (
Date: Thu, 16 May 2019 10:03:00 +0100 Subject: [PATCH 04/25] Status-less snackbar notices --- packages/components/src/snackbar/style.scss | 28 ++++++++++++--------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss index 86592bb94f025..226a361cc7098 100644 --- a/packages/components/src/snackbar/style.scss +++ b/packages/components/src/snackbar/style.scss @@ -1,7 +1,7 @@ .components-snackbar { font-family: $default-font; font-size: $default-font-size; - background-color: $dark-gray-800; + background-color: $dark-gray-700; border-radius: $radius-round-rectangle; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); color: $white; @@ -9,26 +9,30 @@ min-width: 200px; max-width: 400px; - &.is-success { - background-color: $alert-green; - } - - &.is-warning { - background-color: $alert-yellow; - } - - &.is-error { - background-color: $alert-red; + &:hover { + background-color: $dark-gray-900; } &:focus { - @include menu-style__focus; + background-color: $dark-gray-900; + box-shadow: + 0 0 0 1px $white, + 0 0 0 3px $blue-medium-focus; } } .components-snackbar__action.components-button { margin-left: 20px; color: $white; + + &:not(:disabled):not([aria-disabled="true"]):not(.is-default) { + text-decoration: underline; + + &:hover { + color: $white; + text-decoration: none; + } + } } .components-snackbar__content { From dde6c7af3f0b8d49b8d6a072b475b3d2fc0ecc78 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 16 May 2019 10:15:32 +0100 Subject: [PATCH 05/25] Announce the notices as 'polite' --- packages/notices/src/store/actions.js | 6 +++++- packages/notices/src/store/controls.js | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/notices/src/store/actions.js b/packages/notices/src/store/actions.js index 7513f82d59c82..5ea46e30a4d65 100644 --- a/packages/notices/src/store/actions.js +++ b/packages/notices/src/store/actions.js @@ -48,7 +48,11 @@ export function* createNotice( status = DEFAULT_STATUS, content, options = {} ) content = String( content ); if ( speak ) { - yield { type: 'SPEAK', message: content }; + yield { + type: 'SPEAK', + message: content, + ariaLive: type === 'snackbar' ? 'polite' : 'assertive', + }; } yield { diff --git a/packages/notices/src/store/controls.js b/packages/notices/src/store/controls.js index c23e1cbd17168..80c20900dd5f3 100644 --- a/packages/notices/src/store/controls.js +++ b/packages/notices/src/store/controls.js @@ -5,6 +5,6 @@ import { speak } from '@wordpress/a11y'; export default { SPEAK( action ) { - speak( action.message, 'assertive' ); + speak( action.message, action.ariaLive || 'assertive' ); }, }; From 0faf67d26b99b1bb94c7e5624a99e5a07a29c649 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 16 May 2019 10:28:06 +0100 Subject: [PATCH 06/25] Add a README for the snackbar component --- packages/components/src/snackbar/README.md | 48 ++++++++++++++++++++++ packages/components/src/snackbar/index.js | 3 +- 2 files changed, 49 insertions(+), 2 deletions(-) create mode 100644 packages/components/src/snackbar/README.md diff --git a/packages/components/src/snackbar/README.md b/packages/components/src/snackbar/README.md new file mode 100644 index 0000000000000..c25956fba04c8 --- /dev/null +++ b/packages/components/src/snackbar/README.md @@ -0,0 +1,48 @@ +# Snackbar + +Use Snackbars to communicate low priority, non-interruptive messages to the user. + +## Table of contents + +1. [Design guidelines](#design-guidelines) +2. [Development guidelines](#development-guidelines) +3. [Related components](#related-components) + +## Design guidelines + +A Snackbar displays a succinct message that is cleared out after a small delay. It can also offer the user options, like viewing a published post but these options should also be available elsewhere in the UI. + +## Development guidelines + +### Usage + +To display a plain snackbar, pass the message as a `children` prop: + +```jsx +const MySnackbarNotice = () => ( + + Post published successfully. + +); +``` + +For more complex markup, you can pass any JSX element: + +```jsx +const MySnackbarNotice = () => ( + +

An error occurred: { errorDetails }.

+ +); +``` + +#### Props + +The following props are used to control the display of the component. + +* `onRemove`: function called when dismissing the notice. +* `actions`: (array) an array of action objects. Each member object should contain a `label` and either a `url` link string or `onClick` callback function. A `className` property can be used to add custom classes to the button styles. + +## Related components + +- To create a prominent message that requires a higher-level of attention, use a Notice. diff --git a/packages/components/src/snackbar/index.js b/packages/components/src/snackbar/index.js index 955aa5521777e..aed80ee5d73e2 100644 --- a/packages/components/src/snackbar/index.js +++ b/packages/components/src/snackbar/index.js @@ -19,7 +19,6 @@ const NOTICE_TIMEOUT = 10000; function Snackbar( { className, - status, children, actions = [], onRemove = noop, @@ -34,7 +33,7 @@ function Snackbar( { return () => clearTimeout( timeoutHandle ); }, [] ); - const classes = classnames( className, 'components-snackbar', 'is-' + status ); + const classes = classnames( className, 'components-snackbar' ); return (
Date: Thu, 16 May 2019 10:30:21 +0100 Subject: [PATCH 07/25] Update the changelogs --- docs/manifest.json | 6 ++++++ packages/components/CHANGELOG.md | 1 + packages/notices/CHANGELOG.md | 6 ++++++ 3 files changed, 13 insertions(+) diff --git a/docs/manifest.json b/docs/manifest.json index 594d3504a50dc..2dc0b81b3155c 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -881,6 +881,12 @@ "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/slot-fill/README.md", "parent": "components" }, + { + "title": "Snackbar", + "slug": "snackbar", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/snackbar/README.md", + "parent": "components" + }, { "title": "Spinner", "slug": "spinner", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index abde63ef28198..1aeee512107b2 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,7 @@ ### New Features - Added a new `HorizontalRule` component. +- Added a new `Snackbar` component. ### Bug Fixes diff --git a/packages/notices/CHANGELOG.md b/packages/notices/CHANGELOG.md index 3ceb48ea97a3f..7a6fde4663c90 100644 --- a/packages/notices/CHANGELOG.md +++ b/packages/notices/CHANGELOG.md @@ -1,3 +1,9 @@ +## Master + +### New Features + +- Support a new `snackbar` notice type in the `createNotice` action. + ## 1.1.2 (2019-01-03) ## 1.1.1 (2018-12-12) From cd90b4c34fd672bac76ba4153519d76a74bd12b2 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 16 May 2019 10:41:40 +0100 Subject: [PATCH 08/25] Avoid showing the error messages as snackbars --- packages/editor/src/store/actions.js | 6 ++---- packages/editor/src/store/effects/reusable-blocks.js | 2 -- packages/editor/src/store/utils/notice-builder.js | 2 -- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index f163859519f4b..e596f377abb15 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -365,14 +365,12 @@ export function* savePost( options = {} ) { yield dispatch( 'core/notices', 'removeNotice', - SAVE_POST_NOTICE_ID, - { type: 'snackbar' } + SAVE_POST_NOTICE_ID ); yield dispatch( 'core/notices', 'removeNotice', - 'autosave-exists', - { type: 'snackbar' } + 'autosave-exists' ); } diff --git a/packages/editor/src/store/effects/reusable-blocks.js b/packages/editor/src/store/effects/reusable-blocks.js index 92188d7ef86ba..ebd4caee7fbed 100644 --- a/packages/editor/src/store/effects/reusable-blocks.js +++ b/packages/editor/src/store/effects/reusable-blocks.js @@ -141,7 +141,6 @@ export const saveReusableBlocks = async ( action, store ) => { dispatch( { type: 'SAVE_REUSABLE_BLOCK_FAILURE', id } ); dataDispatch( 'core/notices' ).createErrorNotice( error.message, { id: REUSABLE_BLOCK_NOTICE_ID, - type: 'snackbar', } ); } }; @@ -211,7 +210,6 @@ export const deleteReusableBlocks = async ( action, store ) => { } ); dataDispatch( 'core/notices' ).createErrorNotice( error.message, { id: REUSABLE_BLOCK_NOTICE_ID, - type: 'snackbar', } ); } }; diff --git a/packages/editor/src/store/utils/notice-builder.js b/packages/editor/src/store/utils/notice-builder.js index db98428924d4d..9732cff6fa7cf 100644 --- a/packages/editor/src/store/utils/notice-builder.js +++ b/packages/editor/src/store/utils/notice-builder.js @@ -107,7 +107,6 @@ export function getNotificationArgumentsForSaveFail( data ) { return [ noticeMessage, { id: SAVE_POST_NOTICE_ID, - type: 'snackbar', } ]; } @@ -125,7 +124,6 @@ export function getNotificationArgumentsForTrashFail( data ) { __( 'Trashing failed' ), { id: TRASH_POST_NOTICE_ID, - type: 'snackbar', }, ]; } From a8f465e97a63fecb6c73081163b569fd537dbcd7 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 16 May 2019 10:58:16 +0100 Subject: [PATCH 09/25] Fix unit tests --- .../components/editor-notices/test/index.js | 35 ------------------- packages/editor/src/store/test/actions.js | 2 +- .../src/store/utils/test/notice-builder.js | 2 +- packages/notices/src/store/test/actions.js | 8 +++++ packages/notices/src/store/test/reducer.js | 5 +++ 5 files changed, 15 insertions(+), 37 deletions(-) delete mode 100644 packages/editor/src/components/editor-notices/test/index.js diff --git a/packages/editor/src/components/editor-notices/test/index.js b/packages/editor/src/components/editor-notices/test/index.js deleted file mode 100644 index 655a990aa174f..0000000000000 --- a/packages/editor/src/components/editor-notices/test/index.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * External dependencies - */ -import { shallow } from 'enzyme'; - -/** - * Internal dependencies - */ -import { EditorNotices } from '../'; - -describe( 'EditorNotices', () => { - const notices = [ - { content: 'Eat your vegetables!', isDismissible: true }, - { content: 'Brush your teeth!', isDismissible: true }, - { content: 'Existence is fleeting!', isDismissible: false }, - ]; - - it( 'renders all notices', () => { - const wrapper = shallow( ); - expect( wrapper.prop( 'notices' ) ).toHaveLength( 3 ); - expect( wrapper.children() ).toHaveLength( 1 ); - } ); - - it( 'renders only dismissible notices', () => { - const wrapper = shallow( ); - expect( wrapper.prop( 'notices' ) ).toHaveLength( 2 ); - expect( wrapper.children() ).toHaveLength( 1 ); - } ); - - it( 'renders only non-dismissible notices', () => { - const wrapper = shallow( ); - expect( wrapper.prop( 'notices' ) ).toHaveLength( 1 ); - expect( wrapper.children() ).toHaveLength( 0 ); - } ); -} ); diff --git a/packages/editor/src/store/test/actions.js b/packages/editor/src/store/test/actions.js index af7e7f60a2210..04eea6b467609 100644 --- a/packages/editor/src/store/test/actions.js +++ b/packages/editor/src/store/test/actions.js @@ -408,7 +408,7 @@ describe( 'Post generator actions', () => { 'createSuccessNotice', ...[ savedPostMessage, - { actions: [], id: 'SAVE_POST_NOTICE_ID' }, + { actions: [], id: 'SAVE_POST_NOTICE_ID', type: 'snackbar' }, ] ); expect( value ).toEqual( expected ); diff --git a/packages/editor/src/store/utils/test/notice-builder.js b/packages/editor/src/store/utils/test/notice-builder.js index a78d03f81fad7..e67215113c1f1 100644 --- a/packages/editor/src/store/utils/test/notice-builder.js +++ b/packages/editor/src/store/utils/test/notice-builder.js @@ -28,7 +28,7 @@ describe( 'getNotificationArgumentsForSaveSuccess()', () => { link: 'some_link', }; const post = { ...previousPost }; - const defaultExpectedAction = { id: SAVE_POST_NOTICE_ID, actions: [] }; + const defaultExpectedAction = { id: SAVE_POST_NOTICE_ID, actions: [], type: 'snackbar' }; [ [ 'when previous post is not published and post will not be published', diff --git a/packages/notices/src/store/test/actions.js b/packages/notices/src/store/test/actions.js index ac6bc522f273a..082949031cbd9 100644 --- a/packages/notices/src/store/test/actions.js +++ b/packages/notices/src/store/test/actions.js @@ -34,6 +34,7 @@ describe( 'actions', () => { isDismissible: true, id: expect.any( String ), actions: [], + type: 'default', }, } ); } ); @@ -55,6 +56,7 @@ describe( 'actions', () => { isDismissible: true, id: expect.any( String ), actions: [], + type: 'default', }, } ); } ); @@ -83,6 +85,7 @@ describe( 'actions', () => { content, isDismissible: false, actions: [], + type: 'default', }, } ); } ); @@ -109,6 +112,7 @@ describe( 'actions', () => { __unstableHTML: true, isDismissible: false, actions: [], + type: 'default', }, } ); } ); @@ -133,6 +137,7 @@ describe( 'actions', () => { content, isDismissible: true, id: expect.any( String ), + type: 'default', }, } ); } ); @@ -157,6 +162,7 @@ describe( 'actions', () => { content, isDismissible: true, id: expect.any( String ), + type: 'default', }, } ); } ); @@ -181,6 +187,7 @@ describe( 'actions', () => { content, isDismissible: true, id: expect.any( String ), + type: 'default', }, } ); } ); @@ -205,6 +212,7 @@ describe( 'actions', () => { content, isDismissible: true, id: expect.any( String ), + type: 'default', }, } ); } ); diff --git a/packages/notices/src/store/test/reducer.js b/packages/notices/src/store/test/reducer.js index 04318796773ec..77869efe8d51b 100644 --- a/packages/notices/src/store/test/reducer.js +++ b/packages/notices/src/store/test/reducer.js @@ -36,6 +36,7 @@ describe( 'reducer', () => { status: 'error', isDismissible: true, actions: [], + type: 'default', }, ], } ); @@ -53,6 +54,7 @@ describe( 'reducer', () => { status: 'error', isDismissible: true, actions: [], + type: 'default', }, ], } ); @@ -73,6 +75,7 @@ describe( 'reducer', () => { status: 'error', isDismissible: true, actions: [], + type: 'default', }, { id: expect.any( String ), @@ -80,6 +83,7 @@ describe( 'reducer', () => { status: 'success', isDismissible: true, actions: [], + type: 'default', }, ], } ); @@ -134,6 +138,7 @@ describe( 'reducer', () => { status: 'error', isDismissible: true, actions: [], + type: 'default', }, ], } ); From daefc524dad4fd9be49ae49bb1b40e6ad6d9aa43 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 16 May 2019 11:21:26 +0100 Subject: [PATCH 10/25] Fix e2e tests --- .../src/publish-post-with-pre-publish-checks-disabled.js | 2 +- packages/e2e-test-utils/src/publish-post.js | 2 +- packages/e2e-tests/specs/reusable-blocks.test.js | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/e2e-test-utils/src/publish-post-with-pre-publish-checks-disabled.js b/packages/e2e-test-utils/src/publish-post-with-pre-publish-checks-disabled.js index ab7914e4eb508..e8e2acdd04dbc 100644 --- a/packages/e2e-test-utils/src/publish-post-with-pre-publish-checks-disabled.js +++ b/packages/e2e-test-utils/src/publish-post-with-pre-publish-checks-disabled.js @@ -6,5 +6,5 @@ */ export async function publishPostWithPrePublishChecksDisabled() { await page.click( '.editor-post-publish-button' ); - return page.waitForSelector( '.components-notice.is-success' ); + return page.waitForSelector( '.components-snackbar' ); } diff --git a/packages/e2e-test-utils/src/publish-post.js b/packages/e2e-test-utils/src/publish-post.js index 106e6c2f9abfb..694f40ec09517 100644 --- a/packages/e2e-test-utils/src/publish-post.js +++ b/packages/e2e-test-utils/src/publish-post.js @@ -16,5 +16,5 @@ export async function publishPost() { await page.click( '.editor-post-publish-button' ); // A success notice should show up - return page.waitForSelector( '.components-notice.is-success' ); + return page.waitForSelector( '.components-snackbar' ); } diff --git a/packages/e2e-tests/specs/reusable-blocks.test.js b/packages/e2e-tests/specs/reusable-blocks.test.js index 73d7b9117bf43..a8ab98c2dd318 100644 --- a/packages/e2e-tests/specs/reusable-blocks.test.js +++ b/packages/e2e-tests/specs/reusable-blocks.test.js @@ -42,7 +42,7 @@ describe( 'Reusable Blocks', () => { // Wait for creation to finish await page.waitForXPath( - '//*[contains(@class, "components-notice") and contains(@class, "is-success")]/*[text()="Block created."]' + '//*[contains(@class, "components-snackbar")]/*[text()="Block created."]' ); // Select all of the text in the title field by triple-clicking on it. We @@ -84,7 +84,7 @@ describe( 'Reusable Blocks', () => { // Wait for creation to finish await page.waitForXPath( - '//*[contains(@class, "components-notice") and contains(@class, "is-success")]/*[text()="Block created."]' + '//*[contains(@class, "components-snackbar")]/*[text()="Block created."]' ); // Save the reusable block @@ -184,7 +184,7 @@ describe( 'Reusable Blocks', () => { // Wait for deletion to finish await page.waitForXPath( - '//*[contains(@class, "components-notice") and contains(@class, "is-success")]/*[text()="Block deleted."]' + '//*[contains(@class, "components-snackbar")]/*[text()="Block deleted."]' ); // Check that we have an empty post again @@ -221,7 +221,7 @@ describe( 'Reusable Blocks', () => { // Wait for creation to finish await page.waitForXPath( - '//*[contains(@class, "components-notice") and contains(@class, "is-success")]/*[text()="Block created."]' + '//*[contains(@class, "components-snackbar")]/*[text()="Block created."]' ); // Select all of the text in the title field by triple-clicking on it. We From 24a058420986ac333eeb242bb243347ecedfd2aa Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 May 2019 10:58:36 +0100 Subject: [PATCH 11/25] Animate the snackbar notifications --- package-lock.json | 10 ++++++++ packages/components/package.json | 1 + packages/components/src/snackbar/list.js | 30 +++++++++++++++++------- 3 files changed, 33 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7211447a4e733..972075ddfaea6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3137,6 +3137,7 @@ "re-resizable": "^4.7.1", "react-click-outside": "^3.0.0", "react-dates": "^17.1.1", + "react-spring": "^8.0.20", "rememo": "^3.0.0", "tinycolor2": "^1.4.1", "uuid": "^3.3.2" @@ -18487,6 +18488,15 @@ "prop-types": "^15.5.8" } }, + "react-spring": { + "version": "8.0.20", + "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.20.tgz", + "integrity": "sha512-40ZUQ5uI5YHsoQWLPchWNcEUh6zQ6qvcVDeTI2vW10ldoCN3PvDsII9wBH2xEbMl+BQvYmHzGdfLTQxPxJWGnQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "prop-types": "^15.5.8" + } + }, "react-test-renderer": { "version": "16.8.4", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.4.tgz", diff --git a/packages/components/package.json b/packages/components/package.json index b47af61511f17..8ff6765b6da95 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -44,6 +44,7 @@ "re-resizable": "^4.7.1", "react-click-outside": "^3.0.0", "react-dates": "^17.1.1", + "react-spring": "^8.0.20", "rememo": "^3.0.0", "tinycolor2": "^1.4.1", "uuid": "^3.3.2" diff --git a/packages/components/src/snackbar/list.js b/packages/components/src/snackbar/list.js index 6a563c2f82a6d..aa8f6d9063552 100644 --- a/packages/components/src/snackbar/list.js +++ b/packages/components/src/snackbar/list.js @@ -3,6 +3,7 @@ */ import classnames from 'classnames'; import { omit, noop } from 'lodash'; +import { useTransition, animated } from 'react-spring'; /** * Internal dependencies @@ -23,17 +24,30 @@ function SnackbarList( { notices, className, children, onRemove = noop } ) { className = classnames( 'components-snackbar-list', className ); const removeNotice = ( id ) => () => onRemove( id ); + const transitions = useTransition( + notices, + ( notice ) => notice.id, + { + from: { opacity: 0 }, + enter: { opacity: 1 }, + leave: { opacity: 0 }, + config: { tension: 300 }, + } + ); + return (
{ children } - { [ ...notices ].reverse().map( ( notice ) => ( - - { notice.content } - + { transitions.map( ( { item: notice, key, props: style } ) => ( + + + { notice.content } + + ) ) }
); From 95b919a13c35365b073511d4b6c761f77195ee00 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 May 2019 13:58:58 +0100 Subject: [PATCH 12/25] Revert "Animate the snackbar notifications" This reverts commit 24a058420986ac333eeb242bb243347ecedfd2aa. --- package-lock.json | 10 -------- packages/components/package.json | 1 - packages/components/src/snackbar/list.js | 30 +++++++----------------- 3 files changed, 8 insertions(+), 33 deletions(-) diff --git a/package-lock.json b/package-lock.json index 972075ddfaea6..7211447a4e733 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3137,7 +3137,6 @@ "re-resizable": "^4.7.1", "react-click-outside": "^3.0.0", "react-dates": "^17.1.1", - "react-spring": "^8.0.20", "rememo": "^3.0.0", "tinycolor2": "^1.4.1", "uuid": "^3.3.2" @@ -18488,15 +18487,6 @@ "prop-types": "^15.5.8" } }, - "react-spring": { - "version": "8.0.20", - "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.20.tgz", - "integrity": "sha512-40ZUQ5uI5YHsoQWLPchWNcEUh6zQ6qvcVDeTI2vW10ldoCN3PvDsII9wBH2xEbMl+BQvYmHzGdfLTQxPxJWGnQ==", - "requires": { - "@babel/runtime": "^7.3.1", - "prop-types": "^15.5.8" - } - }, "react-test-renderer": { "version": "16.8.4", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.4.tgz", diff --git a/packages/components/package.json b/packages/components/package.json index 8ff6765b6da95..b47af61511f17 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -44,7 +44,6 @@ "re-resizable": "^4.7.1", "react-click-outside": "^3.0.0", "react-dates": "^17.1.1", - "react-spring": "^8.0.20", "rememo": "^3.0.0", "tinycolor2": "^1.4.1", "uuid": "^3.3.2" diff --git a/packages/components/src/snackbar/list.js b/packages/components/src/snackbar/list.js index aa8f6d9063552..6a563c2f82a6d 100644 --- a/packages/components/src/snackbar/list.js +++ b/packages/components/src/snackbar/list.js @@ -3,7 +3,6 @@ */ import classnames from 'classnames'; import { omit, noop } from 'lodash'; -import { useTransition, animated } from 'react-spring'; /** * Internal dependencies @@ -24,30 +23,17 @@ function SnackbarList( { notices, className, children, onRemove = noop } ) { className = classnames( 'components-snackbar-list', className ); const removeNotice = ( id ) => () => onRemove( id ); - const transitions = useTransition( - notices, - ( notice ) => notice.id, - { - from: { opacity: 0 }, - enter: { opacity: 1 }, - leave: { opacity: 0 }, - config: { tension: 300 }, - } - ); - return (
{ children } - { transitions.map( ( { item: notice, key, props: style } ) => ( - - - { notice.content } - - + { [ ...notices ].reverse().map( ( notice ) => ( + + { notice.content } + ) ) }
); From 8d9ac406a33931ef74144ff51a60a1fa2c8c284d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 May 2019 18:46:38 +0100 Subject: [PATCH 13/25] Adding the snackbar component to the docs manifest --- docs/manifest-devhub.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/manifest-devhub.json b/docs/manifest-devhub.json index 09544a23854c3..35bb752257688 100644 --- a/docs/manifest-devhub.json +++ b/docs/manifest-devhub.json @@ -857,6 +857,12 @@ "markdown_source": "../packages/components/src/slot-fill/README.md", "parent": "components" }, + { + "title": "Snackbar", + "slug": "snackbar", + "markdown_source": "../packages/components/src/snackbar/README.md", + "parent": "components" + }, { "title": "Spinner", "slug": "spinner", From cd0eafce768918daef3bade4cd2b66e8f071457f Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 20 May 2019 10:26:06 +0100 Subject: [PATCH 14/25] Remove the reversing of the notice list --- packages/components/src/snackbar/list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/snackbar/list.js b/packages/components/src/snackbar/list.js index 6a563c2f82a6d..c7cff210a138a 100644 --- a/packages/components/src/snackbar/list.js +++ b/packages/components/src/snackbar/list.js @@ -26,7 +26,7 @@ function SnackbarList( { notices, className, children, onRemove = noop } ) { return (
{ children } - { [ ...notices ].reverse().map( ( notice ) => ( + { notices.map( ( notice ) => ( Date: Mon, 20 May 2019 10:42:09 +0100 Subject: [PATCH 15/25] Support snackbar onClick properly --- packages/components/src/snackbar/index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/components/src/snackbar/index.js b/packages/components/src/snackbar/index.js index aed80ee5d73e2..9d7461b991aa4 100644 --- a/packages/components/src/snackbar/index.js +++ b/packages/components/src/snackbar/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { flow, noop } from 'lodash'; +import { noop } from 'lodash'; import classnames from 'classnames'; /** @@ -14,7 +14,6 @@ import { useEffect } from '@wordpress/element'; */ import { Button } from '../'; -const stopPropagation = ( event ) => event.stopPropagation(); const NOTICE_TIMEOUT = 10000; function Snackbar( { @@ -60,7 +59,12 @@ function Snackbar( { key={ index } href={ url } isTertiary - onClick={ url ? stopPropagation : flow( stopPropagation, onClick ) } + onClick={ ( event ) => { + event.stopPropagation(); + if ( onClick ) { + onClick( event ); + } + } } className={ classnames( 'components-snackbar__action', buttonCustomClasses From 82a69940794e6d66c37526ae57e162fc77e69120 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 22 May 2019 12:29:37 +0100 Subject: [PATCH 16/25] Dismiss notice label --- packages/components/src/snackbar/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/snackbar/index.js b/packages/components/src/snackbar/index.js index 9d7461b991aa4..c5d5674ff408d 100644 --- a/packages/components/src/snackbar/index.js +++ b/packages/components/src/snackbar/index.js @@ -8,6 +8,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { useEffect } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -41,6 +42,7 @@ function Snackbar( { tabIndex="0" role="button" onKeyPress={ onRemove } + label={ __( 'Dismiss this notice' ) } >
{ children } From 8172262a5f90f13a0ac08ce278ee53b235db9ce1 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 22 May 2019 12:52:57 +0100 Subject: [PATCH 17/25] Tweak the design/spacing/width of the notices --- packages/components/src/snackbar/style.scss | 22 +++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss index 226a361cc7098..95e8d7f46abc8 100644 --- a/packages/components/src/snackbar/style.scss +++ b/packages/components/src/snackbar/style.scss @@ -5,9 +5,12 @@ border-radius: $radius-round-rectangle; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); color: $white; - padding: 10px; - min-width: 200px; - max-width: 400px; + padding: 15px 10px 15px 20px; + width: calc(100% - 20px); + + @include break-small() { + width: fit-content; + } &:hover { background-color: $dark-gray-900; @@ -22,8 +25,11 @@ } .components-snackbar__action.components-button { - margin-left: 20px; + margin-left: 25px; color: $white; + height: auto; + flex-shrink: 0; + line-height: $default-line-height; &:not(:disabled):not([aria-disabled="true"]):not(.is-default) { text-decoration: underline; @@ -38,11 +44,19 @@ .components-snackbar__content { display: flex; align-items: center; + justify-content: space-between; + line-height: $default-line-height; } .components-snackbar-list { position: absolute; z-index: z-index(".components-snackbar-list"); + width: 100%; + + @include break-small() { + width: auto; + max-width: 800px; + } .components-snackbar { margin-top: 10px; From c4ea9ab3789c4bd3114c052c97244140ae86ce1c Mon Sep 17 00:00:00 2001 From: sarah Date: Wed, 22 May 2019 12:29:04 +0100 Subject: [PATCH 18/25] Improve spacing of elements inside of snackbar. --- packages/components/src/snackbar/style.scss | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss index 95e8d7f46abc8..57856219880cc 100644 --- a/packages/components/src/snackbar/style.scss +++ b/packages/components/src/snackbar/style.scss @@ -5,12 +5,7 @@ border-radius: $radius-round-rectangle; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); color: $white; - padding: 15px 10px 15px 20px; - width: calc(100% - 20px); - - @include break-small() { - width: fit-content; - } + padding: 8px 16px; &:hover { background-color: $dark-gray-900; @@ -25,7 +20,7 @@ } .components-snackbar__action.components-button { - margin-left: 25px; + margin-left: 32px; color: $white; height: auto; flex-shrink: 0; From 2a28fd91519f2a2b8968256475a71e65c12764c5 Mon Sep 17 00:00:00 2001 From: sarah Date: Wed, 22 May 2019 13:27:14 +0100 Subject: [PATCH 19/25] Ensure baselines line up properly and elements have the correct padding. --- packages/components/src/snackbar/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss index 57856219880cc..1781d150da5e0 100644 --- a/packages/components/src/snackbar/style.scss +++ b/packages/components/src/snackbar/style.scss @@ -5,7 +5,7 @@ border-radius: $radius-round-rectangle; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); color: $white; - padding: 8px 16px; + padding: 16px 24px; &:hover { background-color: $dark-gray-900; @@ -38,7 +38,7 @@ .components-snackbar__content { display: flex; - align-items: center; + align-items: baseline; justify-content: space-between; line-height: $default-line-height; } From 6f4a1d5e116503e40bc44231568ca7cf2be303c0 Mon Sep 17 00:00:00 2001 From: sarah Date: Wed, 22 May 2019 13:37:06 +0100 Subject: [PATCH 20/25] On mobile screens, show full-width snackbar. --- packages/components/src/snackbar/style.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss index 1781d150da5e0..d2a211abf6c95 100644 --- a/packages/components/src/snackbar/style.scss +++ b/packages/components/src/snackbar/style.scss @@ -6,6 +6,13 @@ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); color: $white; padding: 16px 24px; + // Where is this 20px value coming from? + width: calc(100% - 20px); + max-width: 800px; + + @include break-small() { + width: fit-content; + } &:hover { background-color: $dark-gray-900; From 266cff17ccdc9235e8a9df61751c9fc8c6028265 Mon Sep 17 00:00:00 2001 From: sarah Date: Wed, 22 May 2019 14:30:48 +0100 Subject: [PATCH 21/25] Attempt to centre snackbar notice within editing window. --- packages/components/src/snackbar/style.scss | 12 +----------- .../edit-post/src/components/layout/style.scss | 3 ++- .../src/components/editor-notices/style.scss | 16 +++++++++++++++- 3 files changed, 18 insertions(+), 13 deletions(-) diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss index d2a211abf6c95..77bed1b07ca59 100644 --- a/packages/components/src/snackbar/style.scss +++ b/packages/components/src/snackbar/style.scss @@ -6,8 +6,7 @@ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); color: $white; padding: 16px 24px; - // Where is this 20px value coming from? - width: calc(100% - 20px); + width: 100%; max-width: 800px; @include break-small() { @@ -54,13 +53,4 @@ position: absolute; z-index: z-index(".components-snackbar-list"); width: 100%; - - @include break-small() { - width: auto; - max-width: 800px; - } - - .components-snackbar { - margin-top: 10px; - } } diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 202d5f173a857..3d4287cd66fbf 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -30,7 +30,8 @@ @include editor-left(".edit-post-layout__content .components-editor-notices__snackbar"); .edit-post-layout__content .components-editor-notices__snackbar { position: fixed; - padding-left: 20px; + padding-left: 16px; + padding-right: 16px; } .edit-post-layout__content { diff --git a/packages/editor/src/components/editor-notices/style.scss b/packages/editor/src/components/editor-notices/style.scss index c1db6a759703e..b041f558b5f90 100644 --- a/packages/editor/src/components/editor-notices/style.scss +++ b/packages/editor/src/components/editor-notices/style.scss @@ -34,5 +34,19 @@ .components-editor-notices__snackbar { bottom: 20px; - left: 20px; + display: flex; + justify-content: center; + width: 100%; + // Width needs to accommodate sidebar for centred positioning to work across all screens. + @include break-medium() { + width: calc(100% - #{ $admin-sidebar-width-big }); + + body.folded & { + width: calc(100% - #{ $admin-sidebar-width-collapsed }); + } + } + + @include break-large() { + width: calc(100% - #{ $admin-sidebar-width }); + } } From b2b47ed60adb919a16c3779f4e4f4e6eb5d090f5 Mon Sep 17 00:00:00 2001 From: sarah Date: Wed, 22 May 2019 14:44:42 +0100 Subject: [PATCH 22/25] Ensure that multiple snackbars stack well. --- packages/components/src/snackbar/style.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss index 77bed1b07ca59..cc2237fc69af8 100644 --- a/packages/components/src/snackbar/style.scss +++ b/packages/components/src/snackbar/style.scss @@ -8,6 +8,7 @@ padding: 16px 24px; width: 100%; max-width: 800px; + margin: 8px auto 0; @include break-small() { width: fit-content; @@ -53,4 +54,6 @@ position: absolute; z-index: z-index(".components-snackbar-list"); width: 100%; + display: flex; + flex-direction: column; } From b0b9fa41173b4291109acb754981f19b2ff02d2f Mon Sep 17 00:00:00 2001 From: sarah Date: Wed, 22 May 2019 14:52:55 +0100 Subject: [PATCH 23/25] Reduce max-width for better legibility of long lines. --- packages/components/src/snackbar/style.scss | 2 +- packages/editor/src/components/editor-notices/style.scss | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss index cc2237fc69af8..6a4c1e1168c69 100644 --- a/packages/components/src/snackbar/style.scss +++ b/packages/components/src/snackbar/style.scss @@ -7,7 +7,7 @@ color: $white; padding: 16px 24px; width: 100%; - max-width: 800px; + max-width: 600px; margin: 8px auto 0; @include break-small() { diff --git a/packages/editor/src/components/editor-notices/style.scss b/packages/editor/src/components/editor-notices/style.scss index b041f558b5f90..2bbcaa1dfd391 100644 --- a/packages/editor/src/components/editor-notices/style.scss +++ b/packages/editor/src/components/editor-notices/style.scss @@ -41,7 +41,8 @@ @include break-medium() { width: calc(100% - #{ $admin-sidebar-width-big }); - body.folded & { + body.folded &, + body.auto-fold & { width: calc(100% - #{ $admin-sidebar-width-collapsed }); } } From fc5408c21d2636269a50204203d29a3a2229f5ef Mon Sep 17 00:00:00 2001 From: sarah Date: Thu, 23 May 2019 10:41:44 +0100 Subject: [PATCH 24/25] Move positioning styles to layout file and nix unneeded styles. --- .../src/components/layout/style.scss | 19 ++++++++++++++++++- .../src/components/editor-notices/style.scss | 13 ------------- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 3d4287cd66fbf..06461708ccd8a 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -27,13 +27,30 @@ } // Adjust the position of the notices -@include editor-left(".edit-post-layout__content .components-editor-notices__snackbar"); .edit-post-layout__content .components-editor-notices__snackbar { position: fixed; padding-left: 16px; padding-right: 16px; } +// Because the sidebar overlaps the editor canvas, we need to adjust +// the width of the snackbar container div to accommodate the sidebar. +.components-editor-notices__snackbar { + @include break-medium() { + width: calc(100% - #{ $admin-sidebar-width-big }); + + body.folded &, + body.auto-fold & { + width: calc(100% - #{ $admin-sidebar-width-collapsed }); + } + } + + @include break-large() { + width: calc(100% - #{ $admin-sidebar-width }); + } +} + + .edit-post-layout__content { display: flex; flex-direction: column; diff --git a/packages/editor/src/components/editor-notices/style.scss b/packages/editor/src/components/editor-notices/style.scss index 2bbcaa1dfd391..ec89678860708 100644 --- a/packages/editor/src/components/editor-notices/style.scss +++ b/packages/editor/src/components/editor-notices/style.scss @@ -37,17 +37,4 @@ display: flex; justify-content: center; width: 100%; - // Width needs to accommodate sidebar for centred positioning to work across all screens. - @include break-medium() { - width: calc(100% - #{ $admin-sidebar-width-big }); - - body.folded &, - body.auto-fold & { - width: calc(100% - #{ $admin-sidebar-width-collapsed }); - } - } - - @include break-large() { - width: calc(100% - #{ $admin-sidebar-width }); - } } From 12cde84ac055312d6352c55ace5221290f555147 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 29 May 2019 11:42:27 +0100 Subject: [PATCH 25/25] Restore left aligned snackbars --- packages/components/src/snackbar/style.scss | 4 +--- .../src/components/layout/style.scss | 21 +++---------------- .../src/components/editor-notices/style.scss | 3 --- 3 files changed, 4 insertions(+), 24 deletions(-) diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss index 6a4c1e1168c69..40e8f75837ae6 100644 --- a/packages/components/src/snackbar/style.scss +++ b/packages/components/src/snackbar/style.scss @@ -8,7 +8,7 @@ padding: 16px 24px; width: 100%; max-width: 600px; - margin: 8px auto 0; + margin: 8px 0 0; @include break-small() { width: fit-content; @@ -54,6 +54,4 @@ position: absolute; z-index: z-index(".components-snackbar-list"); width: 100%; - display: flex; - flex-direction: column; } diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 06461708ccd8a..4c6458afe2f05 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -29,27 +29,12 @@ // Adjust the position of the notices .edit-post-layout__content .components-editor-notices__snackbar { position: fixed; + right: 0; + bottom: 20px; padding-left: 16px; padding-right: 16px; } - -// Because the sidebar overlaps the editor canvas, we need to adjust -// the width of the snackbar container div to accommodate the sidebar. -.components-editor-notices__snackbar { - @include break-medium() { - width: calc(100% - #{ $admin-sidebar-width-big }); - - body.folded &, - body.auto-fold & { - width: calc(100% - #{ $admin-sidebar-width-collapsed }); - } - } - - @include break-large() { - width: calc(100% - #{ $admin-sidebar-width }); - } -} - +@include editor-left(".edit-post-layout__content .components-editor-notices__snackbar"); .edit-post-layout__content { display: flex; diff --git a/packages/editor/src/components/editor-notices/style.scss b/packages/editor/src/components/editor-notices/style.scss index ec89678860708..e3387e1e65331 100644 --- a/packages/editor/src/components/editor-notices/style.scss +++ b/packages/editor/src/components/editor-notices/style.scss @@ -33,8 +33,5 @@ } .components-editor-notices__snackbar { - bottom: 20px; - display: flex; - justify-content: center; width: 100%; }