Major release upgrade guide

PatternFly 5 release notes

This resource is intended to aid developers in their upgrade from PatternFly 4 to PatternFly 5 by documenting our change log in a table that allows for searching, filtering, and sorting. This table does not contain a completely comprehensive list of changes, as it does not include information about dependency bumps and documentation updates.

Comprehensive PatternFly 5 release notes can be found on GitHub regarding changes to @patternfly/patternfly and @patternfly/react-core.

A higher level overview of the changes introduced with PatternFly 5 can be found in the release highlights.

Description

PR link

@All HTML/CSS Removed unnecessary visibility declaration that was paired with the use of the display property to hide and show elements. #5209 No

@All HTML/CSS Prefixed all of our public HTML classes (except for modifiers), CSS variables/custom properties, and SCSS variables/mixins/functions/placeholders with the PatternFly version number to avoid namespace conflicts. #5434 No

@All HTML/CSS Added transparent background to various buttons, other cleanup. #5379 No

@All HTML/CSS Removed references to any fallback .woff font files for text and icons. #5435 No

@All HTML/CSS Split the global reset styles into “normalize” and “reset”, which can be uniquely disabled/enabled by setting $pf-global--enable-reset and $pf-global--enable-normalize. #5435 No

@All HTML/CSS Wrapped all global normalize and reset styles in :where() to remove CSS specificity. #5435 No

@All HTML/CSS Removed an old bootstrap variable mapping stylesheet. #5435 No

@All HTML/CSS Removed card and button specific styles for use in dark and light blocks within components. #5435 No

@All HTML/CSS Removed the SCSS variables $pf-global--enable-shield and $pf-global--load-pf-3. #5435 No

@All HTML/CSS Renamed the global “default” status color to “custom”. #5418 No

@All HTML/CSS Updated any use of a non-PatternFly component checkbox/radio input to use the standalone variation of the PatternFly check/radio component. #5355 No

@All HTML/CSS Fixed dark theme bugs. #5535 No

@All HTML/CSS Removed global “shield” CSS. #5339 No

@All HTML/CSS Removed declaration setting font-size on HTML element and associated SCSS var $pf-global--unset-root-font-size. #5339 No

@All HTML/CSS Updated all of our RedHatFont files to the latest versions. #5503 No

@All HTML/CSS Renamed the global variables for font family variations, and global class to opt-in to the variable font. #5503 No

@All HTML/CSS Removed support for the legacy overpass font. #5169 No

@All HTML/CSS Prefixed and relocated variable font opt-in. #5617 No

@All

React

Created component level package.json files to enable federated modules.

@patternfly/react-core React Removed the default value of the getResizeObserver function's third parameter, useRequestAnimationFrame. #8324 No

@patternfly/react-icons

React

Removed the size, color, and noVerticalAlign properties from icons imported from @patternfly/react-icons.

#5275

To change the default size or color on an icon, it is recommended to wrap the icon in a Icon React component.

If the icon used the noVerticalAlign prop in PatternFly 4, the same style can be achieved by wrapping the icon in a Icon React component and using the isInline prop.

About modal HTML/CSS Removed the default background image. #5530 No

About modal HTML/CSS Refactored the about modal box to be placed inside of the modal component. #5216 No

About modal HTML/CSS Updated to support new design of background image. #5328 No

About modal React Removed the AboutModalBoxHero sub-component. #8931 No

Accordion HTML/CSS Renamed the accordion expandable content component from “expanded-content” to “expandable-content”. #5180 No

Accordion

React

Renamed the AccordionExpandedContentBody component to AccordionExpandableContentBody.

#8525

Yes

Example in

<AccordionExpandedContentBody>Body</AccordionExpandedContentBody>

Example out

<AccordionExpandableContentBody>Body</AccordionExpandableContentBody>

Accordion

React

Renamed the large property value of the displaySize property to lg.

#8206

Yes

Example in

<Accordion displaySize="large" />

Example out

<Accordion displaySize="lg" />

Alert

React

Removed the aria-label property.

#8649

Yes

The aria-label property should not be used on an Alert as it is not well supported by assistive technologies.

Example in

<Alert aria-label="Error alert" />

Example out

<Alert  />

Alert

React

Replaced the titleHeadingLevel property with component.

#8518

Yes

Example in

<Alert titleHeadingLevel="h4" />

Example out

<Alert component="h4" />

Alert

React

Renamed the default value for the variant property to custom. This change also affects the AlertVariant enum and AlertIcon component.

#8924

Yes

Example in

const alertVariantOption = AlertVariant.default;
<Alert variant={AlertVariant["default"]}></Alert>
<Alert variant="default"></Alert>
<AlertIcon variant={"default"}></AlertIcon>

Example out

const alertVariantOption = AlertVariant.custom;
<Alert variant={AlertVariant["custom"]}></Alert>
<Alert variant="custom"></Alert>
<AlertIcon variant={"custom"}></AlertIcon>

Application launcher

React

Deprecated the ApplicationLauncher components.

#8836

Yes

Codemods will update import and export paths to our deprecated directory, but we recommend replacing it with our new Dropdown or Select implementation.

Example in

import { ApplicationLauncher } from '@patternfly/react-core';

Example out

import { ApplicationLauncher } from '@patternfly/react-core/deprecated';

Application launcher

React

Updated callback properties to include the event parameter as the first parameter.

#8756

Yes

The onFavorite and onSearch propertiesnow take event as the first parameter. Handlers may need to be updated.

Example in

<ApplicationLauncher onFavorite={(id) => handler(id)} onSearch={(text) => searchHandler(text)}/>
const handler1 = (id) => {};
const searchHandler1 = (text) => {};
<ApplicationLauncher onFavorite={handler1} onSearch={searchHandler1}>
function handler2(id) {};
function searchHandler2(text) {};
<ApplicationLauncher onFavorite={handler2} onSearch={searchHandler2}>

Example out

<ApplicationLauncher onFavorite={(_event, id) => handler(id)} onSearch={(_event, text) => searchHandler(text)}/>
const handler1 = (_event, id) => {};
const searchHandler1 = (_event, text) => {};
<ApplicationLauncher onFavorite={handler1} onSearch={searchHandler1}>
function handler2(_event, id) {};
function searchHandler2(_event, text) {};
<ApplicationLauncher onFavorite={handler2} onSearch={searchHandler2}>

Application launcher React Replaced the internal input element with the SearchInput component. #8293 No

Application launcher

React

Removed the removeFindDomNode property as it is now the default behavior.

#8316

Yes

Example in

<ApplicationLauncher removeFindDomNode />

Example out

<ApplicationLauncher  />

Application launcher React Removed the ToggleMenuBaseProps interface. #8235 No

Background image HTML/CSS Removed the default background image. #5530 No

Background image HTML/CSS Updated to support new design of background image. #5328 No

Background image

React

Removed the filter property and updated the src property.

#8931

Yes

The filter was removed. The src property's type was updated to just a string and will no longer accept a BackgroundImageSrcMap object. Codemods will not update the src properety, but will raise an error if its value is not a string.

Example in

<BackgroundImage filter={<SomeFilter />} src={{xs: 'file/path'}} />

const srcPath = {xs: 'file/path'};
<BackgroundImage src={srcPath} />

Example out

// An error is raised for the src prop
<BackgroundImage  src={{xs: 'file/path'}} />

const srcPath = {xs: 'file/path'};
// An error is raised for the src prop
<BackgroundImage src={srcPath} />

Background image

React

Removed the BackgroundImageSrcMap interface.

#8931

Yes

Example in

const backgroundImgSrcObj: BackgroundImageSrcMap = {};

Example out

const backgroundImgSrcObj = {};

Banner HTML/CSS Renamed status variations (such as “success”, “warning”, and “danger”) to be more generic color variations (such as “green”, “gold”, and “red”). #5408 No

Banner

React

Updated the variant property's type.

#8808

Yes

The default value is still valid, but the following values have been replaced with color values:

info to blue
danger to red
success to green
warning to gold

Example in

<Banner variant="danger" />

Example out

<Banner variant="red" />

Brand React Allowed heights/widths to be set together and be used when no children are passed #9342 No

Button

React

Replaced the isSmall and isLarge properties with the size property.

#8144

Yes

The size property accepts either sm or lg as a value.

Example in

<Button isSmall />
<Button isLarge />

Example out

<Button size="sm" />
<Button size="lg" />

Button

React

Replaced the isSmall and isLarge properties with the size property.

#8144

Yes

The size property accepts either sm or lg as a value.

Example in

<Button isSmall />
<Button isLarge />

Example out

<Button size="sm" />
<Button size="lg" />

Button HTML/CSS Re-introduced a CSS var override in the button's pf-t-dark placeholder that sets the primary button background. #5652 No

Calendar month

React

Updated callback properties to include the event parameter as the first parameter.

#8753

Yes

Updated the onChange and onMonthChange properties to take event as the first parameter. Handlers may need to be updated.

Example in

<CalendarMonth onChange={(date) => handler(date)} onMonthChange={(newDate) => handler(newDate)} />
<CalendarMonth onMonthChange={(newDate, event) => handler(newDate, event)} />
const changeHandler1 = (date) => {};
const handler1 = (newDate, event) => {};
<CalendarMonth onChange={changeHandler1} onMonthChange={handler1}>
function changeHandler2(date) {};
function handler2(newDate, event) {};
<CalendarMonth onChange={changeHandler2} onMonthChange={handler2}>

Example out

<CalendarMonth onChange={(_event, date) => handler(date)} onMonthChange={(_event, newDate) => handler(newDate)} />
<CalendarMonth onMonthChange={(event, newDate) => handler(newDate, event)} />
const changeHandler1 = (_event, date) => {};
const handler1 = (_event, newDate) => {};
<CalendarMonth onMonthChange={handler1}>
function changeHandler2(_event, date) {};
function handler2(_event, newDate) {};
<CalendarMonth onChange={changeHandler2} onMonthChange={handler2}>

Calendar month HTML/CSS Updated background color of calendar month date ranges. #5624 No

Card

React

Deprecated various properties.

#9092

Yes

Deprecated the following properties:

isSelectableRaised
isDisabledRaised
hasSelectableInput
selectableInputAriaLabel
selectableInputAriaLabel

We recommend using our new implementation of clickable and selectable cards instead. Codemods will raise a warning, but can provide fixes when using the `isSelectableRaised` or `isDisabledRaised` properties.

Example in

<Card isSelectableRaised isDisabledRaised />
<Card isSelectableRaised hasSelectableInput />

Example out

<Card isSelectable isDisabled />
<Card isSelectable hasSelectableInput tabIndex={0} />

Card

React

Removed the deprecated `isHoverable` property.

#8196

Yes

