feat(MenuToggle): updated recommended icon usage

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

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%
+```

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: `<MenuToggle />`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import { MenuToggle } from '@patternfly/react-core'; <MenuToggle />`,
+      output: `import { MenuToggle } from '@patternfly/react-core'; <MenuToggle />`,
+      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",
+        },
+      ],
+    },
+  ],
+});

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.",
+              });
+            }
+          },
+        };
+  },
+};

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 = () => (
+  <MenuToggle aria-label='A descriptive aria-label' variant='plain'>
+    <EllipsisVIcon />
+  </MenuToggle>
+);

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 = () => (
+  <MenuToggle
+    icon={EllipsisVIcon}
+    aria-label='A descriptive aria-label'
+    variant='plain'
+  />
+);