Admin bar: Add tooltip for new Reader placement (#93972)

* Add tooltip for new Reader placement. * Update popover headline and description. * Remove description bottom margin. * Hide the popover in the test environment. * Remove the popover in the test environment. * Limit the scope of the popover. * Give the popover a lower z-index than notifications. * Fix popover dismiss function call.
Automattic · Sep 3, 2024 · 66c1aea · 66c1aea
1 parent 707d8f0
commit 66c1aea
Show file tree

Hide file tree

Showing 2 changed files with 119 additions and 22 deletions.
diff --git a/client/layout/masterbar/logged-in.jsx b/client/layout/masterbar/logged-in.jsx
@@ -4,6 +4,7 @@ import page from '@automattic/calypso-router';
 import { PromptIcon } from '@automattic/command-palette';
 import { Button, Popover } from '@automattic/components';
 import { isWithinBreakpoint, subscribeIsWithinBreakpoint } from '@automattic/viewport';
+import { Button as WPButton } from '@wordpress/components';
 import { Icon, category } from '@wordpress/icons';
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
@@ -66,6 +67,7 @@ import Notifications from './masterbar-notifications/notifications-button';
 
 const NEW_MASTERBAR_SHIPPING_DATE = new Date( 2022, 3, 14 ).getTime();
 const MENU_POPOVER_PREFERENCE_KEY = 'dismissible-card-masterbar-collapsable-menu-popover';
+const READER_POPOVER_PREFERENCE_KEY = 'dismissible-card-masterbar-reader-popover';
 
 const MOBILE_BREAKPOINT = '<480px';
 const IS_RESPONSIVE_MENU_BREAKPOINT = '<782px';
@@ -78,6 +80,7 @@ class MasterbarLoggedIn extends Component {
 		isResponsiveMenu: isWithinBreakpoint( IS_RESPONSIVE_MENU_BREAKPOINT ),
 		// making the ref a state triggers a re-render when it changes (needed for popover)
 		menuBtnRef: null,
+		readerBtnRef: null,
 	};
 
 	static propTypes = {
@@ -93,6 +96,7 @@ class MasterbarLoggedIn extends Component {
 		isCheckoutFailed: PropTypes.bool,
 		isInEditor: PropTypes.bool,
 		hasDismissedThePopover: PropTypes.bool,
+		hasDismissedReaderPopover: PropTypes.bool,
 		isUserNewerThanNewNavigation: PropTypes.bool,
 		loadHelpCenterIcon: PropTypes.bool,
 		isGlobalSidebarVisible: PropTypes.bool,
@@ -319,6 +323,10 @@ class MasterbarLoggedIn extends Component {
 		this.props.savePreference( MENU_POPOVER_PREFERENCE_KEY, true );
 	};
 
+	dismissReaderPopover = () => {
+		this.props.savePreference( READER_POPOVER_PREFERENCE_KEY, true );
+	};
+
 	renderCheckout() {
 		const {
 			isCheckoutPending,
@@ -520,30 +528,63 @@ class MasterbarLoggedIn extends Component {
 	}
 
 	renderReader() {
-		const { translate } = this.props;
+		const { translate, sectionName, sectionGroup, isFetchingPrefs, hasDismissedReaderPopover } =
+			this.props;
+		const { readerBtnRef } = this.state;
 		return (
-			<Item
-				tipTarget="reader"
-				className="masterbar__reader"
-				url="/read"
-				icon={
-					<svg
-						width="24"
-						height="11"
-						viewBox="0 0 24 11"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-						className="masterbar__menu-icon masterbar_svg-reader"
+			<>
+				<Item
+					tipTarget="reader"
+					className="masterbar__reader"
+					url="/read"
+					icon={
+						<svg
+							width="24"
+							height="11"
+							viewBox="0 0 24 11"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+							className="masterbar__menu-icon masterbar_svg-reader"
+						>
+							<path d="M22.8746 4.60676L22.8197 4.3575C22.3347 2.17436 20.276 0.584279 17.9245 0.584279C16.6527 0.584279 15.4358 1.03122 14.5116 1.84775C14.1914 2.13139 13.9443 2.44081 13.743 2.74163C13.1849 2.63849 12.6085 2.56114 12.032 2.56114H12.0046C11.419 2.56114 10.8425 2.64709 10.2753 2.75023C10.0648 2.44081 9.82691 2.13139 9.49752 1.83915C8.57338 1.01403 7.35646 0.575684 6.08463 0.575684C3.72398 0.584279 1.66527 2.17436 1.18033 4.3575L1.12543 4.60676H0V6.00775H1.12543L1.18033 6.257C1.63782 8.44014 3.69653 10.0302 6.07548 10.0302C8.83873 10.0302 11.0804 7.91585 11.0804 5.31155C11.0804 5.31155 11.0896 4.72709 10.8517 3.97072C11.236 3.91915 11.6203 3.87618 12.0046 3.87618C12.3706 3.87618 12.7549 3.91056 13.1483 3.96213C12.9012 4.72709 12.9195 5.31155 12.9195 5.31155C12.9195 7.91585 15.1613 10.0302 17.9245 10.0302C20.3035 10.0302 22.3622 8.44874 22.8197 6.257L22.8746 6.00775H24V4.60676H22.8746ZM6.07548 8.62923C4.13572 8.62923 2.5528 7.14229 2.5528 5.30295C2.5528 3.46362 4.13572 1.97667 6.07548 1.97667C8.01524 1.97667 9.59816 3.46362 9.59816 5.30295C9.59816 7.14229 8.01524 8.62923 6.07548 8.62923ZM17.9245 8.62923C15.9847 8.62923 14.4018 7.14229 14.4018 5.30295C14.4018 3.46362 15.9847 1.97667 17.9245 1.97667C19.8643 1.97667 21.4472 3.46362 21.4472 5.30295C21.4472 7.14229 19.8643 8.62923 17.9245 8.62923Z" />
+						</svg>
+					}
+					onClick={ this.clickReader }
+					isActive={ this.isActive( 'reader', true ) }
+					tooltip={ translate( 'Read the blogs and topics you follow' ) }
+					preloadSection={ this.preloadReader }
+					ref={ ( ref ) => ref !== readerBtnRef && this.setState( { readerBtnRef: ref } ) }
+					hasGlobalBorderStyle
+				/>
+				{ readerBtnRef && (
+					<Popover
+						className="masterbar__reader-popover"
+						isVisible={
+							( sectionName === 'home' || sectionGroup === 'sites-dashboard' ) &&
+							! isFetchingPrefs &&
+							! hasDismissedReaderPopover
+						}
+						context={ readerBtnRef }
+						position="bottom left"
+						showDelay={ 500 }
+						ignoreViewportSize
 					>
-						<path d="M22.8746 4.60676L22.8197 4.3575C22.3347 2.17436 20.276 0.584279 17.9245 0.584279C16.6527 0.584279 15.4358 1.03122 14.5116 1.84775C14.1914 2.13139 13.9443 2.44081 13.743 2.74163C13.1849 2.63849 12.6085 2.56114 12.032 2.56114H12.0046C11.419 2.56114 10.8425 2.64709 10.2753 2.75023C10.0648 2.44081 9.82691 2.13139 9.49752 1.83915C8.57338 1.01403 7.35646 0.575684 6.08463 0.575684C3.72398 0.584279 1.66527 2.17436 1.18033 4.3575L1.12543 4.60676H0V6.00775H1.12543L1.18033 6.257C1.63782 8.44014 3.69653 10.0302 6.07548 10.0302C8.83873 10.0302 11.0804 7.91585 11.0804 5.31155C11.0804 5.31155 11.0896 4.72709 10.8517 3.97072C11.236 3.91915 11.6203 3.87618 12.0046 3.87618C12.3706 3.87618 12.7549 3.91056 13.1483 3.96213C12.9012 4.72709 12.9195 5.31155 12.9195 5.31155C12.9195 7.91585 15.1613 10.0302 17.9245 10.0302C20.3035 10.0302 22.3622 8.44874 22.8197 6.257L22.8746 6.00775H24V4.60676H22.8746ZM6.07548 8.62923C4.13572 8.62923 2.5528 7.14229 2.5528 5.30295C2.5528 3.46362 4.13572 1.97667 6.07548 1.97667C8.01524 1.97667 9.59816 3.46362 9.59816 5.30295C9.59816 7.14229 8.01524 8.62923 6.07548 8.62923ZM17.9245 8.62923C15.9847 8.62923 14.4018 7.14229 14.4018 5.30295C14.4018 3.46362 15.9847 1.97667 17.9245 1.97667C19.8643 1.97667 21.4472 3.46362 21.4472 5.30295C21.4472 7.14229 19.8643 8.62923 17.9245 8.62923Z" />
-					</svg>
-				}
-				onClick={ this.clickReader }
-				isActive={ this.isActive( 'reader', true ) }
-				tooltip={ translate( 'Read the blogs and topics you follow' ) }
-				preloadSection={ this.preloadReader }
-				hasGlobalBorderStyle
-			/>
+						<h1 className="masterbar__reader-popover-heading">
+							{ translate( "We've moved the Reader!", {
+								comment: 'This is a popover title',
+							} ) }
+						</h1>
+						<p className="masterbar__reader-popover-description">
+							{ translate( 'Click the eyeglasses icon to check it out.' ) }
+						</p>
+						<div className="masterbar__reader-popover-actions">
+							<WPButton isPrimary onClick={ this.dismissReaderPopover }>
+								{ translate( 'Got it', { comment: 'Got it, as in OK' } ) }
+							</WPButton>
+						</div>
+					</Popover>
+				) }
+			</>
 		);
 	}
 
@@ -858,6 +899,7 @@ class MasterbarLoggedIn extends Component {
 export default connect(
 	( state ) => {
 		const sectionGroup = getSectionGroup( state );
+		const sectionName = getSectionName( state );
 
 		// Falls back to using the user's primary site if no site has been selected
 		// by the user yet
@@ -881,6 +923,7 @@ export default connect(
 			siteAdminUrl: getSiteAdminUrl( state, siteId ),
 			siteHomeUrl: getSiteHomeUrl( state, siteId ),
 			sectionGroup,
+			sectionName,
 			domainOnlySite: isDomainOnlySite( state, siteId ),
 			hasNoSites: siteCount === 0,
 			user: getCurrentUser( state ),
@@ -894,6 +937,7 @@ export default connect(
 			isJetpackNotAtomic: isJetpackSite( state, siteId ) && ! isAtomicSite( state, siteId ),
 			currentLayoutFocus: getCurrentLayoutFocus( state ),
 			hasDismissedThePopover: getPreference( state, MENU_POPOVER_PREFERENCE_KEY ),
+			hasDismissedReaderPopover: getPreference( state, READER_POPOVER_PREFERENCE_KEY ),
 			isFetchingPrefs: isFetchingPreferences( state ),
 			// If the user is newer than new navigation shipping date, don't tell them this nav is new. Everything is new to them.
 			isUserNewerThanNewNavigation:

diff --git a/client/layout/masterbar/style.scss b/client/layout/masterbar/style.scss
@@ -1491,3 +1491,56 @@ a.masterbar__quick-language-switcher {
 		opacity: 1;
 	}
 }
+
+.popover.masterbar__reader-popover {
+	z-index: 176;
+
+	.popover__arrow::before {
+		--color-border-inverted: var(--color-neutral-100);
+	}
+
+	.popover__arrow {
+		border: 10px dashed var(--color-neutral-70) !important;
+		border-bottom-style: solid !important;
+		border-top: none !important;
+		border-left-color: transparent !important;
+		border-right-color: transparent !important;
+	}
+	.popover__inner {
+		display: flex;
+		gap: 16px;
+		padding: 16px;
+		flex-direction: column;
+		align-items: flex-start;
+		border-radius: 4px !important;
+		background-color: var(--color-neutral-100) !important;
+		border: 1px solid var(--color-neutral-70) !important;
+		left: 0 !important;
+	}
+
+	.masterbar__reader-popover-heading {
+		font-size: rem(16px);
+		color: var(--color-text-inverted);
+		font-weight: 500;
+	}
+
+	.masterbar__reader-popover-description {
+		max-width: 325px;
+		margin-top: -8px;
+		margin-bottom: 0;
+		font-size: rem(13px);
+		color: var(--color-neutral-0);
+		text-align: left;
+	}
+
+	.masterbar__reader-popover-actions {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		width: 100%;
+		button {
+			padding: 4px 8px;
+			font-size: rem(13px);
+		}
+	}
+}