diff --git a/packages/pf-codemods/README.md b/packages/pf-codemods/README.md index f1c52fb1..ff3b08ed 100644 --- a/packages/pf-codemods/README.md +++ b/packages/pf-codemods/README.md @@ -56,6 +56,7 @@ These rules are based off the breaking change notes for React. Each rule links t Some rules will add either a comment (`/* data-codemods */`) or data attribute (`data-codemods="true"`) in order to prevent certain other rules from applying an unnecessary fix. These `data-codemods` attributes and comments can be removed by our `data-codemods-cleanup` rule. You should run this rule only once, after you finish running the general codemods, by adding the `--only data-codemods-cleanup` option. + ### accordionContent-remove-isHidden-prop [(#9876)](https://github.com/patternfly/patternfly-react/pull/9876) The `isHidden` prop has been removed from AccordionContent, as its visibility will now be set automatically based on the `isExpanded` prop on AccordionItem. @@ -188,22 +189,44 @@ Icons must now be passed to the `icon` prop of Button instead of as children. Th In: ```jsx -import { Button } from "@patternfly/react-core"; +import { Button, Icon } from "@patternfly/react-core"; +import { SomeIcon } from "@patternfly/react-icons"; export const ButtonMoveIconsIconPropInput = () => ( - + <> + + + + ); ``` Out: ```jsx -import { Button } from "@patternfly/react-core"; +import { Button, Icon } from "@patternfly/react-core"; +import { SomeIcon } from "@patternfly/react-icons"; export const ButtonMoveIconsIconPropInput = () => ( - + <> + + + + ); ``` @@ -276,6 +299,75 @@ export const CardRemoveVariousPropsInput = () => ( ``` +### card-updated-clickable-markup [(#10859)](https://github.com/patternfly/patternfly-react/pull/10859) + +The markup for clickable-only cards has been updated. Additionally, the `selectableActions.selectableActionId` and `selectableActions.name` props are no longer necessary to pass to CardHeader for clickable-only cards. Passing them in will not cause any errors, but running the fix for this rule will remove them. + +#### Examples + +In: + +```jsx +import { Card, CardHeader } from "@patternfly/react-core"; + +export const CardUpdatedClickableMarkupInput = () => { + const selectableActionsObj = { name: "Test2", selectableActionId: "Id2" }; + const selectableActionsObjMany = { + to: "#", + name: "Test2", + selectableActionProps: {}, + selectableActionId: "Id2", + }; + + return ( + <> + + {}, + }} + /> + + + + + + + + + ); +}; +``` + +Out: + +```jsx +import { Card, CardHeader } from "@patternfly/react-core"; + +export const CardUpdatedClickableMarkupInput = () => { + const selectableActionsObj = {}; + const selectableActionsObjMany = {to: "#", selectableActionProps: {}}; + + return ( + <> + + + + + + + + + + + ); +}; +``` + ### checkbox-radio-replace-isLabelBeforeButton [(#10016)](https://github.com/patternfly/patternfly-react/pull/10016) The `isLabelBeforeButton` prop in Checkbox and Radio has been replaced with `labelPosition="start"` @@ -394,6 +486,275 @@ export const ColorPropsReplacedColorsInput = () => ( ); ``` +### componentGroups-logSnippet-rename-leftBorderVariant [(react-component-groups/#145)](https://github.com/patternfly/react-component-groups/pull/145) + +In react-component-groups, we've renamed LogSnippet's prop leftBorderVariant to variant and replaced LogSnippetBorderVariant enum with PatternFly's AlertVariant enum. + +#### Examples + +In: + +```jsx +import { + LogSnippet, + LogSnippetBorderVariant, +} from "@patternfly/react-component-groups"; + +export const LogSnippetRenameLeftBorderVariantInput = () => ( + +); +``` + +Out: + +```jsx +import { LogSnippet } from "@patternfly/react-component-groups"; + +export const LogSnippetRenameLeftBorderVariantInput = () => ( + +); +``` + + +### componentGroups-errorState-rename-props [(react-component-groups/#145)](https://github.com/patternfly/react-component-groups/pull/145) + +In react-component-groups, we've renamed some ErrorState props to comply with its base component - EmptyState. + +#### Examples + +In: + +```jsx +import { ErrorState } from "@patternfly/react-component-groups"; + +export const ComponentGroupsErrorStateRenamePropsInput = () => ( + +); +``` + +Out: + +```jsx +import { ErrorState } from "@patternfly/react-component-groups"; + +export const ComponentGroupsErrorStateRenamePropsInput = () => ( + +); +``` + + +### component-groups-invalidObject-rename-props [(react-component-groups/#145)](https://github.com/patternfly/react-component-groups/pull/145) + +In react-component-groups, we've renamed InvalidObject's props `invalidObjectTitleText` to `titleText` and `invalidObjectBodyText` to `bodyText`. + +#### Examples + +In: + +```jsx +import { InvalidObject } from "@patternfly/react-component-groups"; + +export const ComponentGroupsInvalidObjectRenamePropsInput = () => ( + +); +``` + +Out: + +```jsx +import { InvalidObject } from "@patternfly/react-component-groups"; + +export const ComponentGroupsInvalidObjectRenamePropsInput = () => ( + +); +``` + + +### component-groups-multi-content-card-remove-props [(react-component-groups/#145)](https://github.com/patternfly/react-component-groups/pull/145) + +The `leftBorderVariant` and `withHeaderBorder` props have been removed from MultiContentCard. + +#### Examples + +In: + +```jsx +import { MultiContentCard } from "@patternfly/react-component-groups"; + +export const ComponentGroupsMultiContentCardRemovePropsInput = () => +``` + +Out: + +```jsx +import { MultiContentCard } from "@patternfly/react-component-groups"; + +export const ComponentGroupsMultiContentCardRemovePropsInput = () => +``` + + +### component-groups-notAuthorized-rename-props [(react-component-groups/#145)](https://github.com/patternfly/react-component-groups/pull/145) + +In react-component-groups, we've renamed NotAuthorized's props `description` to `bodyText` and `title` to `titleText`. + +#### Examples + +In: + +```jsx +import { NotAuthorized } from "@patternfly/react-component-groups"; + +export const ComponentGroupsNotAuthorizedRenamePropsInput = () => ( + +); +``` + +Out: + +```jsx +import { NotAuthorized } from "@patternfly/react-component-groups"; + +export const ComponentGroupsNotAuthorizedRenamePropsInput = () => ( + +); +``` + +### component-groups-unavailableContent-bodyText-props-update [(react-component-groups/#244)](https://github.com/patternfly/react-component-groups/pull/244) + +In react-component-groups, we have replaced UnavailableContent's props `unavailableBodyPreStatusLinkText` and `unavailableBodyPostStatusLinkText` with one `bodyText` prop. +Also status page link button has changed to a primary button. Consider capitalizing the `statusPageLinkText` prop. + +#### Examples + +In: + +```jsx +import { UnavailableContent } from "@patternfly/react-component-groups"; + +export const ComponentGroupsUnavailableContentBodyTextPropsUpdateInput = () => ( + <> + + + + +); +``` + +Out: + +```jsx +import { UnavailableContent } from "@patternfly/react-component-groups"; + +export const ComponentGroupsUnavailableContentBodyTextPropsUpdateInput = () => ( + <> + + + + +); +``` + + +### component-groups-unavailable-content-rename-props [(react-component-groups/#145)](https://github.com/patternfly/react-component-groups/pull/145) + +The UnavailableContent component of React Component Groups has had the `unavailableTitleText` prop renamed to `titleText`. + +#### Examples + +In: + +```jsx +import { UnavailableContent } from "@patternfly/react-component-groups"; + +export const ComponentGroupsUnavailableContentRenamePropsInput = () => ( + +); +``` + +Out: + +```jsx +import { UnavailableContent } from "@patternfly/react-component-groups"; + +export const ComponentGroupsUnavailableContentRenamePropsInput = () => ( + +); +``` + +### data-codemods-cleanup + +This rule will remove `data-codemods` attributes and comments, which were introduced by our codemods in order to work correctly. +You should run this rule only once, after you finish running the codemods. + +This rule can only run using the `--only data-codemods-cleanup` option. + +#### Examples + +In: + +```jsx +import { + DualListSelector /* data-codemods */, + LoginMainFooterLinksItem, + MastheadLogo, +} from "@patternfly/react-core"; + +export const DataCodemodsCleanupInput = () => ( + <> + + + + +); +``` + +Out: + +```jsx +import { + DualListSelector , + LoginMainFooterLinksItem, + MastheadLogo, +} from "@patternfly/react-core"; + +export const DataCodemodsCleanupInput = () => ( + <> + + + + +); +``` + ### dragDrop-deprecated [(#10181)](https://github.com/patternfly/patternfly-react/pull/10181) DragDrop has been deprecated. Running the fix flag will update your imports to our deprecated package, but we suggest using our new drag and drop implementation (DragDropSort component), that lives in '@patternfly/react-drag-drop' package. @@ -877,10 +1238,39 @@ export const LoginMainFooterLinksItemStructureUpdatedInput = () => ( ); ``` +### loginMainHeader-warn-updated-markup [(#10880)](https://github.com/patternfly/patternfly-react/pull/10880) + +The markup for LoginMainHeader - which is used internally within LoginPage - has been updated, now using a `div` wrapper instead of a `header` element wrapper. + ### logViewer-moved-styles [(#70)](https://github.com/patternfly/react-log-viewer/pull/70) The stylesheet for LogViewer has been moved out of the PatternFly package and into LogViewer itself. You may need to update stylesheet imports or import the stylesheet manually. +### masthead-name-changes [(#10809)](https://github.com/patternfly/patternfly-react/pull/10809) + +Our old implementation of `MastheadBrand` has been renamed to `MastheadLogo`, which must be wrapped by our new implementation of `MastheadBrand`." + +This rule will handle the renaming, required restructuring will be handled under a separate rule. + +#### Examples + +In: + +```jsx +import { MastheadBrand } from "@patternfly/react-core"; + +export const MastheadNameChanges = () => Logo; +``` + +Out: + +```jsx +import { MastheadLogo } from "@patternfly/react-core"; + +export const MastheadNameChanges = () => Logo; +``` + + ### masthead-remove-background-color [(#9774)](https://github.com/patternfly/patternfly-react/pull/9774) We've removed the `backgroundColor` prop from Masthead as theming is no longer handled React-side. @@ -904,6 +1294,77 @@ export const MastheadRemoveBackgroundColorInput = () => ``` +### masthead-structure-changes [(#10809)](https://github.com/patternfly/patternfly-react/pull/10809) + +The structure of Masthead has been updated, MastheadToggle and MastheadBrand should now be wrapped in MastheadMain. + +#### Examples + +In: + +```jsx +import { + Masthead, + MastheadBrand, + MastheadMain, + MastheadToggle, + MastheadLogo +} from "@patternfly/react-core"; + +export const MastheadStructureChangesInputPreNameChange = () => ( + + Foo + + Bar + + +); + +export const MastheadStructureChangesInputPostNameChange = () => ( + + Foo + + Bar + + +); +``` + +Out: + +```jsx +import { + Masthead, + MastheadBrand, + MastheadMain, + MastheadToggle, + MastheadLogo, +} from "@patternfly/react-core"; + +export const MastheadStructureChangesInputPreNameChange = () => ( + + + Foo + + Bar + + + +); + +export const MastheadStructureChangesInputPostNameChange = () => ( + + + Foo + + Bar + + + +); +``` + + ### menuItemAction-warn-update-markup [(#10089)](https://github.com/patternfly/patternfly-react/pull/10089) The markup for MenuItemAction has been updated. It now uses our Button component internally, has a wrapper around the action button, and no longer renders an icon wrapper inside the action button. @@ -1061,6 +1522,32 @@ export const NavRemoveThemePropInput = () =>