From 2314cb245bed31d5d6270beca43f24e9af207ab3 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Wed, 21 Feb 2024 11:47:11 -0500
Subject: [PATCH] feat(MenuToggle): updated recommended icon usage

---
 .../src/ruleCustomization.ts                  |  1 +
 .../menuToggle-warn-iconOnly-toggle.md        | 19 ++++++++++
 .../menuToggle-warn-iconOnly-toggle.test.ts   | 22 ++++++++++++
 .../menuToggle-warn-iconOnly-toggle.ts        | 35 +++++++++++++++++++
 .../menuToggleWarnIconOnlyToggleInput.tsx     |  8 +++++
 .../menuToggleWarnIconOnlyToggleOutput.tsx    | 10 ++++++
 6 files changed, 95 insertions(+)
 create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggle-warn-iconOnly-toggle.md
 create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggle-warn-iconOnly-toggle.test.ts
 create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggle-warn-iconOnly-toggle.ts
 create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggleWarnIconOnlyToggleInput.tsx
 create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/menuToggleWarnIconOnlyToggle/menuToggleWarnIconOnlyToggleOutput.tsx

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