PatternFly React

PatternFly React is organized into several packages categorized by their purpose:

Core packages

These provide the fundamental building blocks of the design system:

• @patternfly/react-core: Core set of components.
• @patternfly/react-table: Table components.
• @patternfly/react-charts: Chart components.
• @patternfly/react-icons: Icon components.
• @patternfly/react-styles: PatternFly CSS styles.
• @patternfly/react-tokens: PatternFly CSS variable tokens.

Extension packages

Additional specialized components:

• @patternfly/react-log-viewer: Virtualized log viewer component.
• @patternfly/react-catalog-view-extension: Catalog view extension.
• @patternfly/react-topology: Topology components.

Supporting packages

• @patternfly/react-docs: Gatsby documentation site for components.
• @patternfly/react-integration: Cypress integration tests.

Deprecated packages

• @patternfly/react-virtualized-extension: Table and list row virtualization extension.

The ChartTooltip component is part of the @patternfly/react-charts/victory package. It is built on top of the Victory chart library and provides PatternFly-consistent styling and behavior for displaying data information on hover or interaction.

Because ChartTooltip is a pass-through for Victory components, you should refer to the VictoryTooltip documentation for the full list of available props. Common usage patterns include:

• Voronoi Containers: Using ChartVoronoiContainer to detect mouse proximity for displaying tooltips.
• Combined Containers: Combining ChartCursor and ChartVoronoiContainer to show both a vertical cursor line and a tooltip simultaneously.
• Custom Content: Embedding HTML, legends, or custom font sizes within the tooltip.
• Data Labels: Using data labels as an alternative to hover-based tooltips.
• Fixed Positioning: Adjusting tooltip position and label radius.

import {
  ChartTooltip,
  ChartVoronoiContainer,
  // ... other components
} from '@patternfly/react-charts/victory';

The Form component is used to layout form elements. It works in conjunction with several sub-components to manage structure, labels, and validation states.

Key components used within a Form include:

• FormGroup: Wraps a label and a form field.
• FormGroupLabelHelp: Provides help text for a label.
• FormHelperText: Used to wrap helper text inside a FormGroup to ensure correct spacing.
• FormSection: Used to group related form fields into logical sections.
• FormFieldGroup: Provides specialized grouping for form fields.
• ActionGroup, ActionList, ActionListGroup, ActionListItem: Used for grouping actions within a form.

Important Note on Helper Text: When using helper text inside a FormGroup, you must wrap the HelperText component with the FormHelperText component to provide the correct additional spacing.

import { Form, FormGroup, FormHelperText } from '@patternfly/react-core';

// Example pattern for helper text spacing
<FormGroup>
  <FormGroupLabel>Label</FormGroupLabel>
  <input />
  <FormHelperText>
    <HelperText>
      Helper text content
    </HelperText>
  </FormHelperText>
</FormGroup>

The Compass component provides a high-level layout structure for complex applications. You can populate different areas of the page using the following props:

• header: Content rendered at the top. Typically includes a <CompassHeader> which divides the area into three parts: brand/logo, middle navigation, and profile.
• sidebarStart: Content rendered at the horizontal start (left side by default).
• main: Central content area. Typically contains a <CompassMainHeader> or <CompassHero>, and <CompassContent> containing one or more <Panel> components.
• sidebarEnd: Content rendered at the horizontal end (right side by default).
• footer: Content rendered at the bottom of the page. Note that content in this prop fills the entire width of the screen.

For the <CompassHero> component inside the main section, you can customize the background using:

• backgroundSrcLight / backgroundSrcDark: For background images.
• gradientLight / gradientDark: For background gradients.

/* See Basic example for implementation pattern */