Google Summer of Code 2019 - Work Product Report

Introduction

I am Ashwin Shenoy, a computer science and engineering sophomore from Amrita Vishwa Vidyapeetham, India. This document is a summary of my project - "Extending & Improving Design System React" with Salesforce's Open Source UI-library Lightning Design System, that I worked on as a Google Summer of Code 2019 student.

Extending & Improving Design System React

Google Summer of Code 2019 Project with Salesforce Design System React

• Student - Ashwin S Shenoy
• Mentors - Stephen James (@interactivellama), Kevin Parkerson (@kevinparkerson)

Synopsis

Design System React (short for Lightning Design System for React) is a react implementation of the Salesforce Lightning Design System, which an Open Source lightweight, high performance web component framework that powers thousands of apps. This project aims to extend and improve the DSR library, by implementing different design patterns from the SLDS as React components in DSR. The goal of this project is to help non-UI engineers implement highly interactive web applications with ease, by extending the variety of components that are available to them through the DSR library. Adding more variety of components will also help DSR to be useful for a wide range of applications, and make it a go-to React UI library.

Summary of Work

React Components Implemented

#	Component	Pull Request	Opened	Merged
1.	Progress Bar	#1773	Feb 28, 2019	Mar 1, 2019
2.	Scoped Notification	#1785	Mar 4, 2019	May 3, 2019
3.	Setup Assistant	#1964	May 3, 2019	Jun 1, 2019
4.	Visual Picker	#1786	May 13, 2019	Jun 13, 2019
5.	Welcome Mat	#1934	Apr 22, 2019	Jun 27, 2019
6.	Files	#1929	Apr 20, 2019	Jul 19, 2019
7.	Expression	#2150	Jul 6, 2019	Aug 21, 2019
8.	Tree Grid	#2181	Jul 17, 2019	Work in Progress
9.	Map	#2230	Aug 8, 2019	Submitted for Review
10.	Summary Detail	#2232	Aug 8, 2019	Submitted for Review
11.	Badges	#2247	Aug 22, 2019	Submitted for Review

Other Contributions

New Features

• Update prop size in Modal Component to support small size.
• Add support for adding Width Prop in Dropdown Menu Component
• Add support for adding heading in Checkbox & Radio Component

Maintenance

• Rename prop dismissable to disableClose in Modal Component
• Rename prop title to heading in Modal Component
• Add depreciation warning for label prop in Checkbox Component
• Depreciate label prop in Radio Component

Unfulfilled Deliverables

I had in my proposal had proposed to implement the following 2 components from SLDS in DSR, but I have excluded them from the project period as advised by my mentors due to its complexity & time-limitations.

1. Activity Component
2. Chat Component

I plan to continue contributing to DSR working on implementing these components.

Extra Deliverables

I worked on implementing the following components from SLDS to DSR, which were not originally in my proposal. These were simpler components which I worked on in free-time, or when code review was happening.

1. Map
2. Summary Details
3. Badges

Links

• Fork of DSR - contains the code I wrote for all components & patches I worked on during this period.
• Project Proposal - original google summer of code project proposal document I had submit to Google.