DEV Community

Kunwarvir
Kunwarvir

Posted on

Hacktoberfest 3rd contribution

Background

Finding an open issue to work on for my 3rd contribution was a little challenging. I found this really interesting project called Kubesphere and they had an open issue to fix a bug in their console UI:

  • Link to Kubesphere/console issue - #2546

I was quite excited to work on it but I kept running into problems while setting up the environment locally. I then tried using their GitPod configuration which built the app but I was then not able to log into console using the default credentials. I spent an an hour or two going through the documentation but to no avail, and decided to seek help by contacting them. However, I did not get a reply back even after leaving comments on the issue which was a little disappointing.

Since I had already waited for quite a bit, I started searching for other issues to work on. However, I was either finding large complicated ones or really tiny changes but nothing in between. To not waste any further time, I decided to go back and check #5735 in grommet which I had worked on previously. They still had a huge chunk of components that still needed work (4/60 done).

Working on 6 more components for grommet storybook

Previously I had worked on Anchor, DropButton and Menu and for my third contribution, I wanted to do something more than my second. Since I couldn't find another repo and was going to work on this again, I decided that I would work on the following 6 components, so that my third contribution could be a sort of step-up from my previous pull request:

  • Checkbox
  • CheckboxGroup
  • DateInput
  • FileInput
  • RadioButton
  • RadioButtonGroup

Since I was already familiar with the project, I went into each story for these components and removed the Grommet wrapper and the imports. For some stories, this messed up the layout of the component so I made changes to fix them as required.

A lot of the stories for these components used custom themes instead of theme={grommet} and so I moved them to a /CustomThemed folder inside the component and changed their export title so that storybook would render them in a subfolder called Custom Themed.

For example, after my changes Form uncontrolled story under CheckboxGroup component could now have different themes (previously only grommet would work and other themes did nothing):
Image description

The challenge with this was definitely the testing part since there were a lot of stories for each component and verifying that the button worked and that themes could be changed took some time which added up.

Soon, after working on a total of 42 files, and testing each of them manually on the UI, I was then confident in creating a pull request for my changes.

Enable theming for stories in 6 components under Input - #5740

Review and merge

The developer who reviewed my pull request was quite happy with the changes. They indicated that they did not find any issues and then my pr was merged into master!

Top comments (0)