Codemods will make the following updates:

Example in

<Card isHoverable />

Example out

<Card  />

Card

React

Reordered `onSelectableInputChange` event parameters.

#8752

Yes

Codemods will make the following updates:

Example in

<Card onSelectableInputChange={(id) => handler(id)} />
const handler1 = (id) => {};
<Card onSelectableInputChange={handler1}>
function handler2(id) {};
<Card onSelectableInputChange={handler2}>

Example out

<Card onSelectableInputChange={(_event, id) => handler(id)} />
const handler1 = (_event, id) => {};
<Card onSelectableInputChange={handler1}>
function handler2(_event, id) {};
<Card onSelectableInputChange={handler2}>

Card React Updated the internal default value of the `component` property from 'article' to 'div'. #8601 No

Card

React

`CardHeaderMain` and `CardActions` are no longer exported from PatternFly, and are instead rendered internally within the `CardHeader` sub-component. Any `CardHeaderMain` content and `CardActions` content or properties should be passed directly to `CardHeader` instead.

#8759

Yes

Codemods will make the following updates:

Example in

<CardHeader>
  <CardHeaderMain>Header content</CardHeaderMain>
  <CardActions className="test" hasNoOffset><Button>Card action</Button></CardActions>
</CardHeader>

Example out

<CardHeader actions={{ actions: <><Button>Card action</Button></>, hasNoOffset: true, className: "test"}} >
  Header content
  
</CardHeader>

Card HTML/CSS Updated design for selectable and clickable cards. #5409 No

Card HTML/CSS Refactored the card header code to be more flexible and improved the visual appearance of card header items. #5280 No

Card HTML/CSS Refactored the card title to be more flexible, and changed the default card title font weight to “normal”. #5363 No

Card HTML/CSS Fixed how the newly introduced selectable cards are fixed in light theme. #5668 No

Catalog view

react-catalog-view

Made compatible with V5

If you are using TypeScript and the CatalogTile component, you may need to update the type of the event arg in their onClick handler to React.FormEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>.

Charts

React

Removed the getResizeObserver function from @patternfly/react-charts.

#8533

Yes

The @patternfly/react-core implementation should be used instead, which accepts a third parameter, useRequestAnimationFrame.

Example in

import { getResizeObserver } from "@patternfly/react-charts";

Example out

import { getResizeObserver } from "@patternfly/react-core";

Charts React Renamed light theme objects to remove "light" from their name, and marked these objects as @private. These objects should not be used directly, and should be replaced with the getTheme function. #8590 No

Charts

React

Removed ChartThemeVariant from @patternfly/react-charts.

#8590

Yes

Example in

import { Chart, ChartThemeVariant } from '@patternfly/react-charts';

Example out

import { Chart } from '@patternfly/react-charts';

Charts

React

Removed dark theme objects from @patternfly/react-charts.

#8590

Yes

Example in

import { DarkBlueColorTheme, DarkCyanColorTheme, DarkGoldColorTheme, DarkGrayColorTheme, DarkGreenColorTheme, DarkMultiColorOrderedTheme, DarkMultiColorUnorderedTheme,
DarkOrangeColorTheme, DarkPurpleColorTheme, ChartLegend } from '@patternfly/react-charts';

Example out

import { ChartLegend } from '@patternfly/react-charts';

Charts

React

Removed themeVariant properties from all components and the getCustomTheme function in @patternfly/react-charts.

#8590

Yes

Example in

import { Chart, ChartThemeColor, getCustomTheme } from '@patternfly/react-charts';

const customTheme = {...};
const newTheme = getCustomTheme(ChartThemeColor.default, 'light', customTheme);

return (
  <Chart themeVariant='light' theme={newTheme}/>
);

Example out

import { Chart, ChartThemeColor, getCustomTheme } from '@patternfly/react-charts';

const customTheme = {...};
const newTheme = getCustomTheme(ChartThemeColor.default, customTheme);

return (
  <Chart theme={newTheme}/>
);

Charts

React

Removed various exports from @patternfly/react-charts.

#8869

The following are no longer exported:

ChartAreaSortOrder
ChartDonutLabelPosition
ChartDonutSortOrder
ChartDonutThresholdSortOrder
ChartDonutUtilizationLabelPosition
ChartDonutUtilizationSortOrder
ChartGroupSortOrder
ChartLabelPlacement
ChartLegendOrientation
ChartLegendRowGutter
ChartLineSortOrder
ChartPieLabelPosition
ChartPieSortOrder
ChartScatterSortOrder
ChartDonutThresholdDonutOrientation
ChartDonutThresholdLabelOrientation
ChartDonutThresholdLabelPosition
ChartLegendPosition
ChartDonutSubTitlePosition
ChartDonutThresholdSubTitlePosition
ChartDonutUtilizationLegendOrientation
ChartDonutUtilizationLegendPosition
ChartDonutUtilizationSubTitlePosition
ChartLabelDirection
ChartPieLegendPosition
ChartVoronoiDimension

Charts React A Tooltip from @patternfly/react-core used inside a @patternfly/react-charts component should be wrapped inside a foreignObject. #8592 No

Charts HTML/CSS Fixed dark theme chart var prefix from pf-v5-c-chart to pf-v5-chart. #5673 No

Charts React Exported getThemeColors. #9338 No

Charts React Updated Victory packages to the latest version (36.6.11). #9276 No

Check HTML/CSS Updated description and body elements to occupy the available width. #5233 No

Checkbox

React

Updated onChange property so that the event parameter is the first parameter.

#8750

Yes

Example in

<Checkbox onChange={(id) => handler(id)} />
<Checkbox onChange={(id, event) => handler(id, event)} />
const handler1 = (id, event) => {};
<Checkbox onChange={handler1}>
function handler2(id, event) {};
<Checkbox onChange={handler2}>

Example out

<Checkbox onChange={(_event, id) => handler(id)} />
<Checkbox onChange={(event, id) => handler(id, event)} />
const handler1 = (_event, id) => {};
<Checkbox onChange={handler1}>
function handler2(_event, id) {};
<Checkbox onChange={handler2}>

Chip group HTML/CSS Updated the component to require the use of the .pf-c-chip-group__main element. #5356 No

Chip group HTML/CSS Added wrapping elements for both the chip content and actions to make the layout more flexible and to style embedded components. #5360 No

Chip group HTML/CSS Updated the chip component to use CSS "gap" to space its children instead of using "margin". #5293 No

Clipboard copy

React

Updated onChange property so that the event parameter is the first parameter.

#8747

Yes

Example in

<ClipboardCopy onChange={(text) => handleChange(text)} />
const handleChange1 = (text) => {};
<ClipboardCopy onChange={toggle1}>
function handleChange2(text) {};
<ClipboardCopy onChange={toggle2}>

Example out

<ClipboardCopy onChange={(_event, text) => handleChange(text)} />
const handleChange1 = (_event, text) => {};
<ClipboardCopy onChange={toggle1}>
function handleChange2(_event, text) {};
<ClipboardCopy onChange={toggle2}>

Clipboard copy

React

Removed the PopoverPosition type for the position property.

#8226

Yes

Example in

<ClipboardCopy position={PopoverPosition.top} />
<ClipboardCopyButton position={PopoverPosition.bottom} />

Example out

<ClipboardCopy position="top" />
<ClipboardCopyButton position="bottom" />

Clipboard copy

React

Removed the switchDelay property.

#8619

Yes

Example in

<ClipboardCopy switchDelay="500" />

Example out

<ClipboardCopy  />

Clipboard copy

React

Removed the removeFindDomNode property as it is now the default behavior.

#8371

Yes

Example in

<ClipboardCopy removeFindDomNode />

Example out

<ClipboardCopy  />

Code editor

React

Removed various deprecated properties from CodeEditorControl. Codemods will suggest using the tooltipProps property instead.

#8624

Yes

The following deprecated properties were removed:

entryDelay
exitDelay
maxWidth
position
toolTipText

Example in

<CodeEditor entryDelay="500" exitDelay="500" maxWidth="15rem" position="top" toolTipText="hi" />

Example out

<CodeEditor      />

Code editor React Upgraded the react-dropzone dependency used internally to the component from version 9 to version 14. #7926 No

Console react-console Made compatible with V5 #38 No

Context selector

React

Deprecated the ContextSelector components.

#8840

Yes

Codemods will update import and export paths to our deprecated directory, but we recommend replacing it with our new Dropdown or Select implementation.:

Example in

import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core';

Example out

import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core/deprecated';

Context selector

React

Removed the removeFindDomNode property as it is now the default behavior.

#8316

Yes

Example in

<ContextSelector removeFindDomNode />

Example out

<ContextSelector  />

Context selector React Removed the ToggleMenuBaseProps interface. #8235 No

Data list

React

Replaced the selectableRow property with onSelectableRowChange, which also takes the event parameter as its first parameter.

#8827

Yes

Example in

<DataList onSelectableRowChange={(id) => handler(id)} />
<DataList onSelectableRowChange={(id, event) => handler(id, event)} />
const handler1 = (id, event) => {};
<DataList onSelectableRowChange={handler1} />
function handler2(id, event) {};
<DataList onSelectableRowChange={handler2} />

Example out

<DataList onSelectableRowChange={(_event, id) => handler(id)} />
<DataList onSelectableRowChange={(event, id) => handler(id, event)} />
const handler1 = (_event, id) => {};
<DataList onSelectableRowChange={handler1} />
function handler2(_event, id) {};
<DataList onSelectableRowChange={handler2} />

Data list

React

Removed various deprecated properties.

#8388

Yes

The following deprecated properties were removed:

onDragFinish
onDragStart
onDragMove
onDragCancel
itemOrder

In addition to removing these properties, Codemods will suggest instead using the DragDrop component.

Example in

<DataList onDragFinish onDragStart onDragMove onDragCancel itemOrder />

Example out

<DataList      />

Data list

React

Updated the onSelectDataListItem property to include the event parameter as the first parameter.

#8756

Yes

Example in

<DataList onSelectDataListItem={(id) => onSelect(id)} />

const toggle1 = (id) => {};
<DataList onSelectDataListItem={toggle1}>

function toggle2(id) {};
<DataList onSelectDataListItem={toggle2}>

Example out

<DataList onSelectDataListItem={(_event, id) => onSelect(id)} />

const toggle1 = (_event, id) => {};
<DataList onSelectDataListItem={toggle1}>

function toggle2(_event, id) {};
<DataList onSelectDataListItem={toggle2}>

Data list

React

Updated the onChange property for the DataListCheck component to include the event parameter as the first parameter.

#8756

Yes

Example in

<DataListCheck onChange={(checked) => onChange(checked)} />

const onChange1 = (checked) => {};
<DataListCheck onChange={onChange1}>

