UCLA Component Library

Overview

Contribute

We invite anyone at UCLA to recommend features and contribute code, design, documentation, or iterations to existing work. We will review and consider any contributions that follow our core principles, design criteria, and steps outlined below.

We also encourage you to join our Slack channel. It’s a great place to ask questions, discuss ideas, and share contributions with others. If you haven’t done so already, sign up for UCLA Slack workspace and add yourself to our channel, #web-components.

How to contribute

Step 1 - 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.

If you want to contribute to an issue:

  • Comment on that issue. This will notify others you’re working on it. This will also help you connect with potential supporters or collaborators.

If you want to elevate an issue:

  • Upvote an issue to show your support, then leave any thoughts or feedback in the comments.
  • Watch an issue to keep track of future discussion and progress.

Step 2 - 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.

Please select options from these menus as well:

Assignee

The assignee is for self only to let others know you are working on the issue.

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
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.
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
Milestone
  • To Do: Issue has been created.
  • Work In Progress: Campus contributor has indicated they’ll work on it. If the issue becomes stale, it can be moved back “To Do”.
  • Design Review: Proposal is being evaluated for compliance with design criteria and inclusion in the library.
  • Rejected: Proposal was reviewed and rejected for inclusion in the library; feedback was provided in the issue comments.
  • Sent Back: Proposal was reviewed and sent back to the campus contributor for revisions; feedback was provided in the issue comments.
  • Code Review: Proposal was approved for inclusion; design criteria was met or resolved; and code is now being reviewed for compliance with web standards.
  • Accessibility Review: Code was approved or updated to meet web standards, and component is now being reviewed for compliance with ADA/WCAG requirements.
  • Resolved: A pull request for this issue has been approved and added to the campus branch. It will be deployed in the next library version. The issue can be marked as resolved in Bitbucket. When resolving an issue it is preferred that a comment with a link to the commit is added if possible.
    • Note: The component menu item will not change after a PR has been approved. If the component has been approved for design a new issue will need to be created for development, and likewise for accessibility review. This is so we can better organize our short term goals per component and best align our status color types.

Step 3 - Submit supporting work

(Optional but strongly recommended)

Once you select or create an issue, we encourage you to share any supporting work. In the description or comments, include a link to one of the following cloud-based formats:

  • Issue branch in the Bitbucket repository (see instructions on contributing in Bitbucket)
  • Code snippets in an online code editor (CodePen, Gists, JSFiddle, etc.)
  • Screenshots, design files, or sketches in a cloud environment (Box, Dropbox, Adobe Cloud, Sketch Cloud, Figma, InVision, etc.)
  • Documentation in a cloud document (Google Drive, Box, Evernote, etc.) suggesting new content or edits to existing documentation
  • Examples of design or code created by someone else

You can also attach screen shots or small image files directly to your issue to help other people preview your examples or work.

Step 4 - 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 5 - Committee review

Various committee members will review issues every few weeks for inclusion in the components library based on priority and votes.

  • Bugs will be evaluated primarily based on priority.
  • Enhancements and Proposals will be evaluated on popularity in the issues board and widespread utility for campus.

Committee members will also review submissions to ensure compliance with:

  • Web accessibility guidelines
  • Front-end coding standards
  • Usable design patterns and conventions
  • UCLA’s visual brand guidelines

Step 6 - Submit revisions or final work

Submit revisions to work or documentation, if requested by committees in charge of review.

Step 7 - Write documentation

Before your feature or enhancement can be added to the library, we need documentation to support it. Help us write the first draft. We have templates and existing documentation you can reference.

Review and approval

Issues and enhancement requests will be reviewed by Strategic Communications and a cross-campus committee of volunteers.

Any feedback from the committee 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 the committee reviews and accepts 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.

Accessibility

The Disabilities and Computing Program (DCP) will review components for compliance with Web Content Accessibility Guidelines (WCAG) 2.0.