Update WordPress.com Reader icons to use Core Icons (#97877)

Update the Subscribe, Subscribed, Unsubscribe, and View Feed icon to use Core Icons.

apps/notifications/src/panel/templates/gridicons.tsx

@@ -71,22 +71,24 @@ const Gridicons = forwardRef< SVGSVGElement, GridiconsProps >(
 				);
 
 			case 'gridicons-reader-follow':
+				// Added "title" to the "plus" icon from the "@wordpress/icons" package. Ideally the package should support adding titles to icons.
 				return (
 					<svg { ...sharedProps } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 						<title>{ translate( 'Reader Follow' ) }</title>
-						<g>
-							<path d="M23 16v2h-3v3h-2v-3h-3v-2h3v-3h2v3h3zM20 2v9h-4v3h-3v4H4c-1.1 0-2-.9-2-2V2h18zM8 13v-1H4v1h4zm3-3H4v1h7v-1zm0-2H4v1h7V8zm7-4H4v2h14V4z" />
-						</g>
+						<path d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z" />
 					</svg>
 				);
 
 			case 'gridicons-reader-following':
 				return (
+					// Added "title" to the "published" icon from the "@wordpress/icons" package. Ideally the package should support adding titles to icons.
 					<svg { ...sharedProps } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 						<title>{ translate( 'Reader Following' ) }</title>
-						<g>
-							<path d="M23 13.482L15.508 21 12 17.4l1.412-1.388 2.106 2.188 6.094-6.094L23 13.482zm-7.455 1.862L20 10.89V2H2v14c0 1.1.9 2 2 2h4.538l4.913-4.832 2.095 2.176zM8 13H4v-1h4v1zm3-2H4v-1h7v1zm0-2H4V8h7v1zm7-3H4V4h14v2z" />
-						</g>
+						<path
+							fillRule="evenodd"
+							clipRule="evenodd"
+							d="M12 18.5a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm11.53-1.47-1.06-1.06L11 12.94l-1.47-1.47-1.06 1.06L11 15.06l4.53-4.53Z"
+						/>
 					</svg>
 				);
 

client/blocks/follow-button/style.scss

@@ -18,7 +18,7 @@ button.follow-button {
 
 	.follow-button__label {
 		color: var(--color-text-subtle);
-		margin-left: 5px;
+		margin-left: 3px;
 		white-space: nowrap;
 	}
 
@@ -28,6 +28,7 @@ button.follow-button {
 		.follow-button__label {
 			color: var(--color-success);
 		}
+
 		svg.reader-follow-feed path {
 			fill: var(--color-success);
 		}
@@ -48,12 +49,9 @@ button.follow-button {
 			display: inline-block;
 			pointer-events: auto;
 
-			path.following-icon-background {
+			path {
 				fill: var(--color-success);
 			}
-			path.following-icon-tick {
-				stroke: var(--color-success);
-			}
 		}
 
 		.follow-button__label {
@@ -68,13 +66,11 @@ button.follow-button {
 
 		&:hover {
 			color: var(--color-success);
+
 			svg.reader-following-feed {
-				path.following-icon-background {
+				path {
 					fill: var(--color-success);
 				}
-				path.following-icon-tick {
-					stroke: var(--color-success);
-				}
 			}
 		}
 	}
@@ -129,11 +125,7 @@ button.follow-button {
 		padding: 12px 24px 12px 20px;
 
 		svg.reader-follow-feed * {
-			stroke: var(--color-text-inverted);
-		}
-
-		svg.reader-following-feed * {
-			stroke: var(--color-text);
+			fill: var(--color-text-inverted);
 		}
 
 		.follow-button__label {

client/blocks/reader-feed-header/style.scss

@@ -87,6 +87,21 @@
 	margin-bottom: 16px;
 }
 
+// Override follow button styles of subscribed state i.e. show icon with gray color instead of green.
+.reader-feed-header__follow-button {
+	.follow-button.is-following {
+		svg.reader-following-feed path {
+			fill: initial;
+		}
+
+		&:hover {
+			svg.reader-following-feed path {
+				fill: initial;
+			}
+		}
+	}
+}
+
 .reader-feed-header {
 	z-index: z-index("root", ".reader-feed-header");
 

client/blocks/reader-post-card/style.scss

@@ -15,15 +15,12 @@
 		.follow-button__label {
 			color: var(--color-text-inverted);
 		}
+
 		.reader-following-feed,
 		.reader-follow-feed {
-			.following-icon-background,
 			path {
 				fill: var(--color-text-inverted);
 			}
-			.following-icon-tick {
-				stroke: var(--color-text-inverted);
-			}
 		}
 	}
 }

client/components/infinite-list/index.jsx

@@ -212,8 +212,10 @@ export default class InfiniteList extends Component {
 	}
 
 	componentWillUnmount() {
-		this._scrollContainer.removeEventListener( 'scroll', this.onScroll );
-		this._scrollContainer.removeEventListener( 'scroll', this._resetScroll );
+		if ( this._scrollContainer ) {
+			this._scrollContainer.removeEventListener( 'scroll', this.onScroll );
+			this._scrollContainer.removeEventListener( 'scroll', this._resetScroll );
+		}
 		this.cancelAnimationFrame();
 		this.cancelScrollUpdate();
 		this._isMounted = false;

client/landing/subscriptions/components/settings/comment-settings/comment-settings.tsx

@@ -3,7 +3,7 @@ import { Button } from '@wordpress/components';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { SubscriptionsEllipsisMenu } from '../../subscriptions-ellipsis-menu';
-import { UnsubscribeIcon } from '../icons';
+import UnsubscribeIcon from '../icons/unsubscribe-icon';
 import NotifyMeOfNewCommentsToggle from './notify-me-of-new-comments-toggle';
 import '../styles.scss';
 

client/landing/subscriptions/components/settings/icons/unsubscribe-icon.tsx

@@ -1,21 +1,12 @@
-type UnsubscribeIconProps = {
+import { Icon, close } from '@wordpress/icons';
+
+interface UnsubscribeIconProps {
 	className?: string;
-};
+	iconSize?: number;
+}
 
-const UnsubscribeIcon = ( { className }: UnsubscribeIconProps ) => (
-	<svg
-		className={ className }
-		width="20"
-		height="20"
-		viewBox="0 0 20 20"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M4 4.5H16V11H17.5V4.5V3H16H4H2.5V4.5V15C2.5 16.1046 3.39543 17 4.5 17H11.5V15.5H4.5C4.22386 15.5 4 15.2761 4 15V4.5ZM14.5 6.5H5.5V8H14.5V6.5ZM9.5 9.5H5.5V11H9.5V9.5ZM13 11H12V12H13V11ZM12 9.5H10.5V11V12V13.5H12H13H14.5V12V11V9.5H13H12ZM9.5 12H5.5V13.5H9.5V12ZM19.75 17V15.5H13.75V17H19.75Z"
-		/>
-	</svg>
-);
+export default function UnsubscribeIcon( props: UnsubscribeIconProps ): JSX.Element {
+	const { className, iconSize } = props;
 
-export default UnsubscribeIcon;
+	return <Icon className={ className } icon={ close } size={ iconSize || 20 } />;
+}

client/landing/subscriptions/components/settings/site-settings/site-settings.tsx

@@ -1,11 +1,12 @@
 import { Reader, SubscriptionManager } from '@automattic/data-stores';
 import { Button, __experimentalVStack as VStack } from '@wordpress/components';
+import { Icon, seen } from '@wordpress/icons';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { useRecordViewFeedButtonClicked } from 'calypso/landing/subscriptions/tracks';
 import { getFeedUrl } from 'calypso/reader/route';
 import { SubscriptionsEllipsisMenu } from '../../subscriptions-ellipsis-menu';
-import { FeedIcon, UnsubscribeIcon } from '../icons';
+import UnsubscribeIcon from '../icons/unsubscribe-icon';
 import DeliveryFrequencyInput from './delivery-frequency-input';
 import EmailMeNewCommentsToggle from './email-me-new-comments-toggle';
 import EmailMeNewPostsToggle from './email-me-new-posts-toggle';
@@ -126,7 +127,7 @@ export const SiteSettingsPopover = ( {
 						{ Boolean( feedId ) && (
 							<Button
 								className="site-settings-popover__view-feed-button"
-								icon={ <FeedIcon className="subscriptions-ellipsis-menu__item-icon" /> }
+								icon={ <Icon className="subscriptions-ellipsis-menu__item-icon" icon={ seen } /> }
 								href={ getFeedUrl( feedId ) }
 								onClick={ () => {
 									recordViewFeedButtonClicked( {

client/landing/subscriptions/components/settings/site-settings/styles.scss

@@ -58,10 +58,5 @@
 		&:not(:last-child) {
 			margin-bottom: 24px;
 		}
-
-		.subscriptions-ellipsis-menu__item-icon {
-			width: 20px;
-			height: 20px;
-		}
 	}
 }

client/reader/components/icons/follow-feed-icon.tsx

@@ -0,0 +1,11 @@
+import { Icon, plus } from '@wordpress/icons';
+
+interface ReaderFollowFeedIconProps {
+	iconSize: number;
+}
+
+export default function ReaderFollowFeedIcon( props: ReaderFollowFeedIconProps ): JSX.Element {
+	const { iconSize } = props;
+
+	return <Icon key="follow" className="reader-follow-feed" icon={ plus } size={ iconSize } />;
+}

client/reader/components/icons/following-feed-icon.tsx

@@ -0,0 +1,15 @@
+import { Icon, published } from '@wordpress/icons';
+
+interface ReaderFollowingFeedIconProps {
+	iconSize: number;
+}
+
+export default function ReaderFollowingFeedIcon(
+	props: ReaderFollowingFeedIconProps
+): JSX.Element {
+	const { iconSize } = props;
+
+	return (
+		<Icon key="following" className="reader-following-feed" icon={ published } size={ iconSize } />
+	);
+}