diff --git a/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts b/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts index bdeee66e9..2dae01e0b 100644 --- a/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts +++ b/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts @@ -17,6 +17,7 @@ export const warningRules = [ "formControls-updated-markup", "horizontalSubnav-warn-ariaLabel", "label-warn-truncated-default", + "menuToggle-warn-iconOnly-toggle", "nav-warn-flyouts-now-inline", "overflowMenu-warn-updated-dropdownItem", "popover-warn-appendTo-default", diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggle-warn-iconOnly-toggle.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggle-warn-iconOnly-toggle.md new file mode 100644 index 000000000..8001c876a --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggle-warn-iconOnly-toggle.md @@ -0,0 +1,19 @@ +### menuToggle-warn-iconOnly-toggle [(#10097)](https://github.com/patternfly/patternfly-react/pull/10097) + +We now recommend passing any icon to the `icon` prop instead of passing it as children, such as for plain, icon only toggles. Passing an icon as children will result in incorrect styling. + +#### Examples + +This rule will not provide a fix, but you can refer to the following code blocks to see what updates would need to be made manually. + +Previous recommendation: + +```jsx +%inputExample% +``` + +New recommendation: + +```jsx +%outputExample% +``` diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggle-warn-iconOnly-toggle.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggle-warn-iconOnly-toggle.test.ts new file mode 100644 index 000000000..c121f02e6 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggle-warn-iconOnly-toggle.test.ts @@ -0,0 +1,22 @@ +const ruleTester = require("../../ruletester"); +import * as rule from "./menuToggle-warn-iconOnly-toggle"; + +ruleTester.run("menuToggle-warn-iconOnly-toggle", rule, { + valid: [ + { + code: ``, + }, + ], + invalid: [ + { + code: `import { MenuToggle } from '@patternfly/react-core'; `, + output: `import { MenuToggle } from '@patternfly/react-core'; `, + errors: [ + { + message: `We now recommend passing any icon to the \`icon\` prop instead of passing it as children, such as for plain, icon only toggles. Passing an icon as children will result in incorrect styling.`, + type: "ImportDeclaration", + }, + ], + }, + ], +}); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggle-warn-iconOnly-toggle.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggle-warn-iconOnly-toggle.ts new file mode 100644 index 000000000..dec82cc2b --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggle-warn-iconOnly-toggle.ts @@ -0,0 +1,35 @@ +import { Rule } from "eslint"; +import { ImportDeclaration, ImportSpecifier } from "estree-jsx"; +import { getFromPackage } from "../../helpers"; + +// https://github.com/patternfly/patternfly-react/pull/10097 +module.exports = { + meta: { fixable: "code" }, + create: function (context: Rule.RuleContext) { + const { imports } = getFromPackage(context, "@patternfly/react-core"); + + const menuToggleImport = imports.find( + (specifier) => specifier.imported.name === "MenuToggle" + ); + + return !menuToggleImport + ? {} + : { + ImportDeclaration(node: ImportDeclaration) { + if ( + node.specifiers.find( + (specifier) => + (specifier as ImportSpecifier).imported?.name === + menuToggleImport.imported.name + ) + ) { + context.report({ + node, + message: + "We now recommend passing any icon to the `icon` prop instead of passing it as children, such as for plain, icon only toggles. Passing an icon as children will result in incorrect styling.", + }); + } + }, + }; + }, +}; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggleWarnIconOnlyToggleInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggleWarnIconOnlyToggleInput.tsx new file mode 100644 index 000000000..21b2ed5d5 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggleWarnIconOnlyToggleInput.tsx @@ -0,0 +1,8 @@ +import { MenuToggle } from "@patternfly/react-core"; +import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; + +export const MenuToggleWarnIconOnlyToggleInput = () => ( + + + +); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggleWarnIconOnlyToggleOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggleWarnIconOnlyToggleOutput.tsx new file mode 100644 index 000000000..921d6cbd7 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggleWarnIconOnlyToggleOutput.tsx @@ -0,0 +1,10 @@ +import { MenuToggle } from "@patternfly/react-core"; +import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; + +export const MenuToggleWarnIconOnlyToggleInput = () => ( + +);