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.
Requires Node.js >= 10.
npx @patternfly/pf-codemods ./path-to-src
Giving node more RAM can help for large codebases.
NODE_OPTIONS=--max-old-space-size=4096 npx @patternfly/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.
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
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
.
In:
<AccordionExpandedContentBody>Body</AccordionExpandedContentBody>
Out:
<AccordionExpandableContentBody>Body</AccordionExpandableContentBody>
accordion-rename-displaySize-large (#8212)
We've renamed the large
prop value of displaySize
to lg
.
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.
In:
<Alert aria-label="Error alert" />
Out:
<Alert />
alert-replace-titleHeadingLevel (#8518)
We've removed the titleHeadlingLevel
prop and replaced it with the component
prop.
In:
<Alert titleHeadingLevel="h4" />
Out:
<Alert component="h4" />
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.
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.
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.
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.
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.
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.
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.
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.
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.
In:
<ClipboardCopy switchDelay="500" />
Out:
<ClipboardCopy />
datalist-remove-props (#8388)
We've removed the deprecated onDragFinish
, onDragStart
, onDragMove
, onDragCancel
, and itemOrder
props from DataList.
In addition to removing these props, this rule will suggest using the DragDrop component instead of the onDrag...
props.
In:
<DataList onDragFinish onDragStart onDragMove onDragCancel itemOrder />
Out:
<DataList />
dataList-updated-callback (#8723)
We've updated the onSelectDataListItem
prop for DataList to include the event
as its first parameter. Handlers may require an update.
In:
<DataList onSelectDataListItem={(id) => onSelect(id)} />
const toggle1 = (id) => {};
<DataList onSelectDataListItem={toggle1}>
function toggle2(id) {};
<DataList onSelectDataListItem={toggle2}>
Out:
<DataList onSelectDataListItem={(_event, id) => onSelect(id)} />
const toggle1 = (_event, id) => {};
<DataList onSelectDataListItem={toggle1}>
function toggle2(_event, id) {};
<DataList onSelectDataListItem={toggle2}>
dataListCheck-warn-updated-callback (#8735)
We've updated the onChange
prop for DataListCheck so that the event
parameter is the first parameter. Handlers may require an update.
In:
<DataListCheck onChange={(checked) => onChange(checked)} />
const onChange1 = (checked) => {};
<DataListCheck onChange={onChange1}>
function onChange2(checked) {};
<DataListCheck onChange={onChange2}>
Out:
<DataListCheck onChange={(_event, checked) => onChange(checked)} />
const onChange1 = (_event, checked) => {};
<DataListCheck onChange={onChange1}>
function onChange2(_event, checked) {};
<DataListCheck onChange={onChange2}>
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.
<Divider isVertical />
Out:
<Divider orientation={{ default: "vertical" }} />
dropdownItem-remove-isHovered (#8179)
We've removed the isHovered
prop for the DropdownItem
.
In:
<DropdownItem isHovered={isHovered} />
Out:
<DropdownItem />
dropdownMenu-remove-openedOnEnter (#8179)
We've removed the openedOnEnter
prop for the DropdownMenu
.
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.
In:
<DropdownToggle isPrimary />
Out:
<DropdownToggle toggleVariant="primary" />
expandable-section-rename-displaySize-large (#8212)
We've renamed the large
prop value of displaySize
to lg
.
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.
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
.
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.
label-remove-isTruncated (#8771)
We've 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.
In:
<Label isTruncated />
Out:
<Label />
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.
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.
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"} />
numberInput-remove-allowEmptyInput (#8715)
We've removed the allowEmptyInput
prop from NumberInput.
In:
<NumberInput allowEmptyInput />
Out:
<NumberInput />
onToggle-updated-parameters (#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.
In:
<Toggle onToggle={(isOpen) => onToggle(isOpen)} />
const toggleBadge = (isOpen) => {};
<BadgeToggle onToggle={toggleBadge}>
function toggleDropdown(isOpen) {};
<DropdownToggle onToggle={toggleDropdown}>
Out:
<Toggle onToggle={(_event, isOpen) => onToggle(isOpen)} />
const toggleBadge = (_event, isOpen) => {};
<BadgeToggle onToggle={toggleBadge}>
function toggleDropdown(_event, isOpen) {};
<DropdownToggle onToggle={toggleDropdown}>
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.
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
.
In:
<Pagination ToggleTemplateProps />
Out:
<Pagination PaginationToggleTemplateProps />
pagination-rename-props (#8319)
We've renamed and/or removed several props for Pagination:
defaultToFullPage
:isLastFullPageShown
,perPageComponenet
: removed
We've also renamed several sub-props of Pagination's "title" prop:
currPage
:currPageAriaLabel
,paginationTitle
:paginationAriaLabel
,toFirstPage
:toFirstPageAriaLabel
,toLastPage
:toLastPageAriaLabel
,toNextPage
:toNextPageAriaLabel
,toPreviousPage
:toPreviousPageAriaLabel
,optionsToggle
:optionsToggleAriaLabel
,
In:
<Pagination
perPageComponenet="div"
defaultToFullPage
titles={{
currPage: "text"
paginationTitle: "text"
toFirstPage: "text"
toLastPage: "text"
toNextPage: "text"
toPreviousPage: "text"
optionsToggle: "text"
}}
/>
Out:
<Pagination
isLastFullPageShown
titles={{
currPageAriaLabel: "text"
paginationAriaLabel: "text"
toFirstPageAriaLabel: "text"
toLastPageAriaLabel: "text"
toNextPageAriaLabel: "text"
toPreviousPageAriaLabel: "text"
optionsToggleAriaLabel: "text"
}}
/>
popper-remove-popperMatchesTriggerWidth (#8724)
We've removed the popperMatchesTriggerWidth
prop from Popper. minWidth
, maxWidth
, and width
props can instead be used to modify the Popper width.
In:
<Popper popperMatchesTriggerWidth />
Out:
<Popper />
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
.
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.
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.
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
.
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.
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.
In:
<TableComposable hasSelectableRowCaption />
Out:
<TableComposable />
tabs-rename-hasBorderBottom (#8517)
We've renamed the hasBorderBottom
prop to hasNoBorderBottom
.
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.
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.
In:
<Toggle isPrimary />
Out:
<Toggle toggleVariant="primary" />
toolbarVarious-remove-alignment (#8563)
We've removed the alignment
prop from ToolbarContent
, ToolbarGroup
, and ToolbarItem
. For ToolbarGroup
and ToolbarItem
it has been replaced with align
.
In:
<ToolbarContent alignment={{ default: 'alignLeft' }} />
<ToolbarGroup alignment={{ default: 'alignLeft' }} />
<ToolbarItem alignment={{ default: 'alignLeft' }} />
Out:
<ToolbarContent />
<ToolbarGroup align={{ default: 'alignLeft' }} />
<ToolbarItem align={{ default: 'alignLeft' }} />
toolbar-remove-visiblity (#8212)
We've removed the deprecated visiblity
prop. This rule will replace it with the correctly spelled visibility
prop.
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.
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.