Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
---
id: Community
section: get-involved
---

import {Button, Card, CardHeader, CardTitle, CardBody, CardFooter, Divider, Grid } from '@patternfly/react-core';
import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';

# Become a Flyer

PatternFly's core is its global community of designers, developers, and UX professionals with a passion for open source. We call ourselves **Flyers**.

Whether you're an active contributor or just following our releases, you're a valued member of our community. We believe that by working together, we can foster creativity and build a better design system for everyone.

There are many ways to be a Flyer:

<Grid sm={12} md={6} hasGutter className="pf-v5-u-my-lg pf-v5-u-text-align-center ws-building-grid">
<Card isCompact isClickable>
<CardHeader
selectableActions={{
onClickAction: () => window.open("https://join.slack.com/t/patternfly/shared_invite/zt-3dcejyvj6-MU93z8IVihJXxbs2ggrMEw"),
selectableActionAriaLabelledby:'slack-card'
}}
>
<CardTitle id="slack-card" className="pf-v5-u-font-size-l"> Chat with us </CardTitle>
</CardHeader>
<CardBody>
Ask questions, share feedback, and chat with the team on Slack.
</CardBody>
<Divider />
<CardFooter>
<Button component="a" href="https://join.slack.com/t/patternfly/shared_invite/zt-3dcejyvj6-MU93z8IVihJXxbs2ggrMEw" variant="link" target="_blank" isInline icon={<ExternalLinkAltIcon />} iconPosition="end"> Join our Slack workspace </Button>
</CardFooter>
</Card>
<Card isCompact isClickable>
<CardHeader
selectableActions={{
onClickAction: () => window.open("https://www.redhat.com/dynamic-form/instance/934b1674-bc8a-4a13-8c9d-d19abcceb263"),
selectableActionAriaLabelledby:'email-card'
}}
>
<CardTitle id="email-card" className="pf-v5-u-font-size-l"> Stay up to date </CardTitle>
</CardHeader>
<CardBody>
Receive community meeting reminders and quarterly newsletters via email.
</CardBody>
<Divider />
<CardFooter>
<Button component="a" href="https://www.redhat.com/dynamic-form/instance/934b1674-bc8a-4a13-8c9d-d19abcceb263" variant="link" target="_blank" isInline icon={<ExternalLinkAltIcon />} iconPosition="end"> Sign up for emails </Button>
</CardFooter>
</Card>
<Card isCompact isClickable>
<CardHeader
selectableActions={{
onClickAction: () => window.open("https://calendar.google.com/calendar/embed?src=patternflyteam%40gmail.com&ctz=America%2FNew_York"),
selectableActionAriaLabelledby:'calendar-card'
}}
>
<CardTitle id="calendar-card" className="pf-v5-u-font-size-l"> Join our meetings </CardTitle>
</CardHeader>
<CardBody>
Hear updates from the team in our community meetings or get help during office hours.
</CardBody>
<Divider />
<CardFooter>
<Button component="a" href="https://calendar.google.com/calendar/embed?src=patternflyteam%40gmail.com&ctz=America%2FNew_York" variant="link" target="_blank" isInline icon={<ExternalLinkAltIcon />} iconPosition="end"> Add our Google calendar </Button>
</CardFooter>
</Card>
<Card isCompact isClickable>
<CardHeader
selectableActions={{
onClickAction: () => window.open("https://medium.com/patternfly"),
selectableActionAriaLabelledby:'blog-card'
}}
>
<CardTitle id="blog-card" className="pf-v5-u-font-size-l"> Read our blog </CardTitle>
</CardHeader>
<CardBody>
On Medium, we share the stories behind our team's projects and practices. You can even write with us and share your own unique insights and experiences.
</CardBody>
<Divider />
<CardFooter>
<Button component="a" href="https://medium.com/patternfly" variant="link" target="_blank" isInline icon={<ExternalLinkAltIcon />} iconPosition="end"> Follow us on Medium </Button>
</CardFooter>
</Card>
</Grid>

## Contribute to PatternFly

We rely on community contributions to help our design system grow and evolve. Regardless of your background or experience, we encourage any Flyer to get involved by contributing bug reports, new feature ideas, documentation updates, and more.

### Where do I start?

A great way to get familiar with our team's processes is to [attend our biweekly office hours](https://calendar.google.com/calendar/embed?src=patternflyteam%40gmail.com&ctz=America%2FNew_York). You can listen in on discussions or sign up for a time to ask questions and chat with the team.

When you're ready to contribute, the best place to start is to tackle a **"good first issue"** in one of the repos outlined in our contribution guides. These are tasks that our team has identified as being well-suited for new community members.

