UCLA Component Library

Contribute

bitbucket Report an Issue Slack Join the Slack Discussion

This component library is an opensource project governed by the UCLA Strategic Communications and ITS departments. We invite anyone at UCLA to recommend features, contribute code, design, documentation, or iterations to existing work. We will review and consider any contributions that follow our core principles, design criteria.

UCLA Component Library Repository
Bitbucket Repository

Step 1 - Choose A or B.

A. Check for open issues

Start by searching the open issues board in our repository to identify issues that align with your recommendations or desired contributions. Comment on that issue to let other know you’re working on it or interested. This will also help you connect with potential supporters or collaborators.

If you want to elevate an issue, show your support and check out step 2 for more.

Note: Watch an issue to keep track of future discussion and progress.


B. Create a new issue

If you don’t see a suggestion or issue similar to your own, create a new issue. Write a clear title and summarize the reason for your issue in the description. The more information you can provide, the better equipped we’ll be to evaluate your recommendation.

Select the create Issue button and select the dropdown from the following options that best fit your issue:

Select Assignee
For office use only, set self as default.
Select Milestone
For office use only.
Select Kind
- Bug: Fix errors in existing code, design, or documentation
  • Enhancement: Improve or add to existing code, design, or documentation
  • Proposal: Submit or recommend new components or features for inclusion in the library |
Select Priority
- Trivial: Nice to have, not essential
  • Minor: Not serious or urgent, but should be addressed
  • Major: Important and significant issue, should be addressed soon
  • Critical: Extreme defect or security issue, address ASAP
  • Blocker: This issue is currently stopping other tasks from moving forward. |
Select Component
- Accessibility: Fixes or enhances a component for ADA compliance
  • Code: Makes code easier to use, faster, or more secure
  • Design: Makes design more usable, extensible, user centered, or brand compliant
  • Documentation: Makes the instructions for components more clear, helpful, or concise |

Step 2 - Submit supporting work for feedback

Once you select or create an issue, we strongly recommend you share any supporting work. In the description or comments of the issue, include links to any of the suggested formats. We want to see the thought process behind the component.

  • Code snippets in an online code editor (CodePen, Gists, JSFiddle, etc.)
  • Screenshots, design files, or sketches (Box, Dropbox, Adobe Cloud, Sketch Cloud, Figma, InVision, etc.)
  • Documentation (Google Drive, Box, Evernote, etc.) suggesting new content or edits to existing documentation

Solicit feedback! Now is a good time to share your work or recommendation with people in our Slack channel, #web-components. Share your work, collect feedback, and gather support for your issue.

Step 3 - Develop Code and Documentation

Now that you have gotten some feedback on your work, it’s time to start developing. In the component library repository you can find documentation for development contributors.

  1. Introduce yourself to the repository.
  2. Setup your local environment.
  3. Learn the dev workflow before you branch.
  4. This project uses the BEM naming convention.
  5. Determine if documentation or code commenting is needed. Here are some helpful questions to ask yourself.
    • Does this code require commenting so other developers will understand it?
    • Will frontend users require instructions to understand this new feature?

Step 4 - Submit revisions or final work

Review and approval

Issues and enhancement requests will be reviewed by Strategic Communications and ITS. The Disabilities and Computing Program (DCP) will review components for compliance with Web Content Accessibility Guidelines (WCAG) 2.0.

Any feedback from them will be communicated through the comments on the issue in Bitbucket. You will be able to address the feedback and resubmit your proposal or enhancement.

If we review and accept your proposal or enhancement, you’ll also be notified in the comments. Plans for implementing your proposal or enhancement in the component library will then be arranged, including any revisions to work or related documentation.

What if my proposal is not accepted?

No worries! Remember the component library is a base set of components geared towards helping you build common website patterns quickly, efficiently and on brand. It won’t cover every need for every department. You are always able to add or revise components on your own websites to fit specific needs or requirements your department or division may have.