1

I'm writing a Lightning Component that renders an SLDS Path based on some custom configuration data (so I can't use the lightning:path component). A few weeks ago a colleague tried this out and couldn't get the arrow portion (pointed to by the feint red arrow in the image below) to render in the correct color.

I am now also stuck on this; the image below includes the markup being output at the moment. (I've been through various permutations starting from the sample HTML provided by the Lightning Design System site.)

What am I doing wrong?

In the SLDS CSS I see this that is probably relevant:

.slds-path__item:before {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: -1rem;
  width: calc(2rem - (2px * 2));
  height: calc(2rem - (2px * 2));
  border: 2px solid white;
  border-left: 0;
  border-bottom: 0;
  background-clip: padding-box;
  transform: scale3d(0.8, 1.1, 1) rotate(45deg);
  transition: transform 0.1s ease-in-out, background-color 0.1s linear; }

.slds-path__item:first-child:before {
  display: none; }

.slds-path__item + .slds-is-complete:before,
.slds-path__item + .slds-is-current:before {
  background-color: #4bca81; }

Path and markup

1

We had the same issue a while ago and I was struggling with the same thing. Let me explain how I solved it. This is your selector:

.slds-path__item + .slds-is-complete:before,

What means as much as: Select :before of is-complete stages that come after a path__item.

What you need is the :before of the element that comes after the is-complete.

.THIS .slds-is-complete + li.slds-path__item:before {
    background-color: rgb(75, 202, 129);
}

This is what you need in case it gets hovered:

.THIS .slds-is-complete:hover + li.slds-path__item:before {
    background-color: rgb(4, 132, 75);
}
6
  • Thanks - though others might have hit this. So you found that you had to add your own CSS i.e. the "out of the box" CSS is incomplete? – Keith C Nov 26 '17 at 21:34
  • Yes, I think so. At the end, we decided to define it for every case cause we had styling issues again and again in different scenarios. – Basti Nov 26 '17 at 21:37
  • I can get it to work as plain HTML but inside a component I can't. Will look a bit longer but may have to use your work-around... – Keith C Nov 26 '17 at 21:42
  • Interesting, I'm curious about some new findings :) – Basti Nov 26 '17 at 21:47
  • Not having both "incomplete" and "current" helps. But I think there may be a built in assumption that "current" always precedes "complete" and so has the green triangle wired in. – – Keith C Nov 26 '17 at 22:01
0

Based on Basti's advice, this is what I ended up adding to the component to support arbitrary ordering of path items of these classes:

  • slds-is-incomplete
  • slds-is-complete
  • slds-is-current

The CSS:

/* Incomplete followed by current: style the arrow before current grey (incomplete color) */
.THIS .slds-is-incomplete + .slds-is-current:before {
    background-color: #ecebea;
}
.THIS .slds-is-incomplete:hover + .slds-is-current:before {
    background-color: #dddbda;
}

/* Incomplete followed by complete: style the arrow before complete grey (incomplete color) */
.THIS .slds-is-incomplete + .slds-is-complete:before {
    background-color: #ecebea;
}
.THIS .slds-is-incomplete:hover + .slds-is-complete:before {
    background-color: #dddbda;
}

/* Complete followed by incomplete: style the arrow before incomplete green (complete color) */
.THIS .slds-is-complete + .slds-is-incomplete:before {
    background-color: #4bca81;
}
.THIS .slds-is-complete:hover + .slds-is-incomplete:before {
    background-color: #04844b;
}

/* Current followed by complete: style the arrow before complete blue (current color) */
.THIS .slds-is-current + .slds-is-complete:before {
    background-color: #0070d2;
}
.THIS .slds-is-current:hover + .slds-is-complete:before {
    background-color: #005fb2;
}

PS

This is now broken in Winter '19 - yet to investigate what has changed.

0

based on all the comments and in a spring '19 org, I was able to fully customize the colors by (e.g. for current):

.THIS .slds-path__nav .slds-is-current {
    background-color: #04844b;
}
.THIS .slds-path__nav .slds-is-current::before {
    background-color: #04844b;
}
.THIS .slds-path__nav .slds-is-current::after {
    background-color: #04844b;
}

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.