diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/avatarReplaceBorderForIsBordered/avatar-replace-border-for-isBordered.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/avatarReplaceBorderForIsBordered/avatar-replace-border-for-isBordered.md new file mode 100644 index 000000000..e383b7486 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/avatarReplaceBorderForIsBordered/avatar-replace-border-for-isBordered.md @@ -0,0 +1,20 @@ +### avatar-replace-border-for-isBordered + +[(#9881)](https://github.com/patternfly/patternfly-react/pull/9881) +[(#9954)](https://github.com/patternfly/patternfly-react/pull/9954) + +`border` prop has been removed from Avatar since theming is not longer handled React-side. We recommend using the `isBordered` prop instead to add a border to Avatar. + +#### Examples + +In: + +```jsx +%inputExample% +``` + +Out: + +```jsx +%outputExample% +``` diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/avatarReplaceBorderForIsBordered/avatar-replace-border-for-isBordered.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/avatarReplaceBorderForIsBordered/avatar-replace-border-for-isBordered.test.ts new file mode 100644 index 000000000..03d6af082 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/avatarReplaceBorderForIsBordered/avatar-replace-border-for-isBordered.test.ts @@ -0,0 +1,25 @@ +const ruleTester = require('../../ruletester'); +import * as rule from './avatar-replace-border-for-isBordered'; + +ruleTester.run('avatar-replace-border-for-isBordered', rule, { + valid: [ + { + code: ``, + }, + { + code: `import { Avatar } from '@patternfly/react-core'; `, + }, + ], + invalid: [ + { + code: `import { Avatar } from '@patternfly/react-core'; `, + output: `import { Avatar } from '@patternfly/react-core'; `, + errors: [ + { + message: `border prop has been removed from Avatar since theming is not longer handled React-side. We recommend using the isBordered prop instead to add a border to Avatar.`, + type: 'JSXOpeningElement', + }, + ], + }, + ], +}); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/avatarReplaceBorderForIsBordered/avatar-replace-border-for-isBordered.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/avatarReplaceBorderForIsBordered/avatar-replace-border-for-isBordered.ts new file mode 100644 index 000000000..dbb84c25d --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/avatarReplaceBorderForIsBordered/avatar-replace-border-for-isBordered.ts @@ -0,0 +1,17 @@ +import { getFromPackage, renameProps } from '../../helpers'; + +// https://github.com/patternfly/patternfly-react/pull/9954 +// https://github.com/patternfly/patternfly-react/pull/9881 +module.exports = { + meta: { fixable: 'code' }, + create: renameProps({ + Avatar: { + border: { + newName: 'isBordered', + replace: true, + message: () => + 'border prop has been removed from Avatar since theming is not longer handled React-side. We recommend using the isBordered prop instead to add a border to Avatar.', + }, + }, + }), +}; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/avatarReplaceBorderForIsBordered/avatarReplaceBorderForIsBorderedInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/avatarReplaceBorderForIsBordered/avatarReplaceBorderForIsBorderedInput.tsx new file mode 100644 index 000000000..13e9a00a5 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/avatarReplaceBorderForIsBordered/avatarReplaceBorderForIsBorderedInput.tsx @@ -0,0 +1,5 @@ +import { Avatar } from '@patternfly/react-core'; + +export const AvatarReplaceBorderForIsBorderedInput = () => ( + +); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/avatarReplaceBorderForIsBordered/avatarReplaceBorderForIsBorderedOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/avatarReplaceBorderForIsBordered/avatarReplaceBorderForIsBorderedOutput.tsx new file mode 100644 index 000000000..a1773324b --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/avatarReplaceBorderForIsBordered/avatarReplaceBorderForIsBorderedOutput.tsx @@ -0,0 +1,5 @@ +import { Avatar } from '@patternfly/react-core'; + +export const AvatarReplaceBorderForIsBorderedInput = () => ( + +);