Skip to content
Merged
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
Expand Up @@ -9,28 +9,18 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa
import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery';
import galleryData from './gallery-data.json';

Component groups lives in its own package [`@patternfly/react-component-groups`](https://www.npmjs.com/package/@patternfly/react-component-groups)
**Note:** Component groups lives in its own package [`@patternfly/react-component-groups`](https://www.npmjs.com/package/@patternfly/react-component-groups)

**Note:** This extension replaces [`RedHatInsights/frontend-components`](https://github.com/RedHatInsights/frontend-components). If you previously used `frontend-components`, you can refer to [this migration guide](https://github.com/patternfly/react-component-groups/blob/main/migration.md) to help you transition to `react-component-groups`.

# Component groups

The component groups extension contains a range of React components that are more complex than basic PatternFly components. These component groups combine and adjust multiple base components to provide opinionated solutions for recurring use cases across products using PatternFly.
**Component groups** are a range of React components that are more complex than basic PatternFly components. These groups combine and adjust multiple base components to provide opinionated solutions for recurring use cases across products using PatternFly.

The creation and maintenance of this extension is a collaborative effort between the PatternFly and Red Hat Hybrid Cloud Console teams. All component groups receive accessibility and design reviews, and we are working to improve internationalization, add test coverage, and ensure that CSS overrides all correctly reference the PatternFly CSS API.

There are a few different functional categories of component groups:

<SectionGallery
section="Component groups"
galleryItemsData={galleryData}
placeholderText="Search component groups by name"
includeSubsections={true}
hasGridText={true}
isFullWidth={false}
/>
---

## Contribution guidelines
## How do I contribute to this extension?

The code for component groups lives in the [`patternfly/react-component-groups repository`](https://github.com/patternfly/react-component-groups).

Expand All @@ -41,3 +31,19 @@ Specific contribution guidelines and instructions are outlined in [the component
We aim to align the standards of component groups as closely as possible with existing PatternFly standards. Given that this is a multi-team collaboration, we will continue to work towards this goal together.

If you notice a bug or have a suggestion for a new component group, open an issue in our [GitHub repository](https://github.com/patternfly/react-component-groups/issues)! Please make sure to check if there is already a pre-existing issue before creating a new one.

---

## Explore component groups

<SectionGallery
section="extensions"
subsection="component-groups"
galleryItemsData={galleryData}
placeholderText="Search by name"
onlyShowInGalleryData={true}
hasGridText={true}
isFullWidth={false}
/>


Original file line number Diff line number Diff line change
@@ -1,17 +1,77 @@
{
"content-containers": {
"summary": "Organize and display information in structured or flexible containers."
},
"controls": {
"summary": "Enable more effective navigation and selection by providing users with options for interaction and input."
},
"error-communication": {
"summary": "Communicate issues or restrictions through error and alert states."
},
"helpers": {
"summary": "Provide users with utilities that enhance usability and provide additional guidance or information within the UI."
},
"status-and-state-indicators": {
"summary": "Inform users of system conditions or processes through visualizations of entity states, statuses, and loading indicators."
}
}
"ansible": {
"summary": "Displays the Ansible project logo, with a support status style."
},
"bulk-select": {
"summary": "Enables users to select data records in batches."
},
"close-button": {
"summary": "Provides a way for users to exit a modal, dialogue, or similar action."
},
"column-management-modal": {
"summary": "A modal that allows users to manage the display of table columns."
},
"error-boundary": {
"summary": "Displays an application error boundary."
},
"error-state": {
"summary": "Displays an error state message to users."
},
"external-link-button": {
"summary": "A button that opens links in an external tab."
},
"field-builder": {
"summary": "Builds dynamic form fields with customizable fields."
},
"list-manager": {
"summary": "Allows users to manage and reorder lists."
},
"log-snippet": {
"summary": "Displays a log snippet or code along with a message."
},
"maintenance": {
"summary": "A maintenance state message."
},
"missing-page": {
"summary": "An error message with a return to homepage button."
},
"multi-content-card": {
"summary": "A single layout that contains multiple cards."
},
"page-header": {
"summary": "A page header with a title, subtitle and other optional content."
},
"responsive-actions": {
"summary": "Displays actions in a responsive layout."
},
"service-card": {
"summary": "A service card with an icon, title, description, and an optional customized footer."
},
"severity": {
"summary": "An icon with an optional label that corresponds to a severity level."
},
"shortcut-grid": {
"summary": "A grid of keyboard shortcuts with their description."
},
"skeleton-table": {
"summary": "Placeholder skeletons to use in a table as its contents load."
},
"stale-data-warning": {
"summary": "A warning status to use when an object is stale and planned for removal."
},
"status": {
"summary": "An icon and text pair that conveys different statuses."
},
"tag-count": {
"summary": "A tag icon with a number that represents a count value."
},
"unauthorized-access": {
"summary": "An error screen with a no access permissions message."
},
"unavailable-content": {
"summary": "A temporarily unavailable message."
},
"warning-modal": {
"summary": "A modal that asks users to confirm or cancel a risky action."
}
}
Loading
Loading