-
Notifications
You must be signed in to change notification settings - Fork 104
Home
Hello, we are glad you’re here! We need contributors to help PatternFly improve and grow. There are many ways to participate in the PatternFly community, from design concepts and ideas to code and research!
This page explains:
- What is a PatternFly contribution?
- How to make a contribution
PatternFly adheres to the Contributor Covenant Code of Conduct. As a PatternFly community member, you are expected to uphold this code of conduct, whether that be attending a community meeting, replying to the mailing list or contributing.
There are many ways you can contribute to PatternFly design. You don't need to have years of expertise to make a contribution, just a desire to learn about design and become part of a community of designers and developers working top create a better experience for enterprise users.
Learn the Terms
If you are new to GitHub and the contribution process, we've provided an overview, of some of the base GitHub lingo, to help you get started,
Terminology
1. A proposal for a new pattern or an enhancement, to an existing pattern
Start by opening a new GitHub issue, here, and labeling it as “Change Request” to modify an existing component or as “New Pattern” to propose something new. A design proposal may have many forms, but it should answer these questions:
- What is the name of the design pattern or component (new or existing)?
- What problem does it solve and what are the relevant use cases or other requirements?
- Are there products or projects that are in need of this component and who are the stakeholders that should be included in the review?
- What is the scope of this work (if known)?
All proposals will be reviewed, and if accepted, assigned for follow-up work. If you are available to perform this work, please feel free to assign yourself. Otherwise, accepted requests will be placed in a queue waiting for available resources.
2. Report a Bug
Before creating a bug report, check the list of known bugs and open issues, on the "patternfly-design" list of issues, in GitHub. Bugs are tracked as GitHub issues. When you create a bug report, include as many details as possible, use a clear and descriptive title, and remember that an image is worth a thousand words, so try to add images and links to rawgit when possible.
3. Fix a Bug
You can browse Open Issues and assign one to yourself. You can make updates and send a pull request (PR) when done, to submit your changes for review. See the [GitHub Contribution Guide](@GitHub Contribution Guide) for instructions on how to do this.
4. Conduct a Usability Test
Usability testing is essential to the practice of user experience design. Within the PatternFly project, our goal is to base design recommendations on empirical data. A good way to get started as a design contributor for PatternFly is to offer to conduct a usability test of existing content. If you are interested in performing usability testing, please contact us on the mailing list ([email protected]) and we will make some suggestions on where to start.
We use GitHub to manage contributions to PatternFly.
If you don’t know how to contribute, using GitHub, don’t worry! We are aware that GitHub was created by and for developers. That’s why we’ve created guides, to get you up and running. If you need additional help, contact us.
- How to Setup your Contribution Environment
- How to Submit a Contribution
- Working with multiple branches
Files in this repository adhere to the following file structure
├── pattern-library
│ └── {category-name}
│ └── {pattern-name}
│ ├── discovery
│ │ ├── documents
│ │ │ ├── ...
│ │ │ └── ...
│ │ ├── img
│ │ │ ├── {pattern-name}-{variation-name}.png
│ │ │ ├── {pattern-name}-{variation-name}-callout.png
│ │ │ └── ...
│ │ └── discovery.md
│ ├── design
│ │ ├── documents
│ │ │ ├── ...
│ │ │ └── ...
│ │ ├── img
│ │ │ ├── {pattern-name}-{variation-name}.png
│ │ │ ├── {pattern-name}-{variation-name}-callout.png
│ │ │ └── ...
│ │ ├── design.md
│ │ └── overview.md
│ ├── usability-testing
│ │ ├── documents
│ │ │ ├── ...
│ │ │ └── ...
│ │ └── usability-testing.md
│ └── site.md
...
All folder and markdown file names should be in lower case with dashes in place of spaces. Image file names should include the name of the pattern and, if possible, the defining feature of the image. Most importantly, however is that the name is descriptive and not something like "image13copy.png" Source files for all images used in the pattern library should be stored in the "design/documents" folder for the pattern in question. This will allow image files to be updated in the future, if needed.
Pages are posted to the site by adding a site.md file. For new patterns, without any code samples, the site.md file looks like:
---
layout: page-pattern
overview: pattern-library/{category-name}/{pattern-name}/design/overview.md
design: pattern-library/{category-name}/{pattern-name}/design/design.md
code: false
---
Code samples can be added by changing the code: false to code: true (or simply deleting the line) and adding the following optional headers:
code_html: false OR path/to/code.md
code_angular: false OR /path/to/patternfly.component.html
url-js-extra: ['path/to/script.js']
---
For example, here is the site.md file for the masthead pattern:
---
layout: page-pattern
overview: pattern-library/application-framework/masthead/design/overview.md
design: pattern-library/application-framework/masthead/design/design.md
code: false
---
Pattern implementations host running examples of their implementation in standalone sites. These implementations can be linked-to from the design/status page to show that the pattern has been implemented for a particular framework integration. This link is added to the status page by modifying the site.md file for a pattern. By setting the YAML front matter attribute for each of the respective framework integrations, the status page will be updated accordingly:
---
...
impl_jquery: https://rawgit.com/patternfly/patternfly/master-dist/dist/tests/...
impl_angular: https://www.patternfly.org/angular-patternfly/#/api/...
impl_ng: ...
impl_react: ...
impl_webcomponent: ...
impl_css: ...
---