-
-
Notifications
You must be signed in to change notification settings - Fork 55
Component Creation Process
If you are interested in working on a component for the UX library, we welcome your contribution! Building high quality components is a lot of work but is very rewarding. This page will walk you through some of the things you'll want to do if you're interested in contributing in this way.
Begin by identifying what component you would like to work on. You can see this master feature list for a list of what we have identified, what is done and what is yet to be done. Select a component you are interested in. Once you have done this, check to see if there's a Github issue already in existence that tracks that component as a feature. If there is, simply add a comment to it that states your interest in working on it. If there isn't, create a new issue and then add the comment that identifies your interest. If you find someone is already working on a component that you have interest in, kindly reach out to them through the Github issue and see if there's any way you can help them. Even if they don't need help on the component, you may be able to help by testing, validating design, creating a demo or writing documentation.
Before you begin your implementation, you'll want to do some research. If you are working on a standard component from a platform UI library, begin by checking the official design guides for that component. Read the information available for that component in the Material Design and iOS Design guidelines. After getting an overview of the material, take screenshots of the relevant visuals and add those to the Github issue, accompanied by some brief notes and behavior. This just helps to aggregate the information for yourself and others that will review the work. Also, don't forget to add a link back to the design specs.
The web is an amazing place filled with the creations of millions of talented people. Before starting work on creating a new component, take some time to see what people have already built. Often times, you may find an existing implementation or helpful CSS at a place like CodePen, for example.
Warning Never, ever take code created by someone else. If there's no license, then that means it isn't licensed to you for use. If there is a license, then you must follow it to the letter. If you violate this, we will have no mercy for you. If you aren't sure, contact the project leads.
Once you've got your research done, check in with the project leads so we can provide any thoughts we have that may help you with your work. After that, you can begin the implementation 😄
We have an amazing, global, diverse community. We want to make sure that applications developed with our components meet the needs of not only our community but all their customers too. As such, it's important that while you implement your component, you think through accessibility early on. Additionally, consider any internationalization requirements your component may have.
Strive to avoid taking a dependency on 3rd party libraries. If you need to leverage another library, check with the project leads first. We must approve all external dependencies.
All components should have a demo and basic documentation. These can be one in the same, accomplished through the app-ux-showcase sample.
After you believe you have the component in working order (or reach a major milestone), reach out to project leaders for review. We'll want to do a design review, code review, API review, etc. We'll probably have some feedback. After that, you can take the feedback to help in refining the component. Once you've done that, solicit our review again. We'll continue this process until it looks ready to go.
If you've walked through the entire process, you should celebrate. It's a substantial contribution to the global community that is not merely great on your resume but helps thousands of companies and developers across the globe to build amazing apps.