Update notice styles to match Calypso (#9080)

* update notice styles * update hard-coded notice html * remove underlines
Automattic · Mar 22, 2018 · e4aa66e · e4aa66e
1 parent 3281d38
commit e4aa66e
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 163 deletions.
diff --git a/_inc/client/components/admin-notices/index.jsx b/_inc/client/components/admin-notices/index.jsx
@@ -12,7 +12,7 @@ class AdminNotices extends React.Component {
 		if ( $vpDeactivationNotice.length > 0 ) {
 			$vpDeactivationNotice.each( function() {
 				const $notice = jQuery( this ).addClass( 'dops-notice is-success is-dismissable' ).removeClass( 'wrap vp-notice notice notice-success' );
-				const icon = '<svg class="gridicon gridicons-notice dops-notice__icon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414"/></g></svg>';
+				const icon = '<span class="dops-notice__icon-wrapper"><svg class="gridicon gridicons-notice dops-notice__icon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414"/></g></svg></span>';
 				$notice.wrapInner( '<span class="dops-notice__content">' );
 				$notice.find( '.dops-notice__content' ).before( icon ).css( 'display', 'block' );
 				$notice.find( '.dops-notice__content' ).after( dismiss );
@@ -33,8 +33,8 @@ class AdminNotices extends React.Component {
 				const $warningOrSuccess = $success ? 'is-success' : 'is-warning';
 				const $notice = jQuery( this ).addClass( 'dops-notice vp-notice-jp ' + $warningOrSuccess ).removeClass( 'wrap vp-notice' );
 				const icon = $success
-					? '<svg class="gridicon gridicons-notice dops-notice__icon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414"/></g></svg>'
-					: '<svg class="gridicon gridicons-notice dops-notice__icon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 15h-2v-2h2v2zm0-4h-2l-.5-6h3l-.5 6z"></path></g></svg>';
+					? '<span class="dops-notice__icon-wrapper"><svg class="gridicon gridicons-notice dops-notice__icon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414"/></g></svg></span>'
+					: '<span class="dops-notice__icon-wrapper"><svg class="gridicon gridicons-notice dops-notice__icon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 15h-2v-2h2v2zm0-4h-2l-.5-6h3l-.5 6z"></path></g></svg></span>';
 				$notice.wrapInner( '<span class="dops-notice__content">' );
 				$notice.find( '.dops-notice__content' ).before( icon );
 				$notice.find( '.vp-message' ).removeClass( 'vp-message' ).addClass( 'dops-notice__text' );

diff --git a/_inc/client/components/global-notices/style.scss b/_inc/client/components/global-notices/style.scss
@@ -3,9 +3,8 @@
 @import '../../scss/z-index';
 
 .global-notices {
-	overflow: hidden;
 	text-align: right;
-	//pointer-events: none;
+	pointer-events: none;
 
 	z-index: z-index( 'root', '.global-notices' );
 	position: fixed;
@@ -39,43 +38,38 @@
 	margin-bottom: 0;
 	text-align: left;
 	pointer-events: auto;
+	border-radius: 0;
+	box-shadow: 0 2px 5px rgba( 0, 0, 0, 0.2 ),
+	0 0 56px rgba( 0, 0, 0, 0.15 );
+
+	.dops-notice__icon-wrapper {
+		border-radius: 0;
+	}
 
 	@include breakpoint( ">660px" ) {
 		display: flex;
-		border-radius: 20px;
 		overflow: hidden;
 		margin-bottom: 24px;
-	}
-}
-
-.global-notices .dops-notice__icon {
-
-	@include breakpoint( ">660px" ) {
-		padding: 8px 0 8px 16px;
-	}
-}
+		border-radius: 3px;
 
-.global-notices .dops-notice__content {
-	flex-basis: auto;
-	flex-grow: 1;
-
-	@include breakpoint( ">660px" ) {
-		padding: 9px 13px;
+		.dops-notice__icon-wrapper {
+			border-radius: 3px 0 0 3px;
+		}
 	}
 }
 
 .global-notices .dops-notice a.dops-notice__action {
 
 	@include breakpoint( ">660px" ) {
 		font-size: 14px;
-		padding: 9px 16px;
+		padding: 13px 16px;
 	}
 }
 
 .global-notices .dops-notice__dismiss {
 	flex-shrink: 0;
 
 	@include breakpoint( ">660px" ) {
-		padding: 8px 16px;
+		padding: 13px 16px 0;
 	}
-}
+}
diff --git a/_inc/client/components/notice/index.jsx b/_inc/client/components/notice/index.jsx
@@ -78,32 +78,37 @@ export default class SimpleNotice extends React.Component {
 	};
 
 	render() {
-		const { status, className, isCompact, showDismiss } = this.props;
+		const {
+			children,
+			className,
+			icon,
+			isCompact,
+			onDismissClick,
+			showDismiss = ! isCompact, // by default, show on normal notices, don't show on compact ones
+			status,
+			text,
+			dismissText
+		} = this.props;
 		const classes = classnames( 'dops-notice', status, className, {
 			'is-compact': isCompact,
-			'is-dismissable': showDismiss
+			'is-dismissable': showDismiss,
 		} );
 
-		const { icon, text, children, onDismissClick, dismissText } = this.props;
-
 		return (
 			<div className={ classes }>
-				<Gridicon className="dops-notice__icon" icon={ icon || this.getIcon() } size={ 24 } />
+				<span className="dops-notice__icon-wrapper">
+					<Gridicon className="dops-notice__icon" icon={ icon || this.getIcon() } size={ 24 } />
+				</span>
 				<span className="dops-notice__content">
-					<span className="dops-notice__text">
-						{ text ? text : children }
-					</span>
+					<span className="dops-notice__text">{ text ? text : children }</span>
 				</span>
 				{ text ? children : null }
 				{ showDismiss && (
-					<span
-						role="button"
-						tabIndex="0"
-						onClick={ onDismissClick }
-						onKeyDown={ onKeyDownCallback( onDismissClick ) }
-						className="dops-notice__dismiss">
+					<span role="button" onKeyDown={ onKeyDownCallback( onDismissClick ) } tabIndex="0" className="dops-notice__dismiss" onClick={ onDismissClick }>
 						<Gridicon icon="cross" size={ 24 } />
-						<span className="screen-reader-text">{ dismissText }</span>
+						<span className="dops-notice__screen-reader-text screen-reader-text">
+							{ dismissText }
+						</span>
 					</span>
 				) }
 			</div>