feat(various): updated markup for several components (#644)

* feat(various): updated markup for several components

* Added rules for table and wizard updates

* Added rule for toolbaritem

* Added toolbar rule to warnings

* Updated per PR feedback

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

@@ -30,18 +30,24 @@ export const warningRules = [
   "menuToggle-warn-iconOnly-toggle",
   "nav-warn-flyouts-now-inline",
   "notificationBadge-warn-markup-change",
+  "notificationDrawerHeader-warn-update-markup",
   "overflowMenu-warn-updated-dropdownItem",
   "pageSection-warn-variantClasses-applied",
   "popover-warn-appendTo-default",
   "react-dropzone-warn-upgrade",
   "simpleFileUpload-warn-changes",
+  "sliderStep-warn-update-markup",
   "table-warn-actionsColumn",
   "table-warn-thExpandType",
   "tabs-update-markup",
   "tabs-warn-children-type-changed",
+  "Th-Td-warn-update-markup",
+  "toolbarItem-warn-update-markup",
   "tooltip-warn-triggerRef-may-be-required",
   "treeView-warn-selectable-styling-modifier-removed",
   "wizard-warn-button-order",
+  "wizardFooter-warn-update-markup",
+  "wizardNavItem-warn-update-markup",
 ];
 
 // rules that will run before other rules (move to deprecated?)

packages/eslint-plugin-pf-codemods/src/rules/helpers/JSXElements.ts

@@ -9,6 +9,15 @@ export function getChildElementByName(node: JSXElement, name: string) {
   ) as JSXElement | undefined;
 }
 
