Skip to main content

Use case - Updating Gesso components

Business requirement​

Our client (Cyth Systems) requires a new button to be added to the Cart Summary. I identified that the existing buttons (primaryAction and secondaryAction) are coming from Gesso. I am not able to add my new button (Request a Quote) to the Cart Summary without updating Gesso.

Local setup​

The first thing to do before working is to pop into the #gesso-support slack channel and see if the request is worth investigating. In my case, it was. Then, I created a ticket, added a description, and because bandwidth and priority were required, assigned it to myself. That ticket is GESSO-1034.

Next, I got the project files locally. In this case, everything I needed was in the Gesso mono repo. I already had the project cloned, but if not, you can easily clone the whole thing from here. I ensured I was updated with the main branch (as I already had the project), and then ran the install to ensure I had the dependencies required.

git clone git@git.acromedia.com:teams/id/gesso/gesso.git
cd gesso
pnpm install

Approach​

Once I had the local project set up and installed the dependencies, I was able to begin work. Having never touched Gesso in a contributory way before, I just did a search for where the existing button text for the primary and secondary buttons was and identified two main areas. The Cart component and the CartSummary component.

These components existed in the design-system sub-module. They were also referenced in types, and the Cypress spec tests in each component’s folders. Once I identified that the design-system was the main driver for these components, I decided to spin up the Storybook locally so I could see the changes, and confirm where I was, was the right place.

I made some initial changes and then asked the Gesso Team if I was on the right track. The initial commit is here.

Addressing feedback​

Deprecations​

The initial feedback had to do with the gesso deprecation processes. There is an annotation we must add to deprecated props, the format is similar to the following:

/**
  * @deprecated Use xyz instead
  * remove v123
 */

I was also made aware that the 2 components I updated (again, Cart and CartSummary) needed deprecations in both the StoryBook as well as the eslintrc.js for the StarterKit package. You can see those changes added here.

Backward compatibility support​

I also had to make sure that we supported backward compatibility. For this case, it meant that existing projects using Gesso should not have their cart break if we add new functionality. For me, this meant ensuring that I didn’t remove any existing code around the primaryAction and secondaryAction props. I added a net-new prop called cartActions and ensured that it worked separately. This technically means that you can have cartActions as well as both primaryAction and secondaryAction props. You can see the re-add of the legacy props in this commit here. I used Story Book to verify that my new actions co-existed with the newly deprecated props.

I also ensured that I added a new test, and did not change existing tests. This made me more confident that I was adding new functionality without breaking old functionality. Kudos to the Gesso team for having existing tests.

Changeset​

I added a changeset using the changeset package. It conveniently shows you which packages you updated. The Gesso team suggested a minor change. If I was not able to support backwards compatibility, it would have been a major change. Due to this being a new feature, it did not qualify as a patch level version change.

The pnpm changeset command is easy to use and walks you through the process. I committed that changeset viewable here.

Review​

Finally, I reached out to the team letting them know I was finished with my changes. They will conduct a review, I will address any further feedback, and then it will go through a UX review. If all goes well, it will be merged into main and included in a future release.

Implementation and usage in the project​

This is a TBD section as this feature has not yet been merged in. I anticipate it will be a rather straightforward process. Updating the gesso package, removing the newly deprecated props in both Cart and CartSummary if necessary, and then I will be able to implement my new cartActions.

Summary​

It was pretty easy to make the change in Gesso. I could have tried to avoid the component, by adding it outside the main CartSummary section, but I figured I could make an improvement here. I did not know or was not familiar with all areas of Gesso, but I did not need to be. I reached out and both Tony as well as Shawn were able to help me get the fix in.

All in all, I spent about 3 hours adding this contribution. I anticipate I will have another hour or so once it is released on the project side.