Tree component nodes not indented under Lightning Components CSS

[pfronczak]

There seems to be a problem with indenting tree nodes when the Lightning Components CSS (salesforce-lightning-design-system-ltng.css) is used.
I've put the sample tree component into a Lightning application and this is the result:

By contrast, only changing the CSS to salesforce-lightning-design-system.css for the same markup results in correct layout:
.

I'm using version 0.11.0 of the design system with the latest Chrome (46.0).

[stefsullrew]

Hi @pfronczak - do you have any other resets or CSS that could be affecting it? I'm guessing it's a bug in the scoped file, but if you could inspect to see what's wiping that indention out, it would be helpful in fixing it. Cheers!

[pfronczak]

Hi,

I don't have any other resets or CSSs - it's a pure SLDS setup.
It looks like the .slds class is used incorrectly in the scoped CSS. For example, this is what seems to be indenting the second-level tree branches in the primary CSS:

.slds-nested .slds-tree__branch > .slds-tree__item {
  padding-left: 2.5rem;
}

And this is the equivalent rule in the scoped CSS:

.slds-nested .slds .slds-tree__branch > .slds .slds-tree__item {
    padding-left: 2.5rem;
}

The order of the classes doesn't seem right - the element with .slds-nested will always be inside .slds element and not other way round. Also the .slds class on the right-hand side of the rule seems invalid - the tree item will not be nested in another .slds container.

Hope this will help you get to the bottom if this.

Cheers,
Pawel

[bibinsha]

Same issue here.
I have checked it & It is working perfectly for all the SLDS packages prior to version 0.10.1.
But when you start using SLDS version 0.11.0 or later then this issue is popped out.

[mattgoldspink]

We have this issue when using the salesforce-lightning-design-system-vf.min.css files in v1.0.0

I'm trying to find the fix for this - I see it was closed only 14 hours ago, but I don't see any commits in any of the branches, so I'm wondering if it's was closed accidentally or the fix is in a private branch?

[ennoucas]

+1 ! Don't see any fix for this.

[ennoucas]

Merci @kaelig :)

[kaelig]

Thank you for noticing this. The issue was closed accidentally via our private repository in which we applied the fix. Stay tuned...

[kaelig]

Thank you for your patience, this was just fixed in the latest version of the Lightning Design System!

See full release notes: https://www.lightningdesignsystem.com/release-notes/