Have (more) fun creating components with the Lightning Design System for React


In “Having Fun with the Lightning Design System for React,” I created a React app using the Lightning Design Framework for React, quickly adding multiple components to provide an awesome user experience.

The image below shows what I was able to create in less than an hour on a rainy Sunday afternoon:

In this article, I’ll improve on the approach I used while waiting for data to be retrieved from my fictitious service.

The Spinner is great, but …

Lightning Design Framework for React provides several ways to communicate to the user that an action is still being processed. I’ve always enjoyed the look and feel of the spinner and was happy to see it made available by the engineering team at Salesforce.

In my case, I like to provide additional information to the user to communicate “why” the spinner is active. I mean, is the spinner active because the system is still collecting data? Or has something unexpected happened and things are now stuck?

Without providing context next to the spinner, it’s hard for the client to know how long the spinner should… well, you know… spin.

In the illustration above, you can see the text “Get data, please wait…” under the double arrow. In my case, the spinner is expected to only spin long enough to retrieve the data.

Since the out-of-the-box spinner doesn’t include the option to display text, I ended up using the following code for the original design:

{this.state.showSpinner &&
} {this.state.showSpinner &&
Getting Data, Please Wait ...

The above result code included displaying the spinner when the this.state.showSpinner property is true, but also required displaying another

to contain the text message I wanted to communicate to the user.

It works but requires two separate elements to be used each time the spinner needs to include text.

I knew there had to be a better way.

Dive into the plans

The Salesforce engineering team not only provides the Lightning design framework for React, but also exposes the component drawings that drive the design of those components. Component plans are framework independent, HTML and CSS accessible, used to create components in conjunction with implementation guidelines.

With the spinner component, for example, the blueprint provides everything needed to create the spinner using basic HTML and CSS:


Now I can use this information to create a custom component from the main Blueprint documentation.

Creating a custom component

For my use case, I would like to include a text message below the spinner when it is active to communicate information about the spinner.

In the section above, I found the code for the spinner template that I had planned to use and decided to create a React component to group the objects together.

In IntelliJ I created a new file called SpinnerWithDescription.js which contains the following information:

function SpinnerWithDescription(props) {
    return (


); } export default SpinnerWithDescription;

With my approach, the code from the original spinner component becomes part of the React component, with a single paragraph of text – providing the information I want to display below the spinner. Now, to use this new component anywhere in my React app, I just need to include a single line of code:

I can also pass the description of another value stored in the current state:

With this approach, all the necessary updates to the SpinnerWithDescription component can be done once without impacting components using shared logic.

Along the way, I discovered the style

Looking at the blueprints, I noticed the presence of style oriented classes, which include the “slds” prefix. Much like how 1980s retailer Chess King helped me transform my personal style from jeans and t-shirts to fancy pants and skinny ties, the “slds” style classes quickly transformed my experience. user into something more classy.

Instead of using things like …

style={{marginTop: 10}}

… I used the margin style documentation to use the Salesforce style classes that were ready and available:


Now I can avoid the tedious exercise of finding the right number of pixels for my margins and have a consistent user experience in my application, but by taking advantage of the classes with the “slds-m” prefix – which focus on defining margins.

Stop hiding app title

In my original design, the alert component appeared above the app title, which was not an ideal user experience. Using the ‘slds’ style classes, the title has been reworked as shown below:

Some Music Service

The prefix “slds-p” focuses on padding and the suffix “top_xx-large” provides ideal spacing so that no part of the application title is obscured when the alert component is displayed.

Change Spinner Font

I also decided to use a monospaced font for the spinner text, also already available as part of the framework, including the following class:


My new design

With the new component and styling in place, this is what my updated React app looks like:


While the changes are subtle, there are no longer any special rules to communicate when using the spinner.

This new custom component can even become an official Lightning Design System component for React by following the steps outlined here.


Starting in 2021, I have tried to live by the following mission statement, which in my opinion can apply to any IT professional:

“Focus your time on providing features / functionality that extend the value of your intellectual property. Take advantage of frameworks, products, and services for everything else.

– J. Vester

In this article, not only did I take advantage of the existing Lightning design system for React, but introduced some simple HTML to create a new component that eliminates the need to maintain knowledge to always include text with the spinner. This, of course, will reduce code remediation when a feature developer forgets this rule or is a new developer on the project.

The Salesforce engineering team not only provided great out-of-the-box components, but the team also included model documentation that allows feature developers to extend and potentially even contribute to the design repository. -system-react.

All of these efforts align with my personal mission statement.

If you are interested in the source code for this article, simply navigate to the following repository on GitLab:


have a very nice day!

Source link

Comments are closed.