[View our code of conduct](https://github.com/patternfly/patternfly/blob/main/CODE_OF_CONDUCT.md) and explore our contribution guides:

<Grid sm={12} md={4} hasGutter>
<Button size="lg" variant="secondary" component="a" href="/get-involved/contribute/contribute-code"> Contribute code </Button>
<Button size="lg" variant="secondary" component="a" href="/get-involved/contribute/contribute-designs"> Contribute designs </Button>
<Button size="lg" variant="secondary" component="a" href="/get-involved/contribute/contribute-documentation"> Contribute documentation</Button>
</Grid>

## Explore new communities
Flyers sometimes branch out to build their own groups and projects. While the following communities are separate from PatternFly and not officially supported by our team, we love to see our ecosystem grow.

- **[PatternFly Elements](https://patternflyelements.org):** A community-led project creating web components to use across Red Hat's sites and products. It also offers theming options for your own brand library.

- **[PatternFly Kotlin](https://github.com/patternfly-kotlin/patternfly-kotlin):** A Kotlin implementation of PatternFly based on fritz2, built for Kotlin/JS. This project provides reactive PatternFly components that match the fritz2 API. For a quick overview, refer to [the PatternFly Kotlin showcase](https://patternfly-kotlin.github.io/patternfly-kotlin-showcase/#home).

- **[Ansible Component Guide and Figma Library](https://www.figma.com/design/dOVzoCFCRlPXifj2WstR79/AAP-PF6-Style---Component-Guide?node-id=3-10950&t=PBFhyMs7gUxzGRH2-1):** An additional Figma library built on PatternFly components. It's a rapid prototyping tool for repeatable design patterns, tailored for Ansible but with many components applicable to other products.

- **[PatternFly for Yew](https://github.com/patternfly-yew/patternfly-yew)**: Provides PatternFly components for Yew, a Rust framework for creating web applications with WebAssembly. For a quick demo and starter template, refer to [the PatternFly Yew Quickstart](https://github.com/patternfly-yew/patternfly-yew-quickstart).
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
---
id: Contribute code
title: Contribute code
section: get-involved
subsection: Contribute
---

We invite developers of all skill levels to contribute code to PatternFly, either to advance our system with new features or to fix issues in our existing offerings.

## Where do I start?

A great way to get familiar with our team and processes is to [attend our biweekly office hours](https://calendar.google.com/calendar/embed?src=patternflyteam%40gmail.com&ctz=America%2FNew_York). You can listen in on discussions, get help with a problem, or sign up for a time to chat with the team.

When you're ready to contribute, the best place to start is by finding a "good first issue" in one of our repos.

## Find a good first issue

"Good first issues" are tasks our team has identified as being well-suited for new community members. You can find these in our component repositories:

- [patternfly (Core):](https://github.com/patternfly/patternfly/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22Good%20first%20issue%22) Our foundational HTML/CSS library. [View the Core contribution guidelines.](https://github.com/patternfly/patternfly#guidelines-for-css-development)
- [patternfly-react:](https://github.com/patternfly/patternfly-react/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22Good%20first%20issue%22) Our React library. [View the React contribution guidelines.](https://github.com/patternfly/patternfly-react/blob/main/CONTRIBUTING.md#contribution-process)

If you find an issue you'd like to work on, leave a comment and a team member will guide you. For questions, you can reach out on the [#patternfly-core](https://patternfly.slack.com/archives/C9Q224EFL) or [#patternfly-react](https://patternfly.slack.com/archives/C4FM977N0) Slack channels.

## Explore other code contributions

Beyond component issues, you can also contribute to our extensions or to the PatternFly.org website itself. For any of these repositories, you can leave a comment on an issue you're interested in or ask questions in [our #general Slack channel](https://patternfly.slack.com/archives/C293LQ36J).

- **Extensions:** These packages combine multiple base components to offer specific functionality. You can contribute to any of their repositories:
- [chatbot:](https://github.com/patternfly/chatbot) Code for [the ChatBot extension](/patternfly-ai/chatbot/about-chatbot).
- [patternfly-quickstarts:](https://github.com/patternfly/patternfly-quickstarts). Code for [the quick starts extensions](/extensions/quick-starts).
- [react-catalog-view:](https://github.com/patternfly/react-catalog-view) Code for [the catalog view extension](/extensions/catalog-view/catalog-item-header).
- [react-component-groups:](https://github.com/patternfly/react-component-groups) Code for [the component groups extension](/component-groups/about-component-groups).
- [react-data-view:](https://github.com/patternfly/react-data-view) Code for [the data view extension](/extensions/data-view/overview).
- [react-log-viewer:](https://github.com/patternfly/react-log-viewer) Code for [the log viewer extension](/extensions/log-viewer).
- [react-topology:](https://github.com/patternfly/react-topology) Code for [the Topology extension](/topology/about-topology).
- [react-user-feedback:](https://github.com/patternfly/react-user-feedback) Code for [the user feedback extension](/extensions/user-feedback).
- **PatternFly.org website:** To contribute to the functionality of our website, you can work on issues in the [patternfly-org repo](https://github.com/patternfly/patternfly-org).

## AI-assisted development guidelines

AI-generated code can be accepted as a contribution to this project as long as the contributor adheres to the following guidance.

When using AI coding assistants (such as GitHub Copilot, ChatGPT, Claude, or other similar tools) to help with development work on PatternFly React, please follow these guidelines to ensure code quality, security, and transparency:

1. **Verify and validate AI-generated code.**

- **Treat AI-generated code as suggestions, not final code.** Review all generated code and modify as appropriate. Thoroughly review and test all code that you intend to integrate into your work.

- **Do not automatically trust the code assistant output.** Always apply your own judgment and expertise. AI coding assistants can introduce security vulnerabilities if not used carefully, and AI models can sometimes hallucinate and provide incorrect or non-functional code.

- **Make sure you thoroughly understand any AI-generated code.** If the generated code you intend to incorporate in your work is outside your expertise, consult with someone knowledgeable in the area prior to making it available to others.

1. **Mark any substantial AI-generated code portions.**

- Nontrivial and substantial AI-generated or AI-assisted content should be "marked", using one of the following approaches:

- **In a commit message, or in a pull request/merge request description field:** Identify the code assistant that you used, perhaps elaborating on how it was used. You might also use a trailer like "Assisted-by:" or "Generated-by:". For example:

```
Assisted-by: GitHub Copilot
Generated-by: ChatGPT for initial component structure
```

- **In a source file comment:** Indicate the use of the code assistant. For example:

```javascript
// Generated by GitHub Copilot
// AI-assisted implementation with human review and modifications
```

1. **Review security:** Pay special attention to security implications of AI-generated code, especially when dealing with user input, authentication, or data handling.
1. **Test your code:** Ensure that AI-generated code is thoroughly tested and meets all existing project standards for testing coverage.
1. **Review code style:** Verify that AI-generated code follows PatternFly React's coding standards and style guidelines as outlined in this document.
1. **Review documentation:** If AI assists in generating documentation or comments, review them for accuracy and completeness.
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
id: Contribute designs
title: Contribute designs
section: get-involved
subsection: Contribute
---

We invite anyone with skills in visual and interaction design to contribute to PatternFly's design by working on an existing issue or proposing a new feature, enhancement, or icon.

## Where do I start?

A great way to get familiar with our team's processes is to [attend our biweekly office hours](https://calendar.google.com/calendar/embed?src=patternflyteam%40gmail.com&ctz=America%2FNew_York). You can listen in on discussions or sign up for a time to ask questions and chat with the team.

When you're ready to contribute, the best place to start is by finding an existing design issue to work on.

## Find an existing design issue

The PatternFly design team manages its backlog on [the design issues project board](https://github.com/orgs/patternfly/projects/7/views/58) in GitHub. The "No Sprint" view at the bottom of this board contains a list of unassigned issues that are ready for community contribution.

If you see something that you'd like to work on, leave a comment on the issue or reach out on [our patternfly-design Slack channel](https://patternfly.slack.com/archives/CGR204RM2).

## Propose a new feature or enhancement
If you have an idea for a new design pattern, a new component type, or an existing feature improvement, we'd love to hear it. Start by opening an issue in [our patternfly-design repository.](https://github.com/patternfly/patternfly-design/issues) From there, a member of our team will reach out and work with you to plan and design a solution.

## Propose a new icon
We encourage designers to work with [the existing PatternFly icon set](/design-foundations/icons), which covers most common use cases. If your use case isn't covered, you can propose a new icon.

To contribute a new icon, start by opening an issue in [our patternfly-design repository](https://github.com/patternfly/patternfly-design/issues) that describes your idea and why it's needed. A member of our team will reach out to you to discuss next steps.
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
id: Contribute documentation
title: Contribute documentation
section: get-involved
subsection: Contribute
---

We invite writers and subject matter experts to contribute to our website documentation. By helping us explain new concepts, provide better guidance, and outline important resources, you can help us improve the PatternFly.org experience for everyone.

## Where do I start?

A great way to get familiar with our team's processes is to [attend our biweekly office hours](https://calendar.google.com/calendar/embed?src=patternflyteam%40gmail.com&ctz=America%2FNew_York). You can listen in on discussions or sign up for a time to ask questions and chat with the team.

When you're ready to contribute, the best place to start is by finding an existing documentation issue.

## Find an existing documentation issue

Our website documentation is contained in the [patternfly-org repository](https://github.com/patternfly/patternfly-org/issues), where you can find a list of open issues.

If you find an issue you'd like to work on, leave a comment or reach out on [our #general Slack channel](https://patternfly.slack.com/archives/C293LQ36J) and a team member will reach out with next steps. As you work, you can refer to our [contribution guide](https://github.com/patternfly/patternfly-org/wiki/Contribution-guide) for additional guidance.

## Propose new documentation

If you'd like to contribute new content, such as updates to design guidelines or entirely new pages, you can propose your idea by opening an issue in the [patternfly-org repo](https://github.com/patternfly/patternfly-org). Content for design guidelines should adhere to our [writing style guide](/ux-writing/writing-patternfly-design-guidelines). From there, our team will work with you to author and publish your new content.
Loading