Merge pull request #1603 from Automattic/update/flags-and-notices

Notices: absorb <Flag> component as compact <Notice>.
Automattic · Dec 16, 2015 · eb9131a · eb9131a
2 parents 66f73b6 + f94deb1
commit eb9131a
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 48 deletions.
diff --git a/client/components/notice/docs/example.jsx b/client/components/notice/docs/example.jsx
@@ -28,40 +28,54 @@ var Notices = React.createClass( {
 					<a className="design-assets__toggle button" onClick={ this.toggleNotices }>{ toggleNoticesText }</a>
 				</h2>
 
-				<Notice
-					text="I'm a notice with no status."
-					showDismiss={ false }
-					isCompact={ this.state.compactNotices ? true : null } />
-				<Notice
-					status="is-info"
-					text="I'm an `is-info` notice with custom icon."
-					icon="heart"
-					isCompact={ this.state.compactNotices ? true : null } />
-				<Notice status="is-success" text="I'm an `is-success` notice." isCompact={ this.state.compactNotices ? true : null } />
-				<Notice status="is-error" text="I'm an `is-error` notice." isCompact={ this.state.compactNotices ? true : null } />
-				<Notice
-					status="is-warning"
-					icon="mention"
-					text="I'm an `is-warning` notice with custom icon."
-					isCompact={ this.state.compactNotices ? true : null } />
-				<Notice
-					status="is-warning"
-					isCompact={ this.state.compactNotices ? true : null }
-					showDismiss={ false }
-					text={ "I'm an `is-warning` notice with an action." }>
-					<NoticeAction href="#">
-						{ "Update" }
-					</NoticeAction>
-				</Notice>
-				<Notice
-					status="is-success"
-					isCompact={ this.state.compactNotices ? true : null }
-					showDismiss={ false }
-					text={ "I'm an `is-success` notice with an arrow link." }>
-					<NoticeAction href="#" external={ true }>
-						{ "Preview" }
-					</NoticeAction>
-				</Notice>
+				<div>
+					<Notice
+						text="I'm a notice with no status."
+						showDismiss={ false }
+						isCompact={ this.state.compactNotices ? true : null } />
+				</div>
+				<div>
+					<Notice
+						status="is-info"
+						text="I'm an `is-info` notice with custom icon."
+						icon="heart"
+						isCompact={ this.state.compactNotices ? true : null } />
+				</div>
+				<div>
+					<Notice status="is-success" text="I'm an `is-success` notice." isCompact={ this.state.compactNotices ? true : null } />
+				</div>
+				<div>
+					<Notice status="is-error" text="I'm an `is-error` notice." isCompact={ this.state.compactNotices ? true : null } />
+				</div>
+				<div>
+					<Notice
+						status="is-warning"
+						icon="mention"
+						text="I'm an `is-warning` notice with custom icon."
+						isCompact={ this.state.compactNotices ? true : null } />
+				</div>
+				<div>
+					<Notice
+						status="is-warning"
+						isCompact={ this.state.compactNotices ? true : null }
+						showDismiss={ false }
+						text={ "I'm an `is-warning` notice with an action." }>
+						<NoticeAction href="#">
+							{ "Update" }
+						</NoticeAction>
+					</Notice>
+				</div>
+				<div>
+					<Notice
+						status="is-success"
+						isCompact={ this.state.compactNotices ? true : null }
+						showDismiss={ false }
+						text={ "I'm an `is-success` notice with an arrow link." }>
+						<NoticeAction href="#" external={ true }>
+							{ "Preview" }
+						</NoticeAction>
+					</Notice>
+				</div>
 			</div>
 		);
 	},

diff --git a/client/components/notice/style.scss b/client/components/notice/style.scss
@@ -153,24 +153,57 @@
 
 // Compact notices
 .notice.is-compact {
-	margin-bottom: 8px;
-	font-size: 14px;
+	border-radius: 2px;
+	color: $white;
+	display: inline-flex;
+	min-height: 20px;
+	margin: 8px;
+	padding: 0;
+	text-decoration: none;
 
 	.notice__text {
-		padding: 11px 24px 11px 16px;
+		font-size: 12px;
+		padding: 8px;
+		line-height: 1;
 	}
 
 	.notice__icon {
-		display: none;
+		align-self: center;
+		padding: 0 0 0 8px;
+		width: 14px;
+		height: 14px;
+		vertical-align: middle;
 	}
 
 	.notice__dismiss {
-		padding: 9px 16px;
+		display: none;
 	}
 
-	a.notice__action .gridicon {
-		width: 18px;
-		height: 18px;
+	a.notice__action {
+		background: transparent;
+		display: inline-block;
+		font-size: 11px;
+		font-weight: 600;
+		align-self: center;
+		margin-left: 16px;
+		padding: 0 8px;
+		text-decoration: underline;
+		text-transform: uppercase;
+
+		&:hover,
+		&:active,
+		&:focus {
+			background: transparent;
+			text-decoration: none;
+		}
+
+		.gridicon {
+			margin-left: 8px;
+			width: 14px;
+			height: 14px;
+			vertical-align: sub;
+			opacity: 1;
+		}
 	}
 }
 
@@ -200,8 +233,3 @@
 		background: rgba( 255, 255, 255, 0.2 );
 	}
 }
-
-// For site notices
-.current-site.card .notice.is-compact {
-	margin-bottom: 0px
-}
diff --git a/client/my-sites/current-site/index.jsx b/client/my-sites/current-site/index.jsx
@@ -102,7 +102,7 @@ module.exports = React.createClass( {
 			<Notice
 				showDismiss={ false }
 				isCompact={ true }
-				text={ this.translate( 'The site redirects to {{a}}%(url)s{{/a}}', {
+				text={ this.translate( 'Redirects to {{a}}%(url)s{{/a}}', {
 					args: { url: hostname },
 					components: { a: <a href={ site.URL }/> }
 				} ) }>