Salesforce’s merchandise are powered by hundreds of thousands of traces of code, packaged up and arranged into parts and companies designed to work reliably on the highest scale. Our design system — one of many first of its type in enterprise software program — was constructed to match this scale, enabling our inner groups to maneuver shortly to ship buyer worth with out sacrificing consistency or accessibility.
However what occurs when the design system itself wants an replace throughout hundreds of customized parts and you’ve got restricted assets and time to handle it? This was an actual state of affairs we confronted, and a small crew of Information Cloud engineers and consumer expertise (UX) designers answered the decision.
We transitioned the consumer interface (UI) to the brand new SLDS 2 styling hook structure – and did every part in a single launch. Right here’s what we realized in the course of the course of and the insights you’ll be able to apply to your SLDS 2 transition.
What we did
Use SLDS Linter to resolve points at scale
Construct confidence by way of low-risk modifications
Resolve technical debt ‘on a shoestring’
Use SLDS Linter to resolve points at scale
In Salesforce-on-Salesforce style, we adopted our personal Transition to SLDS 2 information and tailored it for our inner practices. That may sound easy, however the process was daunting at Information Cloud’s scale. We had hundreds of customized parts, all working collectively in numerous methods to help important buyer flows – a lot of which had been constructed by totally different groups with distinctive approaches to CSS customization.
It may take over a yr to manually refactor hundreds of parts with solely two devoted engineering assets, so getting accustomed to tooling and automation was important.
We used, examined, and iterated with SLDS Linter to handle many of the points. Particularly useful had been the SARIF report and the bulk-fix options. These gave us categorized overviews of error sorts and enabled us to resolve high-confidence errors robotically. Gaining this understanding of the proposed modifications and operating the fixes knowledgeable how we tackled subsequent units of parts.
As SLDS Linter made our course of extra dependable and scalable, we:
- Wrote scripts to additional automate the linting course of,
- created team-based git branches,
- up to date testing snapshots,
- and used AI-powered summaries to present engineering groups an summary of the modifications, offering them with context for additional testing and approval.
As soon as the tooling and automation had been in place, the prospect of uplifting Information Cloud to SLDS 2 was now not as daunting. So we set a objective of finishing the work inside a three-month launch cycle.
Again to the highest
Construct confidence by way of low-risk modifications
We wanted to exhibit to our cloud engineering groups that they may belief the effectiveness of the developer instruments at scale. Additionally they wanted to have faith within the code that we’d be submitting to them. Whereas our intention was to speed up inner SLDS 2 adoption, we didn’t need it to be at the price of buyer belief.
Fortunately, the scope of impression from SLDS 2 adoption is restricted, and we will reduce the danger. Many of the important modifications happen in CSS information, and modifications to current values are preserved as fallbacks. The 4 areas we centered on included:
1. Convert to styling hooks
For instance, we would see a customized CSS class in one in all our Lightning Internet Elements with a hard-coded worth.
.myCustomClass {
background: #FFF;
}
CSS styling hooks aren’t new, however they’ve been up to date for SLDS 2. Changing hard-coded CSS values to styling hooks is a important apply to undertake for upcoming function help.
.myCustomClass {
background: var(–slds-g-color-surface-1, #FFF);
}
2. Replace deprecated values
We additionally regarded for any deprecated values, comparable to LWC or Aura tokens, and up to date any deprecated semantics utilized in utility courses.
3. Mitigate CSS values that don’t have styling hooks but
There aren’t sufficient styling hooks but to cowl all attainable values. The place the outdated and new CSS values are the identical, there’s no discernible distinction within the consumer expertise. Nevertheless, there could also be sure numeric colour values that don’t render as anticipated. Once we encountered these situations, we proposed options to our companions in UX, engineering, and product administration. And we made certain to incorporate clear explanations about the advantages.
4. Talk early and sometimes
We not solely had a path to confidence in our proposed code, we additionally ensured groups understood what made these modifications low-risk. As groups discovered success and shared their experiences, subsequent collaborations grew to become simpler.
The adoption of SLDS 2 picked up tempo till we’d addressed almost 3,000 traces of focused code. By changing customized CSS guidelines with current utility courses, we additionally eliminated hundreds of traces of redundant CSS code.
Resolve technical debt ‘on a shoestring’
Refactoring code isn’t essentially the most thrilling mission on anybody’s to-do checklist. Given the scope and complexity of how parts are managed, we weren’t certain we may accomplish our objective with out overcommitting ourselves. Finally, we’re glad we made the uplift to SLDS 2 a precedence.
Not solely did we future-proof Information Cloud, we resolved years of technical debt with minimal assets, too. Information Cloud’s leaner, modernized parts are actually prepared for SLDS 2 options like darkish mode – powered by styling hooks – and a spread of dynamic, personalised experiences coming in future releases.
By way of this course of, our engineering companions realized extra about consumer interface composition, CSS customization, and validation tooling. That is necessary information that raises their requirements for the way they construct customized parts sooner or later.
Importantly, by modeling the way to handle such a large transition to SLDS 2, we impressed different groups to make the transfer. We’re glad we didn’t wait and neither do you have to.
Again to the highest
Construct sooner, future-proof your org
You may customise Salesforce with a versatile UI framework, superior theming choices, and strong instruments for designers and builders. SLDS 2 paves the best way to darkish mode and units the muse for future agentic capabilities.