function onChange2(checked) {};
<DataListCheck onChange={onChange2}>

Example out

<DataListCheck onChange={(_event, checked) => onChange(checked)} />

const onChange1 = (_event, checked) => {};
<DataListCheck onChange={onChange1}>

function onChange2(_event, checked) {};
<DataListCheck onChange={onChange2}>

Data list HTML/CSS Renamed "selectable" data list rows to "clickable" for consistency across components, and improved and updated the visual appearance of clickable rows. #5397 No

Date picker React Updated the default value of the appendTo property, which may cause markup changes that require updating selectors. #8636 No

Date picker React Updated the helperText property to now expect the HelperText component to be passed in. Error helper text also now renders internally within a HelperText component. #8833 No

Divider

React

Replaced the isVertical flag with the orientation property that can define verticality on different breakpoints.

#8199

Yes

Example in

<Divider isVertical />

Example out

<Divider orientation={{ default: "vertical" }} />

Drawer

React

The onResize property in DrawerPanelContent to take the event as its first parameter. Handlers may require an update.

#8736

Yes

Example in

<DrawerPanelContent onResize={(width, id) => onChange(checked)} />
    
    const onResize1 = (width, id) => {};
    <DrawerPanelContent onResize={onResize1}>
    
    function onResize2(width, id) {};
    <DrawerPanelContent onResize={onResize2}>

Example out

<DrawerPanelContent onResize={(_event, width, id) => onChange(checked)} />
    
    const onResize1 = (_event, width, id) => {};
    <DrawerPanelContent onResize={onResize1}>
    
    function onResize2(_event, width, id) {};
    <DrawerPanelContent onResize={onResize2}>

Drawer HTML/CSS Removed a "min-height" declaration on the drawer body that caused layout issues. #5322 No

Dropdown

React

Deprecated the current implementation of dropdown.

#8835

Yes

In order to continue using this deprecated implementation, the import path must be updated to our deprecated package and specifiers must be aliased. However, we suggest updating to our newer implementation of dropdown. The following imports will be affected by this deprecation:

BadgeToggle
Dropdown
DropdownPosition
DropdownDirection
DropdownContext
DropdownArrowContext
DropdownGroup
DropdownItem
DropdownMenu
DropdownSeparator
DropdownToggle
DropdownToggleAction
DropdownToggleCheckbox
DropdownWithContext
KebabToggle

Example in

import { Dropdown, DropdownPosition, Button } from '@patternfly/react-core';

Example out

import { Button } from '@patternfly/react-core';
    import { Dropdown, DropdownPosition } from '@patternfly/react-core/deprecated';

Dropdown

React

Removed the isHovered property from DropdownItem.

#8179

Yes

Example in

<DropdownItem isHovered={isHovered} />

Example out

<DropdownItem  />

Dropdown

React

Removed the openedOnEnter property from DropdownMenu.

#8179

Yes

Example in

<DropdownMenu openedOnEnter={false} />

Example out

<DropdownMenu  />

Dropdown

React

Replaced the deprecated isPrimary property "primary" value on the toggleVariant property from DropdownToggle

#8179

Yes

Example in

<DropdownToggle isPrimary />

Example out

<DropdownToggle toggleVariant="primary" />

Dropdown

React

Updated onChange property from DropdownToggleCheckbox so that the event parameter is included as the first parameter. Handlers may need to be updated.

#8787

Yes

Example in

<DropdownToggleCheckbox onChange={(id) => handler(id)} />
    <DropdownToggleCheckbox onChange={(id, event) => handler(id, event)} />
    const handler1 = (id, event) => {};
    <DropdownToggleCheckbox onChange={handler1}>

Example out

<DropdownToggleCheckbox onChange={(_event, id) => handler(id)} />
    <DropdownToggleCheckboxDeprecated onChange={(event, id) => handler(id, event)} />
    const handler1 = (event, id) => {};
    <DropdownToggleCheckbox onChange={handler1}>

Dropdown

React

Promoted the new implementation of dropdown, which is now the default implementation.

#8835

Yes

This rule will update import and/or export paths.

Example in

import { Dropdown } from '@patternfly/react-core/next';

Example out

import { Dropdown /* data- Codemods */ } from '@patternfly/react-core';

Dropdown HTML/CSS Fixed the alignment of items in the toggle when the toggle is wider than the width of its content. #5425 No

Dropdown

React

Removed the removeFindDomNode property from the deprecated implementation as it is now the default behavior.

#8316

Yes

Example in

<Dropdown removeFindDomNode />

Example out

<Dropdown  />

Dropdown React Removed the ToggleMenuBaseProps interface from the deprecated implementation. #8235 No

Dropdown

React

Renamed the itemId property for the new implementation of DropdownItem to value.

#8825

Yes

Example in

<DropdownItem itemId="Item 1" />

Example out

<DropdownItem value="Item 1" />

Dropdown

React

Removed the deprecated isPrimary property from the deprecated Toggle component. Codemods will replace the property with a "primary" value on the toggleVariant property.

#8179

Yes

Example in

<Toggle isPrimary />

Example out

<Toggle toggleVariant="primary" />

Dual list selector

React

The onAvailableOptionsSearchInputChanged, onChosenOptionsSearchInputChanged and onListChange properties now take event as the first parameter. Handlers may need to be updated.

#8793

Yes

Example in

<DualListSelector onAvailableOptionsSearchInputChanged={(id) => handler(id)} />
    <DualListSelector onAvailableOptionsSearchInputChanged={(id, event) => handler(id, event)} />
    const handler1 = (id, event) => {};
    <DualListSelector onAvailableOptionsSearchInputChanged={handler1}>
    function handler2(id, event) {};
    <DualListSelector onAvailableOptionsSearchInputChanged={handler2}>
    
    <DualListSelector onChosenOptionsSearchInputChanged={(id) => handler(id)} />
    <DualListSelector onChosenOptionsSearchInputChanged={(id, event) => handler(id, event)} />
    const handler1 = (id, event) => {};
    <DualListSelector onChosenOptionsSearchInputChanged={handler1}>
    function handler2(id, event) {};
    <DualListSelector onChosenOptionsSearchInputChanged={handler2}>
    
    <DualListSelector onListChange={(id) => handler(id)} />
    const handler1 = (id) => {};
    <DualListSelector onListChange={handler1}>
    function handler2(id) {};
    <DualListSelector onListChange={handler2}>

Example out

<DualListSelector onAvailableOptionsSearchInputChanged={(_event, id) => handler(id)} />
    <DualListSelector onAvailableOptionsSearchInputChanged={(event, id) => handler(id, event)} />
    const handler1 = (_event, id) => {};
    <DualListSelector onAvailableOptionsSearchInputChanged={handler1}>
    function handler2(_event, id) {};
    <DualListSelector onAvailableOptionsSearchInputChanged={handler2}>
    
    <DualListSelector onChosenOptionsSearchInputChanged={(_event, id) => handler(id)} />
    <DualListSelector onChosenOptionsSearchInputChanged={(event, id) => handler(id, event)} />
    const handler1 = (_event, id) => {};
    <DualListSelector onChosenOptionsSearchInputChanged={handler1}>
    function handler2(_event, id) {};
    <DualListSelector onChosenOptionsSearchInputChanged={handler2}>
    
    <DualListSelector onListChange={(_event, id) => handler(id)} />
    const handler1 = (_event, id) => {};
    <DualListSelector onListChange={handler1}>
    function handler2(_event, id) {};
    <DualListSelector onListChange={handler2}>

Empty state

React

Replaced the EmptyStatePrimary and EmptyStateSecondaryActions components with EmptyStateActions.

#8737

Yes

Example in

import { EmptyStatePrimary as Primary, EmptyStateSecondaryActions } from '@patternfly/react-core';
    <>
      <Primary>Primary action</Primary>
      <EmptyStateSecondaryActions>Other actions</EmptyStateSecondaryActions>
    </>

Example out

import { EmptyStateActions } from '@patternfly/react-core';
    <>
      <EmptyStateActions>Primary action</EmptyStateActions>
      <EmptyStateActions>Other actions</EmptyStateActions>
    </>

Empty state

React

Added the EmptyStateHeader component, which should now be passed an EmptyStateIcon to the icon property and the main title should be passed to titleText property. You can also explicitly specify title's heading level with headingLevel property.

Added the EmptyStateFooter component. It should wrap the content which follows after EmptyStateBody inside EmptyState.

#8737

Yes

Example in

    import { EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateIcon, Title } from '@patternfly/react-core';

    <EmptyState>
      <EmptyStateIcon icon={CubesIcon} />
      <Title headingLevel="h5" size="4xl">
        Empty state
      </Title>
      <EmptyStateBody>
        Some content
      </EmptyStateBody>
      <EmptyStateActions>
        Primary action
      </EmptyStateActions>
      <EmptyStateActions>
        Other actions
      </EmptyStateActions>
    </EmptyState>

Example out

import { EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateIcon, EmptyStateHeader, EmptyStateFooter,  } from '@patternfly/react-core';
    
    <EmptyState>
      <EmptyStateHeader titleText="Empty state" icon={<EmptyStateIcon icon={CubesIcon} />} headingLevel="h5" />
      <EmptyStateBody>
        Some content
      </EmptyStateBody><EmptyStateFooter>
      <EmptyStateActions>
        Primary action
      </EmptyStateActions>
      <EmptyStateActions>
        Other actions
      </EmptyStateActions>
    </EmptyStateFooter></EmptyState>

Empty state React Updated the icon property on EmptyStateIcon to be required. #8737 No

Empty state

React

Removed the variant property from EmtpyStateIcon. Replaced the component property with the icon property.

#8737

Yes

Example in

<EmptyStateIcon icon={CubesIcon} variant="icon"/>
    <EmptyStateIcon component={Spinner} variant="container"/>

Example out

<EmptyStateIcon icon={CubesIcon} />
    <EmptyStateIcon icon={Spinner} />

Empty state

React

Renamed the EmptyStateVariant enum and property values "small" to "sm" and "large" to "lg".

#8737

Yes

Example in

const myVariant = EmptyStateVariant.small;
    <EmptyState variant={EmptyStateVariant.large} />
    <EmptyState variant="small" />
    <EmptyState variant="large" />

Example out

const myVariant = EmptyStateVariant.sm;
    <EmptyState variant={EmptyStateVariant.lg} />
    <EmptyState variant="sm" />
    <EmptyState variant="lg" />

Empty state HTML/CSS Refactored the component structure to be more flexible and more inline with existing structural conventions. #5307 No

Expandable section

React

Renamed the large property value of displaySize to lg.

#8212

Yes

Example in

<ExpandableSection displaySize="large" />

Example out

