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.

I 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.

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

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" />

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.

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";

chart-themeVariant (#8590)

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

Examples

In:

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

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

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

Out:

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

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

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

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" />

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  />

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" }} />

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  />

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").

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-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={() => {
    /* ... */
  }}
/>

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.

tableComposable-remove-hasSelectableRowCaption (#8352)

We've removed the deprecated hasSelectableRowCaption prop.

Examples

In:

<TableComposable hasSelectableRowCaption />

Out:

<TableComposable  />

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-svg-default (#8183)

We've updated the Spinner to default to an svg, so the isSVG property is no longer required.

Examples

In:

<Spinner isSVG />

Out:

<Spinner  />

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     />

warn-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 a warning when KEY_CODES is imported in a file, but it will not make any code changes.

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.