Notification Icon disappears when active

[rossanafmenezes]

Quick summary

This is very specific, but you click on the notification bell under any of the WooCommerce tabs it disappears (the bell icon). On the other tabs, it works as expected.

Steps to reproduce

1 - access the dashboard of a site that has WooCommerce installed and the store is all set 2 - Click on the Notification Icon (the bell) at the top right corner of the page 3 - see the notification slide show and the bell icon disappear

What you expected to happen

I would expect the icon to either stay there as it does for other tabs after you click on the notification bell

This is the behaviour on the other tabs

What actually happened

On a site with a WooCommerce store set up the bell changes to black

Woo Store set up

However, please note if you have woo installed but did not set up the store the icon works

Woo w/o a store set up

Context

This was something I noticed while I was doing some tests on the Woo mobile app notifications. I was not getting the notifications on my mobile and accessed it from the browser to investigate my own notification settings. Brought it up to the PAs' attention and was directed to create a bug report for that.

Operating System

macOS

Browser

Google Chrome/Chromium

Simple, Atomic or both?

Atomic

Theme-specific issue?

No

Other notes

No response

Reproducibility

Consistent

Severity

No response

Available workarounds?

No response

Workaround details

This is a design issue more than anything else but can get users confused.

[inaikem]

On notification bell click, <li id="wp-admin-bar-notes"> ... </li> has the following classes added to it:

menupop mb-trackable wpnt-stayopen wpnt-show active

...this causes the following elements to be affected by color and background-color changes in CSS.

<div class="ab-item ab-empty-item"> ... </div>, <span id="wpnt-notes-unread-count"> ... </span> and <span class="noticon noticon-bell"></span>

The changes override the default CSS background below:

#wpadminbar #wp-admin-bar-notes.wpnt-show > .ab-item {
    background: #f5f5f5;
}

...to be: background: #26292c !important;

IMPORTANT:

• This specific issue affects all Atomic sites in WP Admin view.
• Simple and self-hosted sites are not affected.
• Calypso screens on all WPcom sites shows a darker notification icon container background on click but no change to the bell icon colour itself.

[inaikem]

@Robertght, is this something Flow Patrol can be tasked to review?

[Robertght]

Thank you for the ping @inaikem !

I can confirm the issue is only present while you're in the WooCommerce dashboard.

Flagging this for @Automattic/flow-patrol-spacelab