<ExpandableSection displaySize="lg" />

Expandable section

React

Updated the onToggle property so that the event parameter is the first parameter. Handlers may require an update.

#8880

Yes

Example in

<ExpandableSection onToggle={(id) => handler(id)} />
    const handler1 = (id) => {};
    <ExpandableSection onToggle={handler1} />
    function handler2(id) {};
    <ExpandableSection onToggle={handler2} />

Example out

<ExpandableSection onToggle={(_event, id) => handler(id)} />
    const handler1 = (_event, id) => {};
    <ExpandableSection onToggle={handler1} />
    function handler2(_event, id) {};
    <ExpandableSection onToggle={handler2} />

File upload

React

Updated the onTextChange property for FileUploadField and FileUpload so that the event parameter is the first parameter. Handlers may require an update.

#8955

Yes

Example in

<FileUpload onTextChange={text => textHandler(text)} />
    <FileUploadField onTextChange={text => textHandler1(text)} />
    const textHandler2 = (text) => {};
    const textHandler3 = (text) => {};
    <FileUpload onTextChange={textHandler2} />
    <FileUploadField onTextChange={textHandler3} />
    function textHandler4(text) {};
    function textHandler5(text) {};
    <FileUpload onTextChange={textHandler4} />
    <FileUploadField onTextChange={textHandler5} />

Example out

<FileUpload onTextChange={(_event, text) => textHandler(text)} />
    <FileUploadField onTextChange={(_event, text) => textHandler1(text)} />
    const textHandler2 = (_event, text) => {};
    const textHandler3 = (_event, text) => {};
    <FileUpload onTextChange={textHandler2} />
    <FileUploadField onTextChange={textHandler3} />
    function textHandler4(_event, text) {};
    function textHandler5(_event, text) {};
    <FileUpload onTextChange={textHandler4} />
    <FileUploadField onTextChange={textHandler5} />

File upload

React

Updated the onDataChange, onReadFailed, onReadFinished, and onReadStarted properties so that the event parameter is the first parameter. Handlers may require an update.

#8960

Yes

Example in

<FileUpload
      onDataChange={(data) => changeHandler(data)}
      onReadFailed={(error, fileHandle) => readFailedHandler(error, fileHandle)}
      onReadFinished={(fileHandle) => readFinishedHandler(fileHandle)}
      onReadStarted={(fileHandle) => readStartedHandler(fileHandle)}
    />;
    
    const changeHandler1 = (data) => {};
    const readFailedHandler1 = (error, fileHandle) => {};
    const readFinishedHandler1 = (fileHandle) => {};
    const readStartedHandler1 = (fileHandle) => {};
    <FileUpload
      onDataChange={changeHandler1}
      onReadFailed={readFailedHandler1}
      onReadFinished={readFinishedHandler1}
      onReadStarted={readStartedHandler1}
    />
    
    function changeHandler2(data) {};
    function readFailedHandler2(error, fileHandle) {};
    function readFinishedHandler2(fileHandle) {};
    function readStartedHandler2(fileHandle) {};
    <FileUpload
      onDataChange={changeHandler2}
      onReadFailed={readFailedHandler2}
      onReadFinished={readFinishedHandler2}
      onReadStarted={readStartedHandler2}
    />;

Example out

<FileUpload
      onDataChange={(_event, data) => changeHandler(data)}
      onReadFailed={(_event, error, fileHandle) => readFailedHandler(error, fileHandle)}
      onReadFinished={(_event, fileHandle) => readFinishedHandler(fileHandle)}
      onReadStarted={(_event, fileHandle) => readStartedHandler(fileHandle)}
    />;
    
    const changeHandler1 = (_event, data) => {};
    const readFailedHandler1 = (_event, error, fileHandle) => {};
    const readFinishedHandler1 = (_event, fileHandle) => {};
    const readStartedHandler1 = (_event, fileHandle) => {};
    <FileUpload
      onDataChange={changeHandler1}
      onReadFailed={readFailedHandler1}
      onReadFinished={readFinishedHandler1}
      onReadStarted={readStartedHandler1}
    />;
    
    function changeHandler2(_event, data) {};
    function readFailedHandler2(_event, error, fileHandle) {};
    function readFinishedHandler2(_event, fileHandled) {};
    function readStartedHandler2(_event, fileHandle) {};
    <FileUpload
      onDataChange={changeHandler2}
      onReadFailed={readFailedHandler2}
      onReadFinished={readFinishedHandler2}
      onReadStarted={readStartedHandler2}
    />;

File upload

React

Removed the deprecated onChange property. This rule will remove the property and suggest replacing it with the onFileInputChange, onTextChange, onDataChange, and onClearClick properties as needed.

#8155

Yes

Example in

<FileUpload onChange={onChange} />

Example out

<FileUpload  />

File upload (multiple)

React

Updated the onFileDrop property for MultipleFileUpload so that the event parameter is the first parameter. Handlers may require an update.

#8931

Yes

Example in

<MultipleFileUpload onFileDrop={(id) => handler(id)} />
const handler1 = (id) => {};
<MultipleFileUpload onFileDrop={handler1} />
function handler2(id) {};
<MultipleFileUpload onFileDrop={handler2} />

Example out

<MultipleFileUpload onFileDrop={(_event, id) => handler(id)} />
const handler1 = (_event, id) => {};
<MultipleFileUpload onFileDrop={handler1} />
function handler2(_event, id) {};
<MultipleFileUpload onFileDrop={handler2} />

File upload (multiple) React Updated the type for the dropzoneProps property as part of an upgrade of react-dropzone from version 9 to version 14. #7926 No

File upload (simple) React Updated the type for onFileInputChange and dropzoneProps properties as part of an upgrade of react-dropzone from version 9 to version 14. #7926 No

Flex

HTML/CSS

Added gap support.

#5516

This is more of an enhancement that is not breaking. However, there is a new "row" spacer (a gap between rows) that is set by default that didn't exist previously, and the default column spacer has been updated from medium to large to be consistent with other layouts.

Fonts HTML/CSS Fixed incorrect font mapping from bold to italic for RHD font. #5678 No

Form control

React

Some properties have been removed from a few form control components.

#9132

Yes

Affected components - properties:

FormSelect - isIconSprite
TextArea - isIconSprite, isReadOnly
TextInput - isIconSprite, isReadOnly, iconVariant, customIconUrl, customIconDimensions

Example in

<FormSelect isIconSprite />
    <TextArea isIconSprite isReadOnly />
    <TextInput isIconSprite iconVariant customIconUrl customIconDimensions isReadOnly />
    
    // With an existing readOnlyVariant prop
    <TextArea isReadOnly readOnlyVariant="plain" >

Example out

<FormSelect  />
    <TextArea  readOnlyVariant="default" />
    <TextInput     readOnlyVariant="default" />
    
    // With an existing readOnlyVariant prop
    <TextArea  readOnlyVariant="plain" >

Form control

React

Changed the markup for several form control components. Selectors may need to be updated.

#9132

Affected components:

FormSelect
TextArea
TextInput
TimePicker
ClipboardCopy
DatePicker
FileUpload
LoginPage
NumberInput
SearchInput
Slider - only when the isInputVisible property is passed in
TreeViewSearch
Select - only the deprecated implementation with the hasInlineFilter property passed in

Form control HTML/CSS Wrapped form control elements in HTML divs to be more flexible, and updated status and custom icon form control elements to use regular icons instead of icons as background images. #5531 No

Form control HTML/CSS Refactored the form control borders to be placed on the wrapping HTML div instead of the form elements themselves. #5641 No

Form control HTML/CSS Changed all the divs in a form control to be spans to allow a form control to be inside phrasing content. #5703 No

Form group

React

Removed the helper text related properties from FormGroup: helperText, helperTextInvalid, validated, helperTextIcon, helperTextInvalidIcon, and isHelperTextBeforeField. The FormHelperText, HelperText, and HelperTextItem components should now be used directly as part of children instead of these properties. This rule will throw an error but not make any changes.

#8810

Example in

<FormGroup
      helperTextInvalid={helpText !== null && typeof helpText === 'object' ? intl.formatMessage(helpText) : helpText}
      validated={validated}
    >
      <TextInput
        validated={validated}
        value={value}
        onChange={onChange}
        isRequired={isRequired}
        placeholder={placeholder}
      />
    </FormGroup>

Example out

<FormGroup>
      <TextInput
        validated={validated}
        value={value}
        onChange={onChange}
        isRequired={isRequired}
        placeholder={placeholder}
      />
      {validated === 'error' && helpText && (
        <FormHelperText>
          <HelperText>
            <HelperTextItem variant="error">
              {helpText}
            </HelperTextItem>
          </HelperText>
        </FormHelperText>
      )}
    </FormGroup>

Form helper text

React

Removed functionality from FormHelperText, which will instead be covered by HelperText and HelperTextItem. This rule will remove the isError, isHidden, icon, and component properties if present. The HelperText and HelperTextItem components should now be used directly as part of children instead of these properties.

#8810

Yes

Example in

<FormHelperText isError={true} isHidden={false} icon={<Icon />} component="div" />

Example out

<FormHelperText     />

Form select

React

Updated the onChange property so that the event parameter is the first parameter. Handlers may require an update.

#8998

Yes

Example in

<FormSelect onChange={(id) => handler(id)} />
    <FormSelect onChange={(id, event) => handler(id, event)} />
    const handler1 = (id, event) => {};
    <FormSelect onChange={handler1} />
    function handler2(id, event) {};
    <FormSelect onChange={handler2} />

Example out

<FormSelect onChange={(_event, id) => handler(id)} />
    <FormSelect onChange={(event, id) => handler(id, event)} />
    const handler1 = (_event, id) => {};
    <FormSelect onChange={handler1} />
    function handler2(_event, id) {};
    <FormSelect onChange={handler2} />

Form select React Changed divs in form control elements to spans. #9334 No

Helper text HTML/CSS Updated components that include helper text to use the helper text component. #5417 No

Icons HTML/CSS Updated the pf-icon class prefix for custom icons to pficon #5538 No

Icons HTML/CSS Removed the .pf-svg-size-[size] classes used to modify SVG sizes with .pf-svg. The Icon component should now be used to resize an icon. #5388 No

Icons HTML/CSS Updated the global variables for small and medium icon font sizes. #5525 No

Icons HTML/CSS Updated components that have static icons to use the appropriate icon color. #5526 No

Icons React Added fallback width and height attributes to icons from @patternfly/react-icons. #9257 No

Input group

React

pull request #9176 affects this as well as #9074. Added the InputGroupItem component, which must wrap all non-InputGroupText children passed to an InputGroup. The InputGroupItem component may need to have the isFill, isBox, and/or isPlain properties adjusted to retain styling.

