Site header notification border when removing it

[dhamaris]

Expected behavior

Hello, site header notification works very well:

The only things is, when removing it, a line remains:

It seems it is the border-top on this css:

.ecl-site-header__notification {
    background-color: var(--c-bg);
    border-top: 1px solid var(--c-n-60);
    display: flex;
}

I would overwrite it but wanted to ask you if it is necessary, or if the line is intended.
Thanks a lot

[planctus]

Hello @dhamaris, when you don't have a notification in your site header you shouldn't have its wrapper div as well.
If you check in our demo, removing the notification also removes the .ecl-site-header__notification, also our template (although we know that this is not used by ewpp) only renders the wrapper when a notificationitem is set.

[dhamaris]

Hello @planctus, I cannot see the button close on the playground so I cannot reproduce it there:

However, when debugging I only see the this.element being deleted (the one with class ecl-notification)

Here, this.element is the third div on the following snippet, so the first and second one do not get deleted.

 <div class="ecl-site-header__notification" style="display: flex;">
      <div class="ecl-container">
        <div class="ecl-notification ecl-notification--info" data-ecl-notification="" role="alert" data-ecl-auto-init="Notification" data-ecl-auto-initialized="true"><svg class="ecl-icon ecl-icon--l ecl-notification__icon" focusable="false" aria-hidden="false">
            <use xlink:href="static/media/icons.e3d8f25c.svg#information"></use>
          </svg>
          <div class="ecl-notification__content">
            <div class="ecl-notification__title">Information notification</div>
            <div class="ecl-notification__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.</div>
          </div>
        </div>
      </div>
    </div> 

Am I looking at the right spot? Please let me know if there is something I am missing here.
Thanks

[planctus]

Hi @dhamaris, i completely misunderstood the issue initially, you are right that we have styles set on the container but we only remove the notification element on close.
Now, the problem is still there in the current version (4.7.0) but due to a position change of the notification itself the issue is barely visible. I could not understand frankly what is the version of ECL that you are using, it seems v3 but we did not have those styles for the notification in the site header.

Concerning the current version, you can try in the dev branch where we enabled the close button in the site header notification: https://v4-dev--europa-component-library.netlify.app/playground/ec/?path=/story/components-site-wide-site-header--standardised&args=show_notification:!true;show_menu:menu&globals=viewport:responsive

We will fix this, but the fix will be on top of 4.7.0, please review your implementation of the site header, you can see that the notification element should be above the site name container and not below it.

[dhamaris]

Ok @planctus, sorry for not stating the version I was using at the beginning, I am using the 4.6.
I will wait for the fix then after the 4.7.
Thanks a lot