diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-iconButtonGroup-variant.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-iconButtonGroup-variant.md deleted file mode 100644 index 82c237fad..000000000 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-iconButtonGroup-variant.md +++ /dev/null @@ -1,17 +0,0 @@ -### toolbarGroup-updated-iconButtonGroup-variant [(#10674)](https://github.com/patternfly/patternfly-react/pull/10674) - -The `icon-button-group` variant of ToolbarGroup and ToolbarToggleGroup has been renamed to `action-group-plain`. - -#### Examples - -In: - -```jsx -%inputExample% -``` - -Out: - -```jsx -%outputExample% -``` diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-iconButtonGroup-variant.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-iconButtonGroup-variant.test.ts deleted file mode 100644 index d22c52d27..000000000 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-iconButtonGroup-variant.test.ts +++ /dev/null @@ -1,88 +0,0 @@ -const ruleTester = require("../../ruletester"); -import * as rule from "./toolbarGroup-updated-iconButtonGroup-variant"; -import { - ValidTests, - InvalidTests, - createInvalidTest, - createValidTest, -} from "../../helpers/testHelpers"; -const applicableComponents = ["ToolbarGroup", "ToolbarToggleGroup"]; -const validTests: ValidTests = []; -const invalidTests: InvalidTests = []; -for (const component of applicableComponents) { - validTests.push( - createValidTest(``) - ); - validTests.push( - createValidTest( - `import { ToolbarGroup } from '@patternfly/react-core'; ` - ) - ); - - const message = `The \`icon-button-group\` variant of ${component} has been renamed to \`action-group-plain\`.`; - const errorObject = { - message, - type: "JSXOpeningElement", - }; - invalidTests.push( - createInvalidTest( - `import { ${component} } from '@patternfly/react-core'; <${component} variant="icon-button-group" />`, - `import { ${component} } from '@patternfly/react-core'; <${component} variant="action-group-plain" />`, - [errorObject] - ) - ); - invalidTests.push( - createInvalidTest( - `import { ${component} as CustomThing } from '@patternfly/react-core'; `, - `import { ${component} as CustomThing } from '@patternfly/react-core'; `, - [errorObject] - ) - ); - invalidTests.push( - createInvalidTest( - `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core'; <${component} variant={ToolbarGroupVariant["icon-button-group"]} />`, - `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core'; <${component} variant={ToolbarGroupVariant["action-group-plain"]} />`, - [errorObject] - ) - ); - invalidTests.push( - createInvalidTest( - `import { ${component}, ToolbarGroupVariant as CustomThing } from '@patternfly/react-core'; <${component} variant={CustomThing["icon-button-group"]} />`, - `import { ${component}, ToolbarGroupVariant as CustomThing } from '@patternfly/react-core'; <${component} variant={CustomThing["action-group-plain"]} />`, - [errorObject] - ) - ); - invalidTests.push( - createInvalidTest( - `import { ${component} as CustomGroup, ToolbarGroupVariant as CustomThing } from '@patternfly/react-core'; `, - `import { ${component} as CustomGroup, ToolbarGroupVariant as CustomThing } from '@patternfly/react-core'; `, - [errorObject] - ) - ); - invalidTests.push( - createInvalidTest( - `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/esm/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["icon-button-group"]} />`, - `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/esm/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["action-group-plain"]} />`, - [errorObject] - ) - ); - invalidTests.push( - createInvalidTest( - `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/js/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["icon-button-group"]} />`, - `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/js/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["action-group-plain"]} />`, - [errorObject] - ) - ); - invalidTests.push( - createInvalidTest( - `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/dynamic/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["icon-button-group"]} />`, - `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/dynamic/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["action-group-plain"]} />`, - [errorObject] - ) - ); -} - -ruleTester.run("toolbarGroup-updated-iconButtonGroup-variant", rule, { - valid: validTests, - invalid: invalidTests, -}); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-variant.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-variant.md new file mode 100644 index 000000000..eeb2eab18 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-variant.md @@ -0,0 +1,22 @@ +### toolbarGroup-updated-variant [(#10674)](https://github.com/patternfly/patternfly-react/pull/10674) + +The `variant` prop of ToolbarGroup and ToolbarToggleGroup had these options renamed: + +| Old variant option | New variant option | +| ------------------- | -------------------- | +| `button-group` | `action-group` | +| `icon-button-group` | `action-group-plain` | + +#### Examples + +In: + +```jsx +%inputExample% +``` + +Out: + +```jsx +%outputExample% +``` diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-variant.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-variant.test.ts new file mode 100644 index 000000000..0c601df62 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-variant.test.ts @@ -0,0 +1,108 @@ +const ruleTester = require("../../ruletester"); +import * as rule from "./toolbarGroup-updated-variant"; +import { + ValidTests, + InvalidTests, + createInvalidTest, + createValidTest, +} from "../../helpers/testHelpers"; +const applicableComponents = ["ToolbarGroup", "ToolbarToggleGroup"]; +const renames = { + "button-group": "action-group", + "icon-button-group": "action-group-plain", +}; +const oldVariantNames = Object.keys(renames) as ( + | "button-group" + | "icon-button-group" +)[]; + +const validTests: ValidTests = []; +const invalidTests: InvalidTests = []; +for (const component of applicableComponents) { + for (const oldName of oldVariantNames) { + const newName = renames[oldName]; + + validTests.push(createValidTest(``)); + validTests.push( + createValidTest( + `import { ToolbarGroup } from '@patternfly/react-core'; ` + ) + ); + + const message = `The \`${oldName}\` variant of ${component} has been renamed to \`${newName}\`.`; + const errorObject = { + message, + type: "JSXOpeningElement", + }; + invalidTests.push( + createInvalidTest( + `import { ${component} } from '@patternfly/react-core'; <${component} variant="${oldName}" />`, + `import { ${component} } from '@patternfly/react-core'; <${component} variant="${newName}" />`, + [errorObject] + ) + ); + invalidTests.push( + createInvalidTest( + `import { ${component} as CustomThing } from '@patternfly/react-core'; `, + `import { ${component} as CustomThing } from '@patternfly/react-core'; `, + [errorObject] + ) + ); + invalidTests.push( + createInvalidTest( + `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core'; <${component} variant={ToolbarGroupVariant["${oldName}"]} />`, + `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core'; <${component} variant={ToolbarGroupVariant["${newName}"]} />`, + [errorObject] + ) + ); + invalidTests.push( + createInvalidTest( + `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core'; + const variant = ToolbarGroupVariant["${oldName}"]; <${component} variant={variant} />`, + `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core'; + const variant = ToolbarGroupVariant["${newName}"]; <${component} variant={variant} />`, + [errorObject] + ) + ); + invalidTests.push( + createInvalidTest( + `import { ${component}, ToolbarGroupVariant as CustomThing } from '@patternfly/react-core'; <${component} variant={CustomThing["${oldName}"]} />`, + `import { ${component}, ToolbarGroupVariant as CustomThing } from '@patternfly/react-core'; <${component} variant={CustomThing["${newName}"]} />`, + [errorObject] + ) + ); + invalidTests.push( + createInvalidTest( + `import { ${component} as CustomGroup, ToolbarGroupVariant as CustomThing } from '@patternfly/react-core'; `, + `import { ${component} as CustomGroup, ToolbarGroupVariant as CustomThing } from '@patternfly/react-core'; `, + [errorObject] + ) + ); + invalidTests.push( + createInvalidTest( + `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/esm/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["${oldName}"]} />`, + `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/esm/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["${newName}"]} />`, + [errorObject] + ) + ); + invalidTests.push( + createInvalidTest( + `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/js/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["${oldName}"]} />`, + `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/js/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["${newName}"]} />`, + [errorObject] + ) + ); + invalidTests.push( + createInvalidTest( + `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/dynamic/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["${oldName}"]} />`, + `import { ${component}, ToolbarGroupVariant } from '@patternfly/react-core/dist/dynamic/components/Toolbar/index.js'; <${component} variant={ToolbarGroupVariant["${newName}"]} />`, + [errorObject] + ) + ); + } +} + +ruleTester.run("toolbarGroup-updated-iconButtonGroup-variant", rule, { + valid: validTests, + invalid: invalidTests, +}); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-iconButtonGroup-variant.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-variant.ts similarity index 65% rename from packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-iconButtonGroup-variant.ts rename to packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-variant.ts index c7c7b9df9..5129fac90 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-iconButtonGroup-variant.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroup-updated-variant.ts @@ -15,6 +15,12 @@ module.exports = { (specifier) => specifier.imported.name === "ToolbarGroupVariant" ); + const renames = { + "button-group": "action-group", + "icon-button-group": "action-group-plain", + }; + const oldVariantNames = Object.keys(renames); + return !componentImports.length ? {} : { @@ -32,28 +38,27 @@ module.exports = { } const variantValue = getAttributeValue(context, variant.value); - const isEnumValueIconButtonGroup = + const isEnumToRename = variantEnumImport && variantValue.object?.name === variantEnumImport.local.name && - variantValue.property.value === "icon-button-group"; - if ( - variantValue !== "icon-button-group" && - !isEnumValueIconButtonGroup - ) { + oldVariantNames.includes(variantValue.property.value); + + if (!oldVariantNames.includes(variantValue) && !isEnumToRename) { return; } + const variantToRename: "button-group" | "icon-button-group" = + variantValue.property?.value ?? variantValue; + context.report({ node, - message: `The \`icon-button-group\` variant of ${applicableComponent.imported.name} has been renamed to \`action-group-plain\`.`, + message: `The \`${variantToRename}\` variant of ${applicableComponent.imported.name} has been renamed to \`${renames[variantToRename]}\`.`, fix(fixer) { return fixer.replaceText( - isEnumValueIconButtonGroup - ? variantValue.property - : variant, - isEnumValueIconButtonGroup - ? '"action-group-plain"' - : 'variant="action-group-plain"' + isEnumToRename ? variantValue.property : variant, + isEnumToRename + ? `"${renames[variantToRename]}"` + : `variant="${renames[variantToRename]}"` ); }, }); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroupUpdatedIconButtonGroupVariantInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroupUpdatedVariantInput.tsx similarity index 55% rename from packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroupUpdatedIconButtonGroupVariantInput.tsx rename to packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroupUpdatedVariantInput.tsx index 58a2cc578..e27b5dfa4 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroupUpdatedIconButtonGroupVariantInput.tsx +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroupUpdatedVariantInput.tsx @@ -4,11 +4,11 @@ import { ToolbarGroupVariant, } from "@patternfly/react-core"; -export const ToolbarGroupUpdatedIconButtonGroupVariantInput = () => ( +export const ToolbarGroupUpdatedVariantInput = () => ( <> - + - + ); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroupUpdatedIconButtonGroupVariantOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroupUpdatedVariantOutput.tsx similarity index 69% rename from packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroupUpdatedIconButtonGroupVariantOutput.tsx rename to packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroupUpdatedVariantOutput.tsx index 1dbabebd8..df9f1cdb9 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroupUpdatedIconButtonGroupVariantOutput.tsx +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/toolbarGroupUpdatedIconButtonGroupVariant/toolbarGroupUpdatedVariantOutput.tsx @@ -4,11 +4,11 @@ import { ToolbarGroupVariant, } from "@patternfly/react-core"; -export const ToolbarGroupUpdatedIconButtonGroupVariantInput = () => ( +export const ToolbarGroupUpdatedVariantInput = () => ( <> - + - + );