#9074

Yes

Example in

    <InputGroup>
      <input />
      <textarea />
      <TextArea />
      <TextInput />
      <InputGroupText>Some text</InputGroupText>
      <button />
    </InputGroup>

Example out

<InputGroup>
      <InputGroupItem isFill><input /></InputGroupItem>
      <InputGroupItem isFill><textarea /></InputGroupItem>
      <InputGroupItem isFill><TextArea /></InputGroupItem>
      <InputGroupItem isFill><TextInput /></InputGroupItem>
      <InputGroupText>Some text</InputGroupText>
      <InputGroupItem><button /></InputGroupItem>
    </InputGroup>

Input group

React

Removed the variant property on InputGroupText.

#9147

Yes

Example in

<InputGroupText variant={InputGroupTextVariant.plain} />

Example out

<InputGroupText  />

Input group HTML/CSS Refactored the component to be more flexible and require the use of input group items to wrap all children of the input group. #5382 No

Label

React

Removed the isTruncated property from Label. This is now the default behavior. In addition, you can limit the text width using the new textMaxWidth property.

#8771

Yes

Example in

<Label isTruncated />

Example out

<Label  />

Label

HTML/CSS

Used gap instead of item margins.

#5221

Updated the label component to use CSS `gap` to space its children instead of using `margin` (same as chip).

Label

HTML/CSS

Add wrappers for content and actions to manage styling embedded components

#5360

Added wrapping elements for both the label content and actions to make the layout more flexible. (same as chip).

Label

HTML/CSS

Allow text to truncate.

#5364

Updated the HTML structure so that text truncation is supported by default.

Layouts

HTML/CSS

Updated level, split, and stack to use gap.

#5585

Updated the “gutter” variation of these layouts to use CSS `gap` to create gutters between children instead of `margin`.

Log viewer react-log-viewer Promoted log viewer out of beta #27 No

Log viewer react-log-viewer Made compatible with V5 #31 No

React

Updated callback properties on LoginForm to include the event parameter as the first parameter. Handlers may require an update.

#8996

Yes

The onChangeUsername, onChangePassword, and onChangeRememberMe properties now take event as the first parameter. Handlers may require an update.

Example in

<LoginForm onChangeUsername={(id) => handler(id)} />
<LoginForm onChangeUsername={(id, event) => handler(id, event)} />
const usernameHandler1 = (id, event) => {};
<LoginForm onChangeUsername={usernameHandler1} />
function usernameHandler2(id, event) {};
<LoginForm onChangeUsername={usernameHandler2} />

<LoginForm onChangePassword={(id) => handler(id)} />
<LoginForm onChangePassword={(id, event) => handler(id, event)} />
const passwordHandler1 = (id, event) => {};
<LoginForm onChangePassword={passwordHandler1} />
function passwordHandler2(id, event) {};
<LoginForm onChangePassword={passwordHandler2} />

<LoginForm onChangeRememberMe={(id) => handler(id)} />
<LoginForm onChangeRememberMe={(id, event) => handler(id, event)} />
const rememberMeHandler1 = (id, event) => {};
<LoginForm onChangeRememberMe={rememberMeHandler1} />
function rememberMeHandler2(id, event) {};
<LoginForm onChangeRememberMe={rememberMeHandler2} />

Example out

<LoginForm onChangeUsername={(_event, id) => handler(id)} />
<LoginForm onChangeUsername={(event, id) => handler(id, event)} />
const usernameHandler1 = (_event, id) => {};
<LoginForm onChangeUsername={usernameHandler1} />
function usernameHandler2(_event, id) {};
<LoginForm onChangeUsername={usernameHandler2} />

<LoginForm onChangePassword={(_event, id) => handler(id)} />
<LoginForm onChangePassword={(event, id) => handler(id, event)} />
const passwordHandler1 = (_event, id) => {};
<LoginForm onChangePassword={passwordHandler1} />
function passwordHandler2(_event, id) {};
<LoginForm onChangePassword={passwordHandler2} />

<LoginForm onChangeRememberMe={(_event, id) => handler(id)} />
<LoginForm onChangeRememberMe={(event, id) => handler(id, event)} />
const rememberMeHandler1 = (_event, id) => {};
<LoginForm onChangeRememberMe={rememberMeHandler1} />
function rememberMeHandler2(_event, id) {};
<LoginForm onChangeRememberMe={rememberMeHandler2} />

React

Removed the backgroundImgAlt property. Updated the type of the backgroundImgSrc property to just a string, and the property will no longer accept a BackgroundImageSrcMap object.

#8931

Example in

<LoginPage backgroundImgAlt="Alt text" backgroundImgSrc={{xs: 'file/path'}} />

const srcPath = {xs: 'file/path'};
<LoginPage backgroundImgSrc={srcPath} />

Example out

// An error is raised for the backgroundImgSrc prop
<LoginPage  backgroundImgSrc={{xs: 'file/path'}} />

const srcPath = {xs: 'file/path'};
// An error is raised for the backgroundImgSrc prop
<LoginPage backgroundImgSrc={srcPath} />

Masthead

React

Updated MastheadBrand to only be an anchor if anhref is specified, otherwise it will be a span.

#8655

Yes

Explicitly declared component properties will remain unchanged, but if it is not specified a default will be added.

Example in

<MastheadBrand />
<MastheadBrand component="div" />

Example out

<MastheadBrand component="a" />
<MastheadBrand component="div" />

React

Renamed the hasCheck property on MenuItem to hasCheckbox.

#8403

Yes

Example in

<MenuItem hasCheck />

Example out

<MenuItem hasCheckbox />

Menu React Updated the aria-label property for MenuItem so that it is applied to the internal li element when the hasCheckbox property is also passed. Otherwise it is applied to the element specified by the component property. #8649 No

React

Removed the aria-label property onMenu as it should be passed to MenuList instead.

#8649

Yes

If you are also using MenuGroup with a label property passed to it, an aria-label on MenuList is not necessary.

Example in

<Menu aria-label="tester">
  <MenuList>
    ...menu items placed here
  </MenuList>
</Menu>

<Menu aria-label="tester">
  <MenuList>
    ...menu items placed here
  </MenuList>
  <MenuList>
    ...menu items placed here
  </MenuList>
</Menu>

<Menu aria-label="tester">
  <MenuGroup>
    <MenuList>
      ...menu items placed here
    </MenuList>
  </MenuGroup>
</Menu>

Example out

<Menu >
  <MenuList aria-label="tester">
    ...menu items placed here
  </MenuList>
</Menu>

<Menu >
  <MenuList>
    ...menu items placed here
  </MenuList>
  <MenuList>
    ...menu items placed here
  </MenuList>
</Menu>

<Menu >
  <MenuGroup>
    <MenuList>
      ...menu items placed here
    </MenuList>
  </MenuGroup>
</Menu>

React

MenuInput has been renamed to MenuSearchInput and MenuSearch has been added as a wrapper.

#8820

Yes

Example in

  <MenuInput><SearchInput /></MenuInput>

Example out

    <MenuSearch><MenuSearchInput><SearchInput /></MenuSearchInput></MenuSearch>

Menu React Updated the aria-label property on MenuItemAction, making it required instead of optional. #8617 No

Menu toggle HTML/CSS Removed the background from full height menu toggles in dark theme. #5643 No

Modal

React

Renamed the default value for the titleIconVariant property to custom. This change also affects the ModalContent component.

#8924

Yes

Example in

const variantOption = "default";
<Modal titleIconVariant={variantOption}></Modal>
<ModalContent titleIconVariant="default"></ModalContent>

Example out

const variantOption = "custom";
<Modal titleIconVariant={variantOption}></Modal>
<ModalContent titleIconVariant="custom"></ModalContent>

Modal

HTML/CSS

Added wrapper to close button

#5371

Added a structural HTML element to the modal component that is used to wrap the close button. This improved the flexibility of the close button and is more structurally consistent with similar components.

Navigation React Updated the default value of the aria-label attribute with a horizontal-subnav variant to "local" (previously the default value was "Global"). #8213 No

Navigation

React

Updated the onSelect and onToggle properties for nav so that the event parameter is the first parameter, and have removed the event property from the selectedItem and toggledItem object parameters respectively. Handlers may require an update.

#8997

Yes

Example in

<Navigation onSelect={(id) => handler(id)} />
const handler1 = (id) => {};
<Navigation onSelect={handler1} />
function handler2(id) {};
<Navigation onSelect={handler2} />

<Navigation onToggle={(id) => handler(id)} />
const toggleHandler1 = (id) => {};
<Navigation onToggle={toggleHandler1} />
function toggleHandler2(id) {};
<Navigation onToggle={toggleHandler2} />

Example out

<Navigation onSelect={(_event, id) => handler(id)} />
const handler1 = (_event, id) => {};
<Navigation onSelect={handler1} />
function handler2(_event, id) {};
<Navigation onSelect={handler2} />

<Navigation onToggle={(_event, id) => handler(id)} />
const toggleHandler1 = (_event, id) => {};
<Navigation onToggle={toggleHandler1} />
function toggleHandler2(_event, id) {};
<Navigation onToggle={toggleHandler2} />

Navigation React hanged the placement of nav flyouts in the DOM. #8628 No

Navigation

React

Removed the removeFindDomNode property from the NavItem component as it is now the default behavior.

#8316

Yes

Example in

<NavItem removeFindDomNode />

Example out

<NavItem  />

Navigation

HTML/CSS

Added top and bottom padding to navigation list

#5507

Added top and bottom padding to navigation lists to replace the role of padding vertical navigation in the page sidebar that was removed in https://github.com/patternfly/patternfly/pull/5093.

Navigation

HTML/CSS

Updated spacing for grouped navigation

#5607

Removed the `.pf-m-no-title` class that only existed in core and is no longer necessary.

Notification badge

React

Removed the isRead property from NotificationBadge, use "read" or "unread" on the variant property instead.

#8626

Yes

Example in

  <NotificationBadge isRead />
  <NotificationBadge isRead={false} />
  <NotificationBadge isRead={isRead} />
  <NotificationBadge isRead={isRead || markedRead} />

Example out

  <NotificationBadge variant="read" />
  <NotificationBadge variant="unread" />
  <NotificationBadge variant={isRead ? "read" : "unread"} />
  <NotificationBadge variant={(isRead || markedRead) ? "read" : "unread"} />

Notification drawer

React

Renamed the default value for the variant property to custom for the NotificationDrawerListItemHeader component.

#8924

Yes

Example in

<NotificationDrawerListItemHeader variant="default"></NotificationDrawerListItemHeader>

Example out

<NotificationDrawerListItemHeader variant="custom"></NotificationDrawerListItemHeader>

Notification drawer

