diff --git a/packages/eslint-plugin/lib/rules/prefer-button-component.js b/packages/eslint-plugin/lib/rules/prefer-button-component.js index 3fb4f3c721..d8697cacf0 100644 --- a/packages/eslint-plugin/lib/rules/prefer-button-component.js +++ b/packages/eslint-plugin/lib/rules/prefer-button-component.js @@ -1,6 +1,6 @@ const jsxAstUtils = require('jsx-ast-utils'); -const { elementType } = jsxAstUtils; +const { elementType, getProp, getLiteralPropValue } = jsxAstUtils; const MESSAGE = 'The Web Component should be used to instead of the button HTML element.'; @@ -14,13 +14,18 @@ module.exports = { create(context) { return { JSXElement(node) { - // Exit early if we aren't on a button - if (elementType(node.openingElement) !== 'button') return; + const anchorNode = node.openingElement; + const typeProp = getProp(anchorNode.attributes, 'type'); - context.report({ - node, - message: MESSAGE, - }) + // Only display if we are on a button or input with type button + if (elementType(anchorNode) === 'button' || + (elementType(anchorNode) === 'input' && getLiteralPropValue(typeProp) === 'button')){ + + context.report({ + node, + message: MESSAGE, + }) + } }, }; }, diff --git a/packages/eslint-plugin/tests/lib/rules/prefer-button-component.js b/packages/eslint-plugin/tests/lib/rules/prefer-button-component.js index 6758d845ff..cc207100c5 100644 --- a/packages/eslint-plugin/tests/lib/rules/prefer-button-component.js +++ b/packages/eslint-plugin/tests/lib/rules/prefer-button-component.js @@ -90,5 +90,31 @@ ruleTester.run('prefer-button-component', rule, { }, ], }, + { + code: ` + const button = () => ( + Click me + ) + `, + errors: [ + { + message: + 'The Web Component should be used to instead of the button HTML element.' + }, + ], + }, + { + code: ` + const button = () => ( + + ) + `, + errors: [ + { + message: + 'The Web Component should be used to instead of the button HTML element.' + }, + ], + }, ], });