5

We have a customized version of the path structure in our app that is showing the current status of a process object. To leverage as much as possible of the SLDS we reused as many classes from Salesforce to define the semantics of a path fragment (active, incomplete, dimmed...)

customPath.cmp

<aura:component>
    <div class="{!v.process.stepMode ? 'slds-tabs--path dimmed' : 'slds-tabs--path'}" role="application">
        <ul class="slds-tabs--path__nav" role="tablist">
            <aura:iteration items="{!v.process.steps}" var="step">
                <li class="{! 'slds-tabs--path__item ' + step.css + (v.process.stepId == step.id ? ' active' : '')}" role="presentation">
                    <a onclick="{!c.naviapprovalToSObject}" data-id="{!step.id}" class="slds-tabs--path__link">
                        <span class="slds-tabs--path__step">
                            <lightning:icon iconName="utility:check" size="x-small" />
                        </span>
                        <span class="slds-tabs--path__title">{!step.label}</span>
                    </a>
                </li>
            </aura:iteration>
        </ul>
    </div>

    <a onclick="{!c.naviapprovalToSObject}" data-id="{!v.process.bpiId}" class="top-padded slds-button--brand slds-path__mark-complete slds-no-flex slds-m-left--small slds-path__mark-current">
        <lightning:icon variant="bare" class="slds-button__icon slds-button__icon--left" iconName="utility:level_up" size="x-small"/>
        Back
    </a>
</aura:component>

But now customers use Themes in their org and the path colors go weird. Active stages get nearly black instead of blue.

I am unsure what to do and I have read about others suffering from that. Do my own 100% would mean not to profit from changes in the SLDS.

Is there documentation on how to handle such situations? Can I just add !important to my copies of the style or will it be ignored.

3

I also had problems with a path component in Communities when I updated brand colors. I ended up creating tokens to define a color for each step (actually two colors: base and hovered color) and using them in custom css for my custom path component.

I didn't use !important and it worked for me. I believe you need to add some css rules to adjust colors for your case and steps you're using. With a help of a browser inspector you should be able to adjust a given example.

I'm using 4 different states in my path: Complete, Incomplete, Active (currently chosen, e.g. could be Completed state if you went back), Current (current state of the record, it indicates current state of a record if you went back on the path. In most cases Current = Active).

defaultTokens.tokens

<aura:tokens >
    <aura:token name="pathNavComplete" value="#A8B400" /> <!-- Spring Green -->
    <aura:token name="pathNavCompleteHover" value="#889200" />
    <aura:token name="pathNavCurrent" value="#007C92" /> <!-- Turquoise -->
    <aura:token name="pathNavCurrentHover" value="#005F70" />
    <aura:token name="pathNavActive" value="#5E2750" /> <!-- Aubergine -->
    <aura:token name="pathNavActiveHover" value="#461D3C" />
    <aura:token name="pathNavIncomplete" value="#EBEBEB" /> <!-- Grey Xtra Light -->
    <aura:token name="pathNavIncompleteHover" value="#DADADA" />
</aura:tokens>

customPathComponent.css

.THIS .slds-path__nav .slds-is-complete,
.THIS .slds-path__item+.slds-is-complete:before,
.THIS .slds-path__item+.slds-is-current:before {
    background-color: token(pathNavComplete);
}
.THIS .slds-path__nav .slds-is-complete:hover,
.THIS .slds-path__item:hover+.slds-is-complete:before,
.THIS .slds-path__item:hover+.slds-is-current:before {
    background-color: token(pathNavCompleteHover);
}

.THIS .slds-path__nav .slds-is-current,
.THIS .slds-path__nav .slds-is-current+.slds-is-incomplete:before {
    background-color: token(pathNavCurrent);
}
.THIS .slds-path__nav .slds-is-current:hover,
.THIS .slds-path__nav .slds-is-current:hover+.slds-is-incomplete:before {
    background-color: token(pathNavCurrentHover);
}

.THIS .slds-path__nav .slds-is-incomplete,
.THIS .slds-path__item+.slds-is-incomplete:before,
.THIS .slds-path__item+.slds-is-lost:before {
    background-color: token(pathNavIncomplete);
}
.THIS .slds-path__nav .slds-is-incomplete:hover,
.THIS .slds-path__item:hover+.slds-is-incomplete:before,
.THIS .slds-path__item:hover+.slds-is-lost:before {
    background-color: token(pathNavIncompleteHover);
}

.THIS .slds-path__nav .slds-is-active,
.THIS .slds-path__nav .slds-is-active+.slds-path__item:before {
    background-color: token(pathNavActive);
}
.THIS .slds-path__nav .slds-is-active:hover,
.THIS .slds-path__nav .slds-is-active:hover+.slds-path__item:before {
    background-color: token(pathNavActiveHover);
}

Of course this a is custom solution and it may be broken if SLDS updated css classes in their path component, but I don't know the better option.

1
  • Very cool. Thanks for the detailed "no fluff just stuff" answer. I will try out. Jun 18 '18 at 10:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.