Closed nfmohit closed 3 days ago
Thank you for the brilliant IB, @hussain-t ! Please take a look at my comments below:
external
prop for SubtleNotification
to ctaLinkExternal
? That way, the prop is a little more meaningful.Please let me know what you think, thank you!
Thanks, @nfmohit. I initially included the copies in the IB to accommodate reviewers who prefer to have the text repeated for clarity. However, as suggested, I have updated the IB to reference the ACs directly. The source of truth for the copies should be the Figma design.
Thanks @hussain-t ! IB LGTM π β
Hi @nfmohit, just a heads-up: we have another issue (#8725) in progress to implement a reusable SubtleNotification
component. cc: @ivonac4.
@kuasha420 Just wanted to share a few observations that I noticed while reviewing another issue that uses the SubtleNotification
component extracted here:
CC: @hussain-t
Thanks for spotting this, @nfmohit.
The state icon disappears in smaller viewports.
Thatβs the default behavior of the Subtle Notification implementation. We should review the other Subtle Notification designs in Figma to check if the icon is visible in smaller viewports. I think we should ensure consistency across all notifications, whether the icon is visible or not.
Sounds good, thank you @hussain-t !
@kuasha420 - One additional observation (as @wpdarren pointed out here):
This setup success banner should also prevent the display of the original module setup success banner. I think this could've been mentioned explicitly in the ACs.
Thanks for spotting this, @nfmohit.
The state icon disappears in smaller viewports.
Thatβs the default behavior of the Subtle Notification implementation. We should review the other Subtle Notification designs in Figma to check if the icon is visible in smaller viewports. I think we should ensure consistency across all notifications, whether the icon is visible or not.
@hussain-t On this topic, I also checked the Figma designs for the Subtle Notification in Audience Segmentation, and that does seem to include the icon in smaller viewports. See:
It looks like we do not have mobile designs for GA4AdSenseLinkedNotification
, PAXSetupSuccessSubtleNotification
, or Ads SetupSuccessSubtleNotification
.
Based on my observation, it looks like we should be keeping the icon for the smaller viewports. What do you think?
Thanks for confirming, @nfmohit. SGTM π
I've tested this and I will document down additional ITEMS here, starting to number it as from 3 and leave item 1 and 2 as what @nfmohit has highlighted in this comment.
I am assigning this to @kuasha420 for fixes.
Meanwhile, I am also tagging @nfmohit and @wpdarren in this because we did refer to @wpdarren 's observations under this document. I am not sure if we want to create additional tickets for those or which ones should sit within this issue as items 7 onwards. Would be great if you can review this so that we can track the issues better.
ITEM 3: This is more of a clarification. What is the expectation for the disappearance of the banners? Currently if we reload the page, the banner remains but if we go to another page (e.g. settings) and come back to the dashboard, it will be gone.
More context in the video below.
ITEM 4: It's been highlighted in @nfmohit 's comment about the icon not being there on mobile. I wanted to highlight the warning variant banner on mobile at 375px. Based on the figma at 375px, everything will appear correctly. However, in the actual implementation, the buttons are wrapping on 2 lines.
ITEM 5: On tablet, the banners just look weird in my opinion. Refer to the picture attached. There is a very dense block of text and the buttons sections have a lot of space. This feels unbalanced. I'm wondering if it might be best to move the buttons below and let the text sit along the width of the banner.
ITEM 6: There is this part of the QAB which states : "Ensure both the primary and secondary CTAs dismiss the notification." I understand that even clicking the CTAs would dismiss the notification. I wanted us to review this because I felt like it was a bad experience personally. My suggestion would be if we click on CTAs like 'Check publication status', it's not necessary to dismiss the notification?
More context in the video below:
Thank you @hussain-t @nfmohit and @kelvinballoo !
I've filed a follow up PR to fix most of the points raised. In addition-
ITEM 3 - This is consistent with the Setup Success Notifications of other modules. So this can move ahead as is. However, I think we need to show a similar notification if the publication needs further attention, once this notification is no longer displayed. Is there a issue filed for that, @nfmohit?
ITEM 5 - That's a good point, however, I couldn't find a design for tablet for Subtle Notification. Feel free to create a separate issue for this, and we can ask Sigal for a tablet design.
ITEM 6 - This was decided during CR here. I think it makes sense to dismiss the notifications on both CTA, but doesn't have a strong opinion either way. Any thoughts @nfmohit @hussain-t @techanvil ?
Thanks all!
Hmm, actually I am not sure it's such a good idea to dismiss a notification when the CTA is an external link.
There's no way of knowing for sure if the user successfully navigated to the link when clicking on the CTA, so it would be useful to keep the notification open in case they need to click on it again. That's my 2p on the issue, anyway.
Hmm, actually I am not sure it's such a good idea to dismiss a notification when the CTA is an external link.
There's no way of knowing for sure if the user successfully navigated to the link when clicking on the CTA, so it would be useful to keep the notification open in case they need to click on it again. That's my 2p on the issue, anyway.
@techanvil I agree. In the follow-up PR, we've removed the dismissal from the primary CTA. Thank you!
Top stuff, thanks @nfmohit.
Hi @kelvinballoo ! This is now back with you as we've addressed your observations with a follow-up PR:
Meanwhile, I am also tagging @nfmohit and @wpdarren in this because we did refer to @wpdarren 's observations under this document. I am not sure if we want to create additional tickets for those or which ones should sit within this issue as items 7 onwards. Would be great if you can review this so that we can track the issues better.
I think most of these concerns have been addressed, or Asana tasks have been created for them. Please let me know otherwise.
ITEM 3: @kelvinballoo - This is more of a clarification. What is the expectation for the disappearance of the banners? Currently if we reload the page, the banner remains but if we go to another page (e.g. settings) and come back to the dashboard, it will be gone.
@kuasha420 - This is consistent with the Setup Success Notifications of other modules. So this can move ahead as is. However, I think we need to show a similar notification if the publication needs further attention, once this notification is no longer displayed. Is there a issue filed for that, @nfmohit?
This is how the UX was defined. We will have notices in the module settings screens if the publication requires further setup/is pending verification. If you think it would be better to persist this notification until dismissed, could you please add this as a "Nice to Have" in the bug bash board? Thank you!
ITEM 4: It's been highlighted in @nfmohit 's comment about the icon not being there on mobile. I wanted to highlight the warning variant banner on mobile at 375px. Based on the figma at 375px, everything will appear correctly. However, in the actual implementation, the buttons are wrapping on 2 lines.
This has been addressed in a way such that if there is not enough space for the buttons (in extremely shrunk viewports), we'll stack the buttons so that one appears on top of another.
ITEM 5: @kelvinballoo - On tablet, the banners just look weird in my opinion. Refer to the picture attached. There is a very dense block of text and the buttons sections have a lot of space. This feels unbalanced. I'm wondering if it might be best to move the buttons below and let the text sit along the width of the banner.
@kuasha420 - That's a good point, however, I couldn't find a design for tablet for Subtle Notification. Feel free to create a separate issue for this, and we can ask Sigal for a tablet design.
@kelvinballoo If you do open an issue about this, please let it be a general enhancement issue for all subtle notifications, not specific to RRM. Thanks!
ITEM 6: There is this part of the QAB which states : "Ensure both the primary and secondary CTAs dismiss the notification." I understand that even clicking the CTAs would dismiss the notification. I wanted us to review this because I felt like it was a bad experience personally. My suggestion would be if we click on CTAs like 'Check publication status', it's not necessary to dismiss the notification?
We have changed this so that the banner is not dismissed anymore as part of the primary CTA.
Please let me know if you have any other concerns, thank you!
Hi @nfmohit , @kuasha420 , this is tested good overall. I have one item to highlight which is ITEM 4. The remaining were reviewed as good.
ITEM 4 β οΈ Stacking is working great. That said, personally, it will look better if the primary CTA (e.g. customize CTA) is at the top and 'Maybe later' CTA is at the bottom. It would be consistent with how the RRM dashboard banner is. Details are below.
I agree this is subjective and possibly it doesn't need to be done under this ticket. Maybe we can have a conversation with Sigal on this.
ITEM 1 β Colour of the icon is now correct at rgb(78, 51, 0) which is #4e3300
ITEM 2 β The state icon now appears on smaller viewports.
ITEM 3 β Noted on this. Added a ticket here : https://app.asana.com/0/1207894970935603/1208105264866854
ITEM 5 β
Agreed. New ticket raised here: https://github.com/google/site-kit-wp/issues/9215
ITEM 6 β Clicking the primary CTA will not dismiss the banner. Tested across all three variants. 'Maybe later' and 'Got it' buttons would dismiss the banner as expected.
ITEM 4 β οΈ Stacking is working great. That said, personally, it will look better if the primary CTA (e.g. customize CTA) is at the top and 'Maybe later' CTA is at the bottom. It would be consistent with how the RRM dashboard banner is. Details are below.
I agree this is subjective and possibly it doesn't need to be done under this ticket. Maybe we can have a conversation with Sigal on this.
Thank you @kelvinballoo. I would suggest creating a new general improvement issue for this so that we can put this suggestion for all subtle notifications. Thank you.
Thanks for checking @nfmohit . This is good to go. Moving to approval
ITEM 1 β Colour of the icon is now correct at rgb(78, 51, 0) which is #4e3300
ITEM 2 β The state icon now appears on smaller viewports.
ITEM 3 β Noted on this. Added a ticket here : https://app.asana.com/0/1207894970935603/1208105264866854
ITEM 4 β
Raised a new enhancement ticket under https://github.com/google/site-kit-wp/issues/9216
ITEM 5 β
Agreed. New ticket raised here: https://github.com/google/site-kit-wp/issues/9215
ITEM 6 β Clicking the primary CTA will not dismiss the banner. Tested across all three variants. 'Maybe later' and 'Got it' buttons would dismiss the banner as expected.
Feature Description
A subtle notification component should be used to implement the setup success banner for the Reader Revenue Manager module. The copy of the banner will vary depending on the onboarding state of the connected publication.
Screenshots for reference
Publication is awaiting review: ![image](https://github.com/google/site-kit-wp/assets/20284937/38940ecb-848a-4c8d-b4ee-e799dfca00ac) User needs to perform additional steps to complete publication setup: ![image](https://github.com/google/site-kit-wp/assets/20284937/7ab65018-ced3-41db-aeff-ed56fecafc82) Publication setup is complete: ![image](https://github.com/google/site-kit-wp/assets/20284937/791fac64-2015-4814-b5c2-7858ffebcca7)Do not alter or remove anything below. The following sections will be managed by moderators only.
Acceptance criteria
Implementation Brief
Reusable
SubtleNotification
componentIn the
assets/js/components/notifications
directory, create a new component,SubtleNotification.js
:SubtleNotification
that renders a notification with the following props:title
: The title of the notification.description
: The description of the notification.icon
: The icon for the notification (optional).ctaLabel
: The label for the CTA button.ctaLink
: The URL for the CTA button.onCTAClick
: A callback function to handle the CTA button click.ctaLinkExternal
: A boolean to indicate if the CTA link should open in a new tab and show an external link icon.dismissLabel
: The label for the dismiss button.onDismiss
: A callback function to dismiss the notification.variant
: The variant of the notification (success or warning). By default, it should besuccess
.googlesitekit-subtle-notification--warning
class to the notification container if the variant iswarning
.check-fill.svg
icon if the variant issuccess
.warning.svg
icon if the variant iswarning
.icon
prop is provided, render the provided icon.googlesitekit-subtle-notification--warning
class styles and any other necessary styles for the component inassets/sass/components/dashboard/_googlesitekit-subtle-notification.scss
.RRMSetupSuccessSubtleNotification component
In
assets/js/modules/reader-revenue-manager/components
, add a newdashboard
directory and create a new component,RRMSetupSuccessSubtleNotification.js
:RRMSetupSuccessSubtleNotification
that renders the setup success notification for the Reader Revenue Manager module.READER_REVENUE_MANAGER_SETUP_SUCCESS_NOTIFICATION
ORRRM_SETUP_SUCCESS_NOTIFICATION
.isItemDismissed
selector.null
.getPublicationOnboardingState
selector.getPublicationID
selector.getServiceURL
selector and pass the publication ID as an argument.ONBOARDING_COMPLETE
, return theSubtleNotification
component with the following props:title
: As per the AC.description
: As per the AC.ctaLabel
: As per the AC.ctaLink
: The retrieved service URL.dismissLabel
: As per the AC.onDismiss
: A callback function that dispatches thedismissItem
action.ctaLinkExternal
:true
variant
:success
(optional).PENDING_VERIFICATION
, return theSubtleNotification
component with the following props:title
: As per the AC.description
: As per the AC.ctaLabel
: As per the AC.ctaLink
: The retrieved service URL.dismissLabel
: As per the AC.onDismiss
: A callback function that dispatches thedismissItem
action.ctaLinkExternal
:true
variant
:success
(optional).ONBOARDING_ACTION_REQUIRED
, return theSubtleNotification
component with the following props:title
: As per the AC.ctaLabel
: As per the AC.ctaLink
: The retrieved service URL.dismissLabel
: As per the AC.onDismiss
: A callback function that dispatches thedismissItem
action.ctaLinkExternal
:true
variant
:warning
.Add the notification to the Dashboard
In
assets/js/components/notifications/SubtleNotifications.js
:RRMSetupSuccessSubtleNotification
component only if therrmModule
feature flag is enabled.Test Coverage
SubtleNotification
component inassets/js/components/notifications/SubtleNotification.stories.js
.RRMSetupSuccessSubtleNotification
component inassets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification.stories.js
.SubtleNotification
component inassets/js/components/notifications/SubtleNotification.test.js
.QA Brief
Prerequisite
Disconnect the RRM module and reconnect whenever you change the publication onboarding state from the tester plugin.
rrmModule
feature flag, go through the RRM setup flow. Once complete, the success notification should show up based on the status of the connected publication.Changelog entry