Pass component-button__icon class through to icon, and use it for scs…

…s selectors
WordPress · Jul 11, 2018 · e241a6a · e241a6a
1 parent 98f0c5d
commit e241a6a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/components/button/index.js b/components/button/index.js
@@ -49,8 +49,13 @@ export function Button( props, ref ) {
 	let tagProps;
 
 	if ( href !== undefined && ! disabled ) {
-		tag = !! isExternalLink ? ExternalLink : 'a';
-		tagProps = { href, target };
+		if ( isExternalLink ) {
+			tag = ExternalLink;
+			tagProps = { href, target, iconClassName: 'components-button__icon' };
+		} else {
+			tag = 'a';
+			tagProps = { href, target };
+		}
 	} else {
 		tag = 'button';
 		tagProps = { type: 'button', disabled };

diff --git a/components/button/style.scss b/components/button/style.scss
@@ -182,11 +182,11 @@
 		font-size: 11px;
 	}
 
-	.components-external-link__icon {
+	&__icon {
 		margin: 2px 0 0 4px;
 	}
 
-	&.is-button .components-external-link__icon {
+	&.is-button &__icon {
 		align-self: center;
 		margin-top: 1px;
 	}

diff --git a/components/external-link/index.js b/components/external-link/index.js
@@ -15,14 +15,24 @@ import { __ } from '@wordpress/i18n';
 import Dashicon from '../dashicon';
 import './style.scss';
 
-function ExternalLink( { href, children, className, rel = '', ...additionalProps } ) {
+function ExternalLink( {
+	href,
+	children,
+	className,
+	iconClassName,
+	rel = '',
+	...additionalProps
+} ) {
 	rel = uniq( compact( [
 		...rel.split( ' ' ),
 		'external',
 		'noreferrer',
 		'noopener',
 	] ) ).join( ' ' );
+
 	const classes = classnames( 'components-external-link', className );
+	const iconClasses = classnames( 'components-external-link__icon', iconClassName );
+
 	return (
 		<a { ...additionalProps } className={ classes } href={ href } target="_blank" rel={ rel }>
 			{ children }
@@ -32,7 +42,7 @@ function ExternalLink( { href, children, className, rel = '', ...additionalProps
 					__( '(opens in a new window)' )
 				}
 			</span>
-			<Dashicon className="components-external-link__icon" icon="external" />
+			<Dashicon className={ iconClasses } icon="external" />
 		</a>
 	);
 }