Skip to content
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
Closed

Tabs not receiving active state styles in 0.12.0 #106

kevinberonilla opened this issue Nov 19, 2015 · 8 comments
Assignees

Comments

@kevinberonilla
Copy link
Contributor

@kevinberonilla 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
Copy link
Contributor

@kaelig 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
Copy link

@stuartist 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
Copy link
Contributor Author

@kevinberonilla 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
* 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
Copy link
Contributor

@kaelig 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
Copy link
Contributor Author

@kevinberonilla kevinberonilla commented Dec 18, 2015

Works perfectly, thanks!

@kevinberonilla
Copy link
Contributor Author

@kevinberonilla 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
Copy link
Contributor Author

@kevinberonilla 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
Copy link
Contributor

@kaelig 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 {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants