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

Closed
JohnHeadIV opened this Issue May 26, 2017 · 2 comments

Comments

Projects
None yet
3 participants
@JohnHeadIV
Copy link

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

@ishakasliwal

This comment has been minimized.

Copy link
Contributor

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 👍

@jmdohn

This comment has been minimized.

Copy link

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" />
</aura:application>

Renderer:

({
	 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"));
         }
         trend.setAttribute("data-slds-trend","down");
         
         // Create the svg, viewbox and circle elements
         var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
         svg.setAttribute("viewBox", "0 0 16 16");
         
         var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
         use.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
         svg.appendChild(use);
         
         
         var path= document.createElementNS('http://www.w3.org/2000/svg', 'path');
         path.setAttribute("class","slds-icon-trend__arrow");
         path.setAttribute("d",  "M.75 8H11M8 4.5L11.5 8 8 11.5");       
         svg.appendChild(path);
         
         var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
         circle.setAttribute("class","slds-icon-trend__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)"); 
         svg.appendChild(circle);

         trend.appendChild(svg);
         
         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