Enterprise: Notifications: No background color in Internet Explorer

[brianjuan]

Describe the bug
Notification: No background color in Windows Internet Explorer.

To Reproduce
Steps to reproduce the behavior:

1. Open Internet Explorer, go to https://4170-rc0-enterprise.demo.design.infor.com/components/notification/example-index.html#
2. See issue: No background color on the Notifications

Expected behavior
There should be a background color in Notifications

Version

• ids-enterprise: v4.11.0 - v4.17.0-rc0

Screenshots

Platform

• Windows Internet Explorer

Additional context
No Additional Context.

[tmcconechy]

This relates to https://github.com/infor-design/design-system/issues/294 once we change this colors on a new issue when thats decided we should also test and fix this for IE with the new colors. This bug occurred when this component was created in 4.14 and was'nt noticed until now.

[kayiuho]

Just curious - do we know why the current colors (background-color: rgba(213, 246, 192, 0.4) for example) aren't showing on IE? Is it because of the opacity? If that's the case, going "solid" in the proposed solution would fix this bug.

[tmcconechy]

@kayiuho I think its just because we use css RGBA there which is not supported on IE. We should convert these to HEX or use the HEX OR RGB with an actually css opacity. So, coding error.

[tmcconechy]

We still need to make the changes here

[janahintal]

QA Passed. Will move to Done. Thanks!
Tested in: http://master-enterprise.demo.design.infor.com/components/notification/example-index.html#

[brianjuan]

Moving to Failed QA, issue still exists on http://4180-beta0-enterprise.demo.design.infor.com/components/notification/example-index.html#

[clepore]

Further debugging:

• So the real issue is that the classes are not being set on the notification elements:
  

• Which happens because of this in the JS code:
  

• Because we do this in the JS:

  this.notificationEl.classList.add('notification', this.settings.type);
  

[brianjuan]

http://4180-rc0-enterprise.demo.design.infor.com/components/notification/example-index.html
Passed QA testing on Windows IE, moving to Done.