Add styles for Notice component (#8856)

WordPress · Aug 16, 2018 · 837d908 · 837d908
1 parent c3211fa
commit 837d908
Show file tree

Hide file tree

Showing 12 changed files with 117 additions and 46 deletions.
diff --git a/edit-post/components/layout/style.scss b/edit-post/components/layout/style.scss
@@ -17,13 +17,13 @@
 			top: inherit;
 		}
 
-		.notice {
+		.components-notice {
 			margin: 0 0 5px;
 			padding: 6px 12px;
 			min-height: $panel-header-height;
 
-			.notice-dismiss {
-				margin: 5px;
+			.components-notice__dismiss {
+				margin: 10px 5px;
 			}
 		}
 	}

diff --git a/packages/components/src/notice/README.md b/packages/components/src/notice/README.md
@@ -28,6 +28,6 @@ const MyNotice = () => (
 
 The following props are used to control the display of the component.
 
-* `status`: (string) can be `warning` (red), `success` (green), `error` (red), `info` (yellow)
+* `status`: (string) can be `warning` (yellow), `success` (green), `error` (red).
 * `onRemove`: function called when dismissing the notice
 * `isDismissible`: (bool) defaults to true, whether the notice should be dismissible or not
diff --git a/packages/components/src/notice/index.js b/packages/components/src/notice/index.js
@@ -9,17 +9,28 @@ import classnames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import IconButton from '../icon-button';
+
 function Notice( { className, status, children, onRemove = noop, isDismissible = true } ) {
-	const classNames = classnames( className, 'notice notice-alt notice-' + status, {
+	const classNames = classnames( className, 'components-notice', {
+		[ `is-${ status }` ]: ! ! status,
+	}, {
 		'is-dismissible': isDismissible,
 	} );
 	return (
 		<div className={ classNames }>
-			{ isString( children ) ? <p>{ children }</p> : children }
+			{ isString( children ) ? <div className="components-notice__content">{ children }</div> : children }
 			{ isDismissible && (
-				<button className="notice-dismiss" type="button" onClick={ onRemove }>
-					<span className="screen-reader-text">{ __( 'Dismiss this notice' ) }</span>
-				</button>
+				<IconButton
+					className="components-notice__dismiss"
+					icon="no"
+					label={ __( 'Dismiss this notice' ) }
+					onClick={ onRemove }
+					tooltip={ false }
+				/>
 			) }
 		</div>
 	);

diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss
@@ -1,3 +1,53 @@
+.components-notice {
+	background-color: $blue-medium-100;
+	border-left: 4px solid $blue-medium-500;
+	margin: 5px 15px 2px;
+	padding: 8px 12px;
+
+	&.is-dismissible {
+		padding-right: 36px;
+		position: relative;
+	}
+
+	&.is-success {
+		border-left-color: $alert-green;
+		background-color: lighten($alert-green, 45%);
+	}
+
+	&.is-warning {
+		border-left-color: $alert-yellow;
+		background-color: lighten($alert-yellow, 35%);
+	}
+
+	&.is-error {
+		border-left-color: $alert-red;
+		background-color: lighten($alert-red, 35%);
+	}
+}
+
+.components-notice__content {
+	font-size: 13px;
+	line-height: 1.5;
+}
+
+.components-notice__dismiss {
+	position: absolute;
+	top: 0;
+	right: 0;
+	color: $dark-gray-300;
+
+	&: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"]):focus {
+		color: $alert-red;
+		background-color: transparent;
+	}
+
+	&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
+		box-shadow: none;
+	}
+}
+
 .components-notice-list {
 	min-width: 300px;
 	z-index: z-index(".components-notice-list");

diff --git a/packages/components/src/notice/test/__snapshots__/index.js.snap b/packages/components/src/notice/test/__snapshots__/index.js.snap
@@ -2,18 +2,14 @@
 
 exports[`Notice should match snapshot 1`] = `
 <div
-  className="notice notice-alt notice-example is-dismissible"
+  className="components-notice is-example is-dismissible"
 >
-  <button
-    className="notice-dismiss"
+  <IconButton
+    className="components-notice__dismiss"
+    icon="no"
+    label="Dismiss this notice"
     onClick={[Function]}
-    type="button"
-  >
-    <span
-      className="screen-reader-text"
-    >
-      Dismiss this notice
-    </span>
-  </button>
+    tooltip={false}
+  />
 </div>
 `;
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
@@ -173,11 +173,11 @@
 		margin: 0 0 12px 0;
 		width: 100%;
 
-		.notice {
+		.components-notice {
 			margin-left: 0;
 			margin-right: 0;
 
-			p {
+			.components-notice__content {
 				font-size: $default-font-size;
 			}
 		}

diff --git a/packages/editor/src/components/contrast-checker/style.scss b/packages/editor/src/components/contrast-checker/style.scss
@@ -1,3 +1,3 @@
-.editor-contrast-checker > .notice {
+.editor-contrast-checker > .components-notice {
 	margin: 0;
 }
diff --git a/packages/editor/src/components/contrast-checker/test/__snapshots__/index.js.snap b/packages/editor/src/components/contrast-checker/test/__snapshots__/index.js.snap
@@ -16,11 +16,13 @@ exports[`ContrastChecker should render component when the colors do not meet AA
       status="warning"
     >
       <div
-        className="notice notice-alt notice-warning"
+        className="components-notice is-warning"
       >
-        <p>
+        <div
+          className="components-notice__content"
+        >
           This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
-        </p>
+        </div>
       </div>
     </Notice>
   </div>
@@ -43,11 +45,13 @@ exports[`ContrastChecker should render different message matching snapshot when
       status="warning"
     >
       <div
-        className="notice notice-alt notice-warning"
+        className="components-notice is-warning"
       >
-        <p>
+        <div
+          className="components-notice__content"
+        >
           This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.
-        </p>
+        </div>
       </div>
     </Notice>
   </div>
@@ -67,11 +71,13 @@ exports[`ContrastChecker should render messages when the textColor is valid, but
       status="warning"
     >
       <div
-        className="notice notice-alt notice-warning"
+        className="components-notice is-warning"
       >
-        <p>
+        <div
+          className="components-notice__content"
+        >
           This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
-        </p>
+        </div>
       </div>
     </Notice>
   </div>
@@ -92,11 +98,13 @@ exports[`ContrastChecker should take into consideration the font size passed 1`]
       status="warning"
     >
       <div
-        className="notice notice-alt notice-warning"
+        className="components-notice is-warning"
       >
-        <p>
+        <div
+          className="components-notice__content"
+        >
           This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
-        </p>
+        </div>
       </div>
     </Notice>
   </div>
@@ -117,11 +125,13 @@ exports[`ContrastChecker should take into consideration wherever text is large o
       status="warning"
     >
       <div
-        className="notice notice-alt notice-warning"
+        className="components-notice is-warning"
       >
-        <p>
+        <div
+          className="components-notice__content"
+        >
           This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
-        </p>
+        </div>
       </div>
     </Notice>
   </div>
@@ -143,11 +153,13 @@ exports[`ContrastChecker should use isLargeText to make decisions if both isLarg
       status="warning"
     >
       <div
-        className="notice notice-alt notice-warning"
+        className="components-notice is-warning"
       >
-        <p>
+        <div
+          className="components-notice__content"
+        >
           This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
-        </p>
+        </div>
       </div>
     </Notice>
   </div>

diff --git a/test/e2e/specs/change-detection.test.js b/test/e2e/specs/change-detection.test.js
@@ -189,7 +189,9 @@ describe( 'Change detection', () => {
 			pressWithModifier( META_KEY, 'S' ),
 
 			// Ensure save update fails and presents button.
-			page.waitForXPath( "//p[contains(text(), 'Updating failed')]" ),
+			page.waitForXPath(
+				'//*[contains(@class, "components-notice") and contains(@class, "is-error")]/*[text()="Updating failed"]'
+			),
 			page.waitForSelector( '.editor-post-save-draft' ),
 		] );
 

diff --git a/test/e2e/specs/preview.test.js b/test/e2e/specs/preview.test.js
@@ -102,7 +102,7 @@ describe( 'Preview', () => {
 			editorPage.waitForFunction( () => ! document.querySelector( '.editor-post-preview' ) ),
 			editorPage.click( '.editor-post-publish-panel__header button' ),
 		] );
-		expectedPreviewURL = await editorPage.$eval( '.notice-success a', ( node ) => node.href );
+		expectedPreviewURL = await editorPage.$eval( '.components-notice.is-success a', ( node ) => node.href );
 
 		await editorPage.bringToFront();
 		await waitForPreviewNavigation( previewPage );

diff --git a/test/e2e/specs/reusable-blocks.test.js b/test/e2e/specs/reusable-blocks.test.js
@@ -45,7 +45,7 @@ describe( 'Reusable Blocks', () => {
 
 		// Wait for creation to finish
 		await page.waitForXPath(
-			'//*[contains(@class, "notice-success")]/*[text()="Block created."]'
+			'//*[contains(@class, "components-notice") and contains(@class, "is-success")]/*[text()="Block created."]'
 		);
 
 		// Select all of the text in the title field by triple-clicking on it. We
@@ -92,7 +92,7 @@ describe( 'Reusable Blocks', () => {
 
 		// Wait for creation to finish
 		await page.waitForXPath(
-			'//*[contains(@class, "notice-success")]/*[text()="Block created."]'
+			'//*[contains(@class, "components-notice") and contains(@class, "is-success")]/*[text()="Block created."]'
 		);
 
 		// Save the reusable block

diff --git a/test/e2e/support/utils.js b/test/e2e/support/utils.js
@@ -291,7 +291,7 @@ export async function publishPost() {
 	await page.click( '.editor-post-publish-button' );
 
 	// A success notice should show up
-	return page.waitForSelector( '.notice-success' );
+	return page.waitForSelector( '.components-notice.is-success' );
 }
 
 /**