Tabs not receiving active state styles in 0.12.0

[kevinberonilla]

I installed 0.12.0 on my pages and noticed that after updating all of my tab classes to the new supported BEM spec on the docs, the active state for the current tab is not appearing. Focus states are working just fine, though.

I did a comparison with your docs and noticed that your iframe.large.css (which I assume is a replica of your release stylesheet) has a selector of .slds-active .slds-tabs--default__link that isn't available on 0.12.0. Attached is a screenshot of the discrepancy (left has your styles, right has 0.12.0's).

[kaelig]

Thank you very much for reporting this and for the very useful screenshot.

To provide more context around this, we have two main stylesheets:

1. Normal stylesheet for most use cases (on the left)
2. Scoped (we add .slds before all selectors) for Visual Force pages (on the right)

We may have an issue in the process of generating that second stylesheet. We'll investigate and release a fix very soon.

[stuartist]

I believe that the problem is in the following:

  .slds.slds-active .slds-tabs--default__link {
    border-color: #0070d2;
    color: #16325c; }
    .slds.slds-active .slds-tabs--default__link:focus {
      color: #0070d2; }

I overrode that with:

  .slds .slds-active .slds-tabs--default__link {
    border-color: #0070d2;
    color: #16325c; }
    .slds .slds-active .slds-tabs--default__link:focus {
      color: #0070d2; }

Note the space after .slds.

[kevinberonilla]

Thanks for that info @kaelig! We're using scoped styles for all our VF pages and prototypes. It seems @stuartist is correct, and I found the issue on line 56 of scss/components/tabs/flavors/default/index.scss

Removing the ampersand should fix it.

[kaelig]

@kevinberonilla @stuartist a new version of the Lightning Design System was just released (see release notes). Can you give it a try and let us know if the issue persists?

[kevinberonilla]

Works perfectly, thanks!

[kevinberonilla]

Actually, upon further inspect, this still doesn't seem to work. If you visit https://dl.dropboxusercontent.com/u/43912228/_TO/app/prototype-lightning/prototype_view-applicants.html you can find our prototype with 0.12.1 running. The JS focuses on the active tab on load, but as soon as the user forces a blur the border disappears.

Our nav markup below:

<div class="slds-tabs--default" data-aljs="tabs">
  <ul class="slds-tabs--default__nav" role="tablist">
    <li class="slds-tabs--default__item slds-text-heading--label slds-active" title="Application" role="presentation"><a class="slds-tabs--default__link slds-is-active" href="#" role="tab" aria-selected="true" aria-controls="tab-application" data-aljs-show="tab-application" tabindex="0">Application</a></li>
    <li class="slds-tabs--default__item slds-text-heading--label" title="Resume" role="presentation"><a class="slds-tabs--default__link" href="#" role="tab" aria-selected="false" aria-controls="tab-resume" data-aljs-show="tab-resume" tabindex="-1">Resume</a></li>
    <li class="slds-tabs--default__item slds-text-heading--label" title="LinkedIn" role="presentation"><a class="slds-tabs--default__link" href="#" role="tab" aria-selected="false" aria-controls="tab-linkedin" data-aljs-show="tab-linkedin" tabindex="-1">LinkedIn</a></li>
  </ul>
</div>

Thanks!

[kevinberonilla]

Same issue as before (see screenshot of 0.12.1's salesforce-lightning-design-system-vf.css file).

[kaelig]

Thank you @kevinberonilla and sorry this is still an issue.

I've submitted a fix that adds a space between .slds and .slds-active.

This should do the trick as a quick fix while you're waiting for the next official patch:

diff salesforce-lightning-design-system-vf.css

- .slds.slds-active .slds-tabs--default__link {
+ .slds .slds-active .slds-tabs--default__link {