Skip to main content

Release 0.4 - My External Pull Request to Uber

Continuing from my previous post, I will now be covering my external contribution for Release 0.4. This external pull request is my biggest and most challenging one to date. The challenge came from size of the project, as searching and navigating through it's code base felt like somewhat of a rats maze to find where the issue lies. I also had minimal experience in React (one small school project), so the unfamiliarity with the language and architecture presented some challenges as well.


The Project - Uber - Base Web

In short, Base Web is Uber's web based design system comprised of "modern, responsive, living components" implemented in ReactJS. This project contains a vast variety of functional web components that can be used by web developers the front-end of their web projects. As someone who has done freelance web development in the past, I've always appreciated the availability of open source libraries, especially the more complex one's such as this because they can really streamline the process for developers. For that reason, I felt inclined to contribute to a project of this nature.

The Issue - UI distorts when align="horizontal" 

image
Screenshot of issue. Radio buttons would distort when they are oriented horizontally 
As the screenshot shows, the radio buttons in a radio group would distort when they are oriented horizontally. This issue seems simple enough at first but it was actually quite challenging to address. 

You might be thinking that simply using the browser inspection tools to tweak the margins should fix it. But you would be wrong. While you could preview styling tweaks with the browser tools, that did not help solve the problem in this case at all. This is because React uses a virtual DOM so the HTML you see in the browser is just the resulting output of the react compiler, not the code itself. It does not tell you which component to look for, nor which properties or even number of pixels to look for. This is because the react code did not use pixels or standard CSS units for it's margins, but rather a react scaling functionality. Here is an example of how units of pixels are scaled in this project:


After many hours of navigating through the code base like a maze, and chasing a chain of imports from component to component, I finally landed at the component that contained the styling for the radio buttons in src/radio/styled-components.js

From there, I scanned through several hundred lines to try to identify where things might be going wrong and eventually noticed this condition. 
Red Highlight shows broken condition. Green Highlight shows my fix.
There was flawed logic in their condition for radio buttons with descriptions. The original condition would nullify the bottom margin if it has a description, however this only makes sense when they buttons are vertically aligned, and that is why we see the buttons with descriptions misaligned in a horizontal orientation. As the screenshot shows my fix, I went ahead and added a condition that also makes sure the buttons are not horizontal when nullifying the bottom margin.

From there the UI still looked bad because the buttons were all stuck together when horizontal. So I went ahead and added a line with my own condition and logic that adds a margin right when the group is horizontal. This enhanced the UI.

image
Screenshot of final result


Screenshot of changes made to accomplish fix
There you have it, that is how I completed my biggest and most challenging pull request to conclude the DPS909 course. This was the biggest project  I've tackled for an external open source project. It is still pending approval to be merged, but I will post an update if it is successfully merged. 

Comments

Popular posts from this blog

Lab 8 - Contribution Goals for CDOT Telescope & LifeStyle E-Commerce

After successfully completing Hacktoberfest, we move onto bigger and better challenges in open source. By November 15th I have the following goals to complete: 1. Contribute to a bigger issue on an open-source project (no more "good-first-issue" tags). 2. Contribute to CDOT Telescope, an internal project built by my fellow classmates. In this post I will break down my issue and goal for each goal. External Project- LifeStyle E-Commerce  This is a project I found in hacktoberfest and fixed a styling alignment bug for. You can find the full details of my contribution in my previous post.   If you are already familiar wit the project, you can skip the overview section. Overview Lifestyle E-ommerce is a front-end project for building an online store. It supplies various well designed pages for front-end developers to customize and utilize as a starting point for their e-commerce projects, whether it be for themselves or their clients. I gravitated towards this proj

Release 0.3 - Pull Requests Telescope & LifeStyle Ecommerce

In my previous pos t, I revealed the issues I will be attempting to resolve in order to contribute for an internal project and an external project. I also detailed the projects themselves, so if you haven't already read my previous post, I would advise starting there to give my current post some context. I can successfully say I reached the goals I set for both the external and internal project in my previous post. Keep reading to find out how I did this, and the challenges I overcame. Internal Pull Request Adding Pagination to CDOT Telescope The responsive page navigation is circled at the bottom This issue was assigned to me by a colleague and was much trickier than I initially anticipated. The issue simply required to implement paginating functionality to the front end, so that the blog posts are displayed in pages instead of all  being displayed in one very long scrollable feed. The first challenge came with the starting point. The home page was designed wi