Fix link icon alignment

assets/js/components/KeyMetrics/ChangeMetricsLink.js

@@ -66,8 +66,8 @@ export default function ChangeMetricsLink() {
 				linkButton
 				className="googlesitekit-km-change-metrics-cta"
 				onClick={ openMetricsSelectionPanel }
+				leadingIcon={ <PencilIcon width={ 22 } height={ 22 } /> }
 			>
-				<PencilIcon width={ 22 } height={ 22 } />
 				{ __( 'Change Metrics', 'google-site-kit' ) }
 			</Link>
 			<SetupCompletedSurveyTrigger />

assets/js/components/Link.js

@@ -64,6 +64,8 @@ const Link = forwardRef( ( props, ref ) => {
 		standalone = false,
 		linkButton = false,
 		to,
+		leadingIcon,
+		trailingIcon,
 		...otherProps
 	} = props;
 
@@ -151,6 +153,27 @@ const Link = forwardRef( ( props, ref ) => {
 	const LinkComponent = getLinkComponent();
 	const ariaLabel = getAriaLabel();
 
+	// Set the prefix/suffix icons, based on the type of link this is and
+	// the props supplied.
+	let leadingIconToUse = leadingIcon;
+	let trailingIconToUse = trailingIcon;
+
+	if ( back ) {
+		leadingIconToUse = <BackIcon width={ 14 } height={ 14 } />;
+	}
+
+	if ( external && ! hideExternalIndicator ) {
+		trailingIconToUse = <ExternalIcon width={ 14 } height={ 14 } />;
+	}
+
+	if ( arrow && ! inverse ) {
+		trailingIconToUse = <ArrowIcon width={ 14 } height={ 14 } />;
+	}
+
+	if ( arrow && inverse ) {
+		trailingIconToUse = <ArrowInverseIcon width={ 14 } height={ 14 } />;
+	}
+
 	return (
 		<LinkComponent
 			aria-label={ ariaLabel }
@@ -177,23 +200,17 @@ const Link = forwardRef( ( props, ref ) => {
 			to={ to }
 			{ ...otherProps }
 		>
-			{ back && (
+			{ !! leadingIconToUse && (
 				<IconWrapper marginRight={ 5 }>
-					<BackIcon width={ 14 } height={ 14 } />
+					{ leadingIconToUse }
 				</IconWrapper>
 			) }
-			<span>{ children }</span>
-			{ external && ! hideExternalIndicator && (
+			<span className="googlesitekit-cta-link__contents">
+				{ children }
+			</span>
+			{ !! trailingIconToUse && (
 				<IconWrapper marginLeft={ 5 }>
-					<ExternalIcon width={ 14 } height={ 14 } />
-				</IconWrapper>
-			) }
-			{ arrow && (
-				<IconWrapper marginLeft={ 5 }>
-					{ ! inverse && <ArrowIcon width={ 14 } height={ 14 } /> }
-					{ inverse && (
-						<ArrowInverseIcon width={ 14 } height={ 14 } />
-					) }
+					{ trailingIconToUse }
 				</IconWrapper>
 			) }
 		</LinkComponent>
@@ -212,11 +229,13 @@ Link.propTypes = {
 	hideExternalIndicator: PropTypes.bool,
 	href: PropTypes.string,
 	inverse: PropTypes.bool,
+	leadingIcon: PropTypes.node,
+	linkButton: PropTypes.bool,
 	onClick: PropTypes.func,
 	small: PropTypes.bool,
 	standalone: PropTypes.bool,
-	linkButton: PropTypes.bool,
 	to: PropTypes.string,
+	trailingIcon: PropTypes.node,
 };
 
 export default Link;

assets/js/components/settings/SettingsActiveModule/Footer.js

@@ -245,13 +245,15 @@ export default function Footer( props ) {
 					__( 'Edit %s settings', 'google-site-kit' ),
 					name
 				) }
+				trailingIcon={
+					<PencilIcon
+						className="googlesitekit-settings-module__edit-button-icon"
+						width={ 10 }
+						height={ 10 }
+					/>
+				}
 			>
 				{ __( 'Edit', 'google-site-kit' ) }
-				<PencilIcon
-					className="googlesitekit-settings-module__edit-button-icon"
-					width="10"
-					height="10"
-				/>
 			</Link>
 		);
 	}
@@ -262,17 +264,19 @@ export default function Footer( props ) {
 				className="googlesitekit-settings-module__remove-button"
 				onClick={ handleDialog }
 				danger
+				trailingIcon={
+					<TrashIcon
+						className="googlesitekit-settings-module__remove-button-icon"
+						width={ 13 }
+						height={ 13 }
+					/>
+				}
 			>
 				{ sprintf(
 					/* translators: %s: module name */
 					__( 'Disconnect %s from Site Kit', 'google-site-kit' ),
 					name
 				) }
-				<TrashIcon
-					className="googlesitekit-settings-module__remove-button-icon"
-					width="13"
-					height="13"
-				/>
 			</Link>
 		);
 	} else if ( ! isEditing && moduleHomepage ) {

assets/js/components/user-input/UserInputPreviewGroup.js

@@ -193,10 +193,11 @@ export default function UserInputPreviewGroup( {
 							( !! currentlyEditingSlug && ! isEditing )
 						}
 						linkButton
+						trailingIcon={
+							<ChevronDownIcon width={ 20 } height={ 20 } />
+						}
 					>
 						{ __( 'Edit', 'google-site-kit' ) }
-
-						<ChevronDownIcon width={ 20 } height={ 20 } />
 					</Link>
 				</LoadingWrapper>
 			</div>

assets/sass/components/global/_googlesitekit-cta-link.scss

@@ -32,10 +32,6 @@
 		fill: currentColor;
 	}
 
-	> span > svg {
-		vertical-align: bottom;
-	}
-
 	&:hover {
 		color: $c-link;
 		text-decoration: underline;
@@ -117,7 +113,6 @@
 button {
 	&.googlesitekit-cta-link {
 		color: $c-content-primary;
-		display: inline-block;
 
 		svg {
 			fill: currentColor;

assets/sass/components/global/_googlesitekit-entity-header.scss

@@ -120,7 +120,6 @@
 		}
 
 		a {
-			display: inline-block;
 			margin: 4px; // Allow outline on focus to be visible.
 			max-width: 100%;
 			text-decoration: underline;

assets/sass/components/key-metrics/_googlesitekit-km-widget-tile.scss

@@ -142,6 +142,10 @@
 			strong {
 				font-weight: $fw-medium;
 			}
+
+			.googlesitekit-cta-link {
+				display: inline;
+			}
 		}
 
 		.googlesitekit-km-widget-tile__table-plain-text {

assets/sass/components/settings/_googlesitekit-settings-module.scss

@@ -224,11 +224,6 @@
 			font-size: 0.75rem;
 		}
 
-		.googlesitekit-settings-module__edit-button-icon,
-		.googlesitekit-settings-module__remove-button-icon {
-			margin-left: $grid-gap-phone;
-		}
-
 		.googlesitekit-settings-module__edit-button-icon {
 
 			svg {

assets/sass/widgets/_googlesitekit-widget-analyticsAllTraffic.scss

@@ -292,6 +292,11 @@
 		text-align: center;
 	}
 
+	.googlesitekit-widget--analyticsAllTraffic__legend .googlesitekit-cta-link__contents {
+		align-items: center;
+		display: inline-flex;
+	}
+
 	.googlesitekit-widget--analyticsAllTraffic__legend-slice {
 		align-items: center;
 		border-radius: 4px;
@@ -315,7 +320,7 @@
 	}
 
 	.googlesitekit-widget--analyticsAllTraffic__label {
-		display: flex;
+		display: inline-flex;
 		flex-direction: column;
 
 		&::after {

stories/links.stories.js

@@ -70,18 +70,45 @@ storiesOf( 'Global', module ).add(
 					</Link>
 				</p>
 				<p>
-					<Link onClick={ () => {} }>
-						<PencilIcon width={ 18 } height={ 18 } />
-						Default Link Button With Icon
+					<Link
+						onClick={ () => {} }
+						leadingIcon={
+							<PencilIcon width={ 18 } height={ 18 } />
+						}
+					>
+						Default Link Button With Icon Prefix
 					</Link>
 				</p>
 				<p>
 					<Link
 						onClick={ () => {} }
 						className="googlesitekit-cta-link--hover"
+						leadingIcon={
+							<PencilIcon width={ 18 } height={ 18 } />
+						}
 					>
-						<PencilIcon width={ 18 } height={ 18 } />
-						VRT: Default Link Button With Icon Hovered
+						VRT: Default Link Button With Icon Prefix Hovered
+					</Link>
+				</p>
+				<p>
+					<Link
+						onClick={ () => {} }
+						trailingIcon={
+							<PencilIcon width={ 18 } height={ 18 } />
+						}
+					>
+						Default Link Button With Icon Suffix
+					</Link>
+				</p>
+				<p>
+					<Link
+						onClick={ () => {} }
+						className="googlesitekit-cta-link--hover"
+						trailingIcon={
+							<PencilIcon width={ 18 } height={ 18 } />
+						}
+					>
+						VRT: Default Link Button With Icon Suffix Hovered
 					</Link>
 				</p>
 				<p>
@@ -99,8 +126,13 @@ storiesOf( 'Global', module ).add(
 					</Link>
 				</p>
 				<p>
-					<Link onClick={ () => {} } secondary>
-						<PencilIcon width={ 18 } height={ 18 } />
+					<Link
+						onClick={ () => {} }
+						secondary
+						leadingIcon={
+							<PencilIcon width={ 18 } height={ 18 } />
+						}
+					>
 						Secondary Link Button With Icon
 					</Link>
 				</p>
@@ -109,8 +141,10 @@ storiesOf( 'Global', module ).add(
 						onClick={ () => {} }
 						className="googlesitekit-cta-link--hover"
 						secondary
+						leadingIcon={
+							<PencilIcon width={ 18 } height={ 18 } />
+						}
 					>
-						<PencilIcon width={ 18 } height={ 18 } />
 						VRT: Secondary Link Button With Icon Hovered
 					</Link>
 				</p>