Enterprise: Icons: Need a flag icon that isn't red but just the regular icon color

[pwpatton]

Describe the bug
We would like to use the flag icon however it is hard coded to red. Would like a red version and a normal icon version

To Reproduce
Steps to reproduce the behavior:

1. Go to http://localhost:4000/components/icons/example-index.html
2. Scroll down to '#icon-flag' and inspect

Expected behavior
Would like the flag to be whatever color by a css class and be normal icon color otherwise.

Version

• ids-enterprise: [e.g. v4.19.0]

Platform

• Any (Chrome)

Additional context
https://github.com/infor-design/design-system/issues/391

[tmcconechy]

We need to remove the inline red color on the icon. This may be an ids-identity change.
Then show the normal flag and one with the (red) color(s) added by a css class.

[tmcconechy]

@nickwynja What would we have to do to get rid of the inline fill on the ids-identity side?
Also https://github.com/infor-design/enterprise/issues/2474 is somewhat related.

[davidcarlsonberg]

Why was this moved to Failed?

[EdwardCoyle]

@davidcarlsonberg @janahintal I just moved it back, since there didn't appear to be any work done on this yet

[tmcconechy]

Not sure what happened but this should be simple just make the flag icon get its color from a css class instead of the inline fill property.

[tmcconechy]

Sometime items can get dragged around wrong I assume that’s what happened

[kentonquatman]

I just got tapped to look at this issue. Would it be possible to use "currentColor" as the value for the fill attribute on our icons? This should allow us to set and override icon colors using CSS.

[tmcconechy]

Your saying just make it the same color as all other icons (default none).

I think that could work - which was my original idea. But it might end up being a minor breaking change as you would need to now add a class to make it red. But i think thats explainable.

[kentonquatman]

Yea, exactly.

You raise a good point about breaking changes. We might want to consider adding specific classes to all of our icons going forward so that they can be targeted for styling. Future proofing for situations like this one. It could be something like class="icon icon--flag" instead of just class="icon"

[tmcconechy]

We do have classes for colors like ruby07 or error we can use. Should add the right styles between it. They are not new. I think just do it that way as its unlikely this icon is highly used we can note the change in the release notes.

[kentonquatman]

Perfecto.

[tmcconechy]

@kentonquatman just to clarify the inline fill is coming from the sketch icon file into the generated code.

<symbol id="icon-flag" viewBox="0 0 18 18"><path d="M1 18c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1s1 .45 1 1v16c0 .55-.45 1-1 1zm3-6V0h12.297c.928 0 1.356 1.155.651 1.759L12 6l4.948 4.241c.705.604.277 1.759-.651 1.759H4z" fill="#E84F4F" fill-rule="nonzero" stroke="none"></path></symbol>

(the fill="#E84F4F") So to fix this we just need a push to the sketch file to remove that. Then the rest we can do with css on our end.

[kentonquatman]

Just put in the pull request with the updated Sketch file.

[brianjuan]

http://master-enterprise.demo.design.infor.com/components/icons/example-index.html
http://master-enterprise.demo.design.infor.com/components/alerts/example-index.html
http://master-enterprise.demo.design.infor.com/components/icons/example-empty-widgets.html?theme=uplift
Passed QA on all browsers, tested all themes and variants as well.