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

Tabs not receiving active state styles in 0.12.0 #106

Closed
kevinberonilla opened this Issue Nov 19, 2015 · 8 comments

Comments

Projects
None yet
4 participants
@kevinberonilla
Contributor

kevinberonilla commented Nov 19, 2015

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).

screen shot 2015-11-19 at 5 04 44 pm

@kaelig kaelig added the bug label Nov 20, 2015

@kaelig

This comment has been minimized.

Contributor

kaelig commented Nov 20, 2015

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

This comment has been minimized.

stuartist commented Nov 20, 2015

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 added a commit to appiphony/appiphony-lightning-js that referenced this issue Nov 22, 2015

@kevinberonilla

This comment has been minimized.

Contributor

kevinberonilla commented Nov 22, 2015

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

screen shot 2015-11-22 at 10 23 55 am

Removing the ampersand should fix it.

kevinberonilla added a commit to appiphony/appiphony-lightning-js that referenced this issue Nov 30, 2015

Merge branch '0.1.2'
* 0.1.2: (29 commits)
  0.1.2 release
  0.1.2 release prep
  added my committed changes into changelog
  Ember Lookups - allowing binding to the controller. Properly calling filled search term method.
  Ember Lookups - doc update
  Edited jQuery lookups' select pill markup to match 0.12.0 specs
  Ember Lookups - Single Select selected result markup updated to match SLDS update
  Changelog formatting
  Added changelog file
  Hotfix for 0.12.0 SLDS tabs (from salesforce-ux/design-system#106)
  0.1.2 prep
  Ember Modals documentation
  Ember Modals - adding 'show' as a method for $.modal calls
  Ember Notifications - added support to customize classes that get applied to the sods-notify div
  Ember Tabs - updated classes that are applied to template markup to comply with SLDS 0.12.0
  Updated SLDS to 0.12.0; updated jQuery tabs plugin, demo, and docs; updated jQuery modal plugin, demo, and docs (backdrop)
  Ember Modals - Changed slds-modal-backdrop markup to just slds-backdrop to match new SLDS release. documentation for jQuery also updated.
  jQuery lookups: setSelection method and initialSelection option for controlling the selected value programmatically. Also updated the doc with the new features.
  jQuery Lookups: Clicking lookup results in Firefox/Safari/IE 10 now properly select them. Added an onChange option to run when a user selects an result. Added a getSelection method so user can get the object(s) that is/are currently selected. https://github.com/appiphony/appiphony-lightning-js/issues/9
  gulp'd
  ...

Conflicts:
	bower.json
	dist/aljs.zip

@kaelig kaelig added the scoped-build label Nov 30, 2015

@kaelig

This comment has been minimized.

Contributor

kaelig commented Dec 18, 2015

@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

This comment has been minimized.

Contributor

kevinberonilla commented Dec 18, 2015

Works perfectly, thanks!

@kevinberonilla

This comment has been minimized.

Contributor

kevinberonilla commented Dec 18, 2015

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

This comment has been minimized.

Contributor

kevinberonilla commented Dec 18, 2015

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

screen shot 2015-12-18 at 1 34 53 pm

@kaelig

This comment has been minimized.

Contributor

kaelig commented Dec 18, 2015

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 {

@kaelig kaelig self-assigned this Jan 11, 2016

@rickschmoo rickschmoo added this to the 02/16 milestone Feb 4, 2016

tamzi pushed a commit to tamzi/design-system that referenced this issue Feb 12, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment