pf-codemods

Hey PatternFly-React devs! pf-codemods is an eslint wrapper to update @patternfly/react-core@4.x.x code to 5.x.x.

We hope these rules and their autofixers will help you more quickly adopt our breaking changes. These rules are not designed to fix all build errors, but they can help to fix easy ones as well as point out the more complicated ones and offer suggestions on how you might go about fixing them.

Usage

Simple case

Requires Node.js >= 10.

npx pf-codemods ./src

Giving node more RAM can help for large codebases.

NODE_OPTIONS=--max-old-space-size=4096 npx pf-codemods ./path-to-src

These commands will show you places in your code that may have issues with our breaking changes similar to linting. Add the --fix flag to allow us to autofix issues where possible.

Options

Usage: pf-codemods [options] <path> [otherPaths...]

Run codemods on path using eslint.

Options:
  -V, --version      output the version number
  --only <rules>     Comma-seperated list of rules to run
  --exclude <rules>  Run recommended rules EXCLUDING this comma-seperated list
  --fix              Whether to run fixer
  --format <format>  What eslint report format to use (default: "stylish")
  -h, --help         display help for command

Rules

These rules are based off the breaking change notes for React. Each rule links the breaking change patternfly-react PR in case you want to better understand the change. Also, each rule makes sure you're using a PatternFly component before running.

