feat(Tabs): updated props and markup (#578)

* feat(Tabs): updated props and markup

* Added rule for isSecondary renamed to isSubtab

* Added rule to warn about scroll button markup change

packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts

@@ -29,6 +29,7 @@ export const warningRules = [
   "simpleFileUpload-warn-changes",
   "table-warn-actionsColumn",
   "table-warn-thExpandType",
+  "tabs-update-markup",
   "tabs-warn-children-type-changed",
   "tooltip-warn-triggerRef-may-be-required",
   "wizard-warn-button-order",

packages/eslint-plugin-pf-codemods/src/rules/v6/tabsRenamedIsSecondaryProp/tabs-renamed-isSecondary-prop.md

@@ -0,0 +1,17 @@
+### tabs-renamed-isSecondary-prop [(#10044)](https://github.com/patternfly/patternfly-react/pull/10044)
+
+The `isSecondary` prop for Tabs has been renamed to \`isSubtab\`.
+
+#### Examples
+
+In:
+
+```jsx
+%inputExample%
+```
+
+Out:
+
+```jsx
+%outputExample%
+```

packages/eslint-plugin-pf-codemods/src/rules/v6/tabsRenamedIsSecondaryProp/tabs-renamed-isSecondary-prop.test.ts

@@ -0,0 +1,25 @@
+const ruleTester = require("../../ruletester");
+import * as rule from "./tabs-renamed-isSecondary-prop";
+
+ruleTester.run("tabs-renamed-isSecondary-prop", rule, {
+  valid: [
+    {
+      code: `<Tabs isSecondary />`,
+    },
+    {
+      code: `import { Tabs } from '@patternfly/react-core'; <Tabs someOtherProp />`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import { Tabs } from '@patternfly/react-core'; <Tabs isSecondary />`,
+      output: `import { Tabs } from '@patternfly/react-core'; <Tabs isSubtab />`,
+      errors: [
+        {
+          message: `The \`isSecondary\` prop for Tabs has been renamed to \`isSubtab\`.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+  ],
+});

packages/eslint-plugin-pf-codemods/src/rules/v6/tabsRenamedIsSecondaryProp/tabs-renamed-isSecondary-prop.ts

@@ -0,0 +1,15 @@
+import { renameProps } from "../../helpers";
+
+// https://github.com/patternfly/patternfly-react/pull/10044
+module.exports = {
+  meta: { fixable: "code" },
+  create: renameProps({
+    Tabs: {
+      isSecondary: {
+        newName: "isSubtab",
+        message:
+          "The `isSecondary` prop for Tabs has been renamed to `isSubtab`.",
+      },
+    },
+  }),
+};

packages/eslint-plugin-pf-codemods/src/rules/v6/tabsRenamedIsSecondaryProp/tabsRenamedIsSecondaryPropInput.tsx

@@ -0,0 +1,3 @@
+import { Tabs } from "@patternfly/react-core";
+
+export const TabsRenamedIsSecondaryPropInput = () => <Tabs isSecondary />;

packages/eslint-plugin-pf-codemods/src/rules/v6/tabsRenamedIsSecondaryProp/tabsRenamedIsSecondaryPropOutput.tsx

@@ -0,0 +1,3 @@
+import { Tabs } from "@patternfly/react-core";
+
+export const TabsRenamedIsSecondaryPropInput = () => <Tabs isSubtab />;

packages/eslint-plugin-pf-codemods/src/rules/v6/tabsReplaceVariantLight300/tabs-replace-variant-light300.md

@@ -0,0 +1,17 @@
+### tabs-replace-variant-light300 [(#9930)](https://github.com/patternfly/patternfly-react/pull/9930) [(#10044)](https://github.com/patternfly/patternfly-react/pull/10044)
+
+The "light300" value for the `variant` prop on Tabs has been replaced with the "secondary" value.
+
+#### Examples
+
+In:
+
+```jsx
+%inputExample%
+```
+
+Out:
+
+```jsx
+%outputExample%
+```

packages/eslint-plugin-pf-codemods/src/rules/v6/tabsReplaceVariantLight300/tabs-replace-variant-light300.test.ts

@@ -0,0 +1,25 @@
+const ruleTester = require("../../ruletester");
+import * as rule from "./tabs-replace-variant-light300";
+
+ruleTester.run("tabs-replace-variant-light300", rule, {
+  valid: [
+    {
+      code: `<Tabs variant="light300" />`,
+    },
+    {
+      code: `import { Tabs } from '@patternfly/react-core'; <Tabs variant="secondary" />`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import { Tabs } from '@patternfly/react-core'; <Tabs variant="light300" />`,
+      output: `import { Tabs } from '@patternfly/react-core'; <Tabs variant="secondary" />`,
+      errors: [
+        {
+          message: `The "light300" value for the \`variant\` prop on Tabs has been replaced with the "secondary" value.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+  ],
+});

packages/eslint-plugin-pf-codemods/src/rules/v6/tabsReplaceVariantLight300/tabs-replace-variant-light300.ts

@@ -0,0 +1,49 @@
+import { getFromPackage } from "../../helpers";
+
+// https://github.com/patternfly/patternfly-react/pull/9930
+// https://github.com/patternfly/patternfly-react/pull/10044
+module.exports = {
+  meta: { fixable: "code" },
+  create: function (context: {
+    report: (arg0: {
+      node: any;
+      message: string;
+      fix(fixer: any): any;
+    }) => void;
+  }) {
+    const { imports, exports } = getFromPackage(
+      context,
+      "@patternfly/react-core"
+    );
+
+    const tabsImport = imports.find(
+      (specifier: { imported: { name: string }; local: { name: string } }) =>
+        specifier.imported.name === "Tabs"
+    );
+
+    return !tabsImport
+      ? {}
+      : {
+          JSXOpeningElement(node: { name: { name: any }; attributes: any[] }) {
+            if (node.name.name === tabsImport.local.name) {
+              const attribute = node.attributes.find(
+                (attr: { name: { name: string }; value: { value: string } }) =>
+                  attr.name?.name === "variant"
+              );
+              if (attribute && attribute.value.value === "light300") {
+                context.report({
+                  node,
+                  message:
+                    'The "light300" value for the `variant` prop on Tabs has been replaced with the "secondary" value.',
+                  fix(fixer: {
+                    replaceText: (arg0: any, arg1: string) => any;
+                  }) {
+                    return fixer.replaceText(attribute.value, '"secondary"');
+                  },
+                });
+              }
+            }
+          },
+        };
+  },
+};

packages/eslint-plugin-pf-codemods/src/rules/v6/tabsReplaceVariantLight300/tabsReplaceVariantLight300Input.tsx

@@ -0,0 +1,5 @@
+import { Tabs } from "@patternfly/react-core";
+
+export const TabsReplaceVariantLight300Input = () => (
+  <Tabs variant='light300' />
+);

packages/eslint-plugin-pf-codemods/src/rules/v6/tabsReplaceVariantLight300/tabsReplaceVariantLight300Output.tsx

@@ -0,0 +1,5 @@
+import { Tabs } from "@patternfly/react-core";
+
+export const TabsReplaceVariantLight300Input = () => (
+  <Tabs variant="secondary" />
+);

packages/eslint-plugin-pf-codemods/src/rules/v6/tabsUpdateMarkup/tabs-update-markup.md

@@ -0,0 +1,7 @@
+### tabs-update-markup [(#10044)](https://github.com/patternfly/patternfly-react/pull/10044)
+
+The markup for the Tabs scroll buttons have been updated in the following ways:
+
+- Replaced the native `button` HTML element internally with our Button components
+- Added a wrapper `div` around them
+- Removed styling when the `isSubtab` (previously `isSecondary`) prop is true

packages/eslint-plugin-pf-codemods/src/rules/v6/tabsUpdateMarkup/tabs-update-markup.test.ts

@@ -0,0 +1,22 @@
+const ruleTester = require("../../ruletester");
+import * as rule from "./tabs-update-markup";
+
+ruleTester.run("tabs-update-markup", rule, {
+  valid: [
+    {
+      code: `import { Tabs } from 'someOtherPackage';`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import { Tabs } from '@patternfly/react-core';`,
+      output: `import { Tabs } from '@patternfly/react-core';`,
+      errors: [
+        {
+          message: `The markup for the Tabs scroll buttons has been updated. They are now rendered with a div wrapper, use our Button component, and no longer have adjusted styling when the \`isSubtab\` prop is true.`,
+          type: "ImportDeclaration",
+        },
+      ],
+    },
+  ],
+});

packages/eslint-plugin-pf-codemods/src/rules/v6/tabsUpdateMarkup/tabs-update-markup.ts

@@ -0,0 +1,44 @@
+import { getFromPackage } from "../../helpers";
+
+// https://github.com/patternfly/patternfly-react/pull/10044
+module.exports = {
+  meta: { fixable: "code" },
+  create: function (context: {
+    report: (arg0: {
+      node: any;
+      message: string;
+      fix?(fixer: any): any;
+    }) => void;
+  }) {
+    const { imports, exports } = getFromPackage(
+      context,
+      "@patternfly/react-core"
+    );
+
+    const tabsImport = imports.find(
+      (specifier: { imported: { name: string } }) =>
+        specifier.imported.name === "Tabs"
+    );
+
+    return !tabsImport
+      ? {}
+      : {
+          ImportDeclaration(node: {
+            specifiers: { imported: { name: string } }[];
+          }) {
+            if (
+              node.specifiers.find(
+                (specifier: { imported: { name: string } }) =>
+                  specifier.imported.name === tabsImport.imported.name
+              )
+            ) {
+              context.report({
+                node,
+                message:
+                  "The markup for the Tabs scroll buttons has been updated. They are now rendered with a div wrapper, use our Button component, and no longer have adjusted styling when the `isSubtab` prop is true.",
+              });
+            }
+          },
+        };
+  },
+};

packages/eslint-plugin-pf-codemods/src/rules/v6/tabsUpdateMarkup/tabsUpdateMarkupInput.tsx

@@ -0,0 +1,3 @@
+import { Tabs } from "@patternfly/react-core";
+
+export const TabsUpdateMarkupInput = () => <Tabs />;

packages/eslint-plugin-pf-codemods/src/rules/v6/tabsUpdateMarkup/tabsUpdateMarkupOutput.tsx

@@ -0,0 +1,3 @@
+import { Tabs } from "@patternfly/react-core";
+
+export const TabsUpdateMarkupInput = () => <Tabs />;