HTML/CSS

Set body to fill available vertical space

#5214

Set the drawer body to fill the vertical space to fix a visual bug.

Number input

React

Removed the allowEmptyInput property from NumberInput.

#8715

Yes

Example in

<NumberInput allowEmptyInput />

Example out

<NumberInput  />

Options menu

React

Deprecated OptionsMenu components.

#8798

Yes

Example in

import { OptionsMenu, OptionsMenuToggle } from '@patternfly/react-core';

Example out

import { OptionsMenu, OptionsMenuToggle } from '@patternfly/react-core/deprecated';

Options menu

React

Removed the removeFindDomNode property as it is now the default behavior.

#8316

Yes

Example in

<OptionsMenu removeFindDomNode />

Example out

<OptionsMenu  />

Options menu React Removed the ToggleMenuBaseProps interface. #8235 No

Options menu

HTML/CSS

Removed line height CSS variable

#5422

Removed unnecessary line-height styles from the options menu toggle.

OUIA React Updated the OUIA data-ouia-component-type prefix from PF4 to PF5. #9250 No

Overflow menu React OverflowMenuDropdownItem now uses the Next implementation of DropdownItem and DropdownItemProps internally. #8359 No

Overflow menu

React

Renamed the index property for OverflowMenuDropdownItem to itemId, and updated its type to string | number.

#8359

Yes

Example in

<OverflowMenuDropdownItem index={0}>

Example out

<OverflowMenuDropdownItem itemId={0}>

Page React Updated the aria-label property for PageGroup and PageNavigation to conditionally apply only when the hasOverflowScroll property is true. #8649 No

Page

React

The following properties have been updated for the specified Page sub-components:
Sub-component	Old prop name	New prop name
PageSidebar	isNavOpen	isSidebarOpen
PageToggleButton	isNavOpen	isSidebarOpen
PageToggleButton	onNavToggle	onSidebarToggle

#8942

Yes

Example in

<PageSidebar isNavOpen={true} />
<PageToggleButton isNavOpen={true} onNavToggle={() => {}} />

Example out

<PageSidebar isSidebarOpen={true} />
            <PageToggleButton isSidebarOpen={true} onSidebarToggle={() => {}} />

Page

React

Updated onPageResize property so that the event parameter is the first parameter. Handlers may require an update.

#9011

Yes

Example in

<Page onPageResize={({obj}) => onChange({obj})} />

                const resize1 = ({obj}) => {};
                <Page onPageResize={resize1}>

                function resize2({obj}) {};
                <Page onPageResize={resize2}>

Example out

<Page onPageResize={(_event, {obj}) => onChange({obj})} />

                const resize1 = (_event, {obj}) => {};
                <Page onPageResize={resize1}>

                function resize2(_event, {obj}) {};
                <Page onPageResize={resize2}>

Page

React

Deprecated the PageHeader components.

#8854

Yes

Codemods will update import and export paths to our deprecated directory, but we recommend replacing it with Masthead and its related imports.

Example in

import { Button,
                PageHeader,
                PageHeaderTools,
                PageHeaderToolsGroup,
                PageHeaderToolsItem,
            } from "@patternfly/react-core";

Example out

import {
	Button
} from '@patternfly/react-core';
import {
	PageHeader,
	PageHeaderTools,
	PageHeaderToolsGroup,
	PageHeaderToolsItem
} from '@patternfly/react-core/deprecated';

Page

React

Updated PageHeader's logo to only be an anchor if an href is specified.

#8655

Yes

Example in

<PageHeader />
<PageHeader logoComponent="div" />

Example out

<PageHeader logoComponent="a" />
<PageHeader logoComponent="div" />

Page

React

PageSidebar API has been updated. The nav property has been renamed to children. Any content passed to the property should be wrapped in PageSidebarBody.

#8942

Yes

Example in

<PageSidebar theme="light" nav="Content">

Example out

<PageSidebar theme="light">
                <PageSidebarBody>
                Content
                </PageSidebarBody>
                </PageSidebar>

Page

HTML/CSS

Set page height to 100vh

#5093

Updated the page component sidebar to support multiple body elements, instead of a single body element used to position vertical navigation.

Page

HTML/CSS

Default page to full viewport height

#5517

Updated the page component height to be 100% of the viewport height using `100vh` and `100dvh` units. Previously the page height was set to 100%, requiring the need for all ancestors of the page component element to also have an implicit or explicit CSS height set. This update removed the need for any ancestors of the page component to have a height set.

Page

HTML/CSS

Moved variables to root

#5637

This update scopes all of the page component CSS variables to the `:root` scope instead of the page component class selector. This allows any top-level CSS variable for the page component to be accessible from anywhere in the document, instead of only being accessible within the page component class selector.

Pagination React Removed the OptionsToggle used by Pagination and replaced it with Menu and MenuToggle. #8319 No

Pagination

React

Removed various deprecated properties from Pagination.

#8624

Yes

The following deprecated properties were renamed and/or removed:

defaultToFullPage: isLastFullPageShown
perPageComponenet: removed

The following sub-properties of Pagination's "title" property were renamed:

currPage: currPageAriaLabel
paginationTitle: paginationAriaLabel
toFirstPage: toFirstPageAriaLabel
toLastPage: toLastPageAriaLabel
toNextPage: toNextPageAriaLabel
toPreviousPage: toPreviousPageAriaLabel
optionsToggle: optionsToggleAriaLabel

Example in

<Pagination
  perPageComponenet="div"
  defaultToFullPage
  titles={{
    currPage: "text"
    paginationTitle: "text"
    toFirstPage: "text"
    toLastPage: "text"
    toNextPage: "text"
    toPreviousPage: "text"
    optionsToggle: "text"
  }}
/>

Example out

<Pagination
  isLastFullPageShown
  titles={{
    currPageAriaLabel: "text"
    paginationAriaLabel: "text"
    toFirstPageAriaLabel: "text"
    toLastPageAriaLabel: "text"
    toNextPageAriaLabel: "text"
    toPreviousPageAriaLabel: "text"
    optionsToggleAriaLabel: "text"
  }}
/>

Pagination

React

Renamed the ToggleTemplateProps to PaginationToggleTemplateProps.

#8134

Yes

Example in

import { Pagination, ToggleTemplateProps } from '@patternfly/react-core';
<Pagination toggleTemplate={({firstIndex, lastIndex} : ToggleTemplateProps) => <div />} />

Example out

import { Pagination, PaginationToggleTemplateProps } from '@patternfly/react-core';
<Pagination toggleTemplate={({firstIndex, lastIndex} : PaginationToggleTemplateProps) => <div />} />

Pagination

HTML/CSS

Updated styles to target menu toggle

#5619

Updated all styles within the pagination component that were targeting the deprecated options menu toggle to target the menu toggle component instead.

Popover React Updated the default value of the appendTo property, which may cause markup changes that require updating selectors. #8621 No

Popover

React

Removed the boundary and tippyProps properties and updated removed parameters from various callback properties.

#8201

Yes

The shouldClose property's first parameter was removed, and all parameters were removed from the onHidden, onHide, onMount, onShow, and onShown properties.

Example in

<Popover boundary={} tippyProps={} shouldClose={(tip, hideFunction) => {/* ... */}} onHidden={(tip) => {/* ... */}} onHide={(tip) => {/* ... */}} onMount={(tip) => {/* ... */}} onShow={(tip) => {/* ... */}} onShown={(tip) => {/* ... */}} />

Example out

<Popover
  shouldClose={(hideFunction) => {
    /* ... */
  }}
  onHidden={() => {
    /* ... */
  }}
  onHide={() => {
    /* ... */
  }}
  onMount={() => {
    /* ... */
  }}
  onShow={() => {
    /* ... */
  }}
  onShown={() => {
    /* ... */
  }}
/>

Popover

React

Updated the shouldClose and shouldOpen callback properties so that the event parameter is the first parameter.

#9054

Yes

Example in

<Popover shouldOpen={(fn) => openHandler(fn)} shouldClose={(fn2) => closeHandler(fn2)} />
<Popover shouldOpen={(fn, event) => openHandler(fn, event)} shouldClose={(fn, event) => closeHandler(fn, event)}/>
const openHandler1 = (fn, event) => {};
const closeHandler1 = (fn, event) => {};
<Popover shouldOpen={openHandler1} shouldClose={closeHandler1} />
function openHandler2(fn, event) {};
function closeHandler2(fn, event) {};
<Popover shouldOpen={openHandler2} shouldClose={closeHandler2} />

Example out

<Popover shouldOpen={(_event, fn) => openHandler(fn)} shouldClose={(_event, fn2) => closeHandler(fn2)} />
<Popover shouldOpen={(event, fn) => openHandler(fn, event)} shouldClose={(event, fn) => closeHandler(fn, event)}/>
const openHandler1 = (event, id) => {};
const closeHandler1 = (event, id) => {};
<Popover shouldOpen={openHandler1} shouldClose={closeHandler1} />
function openHandler2(event, id) {};
function closeHandler2(event, id) {};
<Popover shouldOpen={openHandler2} shouldClose={closeHandler2} />

Popover

React

Removed the removeFindDomNode property as it is now the default behavior.

#8316

Yes

Example in

<Popover removeFindDomNode />

Example out

<Popover  />

Popover

React

Renamed the default value for the alertSeverityVariant property to custom.

#8924

Yes

Example in

<Popover alertSeverityVariant="default"></Popover>

Example out

<Popover alertSeverityVariant="custom"></Popover>

Popover

React

Renamed the reference property to triggerRef.

#8733

Yes

Example in

<Popover reference={componentRef} />

Example out

<Popover triggerRef={componentRef} />

Popover

HTML/CSS

Added header, title, and close elements

#5370

Refactored the popover component HTML to be more flexible and consistent with similarly structured components. Added a structural HTML element to the container that is used to wrap the close button. Made the header element required. Updated the popover title to be more flexible

Popover React Reverted default value of popover appendTo prop so it is now () => document.body. #9252 No

Popper

React

Removed the popperMatchesTriggerWidth property. The width, minWidth, and maxWidth properties should be used instead to modify the Popper width.

#8724

Yes

Example in

<Popper popperMatchesTriggerWidth />

Example out

<Popper  />

Popper React Removed the ToggleMenuBaseProps interface. #8235 No

Progress

HTML/CSS

Use gap instead of margin for status box

#5387

Updates the progress status element to use CSS `gap` to space its children instead of `margin`, which impacts the space between the status icon text specifically.

Progress stepper React Updated the internal aria-labelledby for ProgressStep to be conditionally applied only when the popoverRender property is also passed. #8649 No

Quick starts

Quickstarts

Made compatible with V5

