Merge pull request #1676 from Automattic/update/remove-flag-component

Framework: remove <Flag> component
Automattic · Dec 16, 2015 · 0f55ded · 0f55ded
2 parents afb0f51 + 78af584
commit 0f55ded
Show file tree

Hide file tree

Showing 13 changed files with 42 additions and 170 deletions.
diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss
@@ -32,7 +32,6 @@
 @import 'components/empty-content/style';
 @import 'components/external-link/style';
 @import 'components/feature-example/style';
-@import 'components/flag/style';
 @import 'components/foldable-card/style';
 @import 'components/follow-button/style';
 @import 'components/gauge/style';

diff --git a/client/components/domains/domain-suggestion-flag/index.jsx b/client/components/domains/domain-suggestion-flag/index.jsx
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-var React = require( 'react' );
+import React from 'react';
 
 /**
  * Internal dependencies
  */
-var Flag = require( 'components/flag' );
+import Notice from 'components/notice';
 
 const DomainSuggestionFlag = React.createClass( {
 	propTypes: {
@@ -20,10 +20,11 @@ const DomainSuggestionFlag = React.createClass( {
 				return this.props.domain.endsWith( tld );
 			}, this ) ) {
 			return (
-				<Flag
-					type="is-success">
+				<Notice
+					isCompact
+					status="is-success">
 					{ this.translate( 'New', {context: 'Domain suggestion flag'} ) }
-				</Flag>
+				</Notice>
 			);
 		}
 

diff --git a/client/components/domains/domain-suggestion/style.scss b/client/components/domains/domain-suggestion/style.scss
@@ -31,9 +31,12 @@
 		margin: 8px 0 0 0;
 	}
 
-	.flag {
-		margin-left: 5px;
-		vertical-align: middle;
+	.notice.is-compact {
+		margin: 0 0 0 8px;
+	}
+
+	.notice__icon {
+		display: none;
 	}
 
 	.is-placeholder & {

diff --git a/client/components/flag/README.md b/client/components/flag/README.md
diff --git a/client/components/flag/docs/example.jsx b/client/components/flag/docs/example.jsx
diff --git a/client/components/flag/index.jsx b/client/components/flag/index.jsx
diff --git a/client/components/flag/style.scss b/client/components/flag/style.scss
diff --git a/client/components/notice/style.scss b/client/components/notice/style.scss
@@ -156,19 +156,23 @@
 	border-radius: 2px;
 	color: $white;
 	display: inline-flex;
+	flex-wrap: nowrap;
 	min-height: 20px;
-	margin: 8px;
+	margin: 0;
 	padding: 0;
 	text-decoration: none;
+	text-transform: none;
+	vertical-align: middle;
 
 	.notice__text {
 		font-size: 12px;
-		padding: 8px;
+		padding: 6px 8px;
 		line-height: 1;
 	}
 
 	.notice__icon {
 		align-self: center;
+		flex-shrink: 0;
 		padding: 0 0 0 8px;
 		width: 14px;
 		height: 14px;

diff --git a/client/devdocs/design/index.jsx b/client/devdocs/design/index.jsx
@@ -48,7 +48,6 @@ var SearchCard = require( 'components/search-card' ),
 	InfoPopover = require( 'components/info-popover/docs/example' ),
 	FoldableCard = require( 'components/foldable-card/docs/example' ),
 	SectionHeader = require( 'components/section-header/docs/example' ),
-	Flag = require( 'components/flag/docs/example' ),
 	PaymentLogo = require( 'components/payment-logo/docs/example' ),
 	Count = require( 'components/count/docs/example' ),
 	Version = require( 'components/version/docs/example' ),
@@ -218,7 +217,6 @@ module.exports = React.createClass( {
 					<InputChrono />
 					<TimezoneDropdown />
 					<FoldableCard />
-					<Flag />
 					<PaymentLogo />
 					<BulkSelect />
 					<SectionHeader />

diff --git a/client/me/purchases/list/item/index.jsx b/client/me/purchases/list/item/index.jsx
@@ -9,7 +9,7 @@ import classNames from 'classnames';
  */
 import paths from '../../paths';
 import CompactCard from 'components/card/compact';
-import Flag from 'components/flag';
+import Notice from 'components/notice';
 import {
 	getName,
 	isExpired,
@@ -33,9 +33,9 @@ const PurchaseItem = React.createClass( {
 
 		if ( showCreditCardExpiringWarning( purchase ) ) {
 			return (
-				<Flag type="is-error" icon="noticon-warning">
+				<Notice isCompact status="is-error" icon="spam">
 					{ this.translate( 'Credit card expiring soon' ) }
-				</Flag>
+				</Notice>
 			);
 		}
 
@@ -48,14 +48,14 @@ const PurchaseItem = React.createClass( {
 		if ( isExpiring( purchase ) ) {
 			if ( purchase.expiryMoment < this.moment().add( 30, 'days' ) ) {
 				return (
-					<Flag type="is-error" icon="noticon-warning">
+					<Notice isCompact status="is-error" icon="spam">
 						{ this.translate( 'Expires %(timeUntilExpiry)s', {
 							args: {
 								timeUntilExpiry: purchase.expiryMoment.fromNow()
 							},
 							context: 'timeUntilExpiry is of the form "[number] [time-period] ago" i.e. "3 days ago"'
 						} ) }
-					</Flag>
+					</Notice>
 				);
 			}
 
@@ -66,14 +66,14 @@ const PurchaseItem = React.createClass( {
 
 		if ( isExpired( purchase ) ) {
 			return (
-				<Flag type="is-error" icon="noticon-warning">
+				<Notice isCompact status="is-error" icon="spam">
 					{ this.translate( 'Expired %(timeSinceExpiry)s', {
 						args: {
 							timeSinceExpiry: purchase.expiryMoment.fromNow()
 						},
 						context: 'timeSinceExpiry is of the form "[number] [time-period] ago" i.e. "3 days ago"'
 					} ) }
-				</Flag>
+				</Notice>
 			);
 		}
 

diff --git a/client/my-sites/current-site/style.scss b/client/my-sites/current-site/style.scss
@@ -142,3 +142,7 @@
 		content: '\f429';
 	}
 }
+
+.current-site .notice {
+	margin: 0 8px 8px;
+}
diff --git a/client/my-sites/upgrades/domain-management/components/domain/primary-flag.jsx b/client/my-sites/upgrades/domain-management/components/domain/primary-flag.jsx
@@ -6,7 +6,7 @@ import React from 'react';
 /**
  * Internal dependencies
  */
-import Flag from 'components/flag';
+import Notice from 'components/notice';
 
 const DomainPrimaryFlag = React.createClass( {
 	propTypes: {
@@ -16,12 +16,7 @@ const DomainPrimaryFlag = React.createClass( {
 	render() {
 		if ( this.props.domain.isPrimary ) {
 			return (
-				<Flag
-					className="is-primary"
-					type="is-success"
-					icon="noticon-checkmark">
-					{ this.translate( 'Primary Domain' ) }
-				</Flag>
+				<Notice isCompact status="is-success">{ this.translate( 'Primary Domain' ) }</Notice>
 			);
 		}
 

diff --git a/client/my-sites/upgrades/domain-management/edit/registered-domain.jsx b/client/my-sites/upgrades/domain-management/edit/registered-domain.jsx
@@ -10,7 +10,7 @@ import React from 'react';
 import analyticsMixin from 'lib/mixins/analytics';
 import Card from 'components/card/compact';
 import config from 'config';
-import Flag from 'components/flag';
+import Notice from 'components/notice';
 import DomainWarnings from 'my-sites/upgrades/components/domain-warnings';
 import Header from './card/header';
 import paths from 'my-sites/upgrades/paths';
@@ -43,25 +43,27 @@ const RegisteredDomain = React.createClass( {
 	getPrivacyProtection() {
 		if ( this.props.domain.hasPrivacyProtection ) {
 			return (
-				<Flag
-					type="is-success"
-					icon="noticon-lock">
+				<Notice
+					isCompact
+					status="is-success"
+					icon="lock">
 					{ this.translate( 'On', {
 						context: 'An icon label when Privacy Protection is enabled.'
 					} ) }
-				</Flag>
+				</Notice>
 			);
 		}
 
 		return (
-			<Flag
-				type="is-warning"
-				icon="noticon-warning"
+			<Notice
+				isCompact
+				status="is-warning"
+				icon="notice"
 				onClick={ this.goToPrivacyProtection }>
 				{ this.translate( 'None', {
 					context: 'An icon label when Privacy Protection is disabled.'
 				} ) }
-			</Flag>
+			</Notice>
 		);
 	},