Notices: Make non-dismissible notices push content down

assets/stylesheets/_z-index.scss

@@ -68,9 +68,9 @@ $z-layers: (
 	// but bellow #adminmenuback { z-index: 100 }
 	".edit-post-sidebar {greater than small}": 90,
 
-	// Show notices below expanded wp-admin submenus:
-	// #adminmenuwrap { z-index: 9990 }
-	".components-notice-list": 9989,
+	// Show notices below expanded editor bar
+	// .edit-post-header { z-index: 30 }
+	".components-notice-list": 29,
 
 	// Show modal under the wp-admin menus and the popover
 	".components-modal__screen-overlay": 100000,

packages/components/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 7.0.3 (Unreleased)
+
+### Polish
+
+- The `Notice` component will now always include the `.components-notice-list` class.
+
 ## 7.0.2 (2018-11-22)
 
 ## 7.0.1 (2018-11-21)

packages/components/src/notice/list.js

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { noop, omit } from 'lodash';
 
 /**
@@ -18,9 +19,11 @@ import Notice from './';
 * @param  {Object}   $0.children  Array of children to be rendered inside the notice list.
 * @return {Object}                The rendered notices list.
 */
-function NoticeList( { notices, onRemove = noop, className = 'components-notice-list', children } ) {
+function NoticeList( { notices, onRemove = noop, className, children } ) {
 	const removeNotice = ( id ) => () => onRemove( id );
 
+	className = classnames( 'components-notice-list', className );
+
 	return (
 		<div className={ className }>
 			{ children }

packages/components/src/notice/test/list.js

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import ShallowRenderer from 'react-test-renderer/shallow';
+
+/**
+ * WordPress dependencies
+ */
+import TokenList from '@wordpress/token-list';
+
+/**
+ * Internal dependencies
+ */
+import NoticeList from '../list';
+
+describe( 'NoticeList', () => {
+	it( 'should merge className', () => {
+		const renderer = new ShallowRenderer();
+
+		renderer.render( <NoticeList notices={ [] } className="is-ok" /> );
+
+		const classes = new TokenList( renderer.getRenderOutput().props.className );
+		expect( classes.contains( 'is-ok' ) ).toBe( true );
+		expect( classes.contains( 'components-notice-list' ) ).toBe( true );
+	} );
+} );

packages/edit-post/src/components/layout/index.js

@@ -80,7 +80,8 @@ function Layout( {
 				aria-label={ __( 'Editor content' ) }
 				tabIndex="-1"
 			>
-				<EditorNotices />
+				<EditorNotices dismissible={ false } className="is-pinned" />
+				<EditorNotices dismissible={ true } />
 				<PreserveScrollInReorder />
 				<EditorModeKeyboardShortcuts />
 				<KeyboardShortcutHelpModal />

packages/edit-post/src/components/layout/style.scss

@@ -13,22 +13,28 @@
 		color: $dark-gray-900;
 
 		@include break-small {
-			position: fixed;
-			top: inherit;
+			top: 0;
+		}
+
+		// Non-dismissible notices.
+		&.is-pinned.is-pinned {
+			position: relative;
+			left: 0;
+			top: 0;
 		}
+	}
 
-		.components-notice {
-			margin: 0 0 5px;
-			padding: 6px 12px;
-			min-height: $panel-header-height;
+	.components-notice {
+		margin: 0 0 5px;
+		padding: 6px 12px;
+		min-height: $panel-header-height;
 
-			.components-notice__dismiss {
-				margin: 10px 5px;
-			}
+		.components-notice__dismiss {
+			margin: 10px 5px;
 		}
 	}
 
-	// on mobile, toolbars behave differently
+	// On mobile, toolbars behave differently.
 	@include break-small {
 		padding-top: $header-height;
 	}
@@ -38,7 +44,7 @@
 			padding-top: $block-controls-height;
 		}
 
-		// on mobile, toolbars behave differently
+		// On mobile, toolbars behave differently.
 		@include break-small {
 			padding-top: $header-height + $block-toolbar-height;
 
@@ -53,8 +59,8 @@
 	}
 }
 
-@include editor-left(".components-notice-list");
-@include editor-right(".components-notice-list");
+@include editor-left(".edit-post-layout__content .components-notice-list");
+@include editor-right(".edit-post-layout__content .components-notice-list");
 
 .edit-post-layout__metaboxes:not(:empty) {
 	border-top: $border-width solid $light-gray-500;
@@ -79,10 +85,14 @@
 		padding-bottom: 0;
 	}
 
-	// On mobile the main content area has to scroll otherwise you can invoke
-	// the overscroll bounce on the non-scrolling container, causing
-	// (ノಠ益ಠ)ノ彡┻━┻
-	overflow-y: auto;
+	// On mobile the main content (html or body) area has to scroll.
+	// If, like we do on the desktop, scroll an element (.edit-post-layout__content) you can invoke
+	// the overscroll bounce on the non-scrolling container, causing for a frustrating scrolling experience.
+	// The following rule enables this scrolling beyond the mobile breakpoint, because on the desktop
+	// breakpoints scrolling an isolated element helps avoid scroll bleed.
+	@include break-small() {
+		overflow-y: auto;
+	}
 	-webkit-overflow-scrolling: touch;
 
 	// This rule ensures that if you've scrolled to the end of a container,

packages/editor/src/components/editor-notices/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { filter } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -10,10 +15,16 @@ import { compose } from '@wordpress/compose';
  */
 import TemplateValidationNotice from '../template-validation-notice';
 
-function EditorNotices( props ) {
+export function EditorNotices( { dismissible, notices, ...props } ) {
+	if ( dismissible !== undefined ) {
+		notices = filter( notices, { isDismissible: dismissible } );
+	}
+
 	return (
-		<NoticeList { ...props }>
-			<TemplateValidationNotice />
+		<NoticeList notices={ notices } { ...props }>
+			{ dismissible !== false && (
+				<TemplateValidationNotice />
+			) }
 		</NoticeList>
 	);
 }

packages/editor/src/components/editor-notices/test/index.js

@@ -0,0 +1,35 @@
+/**
+ * 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( <EditorNotices notices={ notices } /> );
+		expect( wrapper.prop( 'notices' ) ).toHaveLength( 3 );
+		expect( wrapper.children() ).toHaveLength( 1 );
+	} );
+
+	it( 'renders only dismissible notices', () => {
+		const wrapper = shallow( <EditorNotices notices={ notices } dismissible={ true } /> );
+		expect( wrapper.prop( 'notices' ) ).toHaveLength( 2 );
+		expect( wrapper.children() ).toHaveLength( 1 );
+	} );
+
+	it( 'renders only non-dismissible notices', () => {
+		const wrapper = shallow( <EditorNotices notices={ notices } dismissible={ false } /> );
+		expect( wrapper.prop( 'notices' ) ).toHaveLength( 1 );
+		expect( wrapper.children() ).toHaveLength( 0 );
+	} );
+} );