Quick starts Quickstarts React 18, webpack 5, node 18 support, updated eslint & some other dependencies #247 No

Radio

React

Updated the onChange callback property so that the event parameter is the first parameter.

#8965

Yes

Example in

<Radio onChange={(checked) => handler(checked)} />
<Radio onChange={(checked, event) => handler(checked, event)} />
const handler1 = (checked, event) => {};
<Radio onChange={handler1} />
function handler2(checked, event) {};
<Radio onChange={handler2} />

Example out

<Radio onChange={(_event, checked) => handler(checked)} />
<Radio onChange={(event, checked) => handler(checked, event)} />
const handler1 = (_event, checked) => {};
<Radio onChange={handler1} />
function handler2(_event, checked) {};
<Radio onChange={handler2} />

Radio

HTML/CSS

Set description/body to fill available width

#5233

Previously the description and body elements would only be as wide as their content, and now they occupy the available width.

Search input

React

Removed the removeFindDomNode property as it is now the default behavior.

#8316

Yes

Example in

<SearchInput removeFindDomNode />

Example out

<SearchInput  />

Search input

HTML/CSS

Removed component

#5506

The search input component was removed in favor of the text input group component.

Select

React

Renamed the hasCheck property for the next implementation of SelectOption to hasCheckbox.

#8403

Yes

Example in

<SelectOption hasCheck />

Example out

<SelectOption hasCheckbox />

Select

React

Promoted the new implementation of select, which is now the default implementation.

#8825

Yes

This rule will update import and/or export paths.

Example in

import { Select } from '@patternfly/react-core/next';

Example out

import { Select /* data- Codemods */ } from '@patternfly/react-core';

Select

React

Removed the removeFindDomNode property from the deprecated implementation as it is now the default behavior.

#8316

Yes

Example in

<Select removeFindDomNode />

Example out

<Select  />

Select React Removed the ToggleMenuBaseProps interface from the deprecated implementation. #8235 No

Select React Updated the internal markup of the deprecated typeahead and multi-typeahead implementations. Selectors may need to be updated. #9172 No

Select

React

Deprecated the Select components and replaced them with a newer implementation.

#8825

Yes

Codemods will update import and export paths to our deprecated directory, but we recommend replacing it with our new Select implementation.

Example in

import { Button, Select, SelectOption, SelectVariant, SelectDirection, SelectGroup } from "@patternfly/react-core";

Example out

import {
	Button
} from '@patternfly/react-core';
import {
	Select,
	SelectOption,
	SelectVariant,
	SelectDirection,
	SelectGroup
} from '@patternfly/react-core/deprecated';

Select

React

Renamed the itemId property for the new implementation of SelectOption to value.

#8825

Yes

Example in

<SelectOption itemId="Option 1" />

Example out

<SelectOption value="Option 1" />

Select HTML/CSS Fixed typeahead form control border styles. #5698 No

Select React Used text input component in the typeahead toggle for the deprecated select. #9317 No

Sidebar

HTML/CSS

Added the ability for a border to separate the sidebar panel and sidebar content.

#5221

Allowed the sidebar component to support more flexible layouts by adding support for padding to be added to the sidebar panel and sidebar content elements.

Simple list

React

Removed the isCurrent property, which should be replaced with the isActive property.

#8132

Yes

Example in

<SimpleList isCurrent />

Example out

<SimpleList isActive />

Skip to content HTML/CSS Previously, the skip to content component classes were applied directly to the button classes to create the skip to content component. This pull request added a structural HTML element that wraps the component and serves as the parent element for the skip to content component. #5153 No

Slider

React

Updated the onChange callback property so that the event parameter is the first parameter.

#8970

Yes

Example in

<Slider onChange={(value) => handler(value)} />
const handler1 = (value) => {};
<Slider onChange={handler1} />
function handler2(value) {};
<Slider onChange={handler2} />

Example out

<Slider onChange={(_event, value) => handler(value)} />
const handler1 = (_event, value) => {};
<Slider onChange={handler1} />
function handler2(_event, value) {};
<Slider onChange={handler2} />

Spinner HTML/CSS Removed the legacy spinner variation in favor of the SVG spinner variation. #5468 No

Spinner

React

Removed the isSVG property as the component now uses an SVG exclusively.

#8616

Yes

Example in

<Spinner isSVG />

Example out

<Spinner  />

Switch

React

Updated the onChange callback property so that the event parameter is the first parameter.

#9037

Yes

Example in

<Switch onChange={(id) => handler(id)} />
<Switch onChange={(id, event) => handler(id, event)} />
const handler1 = (id, event) => {};
<Switch onChange={handler1} />
function handler2(id, event) {};
<Switch onChange={handler2} />

Example out

<Switch onChange={(_event, id) => handler(id)} />
<Switch onChange={(event, id) => handler(id, event)} />
const handler1 = (_event, id) => {};
<Switch onChange={handler1} />
function handler2(_event, id) {};
<Switch onChange={handler2} />

Table HTML/CSS Renamed the table component's “sticky-column” element to “sticky-cell” to be more flexible in sticky positioning. Added support for a table column to be sticky to the right edge of the table instead of just the left. #5393 No

Table HTML/CSS Improved the alignment of the table action column by right-aligning the contents of the table action cell. #5400 No

Table

HTML/CSS

Added unique table component CSS class selectors to all elements of the table that previously did not have a class.

#5558

For example, '<tr>' is now '<tr className=".pf-v5-c-table__tr">', 'thead' is now '<thead className=".pf-v5-c-table__thead">'

Table

HTML/CSS

Improved and updated the visual appearance of clickable rows.

#5397

Renamed “hoverable” table rows to “clickable” to be more consistent with similar features in other components.

Table

React

Updated the onSelect and clearSelection properties on EditableSelectInputCell to take event as the first parameter. Handlers may need to be updated.

#9057

Yes

Example in

<EditableSelectInputCell onSelect={(value) => onSelectHandler(value)} clearSelection={(row, cell) => clearSelectionHandler(row, cell)} />
    <EditableSelectInputCell onSelect={(value, event) => onSelectHandler(value, event)} />
    const onSelectHandler1 = (value, event) => {};
    const clearSelectionHandler1 = (row, cell) => {};
    <EditableSelectInputCell onSelect={onSelectHandler1} clearSelection={clearSelectionHandler1} />
    function onSelectHandler2(value) {};
    function clearSelectionHandler2(row, cell) {};
    <EditableSelectInputCell onSelect={onSelectHandler2} clearSelection={clearSelectionHandler2} />

Example out

<EditableSelectInputCell onSelect={(_event, value) => onSelectHandler(value)} clearSelection={(_event, row, cell) => clearSelectionHandler(row, cell)} />
    <EditableSelectInputCell onSelect={(event, value) => onSelectHandler(value, event)} />
    const onSelectHandler1 = (event, value) => {};
    const clearSelectionHandler1 = (event, row, cell) => {};
    <EditableSelectInputCell onSelect={onSelectHandler1} clearSelection={clearSelectionHandler1} />
    function onSelectHandler2(_event, value) {};
    function clearSelectionHandler2(_event, row, cell) {};
    <EditableSelectInputCell onSelect={onSelectHandler2} clearSelection={clearSelectionHandler2} />

Table

React

Renamed the isHoverable property to isClickable. Codemods will provide a fix when the property is passed to the Tr component of our composable implementation, but will otherwise only raise an error for our deprecated implementation.

#9083

Yes

Example in

<Tr isHoverable />

Example out

<Tr isClickable />

Table

React

Renamed the TableComposable component to just Table.

#8892

Yes

The fix provided by Codemods will insert a /* data- Codemods */ comment after the import specifier. This should only be removed once Codemods is no longer being ran as it prevents other fixes from overwriting this update.

Example in

import { TableComposable } from '@patternfly/react-table';

<TableComposable />

Example out

import { Table /* data- Codemods */ } from '@patternfly/react-table';

<Table />

Table

React

Deprecated the Table components, which should be replaced with the composable implementation.

#8892

Yes

Codemods will update import and export paths to our deprecated directory, but we recommend replacing it with our composable implementation.

Example in

import { Table, TableBody, TableHeader, TableProps } from "@patternfly/react-table";

Example out

import {
 Table,
 TableBody,
 TableHeader,
 TableProps
} from '@patternfly/react-table/deprecated';

Table

React

Updated the ActionsColumn to use the new implementation of Dropdown. This applies to both the deprecated and composable implementations.

#8629

The following changes were also made:

The toggle passed to the ActionsColumn must be a MenuToggle component
Removed the dropdownPosition, dropdownDirection, and menuAppendTo properties, which should be replaced with the popperProps property

Table React Updated the type of the collapseAllAriaLabel property on ThExpandType to a string instead of an empty string ''. Workarounds casting this property to an empty string are no longer needed. #8634 No

Table

React

Removed the deprecated hasSelectableRowCaption property from our composable implementation.

#8352

Yes

Example in

<TableComposable hasSelectableRowCaption />

Example out

<TableComposable  />

Table

React

Renamed the disable property to isDisabled for the Td component.

#8861

Yes

This change affects the TdSelectType interface used within the select property, and the TdActionsType interface used within the actions property.

Example in

let myObj = { disable: true };
myObj["disable"] = false;
myObj.disable = true;
myObj = { disable: false };

<Td select={myObj} actions={{ disable: false }}></Td>;

const disable = true;
const obj = { disable };
<>
  <Td select={obj} actions={{ "disable": true }}></Td>
  <Td select={{disable}}></Td>
</>;

Example out

let myObj = { isDisabled: true };
myObj["isDisabled"] = false;
myObj.isDisabled = true;
myObj = { isDisabled: false };

<Td select={myObj} actions={{ isDisabled: false }}></Td>;

const isDisabled = true;
const obj = { isDisabled };
<>
  <Td select={obj} actions={{ "isDisabled": true }}></Td>
  <Td select={{isDisabled}}></Td>
</>;

Table

React

The tooltip property has been removed from ActionsColumn's item prop interface. Instead a content property should be passed into the tooltipProps property of the items interface.

#9382

Yes

Example in

<ActionsColumn items={[{tooltip: "test"}]} />
<ActionsColumn items={[{tooltip: "test", tooltipProps: {direction: "top"}}]} />

const actionItems = [{tooltip: "test"}];
<ActionsColumn items={actionItems} />

const actionItems = () => [{tooltip: "test"}];
<ActionsColumn items={actionItems} />

Example out

<ActionsColumn items={[{tooltipProps: { content: "test" }}]} />
<ActionsColumn items={[{ tooltipProps: {content: "test", direction: "top"}}]} />

const actionItems = [{tooltipProps: { content: "test" }}];
<ActionsColumn items={actionItems} />

const actionItems = () => [{tooltipProps: { content: "test" }}];
<ActionsColumn items={actionItems} />

