search

Adobe-Consulting-Services / acs-aem-commons

http://adobe-consulting-services.github.io/acs-aem-commons/
Apache License 2.0
456 stars 603 forks source link

Fix Broken Styling when the notification is active #3473

Closed VeenaKarnick closed 6 days ago

VeenaKarnick commented 1 week ago

Summary Creating System-Notification using ACS-commons is breaking the content.

Issue 1 - OOTB Panels of AEM like Product Navigation, Insert components are broken. image

image

Issue 2 - The checkboxes within the components are broken disrupting the alignment with content image

Steps to reproduce

  1. http://localhost:4502/sites.html/content click on image and then Tools image Select ACS Commons-->System Notifications

  2. Under Notifications Create a new notification once created edit the notification and turn on enabled and dismissible options with timeline set. Save your Notification.

image

  1. Refresh your http://localhost:4502/sites.html/content observe the OOTB Product Navigation panel. Also try to author/configure any component to notice alignment issues with checkbox.

Cause Of Issue:

  1. When Notification is enabled coralui3.css is overriding the selector .granite-shell-onboarding-controls from shell.css and customized css within components image

image

  1. While the case is different when notification is disabled? the priority is for shell.css selector granite-shell-onboarding image

image

Fix the issue while notification enabled : I Noticed that both system-notification (parent node ) and notification nodes (child node) has same clientlibs with same value added in dependencies property

image

image

Its not necessary to add same dependencies on both parent and child node since the parent node properties are inherited from child node.

Removing the dependencies property with value coralui3 in child node is fixing the issue while the notification is enabled

Hope this is a sensible fix !!!