+export function getAllChildElementsByName(node: JSXElement, name: string) {
+  return node.children?.filter(
+    (child) =>
+      child.type === "JSXElement" &&
+      child.openingElement.name.type === "JSXIdentifier" &&
+      child.openingElement.name.name === name
+  ) as JSXElement[];
+}
+
 export function nodeIsComponentNamed(node: JSXElement, componentName: string) {
   if (node.openingElement.name.type === "JSXIdentifier") {
     return node.openingElement.name.name === componentName;

packages/eslint-plugin-pf-codemods/src/rules/v6/notificationDrawerHeaderWarnUpdateMarkup/notificationDrawerHeader-warn-update-markup.md

@@ -0,0 +1,3 @@
+### notificationDrawerHeader-warn-update-markup [(#10378)](https://github.com/patternfly/patternfly-react/pull/10378)
+
+NotificationDrawerHeader no longer uses our Text component internally, and instead renders a native `h1` element.

packages/eslint-plugin-pf-codemods/src/rules/v6/notificationDrawerHeaderWarnUpdateMarkup/notificationDrawerHeader-warn-update-markup.test.ts

@@ -0,0 +1,62 @@
+const ruleTester = require("../../ruletester");
+import * as rule from "./notificationDrawerHeader-warn-update-markup";
+
+ruleTester.run("notificationDrawerHeader-warn-update-markup", rule, {
+  valid: [
+    {
+      code: `<NotificationDrawerHeader />`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import { NotificationDrawerHeader } from '@patternfly/react-core'; <NotificationDrawerHeader />`,
+      output: `import { NotificationDrawerHeader } from '@patternfly/react-core'; <NotificationDrawerHeader />`,
+      errors: [
+        {
+          message: `NotificationDrawerHeader no longer uses our Text component internally, and instead renders a native \`h1\` element.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    {
+      code: `import { NotificationDrawerHeader as CustomDrawerHeader } from '@patternfly/react-core'; <CustomDrawerHeader />`,
+      output: `import { NotificationDrawerHeader as CustomDrawerHeader } from '@patternfly/react-core'; <CustomDrawerHeader />`,
+      errors: [
+        {
+          message: `NotificationDrawerHeader no longer uses our Text component internally, and instead renders a native \`h1\` element.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    {
+      code: `import { NotificationDrawerHeader } from '@patternfly/react-core/dist/esm/components/EmptyState/index.js'; <NotificationDrawerHeader />`,
+      output: `import { NotificationDrawerHeader } from '@patternfly/react-core/dist/esm/components/EmptyState/index.js'; <NotificationDrawerHeader />`,
+      errors: [
+        {
+          message: `NotificationDrawerHeader no longer uses our Text component internally, and instead renders a native \`h1\` element.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    {
+      code: `import { NotificationDrawerHeader } from '@patternfly/react-core/dist/js/components/EmptyState/index.js'; <NotificationDrawerHeader />`,
+      output: `import { NotificationDrawerHeader } from '@patternfly/react-core/dist/js/components/EmptyState/index.js'; <NotificationDrawerHeader />`,
+      errors: [
+        {
+          message: `NotificationDrawerHeader no longer uses our Text component internally, and instead renders a native \`h1\` element.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    {
+      code: `import { NotificationDrawerHeader } from '@patternfly/react-core/dist/dynamic/components/EmptyState/index.js'; <NotificationDrawerHeader />`,
+      output: `import { NotificationDrawerHeader } from '@patternfly/react-core/dist/dynamic/components/EmptyState/index.js'; <NotificationDrawerHeader />`,
+      errors: [
+        {
+          message: `NotificationDrawerHeader no longer uses our Text component internally, and instead renders a native \`h1\` element.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+  ],
+});

packages/eslint-plugin-pf-codemods/src/rules/v6/notificationDrawerHeaderWarnUpdateMarkup/notificationDrawerHeader-warn-update-markup.ts

@@ -0,0 +1,32 @@
+import { Rule } from "eslint";
+import { JSXOpeningElement } from "estree-jsx";
+import { getFromPackage } from "../../helpers";
+
+// https://github.com/patternfly/patternfly-react/pull/10378
+module.exports = {
+  meta: {},
+  create: function (context: Rule.RuleContext) {
+    const { imports } = getFromPackage(context, "@patternfly/react-core");
+
+    const componentImport = imports.find(
+      (specifier) => specifier.imported.name === "NotificationDrawerHeader"
+    );
+
+    return !componentImport
+      ? {}
+      : {
+          JSXOpeningElement(node: JSXOpeningElement) {
+            if (
+              node.name.type === "JSXIdentifier" &&
+              componentImport.local.name === node.name.name
+            ) {
+              context.report({
+                node,
+                message:
+                  "NotificationDrawerHeader no longer uses our Text component internally, and instead renders a native `h1` element.",
+              });
+            }
+          },
+        };
+  },
+};

packages/eslint-plugin-pf-codemods/src/rules/v6/notificationDrawerHeaderWarnUpdateMarkup/notificationDrawerHeaderWarnUpdateMarkupInput.tsx

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

packages/eslint-plugin-pf-codemods/src/rules/v6/notificationDrawerHeaderWarnUpdateMarkup/notificationDrawerHeaderWarnUpdateMarkupOutput.tsx

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

packages/eslint-plugin-pf-codemods/src/rules/v6/sliderStepWarnUpdateMarkup/sliderStep-warn-update-markup.md

@@ -0,0 +1,3 @@
+### sliderStep-warn-update-markup [(#10378)](https://github.com/patternfly/patternfly-react/pull/10378)
+
+The `--pf-v6-c-slider__step--Left` CSS variable applied as an inline style has been updated to the `--pf-v6-c-slider__step--InsetInlineStart` CSS variable.

packages/eslint-plugin-pf-codemods/src/rules/v6/sliderStepWarnUpdateMarkup/sliderStep-warn-update-markup.test.ts

@@ -0,0 +1,62 @@
+const ruleTester = require("../../ruletester");
+import * as rule from "./sliderStep-warn-update-markup";
+
+ruleTester.run("sliderStep-warn-update-markup", rule, {
+  valid: [
+    {
+      code: `<Slider/>`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import { Slider } from '@patternfly/react-core'; <Slider />`,
+      output: `import { Slider } from '@patternfly/react-core'; <Slider />`,
+      errors: [
+        {
+          message: `The \`--pf-v6-c-slider__step--Left\` CSS variable applied as an inline style to SliderStep has been updated to the \`--pf-v6-c-slider__step--InsetInlineStart\` CSS variable.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    {
+      code: `import { Slider as CustomSlider } from '@patternfly/react-core'; <CustomSlider />`,
+      output: `import { Slider as CustomSlider } from '@patternfly/react-core'; <CustomSlider />`,
+      errors: [
+        {
+          message: `The \`--pf-v6-c-slider__step--Left\` CSS variable applied as an inline style to SliderStep has been updated to the \`--pf-v6-c-slider__step--InsetInlineStart\` CSS variable.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    {
+      code: `import { Slider } from '@patternfly/react-core/dist/esm/components/Slider/index.js'; <Slider />`,
+      output: `import { Slider } from '@patternfly/react-core/dist/esm/components/Slider/index.js'; <Slider />`,
+      errors: [
+        {
+          message: `The \`--pf-v6-c-slider__step--Left\` CSS variable applied as an inline style to SliderStep has been updated to the \`--pf-v6-c-slider__step--InsetInlineStart\` CSS variable.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    {
+      code: `import { Slider } from '@patternfly/react-core/dist/js/components/Slider/index.js'; <Slider />`,
+      output: `import { Slider } from '@patternfly/react-core/dist/js/components/Slider/index.js'; <Slider />`,
+      errors: [
+        {
+          message: `The \`--pf-v6-c-slider__step--Left\` CSS variable applied as an inline style to SliderStep has been updated to the \`--pf-v6-c-slider__step--InsetInlineStart\` CSS variable.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    {
+      code: `import { Slider } from '@patternfly/react-core/dist/dynamic/components/Slider/index.js'; <Slider />`,
+      output: `import { Slider } from '@patternfly/react-core/dist/dynamic/components/Slider/index.js'; <Slider />`,
+      errors: [
+        {
+          message: `The \`--pf-v6-c-slider__step--Left\` CSS variable applied as an inline style to SliderStep has been updated to the \`--pf-v6-c-slider__step--InsetInlineStart\` CSS variable.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+  ],
+});

packages/eslint-plugin-pf-codemods/src/rules/v6/sliderStepWarnUpdateMarkup/sliderStep-warn-update-markup.ts

@@ -0,0 +1,32 @@
+import { Rule } from "eslint";
+import { JSXOpeningElement } from "estree-jsx";
+import { getFromPackage } from "../../helpers";
+
+// https://github.com/patternfly/patternfly-react/pull/10378
+module.exports = {
+  meta: {},
+  create: function (context: Rule.RuleContext) {
+    const { imports } = getFromPackage(context, "@patternfly/react-core");
+
+    const componentImport = imports.find(
+      (specifier) => specifier.imported.name === "Slider"
+    );
+
+    return !componentImport
+      ? {}
+      : {
+          JSXOpeningElement(node: JSXOpeningElement) {
+            if (
+              node.name.type === "JSXIdentifier" &&
+              componentImport.local.name === node.name.name
+            ) {
+              context.report({
+                node,
+                message:
+                  "The `--pf-v6-c-slider__step--Left` CSS variable applied as an inline style to SliderStep has been updated to the `--pf-v6-c-slider__step--InsetInlineStart` CSS variable.",
+              });
+            }
+          },
+        };
+  },
+};

packages/eslint-plugin-pf-codemods/src/rules/v6/sliderStepWarnUpdateMarkup/sliderStepWarnUpdateMarkupInput.tsx

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

packages/eslint-plugin-pf-codemods/src/rules/v6/sliderStepWarnUpdateMarkup/sliderStepWarnUpdateMarkupOutput.tsx

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

packages/eslint-plugin-pf-codemods/src/rules/v6/thTdWarnUpdateMarkup/Th-Td-warn-update-markup.md

@@ -0,0 +1,3 @@
+### Th-Td-warn-update-markup [(#10378)](https://github.com/patternfly/patternfly-react/pull/10378)
+
+The `--pf-v6-c-table__sticky-cell--Left` and `--pf-v6-c-table__sticky-cell--Right` CSS variables applied as inline styles when `isStickyColumn` is true have been updated to `--pf-v6-c-table__sticky-cell--InsetInlineStart` and `--pf-v6-c-table__sticky-cell--InsetInlineEnd`, respectively.

packages/eslint-plugin-pf-codemods/src/rules/v6/thTdWarnUpdateMarkup/Th-Td-warn-update-markup.test.ts

@@ -0,0 +1,81 @@
+const ruleTester = require("../../ruletester");
+import * as rule from "./Th-Td-warn-update-markup";
+
+ruleTester.run("Th-Td-warn-update-markup", rule, {
+  valid: [
+    {
+      code: `<Th />`,
+    },
+    {
+      code: `<Td />`,
+    },
+    {
+      code: `import { Th } from '@patternfly/react-table'; <Th />`,
+    },
+    {
+      code: `import { Td } from '@patternfly/react-table'; <Td />`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import { Th } from '@patternfly/react-table'; <Th isStickyColumn />`,
+      output: `import { Th } from '@patternfly/react-table'; <Th isStickyColumn />`,
+      errors: [
+        {
+          message: `The \`--pf-v6-c-table__sticky-cell--Left\` and \`--pf-v6-c-table__sticky-cell--Right\` CSS variables applied as inline styles have been updated to \`--pf-v6-c-table__sticky-cell--InsetInlineStart\` and \`--pf-v6-c-table__sticky-cell--InsetInlineEnd\`, respectively.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    {
+      code: `import { Th as CustomTh } from '@patternfly/react-table'; <CustomTh isStickyColumn />`,
+      output: `import { Th as CustomTh } from '@patternfly/react-table'; <CustomTh isStickyColumn />`,
+      errors: [
+        {
+          message: `The \`--pf-v6-c-table__sticky-cell--Left\` and \`--pf-v6-c-table__sticky-cell--Right\` CSS variables applied as inline styles have been updated to \`--pf-v6-c-table__sticky-cell--InsetInlineStart\` and \`--pf-v6-c-table__sticky-cell--InsetInlineEnd\`, respectively.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    {
+      code: `import { Td } from '@patternfly/react-table'; <Td isStickyColumn />`,
+      output: `import { Td } from '@patternfly/react-table'; <Td isStickyColumn />`,
+      errors: [
+        {
+          message: `The \`--pf-v6-c-table__sticky-cell--Left\` and \`--pf-v6-c-table__sticky-cell--Right\` CSS variables applied as inline styles have been updated to \`--pf-v6-c-table__sticky-cell--InsetInlineStart\` and \`--pf-v6-c-table__sticky-cell--InsetInlineEnd\`, respectively.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    {
+      code: `import { Th } from '@patternfly/react-table/dist/esm/components/Table/index.js'; <Th isStickyColumn />`,
+      output: `import { Th } from '@patternfly/react-table/dist/esm/components/Table/index.js'; <Th isStickyColumn />`,
+      errors: [
+        {
+          message: `The \`--pf-v6-c-table__sticky-cell--Left\` and \`--pf-v6-c-table__sticky-cell--Right\` CSS variables applied as inline styles have been updated to \`--pf-v6-c-table__sticky-cell--InsetInlineStart\` and \`--pf-v6-c-table__sticky-cell--InsetInlineEnd\`, respectively.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    {
+      code: `import { Th } from '@patternfly/react-table/dist/js/components/Table/index.js'; <Th isStickyColumn />`,
+      output: `import { Th } from '@patternfly/react-table/dist/js/components/Table/index.js'; <Th isStickyColumn />`,
+      errors: [
+        {
+          message: `The \`--pf-v6-c-table__sticky-cell--Left\` and \`--pf-v6-c-table__sticky-cell--Right\` CSS variables applied as inline styles have been updated to \`--pf-v6-c-table__sticky-cell--InsetInlineStart\` and \`--pf-v6-c-table__sticky-cell--InsetInlineEnd\`, respectively.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    {
+      code: `import { Th } from '@patternfly/react-table/dist/dynamic/components/Table/index.js'; <Th isStickyColumn />`,
+      output: `import { Th } from '@patternfly/react-table/dist/dynamic/components/Table/index.js'; <Th isStickyColumn />`,
+      errors: [
+        {
+          message: `The \`--pf-v6-c-table__sticky-cell--Left\` and \`--pf-v6-c-table__sticky-cell--Right\` CSS variables applied as inline styles have been updated to \`--pf-v6-c-table__sticky-cell--InsetInlineStart\` and \`--pf-v6-c-table__sticky-cell--InsetInlineEnd\`, respectively.`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+  ],
+});

packages/eslint-plugin-pf-codemods/src/rules/v6/thTdWarnUpdateMarkup/Th-Td-warn-update-markup.ts

@@ -0,0 +1,37 @@
+import { Rule } from "eslint";
+import { JSXOpeningElement } from "estree-jsx";
+import { getFromPackage, getAttribute } from "../../helpers";
+
+// https://github.com/patternfly/patternfly-react/pull/10378
+module.exports = {
+  meta: {},
+  create: function (context: Rule.RuleContext) {
+    const { imports } = getFromPackage(context, "@patternfly/react-table");
+
+    const componentImports = imports.filter((specifier) =>
+      ["Th", "Td"].includes(specifier.imported.name)
+    );
+
+    return !componentImports.length
+      ? {}
+      : {
+          JSXOpeningElement(node: JSXOpeningElement) {
+            if (
+              node.name.type === "JSXIdentifier" &&
+              componentImports
+                .map((imp) => imp.local.name)
+                .includes(node.name.name)
+            ) {
+              const attribute = getAttribute(node, "isStickyColumn");
+              if (attribute) {
+                context.report({
+                  node,
+                  message:
+                    "The `--pf-v6-c-table__sticky-cell--Left` and `--pf-v6-c-table__sticky-cell--Right` CSS variables applied as inline styles have been updated to `--pf-v6-c-table__sticky-cell--InsetInlineStart` and `--pf-v6-c-table__sticky-cell--InsetInlineEnd`, respectively.",
+                });
+              }
+            }
+          },
+        };
+  },
+};

packages/eslint-plugin-pf-codemods/src/rules/v6/thTdWarnUpdateMarkup/thTdWarnUpdateMarkupInput.tsx

@@ -0,0 +1,8 @@
+import { Th, Td } from "@patternfly/react-core";
+
+export const ThTdWarnUpdateMarkupInput = () => (
+  <>
+    <Th />
+    <Td />
+  </>
+);