diff --git a/packages/eslint-plugin-pf-codemods/index.js b/packages/eslint-plugin-pf-codemods/index.js index 65f85756f..d19f950f4 100644 --- a/packages/eslint-plugin-pf-codemods/index.js +++ b/packages/eslint-plugin-pf-codemods/index.js @@ -16,6 +16,7 @@ const v4rules = createListOfRules("4"); const warningRules = [ "applicationLauncher-warn-input", "card-warn-component", + "datePicker-warn-appendTo-default-value-changed", "horizontalSubnav-ariaLabel", "popover-appendTo-default", "react-dropzone-warn-upgrade", diff --git a/packages/eslint-plugin-pf-codemods/lib/rules/v5/datePicker-warn-appendTo-default-value-changed.js b/packages/eslint-plugin-pf-codemods/lib/rules/v5/datePicker-warn-appendTo-default-value-changed.js new file mode 100644 index 000000000..5ddb9f248 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/lib/rules/v5/datePicker-warn-appendTo-default-value-changed.js @@ -0,0 +1,29 @@ +const { getPackageImports } = require("../../helpers"); + + // https://github.com/patternfly/patternfly-react/pull/8636 + module.exports = { + meta: {}, + create: function (context) { + const imports = getPackageImports( + context, + "@patternfly/react-core" + ).filter((specifier) => specifier.imported.name === "DatePicker"); + + return imports.length === 0 + ? {} + : { + JSXOpeningElement(node) { + if ( + imports + .map((imp) => imp.local.name) + .includes(node.name.name) + ) { + context.report({ + node, + message: 'The default value of the DatePicker prop "appendTo" has been updated to a value of "inline" and may cause markup changes that require updating selectors used in tests.', + }); + } + }, + }; + }, + }; diff --git a/packages/eslint-plugin-pf-codemods/test/rules/v5/datePicker-warn-appendTo-default-value-changed.js b/packages/eslint-plugin-pf-codemods/test/rules/v5/datePicker-warn-appendTo-default-value-changed.js new file mode 100644 index 000000000..fe6619659 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/test/rules/v5/datePicker-warn-appendTo-default-value-changed.js @@ -0,0 +1,21 @@ +const ruleTester = require('../../ruletester'); +const rule = require('../../../lib/rules/v5/datePicker-warn-appendTo-default-value-changed'); + +ruleTester.run("datePicker-warn-appendTo-default-value-changed", rule, { + valid: [ + { + // No @patternfly/react-core import + code: ``, + } + ], + invalid: [ + { + code: `import { DatePicker } from '@patternfly/react-core'; `, + output: `import { DatePicker } from '@patternfly/react-core'; `, + errors: [{ + message: 'The default value of the DatePicker prop "appendTo" has been updated to a value of "inline" and may cause markup changes that require updating selectors used in tests.', + type: "JSXOpeningElement", + }] + } + ] +}); diff --git a/packages/pf-codemods/README.md b/packages/pf-codemods/README.md index 4e123d653..c3f36a2b9 100644 --- a/packages/pf-codemods/README.md +++ b/packages/pf-codemods/README.md @@ -266,6 +266,10 @@ Out: ``` +### datePicker-warn-appendTo-default-value-changed [(#8636)](https://github.com/patternfly/patternfly-react/pull/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)](https://github.com/patternfly/patternfly-react/pull/8199) We've replaced the `isVertical` flag with the `orientation` property that can define verticality on different breakpoints. diff --git a/test/test.tsx b/test/test.tsx index 95fb78cb2..19b519f09 100644 --- a/test/test.tsx +++ b/test/test.tsx @@ -5,6 +5,7 @@ import { ApplicationLauncher, Button, Card, + DatePicker, DropdownItem, DropdownToggle, FileUpload, @@ -28,6 +29,7 @@ const isRead = true;