@atlaskit/eslint-plugin-design-system 8.31.0 → 8.32.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.32.0
+
+### Minor Changes
+
+- [#58240](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58240) [`39f3c929f0c4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/39f3c929f0c4) - Add new rule `no-html-button-element` to enforce usage of Pressable and Button
+
 ## 8.31.0
 
 ### Minor Changes

package/README.md

@@ -61,6 +61,7 @@ module.exports = {
 | <a href="./src/rules/no-empty-styled-expression/README.md">no-empty-styled-expression</a>                           | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements).                                                                                                                                                                                                      | Yes         |         |             |
 | <a href="./src/rules/no-exported-css/README.md">no-exported-css</a>                                                 | Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                              | Yes         |         |             |
 | <a href="./src/rules/no-exported-keyframes/README.md">no-exported-keyframes</a>                                     | Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                        | Yes         |         |             |
+| <a href="./src/rules/no-html-button-element/README.md">no-html-button-element</a>                                   | Prevent direct usage of HTML button elements and enforce usage of Button and Pressable.                                                                                                                                                                                                                             |             |         |             |
 | <a href="./src/rules/no-invalid-css-map/README.md">no-invalid-css-map</a>                                           | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking.                                                                                                                                                                                          | Yes         |         |             |
 | <a href="./src/rules/no-keyframes-tagged-template-expression/README.md">no-keyframes-tagged-template-expression</a> | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                     |             | Yes     |             |
 | <a href="./src/rules/no-margin/README.md">no-margin</a>                                                             | Disallow using the margin CSS property.                                                                                                                                                                                                                                                                             |             |         |             |

package/constellation/consistent-css-prop-usage/usage.mdx

@@ -165,7 +165,7 @@ Defaults to `top`.
 
 ### cssImportSource
 
-When auto-fixing the contents of the `css` attribute, this rule will wrap CSS styles in a `css(...)` function call or `` css\`...\`  `` template expression, and it will add an import declaration for the `css` function. `cssImportSource` is a string that determines what package `css` should be imported from.
+When auto-fixing the contents of the `css` attribute, this rule will wrap CSS styles in a `css(...)` function call or `` css`...`  `` template expression, and it will add an import declaration for the `css` function. `cssImportSource` is a string that determines what package `css` should be imported from.
 
 This is `@compiled/react` by default.
 

package/constellation/index/usage.mdx

@@ -23,6 +23,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="no-empty-styled-expression/usage">no-empty-styled-expression</a>                           | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements).                                                                                                                                                                                                      | Yes         |         |             |
 | <a href="no-exported-css/usage">no-exported-css</a>                                                 | Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                              | Yes         |         |             |
 | <a href="no-exported-keyframes/usage">no-exported-keyframes</a>                                     | Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                        | Yes         |         |             |
+| <a href="no-html-button-element/usage">no-html-button-element</a>                                   | Prevent direct usage of HTML button elements and enforce usage of Button and Pressable.                                                                                                                                                                                                                             |             |         |             |
 | <a href="no-invalid-css-map/usage">no-invalid-css-map</a>                                           | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking.                                                                                                                                                                                          | Yes         |         |             |
 | <a href="no-keyframes-tagged-template-expression/usage">no-keyframes-tagged-template-expression</a> | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                     |             | Yes     |             |
 | <a href="no-margin/usage">no-margin</a>                                                             | Disallow using the margin CSS property.                                                                                                                                                                                                                                                                             |             |         |             |

package/constellation/no-css-tagged-template-expression/usage.mdx

@@ -1,6 +1,6 @@
 # no-css-tagged-template-expression
 
-Disallows any `css` tagged template expressions that originate from `@emotion/react`, `@emotion/core`, `compiled/react` or `styled-components`.
+Disallows any `css` tagged template expressions that originate from a CSS-in-JS library, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
 
 Tagged template expressions cannot be type safe and are difficult to parse correctly. Will auto fix ` css`` ` to the preferred `css({})` call expression syntax.
 

package/constellation/no-empty-styled-expression/usage.mdx

@@ -1,6 +1,6 @@
 # no-empty-styled-expression
 
-Disallows/discourages passing empty arguments to any `styled` expression when using `@compiled/react`, as well as any other CSS-in-JS library defined through the `importSources` option.
+Disallows/discourages passing empty arguments to any `styled` expression when using a CSS-in-JS library, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
 
 If Compiled is used in the file, passing an empty object or no object at all causes Compiled to build extra `div/span` elements, as opposed to simply using a `div`. This leads to reduced performance and is greatly discouraged. If a wrapper is necessary, opt to use a `div` or wrap it in the empty React fragment `<> <YourComponentHere></YourComponentHere> </>`.
 

package/constellation/no-exported-css/usage.mdx

@@ -1,8 +1,8 @@
 # no-exported-css
 
-Disallows `css` export declarations that originate from `@compiled/react` and `@atlaskit/css`, as well as any other CSS-in-JS library defined through the `importSources` option.
+Disallows `css` export declarations that originate from a CSS-in-JS library, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
 
-In Compiled, exporting css declarations may result in unexpected errors when imported, because its value will be `null` at runtime. Additionally, co-locating css definitions with their usage is considered best practice in order to improve code readability and build performance.
+In Compiled (`@atlaskit/css` and `@compiled/react`), exporting `css` declarations may result in unexpected errors when imported, because its value will be `null` at runtime. Additionally, co-locating `css` definitions with their usage is considered best practice in order to improve code readability and build performance.
 
 ## Examples
 

package/constellation/no-exported-keyframes/usage.mdx

@@ -1,8 +1,8 @@
 # no-exported-keyframes
 
-Disallows `keyframes` export declarations that originate from `@compiled/react`, as well as any other CSS-in-JS library defined through the `importSources` option.
+Disallows `keyframes` export declarations that originate from a CSS-in-JS library, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
 
-In Compiled, exporting keyframes declarations may result in unexpected errors when imported, because its value will be `null` at runtime. Additionally, co-locating keyframes definitions with their usage is considered best practice in order to improve code readability and build performance.
+In Compiled (`@atlaskit/css` and `@compiled/react`), exporting `keyframes` declarations may result in unexpected errors when imported, because its value will be `null` at runtime. Additionally, co-locating `keyframes` definitions with their usage is considered best practice in order to improve code readability and build performance.
 
 ## Examples
 

package/constellation/no-html-button-element/usage.mdx

@@ -0,0 +1,26 @@
+# no-html-button-element
+
+HTML `<button>` elements should not be used. They can be replaced using the Button component or the Pressable primitive, which are ready made solutions made by the Atlassian Design System Team. This benefits analytics as they are fitted with tracking by default and provide safe access to design tokens for styling.
+
+## Examples
+
+This rule marks code as violations when it can be replaced with either a Button component or a Pressable primitive.
+
+### Incorrect
+
+```js
+<button>Click me</button>
+^^^^^^^^^^^^^^^^^^^^^^^^^
+```
+
+### Correct
+
+```js
+<Button>Click me</Button>
+^^^^^^^^^^^^^^^^^^^^^^^^^
+```
+
+```js
+<Pressable>Click me</Pressable>
+^^^^^^^^^^^^^^^^^^^^^^^^^
+```

package/constellation/no-keyframes-tagged-template-expression/usage.mdx

@@ -1,13 +1,11 @@
 # no-keyframes-tagged-template-expression
 
-Disallows any `keyframes` tagged template expressions that originate from `@emotion/react`, `@emotion/core`, `compiled/react` or `styled-components`.
+Disallows any `keyframes` tagged template expressions that originate from a CSS-in-JS library, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
 
 Tagged template expressions are difficult to parse correctly (which can lead to more frequent build failures or invalid CSS generation), have limited type safety, and lack syntax highlighting. These problems can be avoided by using the preferred call expression syntax instead.
 
 Thank you to the [Compiled team for their rule](https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/no-keyframes-tagged-template-expression) from which this was ported.
 
----
-
 The `--fix` option on the command line automatically fixes problems reported by this rule.
 
 ## Examples

package/constellation/no-styled-tagged-template-expression/usage.mdx

@@ -1,11 +1,9 @@
 # no-styled-tagged-template-expression
 
-Disallows any `styled` tagged template expressions that originate from `@emotion/react`, `@emotion/core`, `compiled/react` or `styled-components`.
+Disallows any `styled` tagged template expressions that originate from a CSS-in-JS library, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
 
 Tagged template expressions are difficult to parse correctly (which can lead to more frequent build failures or invalid CSS generation), have limited type safety, and lack syntax highlighting. These problems can be avoided by using the preferred call expression syntax instead.
 
----
-
 The `--fix` option on the command line automatically fixes problems reported by this rule.
 
 ## Examples
@@ -87,4 +85,4 @@ export const Component = styled.div``;
 
 ## Limitations
 
-- Comments are not fixable
+- Comments are not fixable.

package/dist/cjs/presets/all.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa64b4343b8763cfa5aa66230faea408>>
+ * @codegen <<SignedSource::bcb633b9d5c2def00d43b11139433c5c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -24,6 +24,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-empty-styled-expression': 'warn',
     '@atlaskit/design-system/no-exported-css': 'warn',
     '@atlaskit/design-system/no-exported-keyframes': 'warn',
+    '@atlaskit/design-system/no-html-button-element': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': 'error',
     '@atlaskit/design-system/no-keyframes-tagged-template-expression': 'error',
     '@atlaskit/design-system/no-margin': 'warn',

package/dist/cjs/rules/index.codegen.js

@@ -17,6 +17,7 @@ var _noDeprecatedImports = _interopRequireDefault(require("./no-deprecated-impor
 var _noEmptyStyledExpression = _interopRequireDefault(require("./no-empty-styled-expression"));
 var _noExportedCss = _interopRequireDefault(require("./no-exported-css"));
 var _noExportedKeyframes = _interopRequireDefault(require("./no-exported-keyframes"));
+var _noHtmlButtonElement = _interopRequireDefault(require("./no-html-button-element"));
 var _noInvalidCssMap = _interopRequireDefault(require("./no-invalid-css-map"));
 var _noKeyframesTaggedTemplateExpression = _interopRequireDefault(require("./no-keyframes-tagged-template-expression"));
 var _noMargin = _interopRequireDefault(require("./no-margin"));
@@ -36,7 +37,7 @@ var _usePrimitivesText = _interopRequireDefault(require("./use-primitives-text")
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7d840a5791dae4a9dfc4dda8ec00dcf9>>
+ * @codegen <<SignedSource::23062a8759ba919facf30a402e5546bd>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -52,6 +53,7 @@ var _default = exports.default = {
   'no-empty-styled-expression': _noEmptyStyledExpression.default,
   'no-exported-css': _noExportedCss.default,
   'no-exported-keyframes': _noExportedKeyframes.default,
+  'no-html-button-element': _noHtmlButtonElement.default,
   'no-invalid-css-map': _noInvalidCssMap.default,
   'no-keyframes-tagged-template-expression': _noKeyframesTaggedTemplateExpression.default,
   'no-margin': _noMargin.default,

package/dist/cjs/rules/no-html-button-element/index.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+var _utils = require("./utils");
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+var buttonDocsUrl = 'https://atlassian.design/components/button';
+var pressableDocsUrl = 'https://atlassian.design/components/primitives/pressable/';
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'no-html-button-element',
+    type: 'suggestion',
+    hasSuggestions: false,
+    docs: {
+      description: 'Prevent direct usage of HTML button elements and enforce usage of Button and Pressable.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      noHtmlButtonElement: "This \"{{element}}\" should be replaced with a Button component. If beyond the capabilities of the Button component, use the Pressable primitive. See ".concat(buttonDocsUrl, " and ").concat(pressableDocsUrl, " for guidance.")
+    }
+  },
+  create: function create(context) {
+    return {
+      // Look for <button> HTML elements
+      // Look for styled calls/templates - styled.button(...)
+      JSXOpeningElement: function JSXOpeningElement(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXOpeningElement')) {
+          return;
+        }
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.name, 'JSXIdentifier')) {
+          return;
+        }
+        var suggest = (0, _utils.shouldSuggest)(node === null || node === void 0 ? void 0 : node.parent);
+        if (suggest) {
+          context.report({
+            node: node,
+            messageId: 'noHtmlButtonElement',
+            data: {
+              element: node.name.name
+            }
+          });
+        }
+      },
+      // styled.button`` | styled2.button`` | styled.button()
+      'MemberExpression[object.name="styled"],MemberExpression[object.name="styled2"]': function MemberExpressionObjectNameStyledMemberExpressionObjectNameStyled2(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'MemberExpression')) {
+          return;
+        }
+
+        // styled.button``
+        if ((0, _eslintCodemodUtils.isNodeOfType)(node.property, 'Identifier')) {
+          if (node.property.name === 'button') {
+            var styledIdentifier = node.object.name;
+            var elementName = node.property.name;
+
+            // Including the `styled.` portion in the message to help makers understand it's not just the `button` element that should be replaced
+            var reportName = "".concat(styledIdentifier, ".").concat(elementName); // styled.button
+
+            context.report({
+              node: node,
+              messageId: 'noHtmlButtonElement',
+              data: {
+                element: reportName
+              }
+            });
+          }
+        }
+      },
+      // styled(X)``
+      'CallExpression[callee.name="styled"]': function CallExpressionCalleeNameStyled(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) {
+          return;
+        }
+
+        // styled('button')`` - We only care about 'button', ignore extending other components
+        if ((0, _eslintCodemodUtils.isNodeOfType)(node.arguments[0], 'Literal')) {
+          var argValue = node.arguments[0].raw;
+          if (typeof argValue === 'string') {
+            var suggest = argValue.replaceAll("'", '') === 'button';
+            if (suggest) {
+              var styledIdentifier = node.callee.name;
+              var elementName = argValue;
+
+              // Including the `styled()` portion in the message to help makers understand it's not just the `button` element that should be replaced
+              var reportName = "".concat(styledIdentifier, "(").concat(elementName, ")"); // styled('button')
+
+              context.report({
+                node: node,
+                messageId: 'noHtmlButtonElement',
+                data: {
+                  element: reportName
+                }
+              });
+            }
+          }
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/no-html-button-element/utils.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldSuggest = void 0;
+var isButtonHtmlElement = function isButtonHtmlElement(node) {
+  return node.openingElement.name.name === 'button';
+};
+var shouldSuggest = exports.shouldSuggest = function shouldSuggest(node) {
+  if (!node) {
+    return false;
+  }
+  if (!isButtonHtmlElement(node)) {
+    return false;
+  }
+  return true;
+};

package/dist/cjs/rules/prefer-primitives/utils.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.validPrimitiveElements = exports.shouldSuggest = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
-var validPrimitiveElements = exports.validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul']);
+var validPrimitiveElements = exports.validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul', 'button']);
 var getChildrenByType = function getChildrenByType(node, types) {
   return node.children.filter(function (child) {
     return types.find(function (type) {

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa64b4343b8763cfa5aa66230faea408>>
+ * @codegen <<SignedSource::bcb633b9d5c2def00d43b11139433c5c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -18,6 +18,7 @@ export default {
     '@atlaskit/design-system/no-empty-styled-expression': 'warn',
     '@atlaskit/design-system/no-exported-css': 'warn',
     '@atlaskit/design-system/no-exported-keyframes': 'warn',
+    '@atlaskit/design-system/no-html-button-element': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': 'error',
     '@atlaskit/design-system/no-keyframes-tagged-template-expression': 'error',
     '@atlaskit/design-system/no-margin': 'warn',

package/dist/es2019/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7d840a5791dae4a9dfc4dda8ec00dcf9>>
+ * @codegen <<SignedSource::23062a8759ba919facf30a402e5546bd>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -15,6 +15,7 @@ import noDeprecatedImports from './no-deprecated-imports';
 import noEmptyStyledExpression from './no-empty-styled-expression';
 import noExportedCss from './no-exported-css';
 import noExportedKeyframes from './no-exported-keyframes';
+import noHtmlButtonElement from './no-html-button-element';
 import noInvalidCssMap from './no-invalid-css-map';
 import noKeyframesTaggedTemplateExpression from './no-keyframes-tagged-template-expression';
 import noMargin from './no-margin';
@@ -45,6 +46,7 @@ export default {
   'no-empty-styled-expression': noEmptyStyledExpression,
   'no-exported-css': noExportedCss,
   'no-exported-keyframes': noExportedKeyframes,
+  'no-html-button-element': noHtmlButtonElement,
   'no-invalid-css-map': noInvalidCssMap,
   'no-keyframes-tagged-template-expression': noKeyframesTaggedTemplateExpression,
   'no-margin': noMargin,

package/dist/es2019/rules/no-html-button-element/index.js

@@ -0,0 +1,101 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+import { shouldSuggest } from './utils';
+const buttonDocsUrl = 'https://atlassian.design/components/button';
+const pressableDocsUrl = 'https://atlassian.design/components/primitives/pressable/';
+const rule = createLintRule({
+  meta: {
+    name: 'no-html-button-element',
+    type: 'suggestion',
+    hasSuggestions: false,
+    docs: {
+      description: 'Prevent direct usage of HTML button elements and enforce usage of Button and Pressable.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      noHtmlButtonElement: `This "{{element}}" should be replaced with a Button component. If beyond the capabilities of the Button component, use the Pressable primitive. See ${buttonDocsUrl} and ${pressableDocsUrl} for guidance.`
+    }
+  },
+  create(context) {
+    return {
+      // Look for <button> HTML elements
+      // Look for styled calls/templates - styled.button(...)
+      JSXOpeningElement(node) {
+        if (!isNodeOfType(node, 'JSXOpeningElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.name, 'JSXIdentifier')) {
+          return;
+        }
+        const suggest = shouldSuggest(node === null || node === void 0 ? void 0 : node.parent);
+        if (suggest) {
+          context.report({
+            node: node,
+            messageId: 'noHtmlButtonElement',
+            data: {
+              element: node.name.name
+            }
+          });
+        }
+      },
+      // styled.button`` | styled2.button`` | styled.button()
+      'MemberExpression[object.name="styled"],MemberExpression[object.name="styled2"]': node => {
+        if (!isNodeOfType(node, 'MemberExpression')) {
+          return;
+        }
+
+        // styled.button``
+        if (isNodeOfType(node.property, 'Identifier')) {
+          if (node.property.name === 'button') {
+            const styledIdentifier = node.object.name;
+            const elementName = node.property.name;
+
+            // Including the `styled.` portion in the message to help makers understand it's not just the `button` element that should be replaced
+            const reportName = `${styledIdentifier}.${elementName}`; // styled.button
+
+            context.report({
+              node: node,
+              messageId: 'noHtmlButtonElement',
+              data: {
+                element: reportName
+              }
+            });
+          }
+        }
+      },
+      // styled(X)``
+      'CallExpression[callee.name="styled"]': node => {
+        if (!isNodeOfType(node, 'CallExpression')) {
+          return;
+        }
+
+        // styled('button')`` - We only care about 'button', ignore extending other components
+        if (isNodeOfType(node.arguments[0], 'Literal')) {
+          const argValue = node.arguments[0].raw;
+          if (typeof argValue === 'string') {
+            const suggest = argValue.replaceAll(`'`, '') === 'button';
+            if (suggest) {
+              const styledIdentifier = node.callee.name;
+              const elementName = argValue;
+
+              // Including the `styled()` portion in the message to help makers understand it's not just the `button` element that should be replaced
+              const reportName = `${styledIdentifier}(${elementName})`; // styled('button')
+
+              context.report({
+                node: node,
+                messageId: 'noHtmlButtonElement',
+                data: {
+                  element: reportName
+                }
+              });
+            }
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/no-html-button-element/utils.js

@@ -0,0 +1,12 @@
+const isButtonHtmlElement = node => {
+  return node.openingElement.name.name === 'button';
+};
+export const shouldSuggest = node => {
+  if (!node) {
+    return false;
+  }
+  if (!isButtonHtmlElement(node)) {
+    return false;
+  }
+  return true;
+};

package/dist/es2019/rules/prefer-primitives/utils.js

@@ -1,5 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-export const validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul']);
+export const validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul', 'button']);
 const getChildrenByType = (node, types) => {
   return node.children.filter(child => {
     return types.find(type => isNodeOfType(child, type));

package/dist/esm/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa64b4343b8763cfa5aa66230faea408>>
+ * @codegen <<SignedSource::bcb633b9d5c2def00d43b11139433c5c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -18,6 +18,7 @@ export default {
     '@atlaskit/design-system/no-empty-styled-expression': 'warn',
     '@atlaskit/design-system/no-exported-css': 'warn',
     '@atlaskit/design-system/no-exported-keyframes': 'warn',
+    '@atlaskit/design-system/no-html-button-element': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': 'error',
     '@atlaskit/design-system/no-keyframes-tagged-template-expression': 'error',
     '@atlaskit/design-system/no-margin': 'warn',

package/dist/esm/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7d840a5791dae4a9dfc4dda8ec00dcf9>>
+ * @codegen <<SignedSource::23062a8759ba919facf30a402e5546bd>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -15,6 +15,7 @@ import noDeprecatedImports from './no-deprecated-imports';
 import noEmptyStyledExpression from './no-empty-styled-expression';
 import noExportedCss from './no-exported-css';
 import noExportedKeyframes from './no-exported-keyframes';
+import noHtmlButtonElement from './no-html-button-element';
 import noInvalidCssMap from './no-invalid-css-map';
 import noKeyframesTaggedTemplateExpression from './no-keyframes-tagged-template-expression';
 import noMargin from './no-margin';
@@ -45,6 +46,7 @@ export default {
   'no-empty-styled-expression': noEmptyStyledExpression,
   'no-exported-css': noExportedCss,
   'no-exported-keyframes': noExportedKeyframes,
+  'no-html-button-element': noHtmlButtonElement,
   'no-invalid-css-map': noInvalidCssMap,
   'no-keyframes-tagged-template-expression': noKeyframesTaggedTemplateExpression,
   'no-margin': noMargin,

package/dist/esm/rules/no-html-button-element/index.js

@@ -0,0 +1,101 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+import { shouldSuggest } from './utils';
+var buttonDocsUrl = 'https://atlassian.design/components/button';
+var pressableDocsUrl = 'https://atlassian.design/components/primitives/pressable/';
+var rule = createLintRule({
+  meta: {
+    name: 'no-html-button-element',
+    type: 'suggestion',
+    hasSuggestions: false,
+    docs: {
+      description: 'Prevent direct usage of HTML button elements and enforce usage of Button and Pressable.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      noHtmlButtonElement: "This \"{{element}}\" should be replaced with a Button component. If beyond the capabilities of the Button component, use the Pressable primitive. See ".concat(buttonDocsUrl, " and ").concat(pressableDocsUrl, " for guidance.")
+    }
+  },
+  create: function create(context) {
+    return {
+      // Look for <button> HTML elements
+      // Look for styled calls/templates - styled.button(...)
+      JSXOpeningElement: function JSXOpeningElement(node) {
+        if (!isNodeOfType(node, 'JSXOpeningElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.name, 'JSXIdentifier')) {
+          return;
+        }
+        var suggest = shouldSuggest(node === null || node === void 0 ? void 0 : node.parent);
+        if (suggest) {
+          context.report({
+            node: node,
+            messageId: 'noHtmlButtonElement',
+            data: {
+              element: node.name.name
+            }
+          });
+        }
+      },
+      // styled.button`` | styled2.button`` | styled.button()
+      'MemberExpression[object.name="styled"],MemberExpression[object.name="styled2"]': function MemberExpressionObjectNameStyledMemberExpressionObjectNameStyled2(node) {
+        if (!isNodeOfType(node, 'MemberExpression')) {
+          return;
+        }
+
+        // styled.button``
+        if (isNodeOfType(node.property, 'Identifier')) {
+          if (node.property.name === 'button') {
+            var styledIdentifier = node.object.name;
+            var elementName = node.property.name;
+
+            // Including the `styled.` portion in the message to help makers understand it's not just the `button` element that should be replaced
+            var reportName = "".concat(styledIdentifier, ".").concat(elementName); // styled.button
+
+            context.report({
+              node: node,
+              messageId: 'noHtmlButtonElement',
+              data: {
+                element: reportName
+              }
+            });
+          }
+        }
+      },
+      // styled(X)``
+      'CallExpression[callee.name="styled"]': function CallExpressionCalleeNameStyled(node) {
+        if (!isNodeOfType(node, 'CallExpression')) {
+          return;
+        }
+
+        // styled('button')`` - We only care about 'button', ignore extending other components
+        if (isNodeOfType(node.arguments[0], 'Literal')) {
+          var argValue = node.arguments[0].raw;
+          if (typeof argValue === 'string') {
+            var suggest = argValue.replaceAll("'", '') === 'button';
+            if (suggest) {
+              var styledIdentifier = node.callee.name;
+              var elementName = argValue;
+
+              // Including the `styled()` portion in the message to help makers understand it's not just the `button` element that should be replaced
+              var reportName = "".concat(styledIdentifier, "(").concat(elementName, ")"); // styled('button')
+
+              context.report({
+                node: node,
+                messageId: 'noHtmlButtonElement',
+                data: {
+                  element: reportName
+                }
+              });
+            }
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/rules/no-html-button-element/utils.js

@@ -0,0 +1,12 @@
+var isButtonHtmlElement = function isButtonHtmlElement(node) {
+  return node.openingElement.name.name === 'button';
+};
+export var shouldSuggest = function shouldSuggest(node) {
+  if (!node) {
+    return false;
+  }
+  if (!isButtonHtmlElement(node)) {
+    return false;
+  }
+  return true;
+};

package/dist/esm/rules/prefer-primitives/utils.js

@@ -1,5 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-export var validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul']);
+export var validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul', 'button']);
 var getChildrenByType = function getChildrenByType(node, types) {
   return node.children.filter(function (child) {
     return types.find(function (type) {

package/dist/types/index.codegen.d.ts

@@ -15,6 +15,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-empty-styled-expression': string;
             '@atlaskit/design-system/no-exported-css': string;
             '@atlaskit/design-system/no-exported-keyframes': string;
+            '@atlaskit/design-system/no-html-button-element': string;
             '@atlaskit/design-system/no-invalid-css-map': string;
             '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
             '@atlaskit/design-system/no-margin': string;

package/dist/types/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa64b4343b8763cfa5aa66230faea408>>
+ * @codegen <<SignedSource::bcb633b9d5c2def00d43b11139433c5c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -18,6 +18,7 @@ declare const _default: {
         '@atlaskit/design-system/no-empty-styled-expression': string;
         '@atlaskit/design-system/no-exported-css': string;
         '@atlaskit/design-system/no-exported-keyframes': string;
+        '@atlaskit/design-system/no-html-button-element': string;
         '@atlaskit/design-system/no-invalid-css-map': string;
         '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
         '@atlaskit/design-system/no-margin': string;

package/dist/types/rules/index.codegen.d.ts

@@ -15,6 +15,7 @@ declare const _default: {
     'no-empty-styled-expression': import("eslint").Rule.RuleModule;
     'no-exported-css': import("eslint").Rule.RuleModule;
     'no-exported-keyframes': import("eslint").Rule.RuleModule;
+    'no-html-button-element': import("eslint").Rule.RuleModule;
     'no-invalid-css-map': import("eslint").Rule.RuleModule;
     'no-keyframes-tagged-template-expression': import("eslint").Rule.RuleModule;
     'no-margin': import("eslint").Rule.RuleModule;

package/dist/types/rules/no-html-button-element/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types/rules/no-html-button-element/utils.d.ts

@@ -0,0 +1,2 @@
+import { type JSXElement } from 'eslint-codemod-utils';
+export declare const shouldSuggest: (node: JSXElement) => boolean;

package/dist/types-ts4.5/index.codegen.d.ts

@@ -15,6 +15,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-empty-styled-expression': string;
             '@atlaskit/design-system/no-exported-css': string;
             '@atlaskit/design-system/no-exported-keyframes': string;
+            '@atlaskit/design-system/no-html-button-element': string;
             '@atlaskit/design-system/no-invalid-css-map': string;
             '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
             '@atlaskit/design-system/no-margin': string;

package/dist/types-ts4.5/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa64b4343b8763cfa5aa66230faea408>>
+ * @codegen <<SignedSource::bcb633b9d5c2def00d43b11139433c5c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -18,6 +18,7 @@ declare const _default: {
         '@atlaskit/design-system/no-empty-styled-expression': string;
         '@atlaskit/design-system/no-exported-css': string;
         '@atlaskit/design-system/no-exported-keyframes': string;
+        '@atlaskit/design-system/no-html-button-element': string;
         '@atlaskit/design-system/no-invalid-css-map': string;
         '@atlaskit/design-system/no-keyframes-tagged-template-expression': string;
         '@atlaskit/design-system/no-margin': string;

package/dist/types-ts4.5/rules/index.codegen.d.ts

@@ -19,6 +19,7 @@ declare const _default: {
     'no-empty-styled-expression': import("eslint").Rule.RuleModule;
     'no-exported-css': import("eslint").Rule.RuleModule;
     'no-exported-keyframes': import("eslint").Rule.RuleModule;
+    'no-html-button-element': import("eslint").Rule.RuleModule;
     'no-invalid-css-map': import("eslint").Rule.RuleModule;
     'no-keyframes-tagged-template-expression': import("eslint").Rule.RuleModule;
     'no-margin': import("eslint").Rule.RuleModule;

package/dist/types-ts4.5/rules/no-html-button-element/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types-ts4.5/rules/no-html-button-element/utils.d.ts

@@ -0,0 +1,2 @@
+import { type JSXElement } from 'eslint-codemod-utils';
+export declare const shouldSuggest: (node: JSXElement) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "8.31.0",
+  "version": "8.32.0",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"