From a02903e78fe1a087527c33571d294ce2934cc71d Mon Sep 17 00:00:00 2001 From: adamviktora Date: Tue, 20 Feb 2024 17:08:58 +0100 Subject: [PATCH 1/4] feat(FormGroup): rename labelIcon to labelHelp --- .../formGroup-rename-labelIcon.md | 18 ++++++++++++++ .../formGroup-rename-labelIcon.test.ts | 24 +++++++++++++++++++ .../formGroup-rename-labelIcon.ts | 14 +++++++++++ .../formGroupRenameLabelIconInput.tsx | 5 ++++ .../formGroupRenameLabelIconOutput.tsx | 5 ++++ 5 files changed, 66 insertions(+) create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.md create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.test.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroupRenameLabelIconInput.tsx create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroupRenameLabelIconOutput.tsx diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.md new file mode 100644 index 000000000..a9cd74fd6 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.md @@ -0,0 +1,18 @@ +### formGroup-rename-labelIcon [(#10016)](https://github.com/patternfly/patternfly-react/pull/10016) + +The `labelIcon` prop for FormGroup has been renamed to `labelHelp`. We recommend using FormGroupLabelHelp element for the labelHelp prop. The markup has also changed, we now wrap the labelHelp element in ``, so there is no need to add `className={styles.formGroupLabelHelp}` to the labelHelp element. + +#### Examples + +In: + +```jsx +%inputExample% +``` + +Out: + +```jsx +%outputExample% +``` + diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.test.ts new file mode 100644 index 000000000..33185745a --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.test.ts @@ -0,0 +1,24 @@ +const ruleTester = require('../../ruletester'); +import * as rule from './formGroup-rename-labelIcon'; + +ruleTester.run("formGroup-rename-labelIcon", rule, { + valid: [ + { + code: `` + }, + { + code: `import { FormGroup } from '@patternfly/react-core'; ` + } + ], + invalid: [ + { + code: `import { FormGroup } from '@patternfly/react-core'; Help icon} />`, + output: `import { FormGroup } from '@patternfly/react-core'; Help icon} />`, + errors: [{ + message: `The \`labelIcon\` prop for FormGroup has been renamed to \`labelHelp\`. We recommend using FormGroupLabelHelp element for the labelHelp prop. The markup has also changed, we now wrap the labelHelp element in \`\`, so there is no need to add \`className={styles.formGroupLabelHelp}\` to the labelHelp element.`, + type: "JSXOpeningElement", + }] + }, + ] +}); + \ No newline at end of file diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.ts new file mode 100644 index 000000000..1cbf95276 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.ts @@ -0,0 +1,14 @@ +import { renameProps } from "../../helpers"; + +// https://github.com/patternfly/patternfly-react/pull/10016 +module.exports = { + meta: { fixable: "code" }, + create: renameProps({ + FormGroup: { + labelIcon: { + newName: "labelHelp", + message: `The \`labelIcon\` prop for FormGroup has been renamed to \`labelHelp\`. We recommend using FormGroupLabelHelp element for the labelHelp prop. The markup has also changed, we now wrap the labelHelp element in \`\`, so there is no need to add \`className={styles.formGroupLabelHelp}\` to the labelHelp element.`, + }, + }, + }), +}; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroupRenameLabelIconInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroupRenameLabelIconInput.tsx new file mode 100644 index 000000000..d9968d41f --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroupRenameLabelIconInput.tsx @@ -0,0 +1,5 @@ +import { FormGroup } from "@patternfly/react-core"; + +export const FormGroupRenameLabelIconInput = () => ( + Help icon} /> +); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroupRenameLabelIconOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroupRenameLabelIconOutput.tsx new file mode 100644 index 000000000..050928d9d --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroupRenameLabelIconOutput.tsx @@ -0,0 +1,5 @@ +import { FormGroup } from "@patternfly/react-core"; + +export const FormGroupRenameLabelIconInput = () => ( + Help icon} /> +); From 5ac28bc5009d1e05f09bd79df4e1c998e3677fae Mon Sep 17 00:00:00 2001 From: adamviktora Date: Tue, 27 Feb 2024 09:30:11 +0100 Subject: [PATCH 2/4] prettier fix --- .../formGroup-rename-labelIcon.md | 1 - .../formGroup-rename-labelIcon.test.ts | 25 ++++++++++--------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.md index a9cd74fd6..fdd2f16a1 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.md +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.md @@ -15,4 +15,3 @@ Out: ```jsx %outputExample% ``` - diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.test.ts index 33185745a..018138ac0 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.test.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.test.ts @@ -1,24 +1,25 @@ -const ruleTester = require('../../ruletester'); -import * as rule from './formGroup-rename-labelIcon'; +const ruleTester = require("../../ruletester"); +import * as rule from "./formGroup-rename-labelIcon"; ruleTester.run("formGroup-rename-labelIcon", rule, { valid: [ { - code: `` + code: ``, }, { - code: `import { FormGroup } from '@patternfly/react-core'; ` - } + code: `import { FormGroup } from '@patternfly/react-core'; `, + }, ], invalid: [ { - code: `import { FormGroup } from '@patternfly/react-core'; Help icon} />`, + code: `import { FormGroup } from '@patternfly/react-core'; Help icon} />`, output: `import { FormGroup } from '@patternfly/react-core'; Help icon} />`, - errors: [{ - message: `The \`labelIcon\` prop for FormGroup has been renamed to \`labelHelp\`. We recommend using FormGroupLabelHelp element for the labelHelp prop. The markup has also changed, we now wrap the labelHelp element in \`\`, so there is no need to add \`className={styles.formGroupLabelHelp}\` to the labelHelp element.`, - type: "JSXOpeningElement", - }] + errors: [ + { + message: `The \`labelIcon\` prop for FormGroup has been renamed to \`labelHelp\`. We recommend using FormGroupLabelHelp element for the labelHelp prop. The markup has also changed, we now wrap the labelHelp element in \`\`, so there is no need to add \`className={styles.formGroupLabelHelp}\` to the labelHelp element.`, + type: "JSXOpeningElement", + }, + ], }, - ] + ], }); - \ No newline at end of file From d259eedef04a7a34e91b737920a60a91b4579024 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Tue, 27 Feb 2024 09:33:50 +0100 Subject: [PATCH 3/4] docs(FormGroup): use actual classname instead of token --- .../v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.md | 2 +- .../formGroupRenameLabelIcon/formGroup-rename-labelIcon.test.ts | 2 +- .../v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.md index fdd2f16a1..038021e16 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.md +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.md @@ -1,6 +1,6 @@ ### formGroup-rename-labelIcon [(#10016)](https://github.com/patternfly/patternfly-react/pull/10016) -The `labelIcon` prop for FormGroup has been renamed to `labelHelp`. We recommend using FormGroupLabelHelp element for the labelHelp prop. The markup has also changed, we now wrap the labelHelp element in ``, so there is no need to add `className={styles.formGroupLabelHelp}` to the labelHelp element. +The `labelIcon` prop for FormGroup has been renamed to `labelHelp`. We recommend using FormGroupLabelHelp element for the labelHelp prop. The markup has also changed, we now wrap the labelHelp element in ``, so there is no need to add `className="pf-v6-c-form__group-label-help"` to the labelHelp element. #### Examples diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.test.ts index 018138ac0..a9d58a721 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.test.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.test.ts @@ -16,7 +16,7 @@ ruleTester.run("formGroup-rename-labelIcon", rule, { output: `import { FormGroup } from '@patternfly/react-core'; Help icon} />`, errors: [ { - message: `The \`labelIcon\` prop for FormGroup has been renamed to \`labelHelp\`. We recommend using FormGroupLabelHelp element for the labelHelp prop. The markup has also changed, we now wrap the labelHelp element in \`\`, so there is no need to add \`className={styles.formGroupLabelHelp}\` to the labelHelp element.`, + message: `The \`labelIcon\` prop for FormGroup has been renamed to \`labelHelp\`. We recommend using FormGroupLabelHelp element for the labelHelp prop. The markup has also changed, we now wrap the labelHelp element in \`\`, so there is no need to add \`className="pf-v6-c-form__group-label-help"\` to the labelHelp element.`, type: "JSXOpeningElement", }, ], diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.ts index 1cbf95276..577341dd8 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/formGroupRenameLabelIcon/formGroup-rename-labelIcon.ts @@ -7,7 +7,7 @@ module.exports = { FormGroup: { labelIcon: { newName: "labelHelp", - message: `The \`labelIcon\` prop for FormGroup has been renamed to \`labelHelp\`. We recommend using FormGroupLabelHelp element for the labelHelp prop. The markup has also changed, we now wrap the labelHelp element in \`\`, so there is no need to add \`className={styles.formGroupLabelHelp}\` to the labelHelp element.`, + message: `The \`labelIcon\` prop for FormGroup has been renamed to \`labelHelp\`. We recommend using FormGroupLabelHelp element for the labelHelp prop. The markup has also changed, we now wrap the labelHelp element in \`\`, so there is no need to add \`className="pf-v6-c-form__group-label-help"\` to the labelHelp element.`, }, }, }), From d1d35f9aee79b3f92b255aaf5d714ae1727a281c Mon Sep 17 00:00:00 2001 From: adamviktora Date: Wed, 28 Feb 2024 16:04:45 +0100 Subject: [PATCH 4/4] feat(FormGroup): add rule to Beta rules before React PR is merged --- packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts b/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts index 37db64fbe..fd6d8f2c3 100644 --- a/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts +++ b/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts @@ -1,5 +1,6 @@ // if you want your rule to only run when explicitly called for using the --only flag, add the rule name to the below array export const betaRuleNames: string[] = [ + "formGroup-rename-labelIcon", "menuItemAction-warn-update-markup", "menuToggle-warn-iconOnly-toggle", ];