accordion-rename-AccordionExpandedContentBody(#8525)

We've renamed the AccordionExpandedContentBody component to AccordionExpandableContentBody.

Examples

In:

<AccordionExpandedContentBody>Body</AccordionExpandedContentBody>

Out:

<AccordionExpandableContentBody>Body</AccordionExpandableContentBody>

accordion-rename-displaySize-large (#8212)

We've renamed the large prop value of displaySize to lg.

Examples

In:

<Accordion displaySize="large" />

Out:

<Accordion displaySize="lg" />

alert-remove-ariaLabel (#8649)

We've removed the aria-label prop from Alert. This prop should not be used on an Alert as it is not well supported by assistive technologies on <div> elements.

Examples

In:

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

Out:

<Alert  />

applicationLauncher-warn-input (#8293)

We've updated the internal input in ApplicationLauncher to the PatternFly SearchInput. Any relative selectors, such as in unit tests, may need to be updated.

button-remove-isSmallisLarge (#8144)

We've removed the isSmall and isLarge props for Button and replaced them with the size prop using the values "sm" and "lg", respectively.

Examples

In:

<Button isSmall />
<Button isLarge />

Out:

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

card-warn-component (#8601)

We've updated the internal default value of the component prop within Card; it has been changed from 'article' to 'div'. Any related references, such as in unit tests, may need to be updated.

card-remove-isHoverable (#8196)

We've removed the deprecated isHoverable prop from Card.

Examples

In:

<Card isHoverable />

Out:

<Card  />

chart-getResizeObserver (#8533)

We've removed the getResizeObserver function from react-charts in favor of react-core's getResizeObserver. This helper function now has a third parameter, useRequestAnimationFrame, and allows a single function to be maintained going forward.

Examples

In:

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

Out:

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

charts-lightThemeObjects (#8590)

We've renamed all light theme objects to remove Light from their name. Additionally, these theme objects have been marked @private and should not be used directly. Instead you should use the getTheme function from react-charts.

This rule will throw an error, but will not make any changes.

charts-remove-darkThemeObjects (#8590)

We've removed all dark theme objects from react-charts.

Examples

In:

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

Out:

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

charts-remove-ChartThemeVariant (#8590)

We've removed ChartThemeVariant from react-charts.

Examples

In:

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

Out:

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

charts-remove-themeVariant (#8590)

We've removed the deprecated themeVariant properties from all react-charts components and the react-charts getCustomTheme function. This functionality was previously a noop and replaced by PatternFly core's dark theme support.

Examples

In:

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

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

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

Out:

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

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

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

charts-tooltip-warning (#8592)

When using the react-core Tooltip component inside of a react-charts component, the Tooltip should be wrapped inside a foreignObject. The Tooltip may not render properly otherwise due to it outputting a <div> element inside an <svg> element.

This rule will raise a warning when Tooltip is imported from @patternfly/react-core and at least one other import is from @patternfly/react-charts, but will not update any code.

clipboardCopy-remove-popoverPosition (#8226)

We've removed the PopoverPosition type for the position prop on both ClipboardCopy and ClipboardCopyButton.

Examples

In:

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

Out:

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

codeeditor-remove-deprecated-props (#8624)

We've removed the deprecated entryDelay, exitDelay, maxWidth, position, and toolTipText props. This rule will remove them from your code and suggest that you use the tooltipProps prop instead.

Examples

In:

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

Out:

<CodeEditor      />

clipboardCopy-remove-switchDelay (#8619)

We've removed the switchDelay prop from the ClipBoardCopy component.

Examples

In:

<ClipboardCopy switchDelay="500" />

Out:

<ClipboardCopy  />

datalist-remove-ondrags (#8388)

We've removed the deprecated onDragFinish, onDragStart, onDragMove, and onDragCancel props. This rule will remove them and suggest the user use the DragDrop component.

Examples

In:

<DataList onDragStart />

Out:

<DataList  />

datePicker-warn-appendTo-default-value-changed (#8636)

The default value of the appendTo prop on DatePicker has been updated, which may cause markup changes that require updating selectors in tests. This rule will raise a warning, but will not make any changes.

divider-remove-isVertical (#8199)

We've replaced the isVertical flag with the orientation property that can define verticality on different breakpoints.

Examples

<Divider isVertical />

Out:

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

dropdownItem-remove-isHovered (#8179)

We've removed the isHovered prop for the DropdownItem.

Examples

In:

<DropdownItem isHovered={isHovered} />

Out:

<DropdownItem  />

dropdownMenu-remove-openedOnEnter (#8179)

We've removed the openedOnEnter prop for the DropdownMenu.

Examples

In:

<DropdownMenu openedOnEnter={false} />

Out:

<DropdownMenu  />

dropdownToggle-remove-isprimary (#8179)

We've removed the deprecated isPrimary prop. This rule wil replace it with the "primary" value on the toggleVariant prop.

Examples

In:

<DropdownToggle isPrimary />

Out:

<DropdownToggle toggleVariant="primary" />

expandable-section-rename-displaySize-large (#8212)

We've renamed the large prop value of displaySize to lg.

Examples

In:

<ExpandableSection displaySize="large" />

Out:

<ExpandableSection displaySize="lg" />

fileUpload-remove-onChange (#8155)

We've removed the deprecated onChange prop. This rule will remove the prop from the FileUpload component and suggest replacing it with the onFileInputChange, onTextChange, onDataChange, and onClearClick props as needed.

Examples

In:

<FileUpload onChange={onChange} />

Out:

<FileUpload  />

hasCheck-prop-rename (#8403)

We've renamed the hasCheck prop for TreeView, MenuItem, and the Next implementation of SelectOption to hasCheckbox.

Examples

In:

<SelectOption hasCheck />
<TreeView hasCheck />
<MenuItem hasCheck />

Out:

<SelectOption hasCheckbox />
<TreeView hasCheckbox />
<MenuItem hasCheckbox />

horizontalSubnav-ariaLabel (#8213)

We've updated the default value of the aria-label attribute for Nav with a horizontal-subnav variant to "local" (previously the default value was "Global").

key-codes-removed (#8174)

We've removed the KEY_CODES constant from our constants file. If your code relies on it we suggest that you refactor to use KeyTypes as KeyboardEvent.keyCode is deprecated.

This rule will raise an error when KEY_CODES is imported in a file, but it will not make any code changes.

masthead-update-component (#8655)

We've updated MastheadBrand to only be an anchor if an href is specified, otherwise it will be a span. Explicitly declared component properties will remain unchanged, but if it is not specified a default will be added.

Examples

In:

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

Out:

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

menuItemAction-ariaLabel-required (#8617)

We've update the aria-label prop on MenuItemAction, making it required instead of optional.

nav-warn-flyouts-now-inline (#8628)

The placement Nav flyouts in the DOM has been changed, if you have Nav elements with flyouts you may need to update some selectors or snapshots in your test suites. This rule will raise a warning, but will not make any changes.

notificationBadge-remove-isRead (#8626)

We've removed the isRead prop from NotificationBadge, use "read" or "unread" on the variant prop instead.

Examples

In:

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

Out:

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

onToggle-warn-event (#8667)

We've 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.

pageheader-update-logoComponent (#8655)

We've updated PageHeader's logo to only be an anchor if an href is specified, otherwise it will be a span. Explicitly declared logoComponent properties will remain unchanged, but if it is not specified a default will be added.

Examples

In:

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

Out:

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

pagination-optionsToggle (#8319)

We've removed the OptionsToggle used by Pagination and replaced it with Menu and MenuToggle.

pagination-remove-ToggleTemplateProps (#8134)

We've removed the deprecated ToggleTemplateProps prop and replaced it with PaginationToggleTemplateProps.

Examples

In:

<Pagination ToggleTemplateProps />

Out:

<Pagination PaginationToggleTemplateProps />

pagination-rename-props (#8319)

We've renamed and/or removed several props for Pagination:

• currPage: currPageAriaLabel,
• paginationTitle: paginationAriaLabel,
• toFirstPage: toFirstPageAriaLabel,
• toLastPage: toLastPageAriaLabel,
• toNextPage: toNextPageAriaLabel,
• toPreviousPage: toPreviousPageAriaLabel,
• optionsToggle: optionsToggleAriaLabel,
• defaultToFullPage: isLastFullPageShown,
• perPageComponenet: removed

Examples

In:

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

Out:

<Pagination
  currPageAriaLabel="text"
  paginationAriaLabel="text"
  toFirstPageAriaLabel="text"
  toLastPageAriaLabel="text"
  toNextPageAriaLabel="text"
  toPreviousPageAriaLabel="text"
  optionsToggleAriaLabel="text"
  isLastFullPageShown
/>

popover-appendTo-default (#8621)

The default value of the appendTo prop on Popover has been updated, which may cause markup changes that require updating selectors in tests. This rule will raise a warning, but will not make any changes.

popover-remove-props (#8201)

We've removed the boundary and tippyProps from Popover, as well as removed the first parameter of shouldClose and all parameters of onHidden, onHide, onMount, onShow, and onShown.

Examples

In:

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

Out:

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

react-dropzone-warn-upgrade [(#7926)](// patternfly/patternfly-react#7926)

The react-dropzone dependency used with FileUpload, MultipleFileUpload, and CodeEditor has been updated from version 9 to version 14. As part of this upgrade, FileUpload has had type changes to its onFileInputChange and dropzoneProps props, and MultipleFileUpload has had a type change to its dropzoneProps prop.

This rule will raise a warning when any of these three components are imported, but will not make any code changes.

remove-removeFindDomNode (#8371) (#8316)

We've removed the removeFindDomNode property as it is now the default behavior. The affected components are as follows: ApplicationLauncher, ClipboardCopy, ContextSelector, Dropdown, NavItem, OptionsMenu, Popover, SearchInput, Select, OverflowTab, Timepicker, Tooltip, Truncate.

Examples

In:

<ApplicationLauncher removeFindDomNode />
<ClipboardCopy removeFindDomNode />
<ContextSelector removeFindDomNode />
<Dropdown removeFindDomNode />
<NavItem removeFindDomNode />
<OptionsMenu removeFindDomNode />
<Popover removeFindDomNode />
<SearchInput removeFindDomNode />
<Select removeFindDomNode />
<OverflowTab removeFindDomNode />
<Timepicker removeFindDomNode />
<Tooltip removeFindDomNode />
<Truncate removeFindDomNode />

Out:

<ApplicationLauncher  />
<ClipboardCopy  />
<ContextSelector  />
<Dropdown  />
<NavItem  />
<OptionsMenu  />
<Popover  />
<SearchInput  />
<Select  />
<OverflowTab  />
<Timepicker  />
<Tooltip  />
<Truncate  />

remove-sticky-props (#8220)

We've removed the deprecated sticky prop from PageSection, PageGroup, PageNavigation, and PageBreadcrumb.

In:

<PageSection sticky="top" />
<PageGroup sticky="top" />
<PageNavigation sticky="top" />
<PageBreadcrumb sticky="top" />

Out:

<PageSection  />
<PageGroup  />
<PageNavigation  />
<PageBreadcrumb  />

remove-toggleMenuBaseProps (#8235)

We've removed the deprecated ToggleMenuBaseProps interface.

resizeObserver-function-param (#8324)

We've updated the default value of the getResizeObserver helper function's third parameter, useRequestAnimationFrame. This rule will only provide two suggestions detailing when to pass which boolean into this parameter.

simpleList-remove-isCurrent (#8132)

We've removed the deprecated the isCurrent prop. This rule wil replace it with isActive.

Examples

In:

<SimpleList isCurrent />

Out:

<SimpleList isActive />

spinner-remove-isSvg (#8616)

We've updated the Spinner to exclusively use an SVG, and have removed the isSVG prop.

Examples

In:

<Spinner isSVG />

Out:

<Spinner  />

table-warn-actionsColumn (#8629)

Table and TableComposable's ActionsColumn has been updated to use the newer 'next' version of Dropdown. The toggle passed to the actions column should now be a MenuToggle instead of a DropdownToggle. The dropdownPosition, dropdownDirection and menuAppendTo properties are removed and Popper properties can be passed in using popperProps instead (via direction, position, appendTo, etc.).

table-warn-thExpandType (#8634)

collapseAllAriaLabel on ThExpandType has been updated to a string from ''. Workarounds casting this property to an empty string are no longer required.

tableComposable-remove-hasSelectableRowCaption (#8352)

We've removed the deprecated hasSelectableRowCaption prop.

Examples

In:

<TableComposable hasSelectableRowCaption />

Out:

<TableComposable  />

tabs-rename-hasBorderBottom (#8517)

We've renamed the hasBorderBottom prop to hasNoBorderBottom.

Examples

In:

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

Out:

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

tabs-rename-hasSecondaryBorderBottom (#8517)

We've removed the deprecated hasSecondaryBorderBottom prop.

Examples

In:

<Tabs hasSecondaryBorderBottom />

Out:

<Tabs  />

tabs-warn-children-type-changed (#8217)

We've restricted the type of elements that can be passed to the Tabs component.

This rule will raise a warning when Tabs is imported in a file, even if the children passed to it are already of the appropriate type. It will not make any code changes.

toggle-remove-isprimary (#8179)

We've removed the deprecated isPrimary prop. This rule wil replace it with the "primary" value on the toggleVariant prop.

Examples

In:

<Toggle isPrimary />

Out:

<Toggle toggleVariant="primary" />

toolbar-remove-visiblity (#8212)

We've removed the deprecated visiblity prop. This rule will replace it with the correctly spelled visibility prop.

Examples

In:

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

Out:

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

tooltip-remove-props (#8231)

We've removed the boundary, tippyProps, and isAppLauncher properties from Tooltip.

Examples

In:

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

Out:

<Tooltip     />

wizard-warn-button-order (#8409)

The order of the "next" and "back" buttons in the Wizard has been updated, with the "next" button now coming after the "back" button. This update has also been made in the Next implementation of the WizardFooter. We recommend updating any tests that may rely on relative selectors and updating any composable implementations to match this new button order.

This rule will raise a warning when Wizard is imported from @patternfly/react-core or WizardFooter is imported from @patternfly/react-core/next, but it will not make any code changes.