In “ ”, I created a React application using the , quickly adding several components in order to provide an impressive user experience. Having Fun with the Lightning Design System for React Lightning Design Framework for React The image below demonstrates what I was able to create in less than an hour on a rainy Sunday afternoon: In this article, I’ll improve upon the approach I employed while waiting for data to be retrieved from my fictional service. The Spinner Is Great, But … The Lightning Design Framework for React provides several ways to communicate to the user that some action is still processing. I’ve always enjoyed the look and feel of the spinner and was glad to see it made available by the Salesforce Engineering team. 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 retrieving data? Or has something unexpected happened, and now things are in a stuck state? Without providing context alongside the spinner, it is hard for the customer to know how long the spinner should … well, you know … spin. In the illustration above, you can see the “Getting Data, Please Wait …” text below the spinner. In my case, the expectation is that the spinner would only spin long enough to retrieve data. Since the out-of-the-box spinner does not include the option to display text, I ended up using the following code for the original design: {this.state.showSpinner &&
<div style={{marginTop: 10, position: 'relative', height: '5rem'}}>
  <Spinner
    size="small"
    variant="base"
    assistiveText={{label: 'Getting Data, Please Wait ...'}}
  />
</div>
}

{this.state.showSpinner &&
<div style={{marginTop: 10}}>Getting Data, Please Wait ... </div>
} The result code above included showing the spinner when the this.state.showSpinner property is true, but also required showing another <div> to contain the text message I wanted to communicate to the user. This works but requires two separate elements to be used every time the spinner needs to include text. I knew that there must be a better way. Diving into the Blueprints The Salesforce Engineering team not only provides the Lightning Design Framework for React, but they also expose the which drive the design of those components. Component blueprints are framework agnostic, accessible HTML and CSS—used to create components in conjunction with implementation guidelines. component blueprints With the spinner component, for example, the provides everything needed to create the spinner using basic HTML and CSS: blueprint <div class="demo-only demo-only_viewport" style="height:6rem;position:relative">
  <div role="status" class="slds-spinner slds-spinner_medium">
    <span class="slds-assistive-text">Loading</span>
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div> Now, I can use this information to create a custom component from the core blueprint documentation. Creating a Custom Component For my use case, I would like to include a text message below the spinner while active in order to communicate information related to the spinner. In the section above, I found the spinner blueprint code I planned to use and decided to create a React component to group the objects together. Within IntelliJ, I created a new file called which contains the following information: SpinnerWithDescription.js function SpinnerWithDescription(props) {
    return (
        <div className="slds-m-top_medium">
            <div className="slds-align_absolute-center slds-p-top_medium">
                <Spinner size="small"
                         variant="base"
                         assistiveText={{ label: props.description }}
                         isInline={true}
                         hasContainer={false} />
            </div>
            <div>
                <p className="slds-text-font_monospace">{props.description}</p>
            </div>
        </div>
    );
}

export default SpinnerWithDescription; With my approach, the code from the original spinner component becomes part of the React component, along with a simple paragraph of text - providing the information I wish to display below the spinner. Now, to use this new component anywhere in my React application, I just need to include a single line of code: <SpinnerWithDescription description=”some message goes here”/> I can also pass the description from another value stored in the current state: <SpinnerWithDescription description={this.state.loadingMessage}/> With this approach, any updates needed to the component can be made once without impacting components using the shared logic. SpinnerWithDescription Along the Way, I Discovered Style While looking at the blueprints, I noticed the presence of style-focused classes, which include the “slds” prefix. Just like how the 1980’s retailer, , helped transform my personal style from jeans and t-shirts to fancy pants and skinny ties, the “slds” style classes quickly transformed my user experience into something classier. Chess King Instead of using items like ... style={{marginTop: 10}} ... I used the to employ the Salesforce style classes which were ready and available: margins style documentation slds-m-top_small 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 app, but leveraging classes with the “slds-m” prefix - which are focused on setting margins. Stop Hiding the Application Title In my original design, the alert component would appear above the application title, which was not an ideal user experience.  Using the “slds” style classes, title was refactored as shown below: <div className="slds-text-heading_large slds-p-top_xx-large">
    Some Music Service
</div> The “slds-p” prefix focuses on padding and the “top_xx-large” suffix provides an ideal amount of spacing to no longer hide any part of the application title when the alert component is being displayed. Changing the Spinner Font I also decided to use a mono-spaced font for the spinner text—also already available as part of the framework—by including the following class: slds-text-font_monospace My New Design With the new component and styling in place, this is how my updated React application looks in action: 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 component in the Lightning Design System for React by following the steps outlined . here Conclusion Starting in 2021, I have been trying to live by the following mission statement, which I feel can apply to any IT professional: “Focus your time on delivering features/functionality which extends the value of your intellectual property. Leverage frameworks, products, and services for everything else.” - J. Vester In this article, not only did I leverage the existing Lightning Design System for React, but I introduced simple HTML code to create a new component that avoids having to maintain the knowledge to always include text with the spinner. This, of course, will cut down on correcting the code when a feature developer forgets this rule or is a new developer on the project. The Salesforce Engineering team has not only provided excellent components to use out of the box, but the team also included the blueprint documentation which allows feature developers to expand and potentially even contribute to the repository. design-system-react All of these efforts fall in line with my personal mission statement. If you are interested in the source code for this article, simply navigate to the following repository on GitLab: https://gitlab.com/johnjvester/having-fun-with-the-lightning-design-system Have a really great day!

Alongside

Salesforce

The Rewards Card System is Broken and Here is How I Tried to Fix It

When Big Data Goes Bad: Rehabilitating Data Quality

I ♥ writing code. Find me on GitLab.

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - Hackernoons Tech Storyteller of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Cloud Computing

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - HackerNoon Contributor of the Year - Salesforce

Too Long; Didn't Read

Make resilience your competitive advantage

Having (More) Fun Creating Components with the Lightning Design System for React

Having (More) Fun Creating Components with the Lightning Design System for React

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

AI Makes Developers Faster. It Also Makes Architecture Worse.

The 💩 Poop Emoji's 10th Anniversary

10 Year Challenge — How Popular Websites Have Changed In China.

10 ways how designing a chat bot is different from designing an app

10 Ways To Make Your Innovative, Game-Changing, Synergistic Website Stand Out In 2018

AI Makes Developers Faster. It Also Makes Architecture Worse.

The 💩 Poop Emoji's 10th Anniversary

10 Year Challenge — How Popular Websites Have Changed In China.

10 ways how designing a chat bot is different from designing an app

10 Ways To Make Your Innovative, Game-Changing, Synergistic Website Stand Out In 2018

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps