5

I've noticed a new SLDS class that is being applied in Lightning Experience. There doesn't seem to be any documentation whatsoever of this class and it's not mentioned in the Spring '18 release part of the Lightning Design System doc.

A border-bottom is now being applied to fields.

.forcePageBlockItemView .slds-form-element_separator {
    border-bottom: 1px solid rgb(221, 219, 218); 
}

My questions are:

1) Where is the comprehensive documentation about the SLDS changes that are being applied per each release? I can't find these anywhere - this is a problem because each release, the styles can change but I don't know the full set of changes that have been made beforehand. There is documentation on new Lightning features but I'm looking at changes to the existing SLDS styling.

2) What is the best way to overwrite this change? It seems I can't overwrite this per se but rather I'd have to go around the houses to overwrite the 'new' task button and have the re-direct point to a Visualforce page with the SLDS tag, and then have the relevant CSS in a static resource style-sheet. Surely there is an easier way?

It seems SLDS users are being forced onto a single set of aesthetics and trying to overwrite this / by-pass this is far too much work and creates issues of its own and isn't best practice.

enter image description here enter image description here

0

For Q1:

The SLDS FAQ is the only place I have found to provide details on changes related to SF Releases, which ofter point towards developer blogs and documentation links, such as:

evolving-the-lightning-user-experience

winter-coming-lightning

0

I've reached out to Salesforce support about this issue and based on their responses, I can confirm:

1) The SLDS documentation is the 'go to' documentation on this topic. Unfortunately, a list of the full and comprehensive changes to the external style-sheets doesn't exist. For example, I have noticed that as of the Spring '18 release, in a Salesforce community, the .slds-button.slds-button--neutral buttons were inheriting the color from the link color specified in the Community branding section (Community Builder | Branding). There is no mention of this anywhere in the documentation.

There are other omissions. For example, the current (pre Spring 18) Rich Content Editor component is being deprecated for a new version. The new version of this component resulted in some carriage returns not being read, so text looked slightly misaligned compared to what Production (winter '18) looked like. There isn't any reference as to what impact using the new Rich Content Editor could be in the SLDS documentation.

One of the ways you can keep in the loop about potential issues is to refer frequently to Known Issues, which seems to be increasing each day up to the release date. That is where I found 3 issues that were related to issues I had found when testing a Community on Spring '18: here, here and here. The unfortunate thing is that you may come across an issue in your testing which has yet to be flagged on Known Issues, and then you spend time analysing why you're experiencing stylistic or performance differences between Prod and full copy sandbox.

The story is bleaker for internal stylings. For example, there are no change logs or documentation for internal Lightning stylings. In my example, the class slds-form-element__static slds-grow slds-form-element_separator was being added to the fields in standard record detail page (Salesforce authored component). This class is for internal use and not available for general public. This is is the reason why it is not documented in the release notes or change-logs links.

To get a rough idea as to what the internal styling changes are, you can get the app.css from both Prod and Test, then select-compare in Visual Studio code or another text editor.

enter image description here

2) You cannot overwrite internal styles but you can overwrite external styles, of course either in the .STYLE component resource or via custom CSS in Community builder. This however, will result in a frequent adoption of !important overwriting. Using the Lightning Inspector, it is relatively straight forward to get the specific class name of a particular button element etc that you may wish to change the color / styling for.

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.