search

cerner / terra-core

Terra offers a set of configurable React components designed to help build scalable and modular application UIs. This UI library was created to solve real-world issues in projects we work on day to day.
http://terra-ui.com
Apache License 2.0
181 stars 167 forks source link

Color classes Not Working when in the Context of Portal #2605

Closed jf046606 closed 5 years ago

jf046606 commented 5 years ago

Bug Report

Description

Color scss classes are not being applied correctly to different components in our wellness applications, we first noticed this issue when we were updating our application(health trackers) to use the newer version of terra-text(version 4 and onwards). The colors were being applied correctly locally but inside a portal the colors were not being applied correctly. We developed a workaround solution by applying the !important tag on all our color classes.

Additional Context / Screenshots

We believe its related to terra causing a dependency on the ordering of stylesheets In the first image is the css on a terra-text component

Screen Shot 2019-08-21 at 1 00 25 PM

The component is getting it's color from the inherit while in the second one I manually disable the Text.Module and the correct color gets applied

Screen Shot 2019-08-21 at 1 00 37 PM

Environment

This can been seen in our wellness environments here http://cckc-mo.wellness.us.healtheintent.com/pages/home on most apps such as health trackers, To-do List, and screening results. Please PM me on teams, Joseph Fortebuono, for login info..

jf046606 commented 5 years ago

Note: This is impacting more than just terra-text. This is impacting any terra component that has a color set to inherit. For example, it's not working when I try to set the color of a terra-card as well.

mhemesath commented 5 years ago

I'm wondering if color inherit should be used as a color class thats applied if no color class is passed in. Passing in a color class would then replace the terra provided class applying color:inherit. This approach should be passive to current consumers while resolving this bug.

The problem the current implementation creates is that it creates a dependency on the ordering of stylesheets to determine if the color class, or the terra provided class setting color:inherit is used.

bjankord commented 5 years ago

@jf046606 @mhemesath I've sent out a PR to address this, take a look and let me know if you have any thoughts on it. https://github.com/cerner/terra-core/pull/2607