Tabs HTML/CSS Updated secondary tabs to have a border by default. This is more consistent with the presentation of primary tabs. #5171 No

Tabs

React

Removed the removeFindDomNode property from the OverflowTab component as it is now the default behavior.

#8316

Yes

Example in

<OverflowTab removeFindDomNode />

Example out

<OverflowTab  />

Tabs

React

Updated the onToggle callback property so that the event parameter is the first parameter.

#9059

Yes

Example in

<Tabs onToggle={(id) => handler(id)} />
const handler1 = (id) => {};
<Tabs onToggle={handler1} />
function handler2(id) {};
<Tabs onToggle={handler2} />

Example out

<Tabs onToggle={(_event, id) => handler(id)} />
const handler1 = (_event, id) => {};
<Tabs onToggle={handler1} />
function handler2(_event, id) {};
<Tabs onToggle={handler2} />

Tabs

React

Renamed the hasBorderBottom property to hasNoBorderBottom.

#8517

Yes

Example in

<Tabs hasBorderBottom />
<Tabs hasBorderBottom={true} />
<Tabs hasBorderBottom={false} />
<Tabs hasBorderBottom={someVar} />

Example out

<Tabs  />
<Tabs  />
<Tabs hasNoBorderBottom />
<Tabs hasNoBorderBottom={!someVar} />

Tabs

React

Removed the hasSecondaryBorderBottom property.

#8517

Yes

Example in

<Tabs hasSecondaryBorderBottom />

Example out

<Tabs  />

Tabs React Updated the type of children that can be passed. Codemods will raise a warning when this component is imported, even if valid children are passed, but will not make any code changes. #8217 No

Text area

React

Updated the onChange callback property so that the event parameter is the first parameter.

#9061

Yes

Example in

<TextArea onChange={(id) => handler(id)} />
<TextArea onChange={(id, event) => handler(id, event)} />
const handler1 = (id, event) => {};
<TextArea onChange={handler1} />
function handler2(id, event) {};
<TextArea onChange={handler2} />

Example out

<TextArea onChange={(_event, id) => handler(id)} />
<TextArea onChange={(event, id) => handler(id, event)} />
const handler1 = (_event, id) => {};
<TextArea onChange={handler1} />
function handler2(_event, id) {};
<TextArea onChange={handler2} />

Text area React Changed divs in form control elements to spans. #9334 No

Text input

React

Updated the onChange callback property so that the event parameter is the first parameter.

#9061

Yes

Example in

<TextInput onChange={(id) => handler(id)} />
<TextInput onChange={(id, event) => handler(id, event)} />
const handler1 = (id, event) => {};
<TextInput onChange={handler1} />
function handler2(id, event) {};
<TextInput onChange={handler2} />

Example out

<TextInput onChange={(_event, id) => handler(id)} />
<TextInput onChange={(event, id) => handler(id, event)} />
const handler1 = (_event, id) => {};
<TextInput onChange={handler1} />
function handler2(_event, id) {};
<TextInput onChange={handler2} />

Text input React Changed divs in form control elements to spans. #9334 No

Text input group HTML/CSS Addressed the cause of the search input icon and placeholder text being the wrong color when in a masthead or dark block. #5666 No

Time picker

React

Removed the removeFindDomNode property as it is now the default behavior.

#8316

Yes

Example in

<Timepicker removeFindDomNode />

Example out

<Timepicker  />

Time picker React Updated the internal markup to render the invalidFormatErrorMessage and invalidMinMaxErrorMessage properties within HelperText components. #8833 No

Toggle group

React

Updated the onChange callback property on the ToggleGroupItem component so that the event parameter is the first parameter.

#9067

Yes

Example in

<ToggleGroupItem onChange={(id) => handler(id)} />
<ToggleGroupItem onChange={(id, event) => handler(id, event)} />
const handler1 = (id, event) => {};
<ToggleGroupItem onChange={handler1} />
function handler2(id, event) {};
<ToggleGroupItem onChange={handler2} />

Example out

<ToggleGroupItem onChange={(_event, id) => handler(id)} />
<ToggleGroupItem onChange={(event, id) => handler(id, event)} />
const handler1 = (_event, id) => {};
<ToggleGroupItem onChange={handler1} />
function handler2(_event, id) {};
<ToggleGroupItem onChange={handler2} />

Toolbar

HTML/CSS

Updated the default alignment of toolbar children to use baseline vertical alignment instead of center alignment, which improved the visual appearance of toolbar children of differing heights.

#5201

Added modifiers to toolbar children to use center and baseline alignment. This is a non-breaking change - it just allows going back to the old default alignment of center, and specifying baseline on specific children.

Toolbar

HTML/CSS

Updated the default alignment to use top alignment.

#5565

Added a modifier for children to use top alignment. This is a non-breaking change that just allows for the previously defined center and baseline alignments to be used, and for top alignment to be used on specific children.

Toolbar HTML/CSS Added a CSS row gap to wrapping toolbar items. Previously, items would wrap directly underneath items on the previous row, and this update added a visual spacer between wrapping rows. #5398 No

Toolbar HTML/CSS Improved the visual appearance of the expanded content element. This isn’t an enhancement, but was to fix a bug introduced in a previous pull request. This change makes breaking changes to CSS variables. #5611 No

Toolbar

React

Removed the deprecated visiblity property, which should be replaced with the correctly spelled visibility property.

#8212

Yes

This change affects the ToolbarContent, ToolbarGroup, ToolbarItem, and ToolbarToggleGroup components.

Example in

<ToolbarContent visiblity={{ default: "hidden" }} />

Example out

<ToolbarContent visibility={{ default: "hidden" }} />

Toolbar

React

Removed the alignment property from the ToolbarContent, ToolbarGroup, and ToolbarItem components.

#8563

Yes

Codemods will replace the property with align for the ToolbarItem and ToolbarGroup components.

Example in

<ToolbarContent alignment={{ default: 'alignLeft' }} />
<ToolbarGroup alignment={{ default: 'alignLeft' }} />
<ToolbarItem alignment={{ default: 'alignLeft' }} />

Example out

<ToolbarContent  />
<ToolbarGroup align={{ default: 'alignLeft' }} />
<ToolbarItem align={{ default: 'alignLeft' }} />

Toolbar React Updated alignItems and alignSelf on ToolbarContent, ToolbarGroup and ToolbarItem to have values start, center, and baseline. #9325 No

Tooltip

React

Removed the removeFindDomNode property as it is now the default behavior.

#8316

Yes

Example in

<Tooltip removeFindDomNode />

Example out

<Tooltip  />

Tooltip React Updated the internal markup so that a wrapping div is applied when the triggerRef property is not passed, which may cause issues and/or require snapshots to be updated. #8733 No

Tooltip

React

Removed the boundary, tippyProps, and isAppLauncher properties.

#8231

Yes

Example in

<Tooltip boundary={} tippyProps={} isAppLauncher />

Example out

<Tooltip     />

Tooltip

React

Renamed the reference property to triggerRef.

#8733

Yes

Example in

<Tooltip reference={componentRef} />

Example out

<Tooltip triggerRef={componentRef} />

Topology

react-topology

Made compatible with V5

Topology

react-topology

Set strictFunctionTypes

#53

Topology code and demo code now enforce strict typing to allow for use in projects that have this requirement. You may need to update your custom components (nodes, edges) to take the GraphElement rather than the specific Node or Edge types.

Topology react-topology Added lead icon to task nodes #67 No

Topology react-topology Fixed integralShapePath for almost parallel nodes #47 No

Topology

react-topology

Updated version of D3 to version 7

#59

This only requires a change on your part if your application uses D3 directly. If you have your own layout implementation that handles D3 events, you will need to update based on D3 updated API params.

Topology react-topology Upgraded to latest mobx #61 No

Topology react-topology Added WithContextMenu support for Promise #58 No

Tree view

React

Renamed the hasCheck property to hasCheckbox.

#8403

Yes

Example in

<TreeView hasCheck />

Example out

<TreeView hasCheckbox />

Truncate

React

Removed the removeFindDomNode property as it is now the default behavior.

#8371

Yes

Example in

<Truncate removeFindDomNode />

Example out

<Truncate  />

User feedback react-console Made compatible with V5 #60 No

User feedback react-user-feedback Added support for promises #51 No

Various React Removed the KEY_CODES constant. #8174 No

Various

React

Updated the onToggle function to include the event as its first parameter for the following components: ApplicationLauncher, BadgeToggle, DropdownToggle, KebabToggle, Toggle, Select, and SelectToggle. Handlers for these components may require an update.

#8667

Yes

Example in

<Toggle onToggle={(isOpen) => onToggle(isOpen)} />

const toggleBadge = (isOpen) => {};
<BadgeToggle onToggle={toggleBadge}>

function toggleDropdown(isOpen) {};
<DropdownToggle onToggle={toggleDropdown}>

Example out

<Toggle onToggle={(_event, isOpen) => onToggle(isOpen)} />

const toggleBadge = (_event, isOpen) => {};
<BadgeToggle onToggle={toggleBadge}>

function toggleDropdown(_event, isOpen) {};
<DropdownToggle onToggle={toggleDropdown}>>

Wizard HTML/CSS Updated the stacking context of structural elements within the wizard component so that elements from the wizard main content area are able to overflow and display on top of the wizard footer. #5533 No

Wizard

HTML/CSS

Refactored the popover component HTML to be more flexible and consistent with similarly structured components.

#5389

Added a structural HTML element to the that is used to wrap the close button. Updated the wizard title to be more flexible.

Wizard React Updated the mainAriaLabel and mainAriaLabelledBy properties for the deprecated implementation, and aria-label and aria-labelledby properties for the new implementation, to conditionally apply only when the Wizard's body content overflows and causes a scrollbar. A tabindex="0" will also be applied. #8649 No

Wizard

React

Promoted the new implementation of wizard, which is now default implementation.

#8821

Yes

This rule will update import and/or export paths.

Example in

import { Wizard } from '@patternfly/react-core/next';

Example out

import { Wizard /* data- Codemods */ } from '@patternfly/react-core';

Wizard

React

Deprecated the Wizard components and replaced them with a newer implementation.

#8821

Yes

Codemods will update import and export paths to our deprecated directory, but we recommend replacing it with our new Wizard implementation.

Example in

import { Wizard, Button } from '@patternfly/react-core';

Example out

import { Button } from '@patternfly/react-core';
import { Wizard } from '@patternfly/react-core/deprecated';

Wizard React Updated the order of the "next" and "back" buttons so that the "next" button is rendered after the "back" button. This change affects the deprecated implementation and the WizardFooter component in the new implementation. #8409 No

View source on GitHub