Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic Icon Trend Direction/Color Separation #455

JohnHeadIV opened this issue May 26, 2017 · 2 comments

Dynamic Icon Trend Direction/Color Separation #455

JohnHeadIV opened this issue May 26, 2017 · 2 comments


Copy link

@JohnHeadIV JohnHeadIV commented May 26, 2017

I would qualify this as an improvement/feature rather then issue/bug.

Having reviewed the new Dynamic Icons (Looks very nice), I would like to suggest that the direction (up/down) be separated from the color on the trend Icon. We have many different processes/workflow that can lead to UP be either bad or good. The UI conversion of green=good red=bad is here to stay. The strength set allow for going either red/green depending on need. A good example of why I'd vote for a red UP trend icon style is SLA/response times. Longer (up) is a bad outcome there rather then bigger deals/more income which would warrant the UP green coloring. In general, I would suggest spiting the coloring from the direction to increase the flexibility.

Relevant to 3.2.1

Copy link

@ishakasliwal ishakasliwal commented Jun 1, 2017

@JohnHeadIV Thanks so much for the feedback. We will keep this in mind when making enhancements to the dynamic icons 👍

Copy link

@jmdohn jmdohn commented Jun 17, 2017

I'm not saying that the suggestion is invalid, but that there are many ways for us to work around the native limitation of SLDS in lightning components with the svg color. I agree that the svg should not have a color and should be set by the developer.

All the same, you can still override the svg icon's fill. Here's an example:

Aura Application:

<aura:application extends="force:slds">
    <aura:attribute name="color" type="string" description="This is the color that should be displayed for the component." default="blue" />


	 render: function(component, helper) {
         var trend = document.createElement("span");
         // Set class color and trend
         trend.setAttribute("class", "slds-icon-trend slds-is-animated");
         if(component.get("v.color") !== undefined){
             trend.setAttribute("style", 'color: ' + component.get("v.color"));
         // Create the svg, viewbox and circle elements
         var svg = document.createElementNS("", "svg");
         svg.setAttribute("viewBox", "0 0 16 16");
         var use = document.createElementNS('', 'use');
         use.setAttribute('xmlns:xlink', '');
         var path= document.createElementNS('', 'path');
         path.setAttribute("d",  "M.75 8H11M8 4.5L11.5 8 8 11.5");       
         var circle = document.createElementNS('', 'circle');
	 circle.setAttribute("cy",  "8");    
         circle.setAttribute("cx",  "8");      
         circle.setAttribute("r",  "7.375");       
         circle.setAttribute("transform",  "rotate(-28 8 8) scale(-1 1) translate(-16 0)"); 

         return trend;

Note that the color attribute overrides the color for the component to blue. But if you made this a component you could set it to any color for your svg.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants